Categories

Plantillas Destacadas

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

Gordon J. Blair noviembre 15, 2011
Rating: 3.9/5. From 34 votes.
Please wait...

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

HTML contact form

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?

Esta entrada fue publicada el Trabajar con HTML y etiquetada contact form, forms, HTML. Agregar enlace permanente a marcadores.

Submit a ticket

Si Usted todavía no puede encontrar un tutorial suficiente para arreglar su problema, por favor use el siguiente enlace para enviar un ticket a nuestro equipo de soporte técnico. Nosotros enviaremos nuestra respuesta dentro de próximas 24 horas: Enviar un ticket