¿Cómo crear un formulario de contacto en HTML?

Este tutorial contiene instrucciones para crear un formulario de contacto muy sencillo para plantillas basadas en HTML.

En primer lugar hay que crear dos ficheros: contact_form.html y contact.php. El primer fichero contendrá el código HTML para el formulario y el segundo fichero procesará los datos del formulario.

HTML

Vamos a revisar el código HTML del formulario de contacto:

<form action="contact.php" method="post">
	Your name

    <input type="text" name="cf_name">

	Your e-mail

    <input type="text" name="cf_email">

	Message

    <textarea name="cf_message">

	<input type="submit" value="Send">
	<input type="reset" value="Clear">
</form>

Y así es como se aparecerá en el navegador web

Vamos a examinar algunos de los aspectos principales. La etiqueta <form> debe tener 2 atributos adicionales:

action=”contact.php” – este atributo especifica la dirección que va a recibir los datos enviados de los campos del formulario de contacto

method=”post” – este atributo especifica la manera del envio de los datos del formulario al fichero especificado en el atributo action Las etiquetas <input> y <textarea> deben tener un atributo “name” con un identificador único. Este atributo es utilizado para identificar los datos del formulario después del envio al servidor. Y entre dos elementos entrados que se utilizan como botones Enviar y Borrar, uno debe tener type=”submit” asignado y otro – type=”reset”

Y eso es todo. Mutyfácil.

PHP

Ahora vamos a trabajar con el fichero contact.php que realmente recogerá los datos de los campos, creará un mensaje y enviarálo a su dirección de correo electrónico. Puede descargar el fichero contact.php. En este tutorial vamos a revisar el código del fichero con los comentarios a las secciones más importantes.

Asignar los datos enviados desde los campos del formulario de contacto (cf_name, cf_email, cf_message) a los variables php ($cf_message, $field_email, $field_message)

$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

$mail_to contendrá la dirección de correo electrónico del propietario del sitio. Se puede especificar varios correos electrónicos, separándolos con comas (por ejemplo, mail-one@template-help.com, mail-two@template-help.com)

$mail_to = 'test@test-mail.com';

Tema/Asunto del mensaje de correo electrónico que recibe

$subject = 'Message from a site visitor ' . $field_name;

Organizar el mensaje

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;

Crear las cabeceras del mensaje

$headers = "From: $cf_email\r\n";
$headers .= "Reply-To: $cf_email\r\n";

Definir la función mail() y asignarla al variable $mail_status, que se utiliza para comprobar si el mensaje de correo ha sido enviado o no.

$mail_status = mail($mail_to, $subject, $body_message, $headers);

Si la fucnión mail() se ejecuta con éxito, entonces utilice el código:

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		// Print a message
		alert('Thank you for the message. We will contact you shortly.');
		// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
		window.location = 'contact_page.html';
	</script>
<?php
}

Si la fucnión mail() no trabaja, entonces utilice el código:

else { ?>
	<script language="javascript" type="text/javascript">
		// Print a message
		alert('Message failed. Please, send an email to gordon@template-help.com');
		// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
		window.location = 'contact_page.html';
	</script>
<?php
}?>

También Usted puede descargar los ficheros compilados compiled contact_form.html y contact.php en el paquete

 

Por favor, revise el tutorial ¿cómo agregar campos al formulario de contacto?