Agregar campos al formulario de contacto en HTML

Este tutorial le presenta instrucciones para agregar campos al formulario de contacto en HTML. Este tutorial es una continuación del tutorial ¿Cómo crear un formulario de contacto en HTML?. Si tiene los ficheros de este tutorial, abralos para continuar, o puede descargarlos.

Parte 1. HTML

Abra el fichero index.html con ayuda de su editor HTML preferido. Tenemos 2 input, 1 elemento textarea y dos botones. Así que vamos a añadir más elementos, como checkboxes (casillas de verificación), botones de radio y una lista desplegable. La sintaxis HTML para todos los elementos es muy fácil y se puede revisarla abajo. Agregue este código después de botones Submit y Reset.

Opciones adicionales:

	<input type="checkbox" name="check[]" value="USA">USA<br />
	<input type="checkbox" name="check[]" value="Canada">Canada<br />
	<input type="checkbox" name="check[]" value="Mexico">Mexico<br />

¿Está de acuerdo?

<input type="radio" value="yes" name="cf_radio_button">Yes
<input type="radio" value="no" name="cf_radio_button">No

Elija un elemento de la lista desplegable:

<select size="1" name="cf_drop_down">
	<option>php</option>
	<option>html</option>
	<option>css</option>
	<option>asp</option>
	<option>ajax</option>
	<option>javascript</option>
</select>

Vamos a analizar algunos momentos interesantes en este código. Usted puede notar que los nombres asignados a las casillas de verificación no son diferentes, como en el caso con el campo de texto añadido anteriormente, también tienen corchetes al final. Los corchetes definen que es una variable de array (variable de matriz). Así es como funciona. Para cada casilla de verificación, array check[] recibe el valor de las casillas de verificación pulsadas. Por ejemplo, después de marcar dos casillas de Estados Unidos y Canadá, su array check[] contiene los valores checked_usa y check_canada como sus elementos.

Ahora vamos a revisar los botones de radio y desplegables. Hemos asignado el mismo nombre “cf_radio_button” a dos de los botones de radio, como no se puede elegir ambos al mismo tiempo, por lo que cada uno de ellos no necesita un nombre único.

La sintaxis de la lista desplegable es muy fácil también. Abra la etiqueta <select>, a continuación liste las opciones, ‘envueltas’ en etiquetas <option>…</option> y al final utilice etiqueta </select>. La etiqueta <select> tiene dos atributos asignados, uno es el nombre, y el segundo – tamaño. El atributo de tamaño especifica el número de opciones visibles de una lista desplegable.

Aquí está el resultado:

(haga clic para ampliar)

Parte 2. PHP

Así que, ahora tenemos los elementos de la página y debemos procesar sus datos enviados y agregar a email enviado. Abajo puede encontrar el código final de fichero contact.php

<?php
// Grabbing data sent from the form and assigning it to variables
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

// Composing body of the message
$mail_to = 'gordon@template-help.com';
$subject = 'Message from a site visitor '.$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message."\n";
$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

// Creating headers of the message
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

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

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		alert('Thank you for the message. We will contact you shortly.');
		history.back(1);
	</script>
<?php
}

else { ?>
	<script language="javascript" type="text/javascript">
		alert('Message failed. Please, send an email to gordon@template-help.com');
		history.back(1);
	</script>
<?php
}
?>

Vamos a utilizar la función de php foreach() para recorrer una matriz (array) "check" y guardar cada elemento de array en una variable llamada $value. Entonces creamos la variable $check_boxes y se incrementará con el valor de cada elemento de matriz.

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

Como se puede revisar abajo, los botones de radio y la lista desplegable son definidos de una manera similar. Creamos una variable php y asignamos los datos enviados de una casilla de radio o lista desplegable a esta variable.

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

Este código también es similar a lo que hemos hecho antes. Solamente agregamos nuevos datos a email final

$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

SUGERENCIA: Una pequeña actualización que puede ser útil. En la versión anterior del script, después del mensaje de alerta de JavaScript, había una redirección manual a la página especificada en el código window.location = ‘contact_page.html’;. Así que si cambia el nombre contact_page.html por otra cosa, tendrá que corregir el nombre en el fichero contact.php. Una manera mejor es reemplazar ese código con esto.

history.back(1);

Básicamente, el código ‘explica’ lo que hace. Esto es lo mismo que hacer clic en Back (volver) en su navegador.