Formulario de contacto en HTML y PHP.
Al margen del tipo de sitio web que administre, es muy probable que en algún momento requieras de un formulario de contacto.
El formulario de contacto ayuda a sus visitantes a solicitar información o compartir los consejos o problemas que se han encontrado al utilizar tu web.
En este tutorial, el enfoque estará en la creación de un simple formulario de contacto completamente funcional en PHP y HTML.
Este script se compone de 2 archivos:
- HTML, en el que incluiremos el código del propio formulario de contacto
- PHP, que se encargará de recoger la información introducida y enviarla por mail.
En internet encontrarás infinidad de webs en las que puedas desacargar este script, pero la idea es que sepas crearlo y modificarlo a tu gusto y necesidad.
Empecemos!!
Código HTML del formulario de contacto:
Todo el código siguiente puede estar un archivo o incrustado dentro de tu web, en la posición en la que quieras que se muestre.
Este código del formulario de contacto es muy simple de implementar:
Lo primero que hemos de entender es que este código debe estar dentro de las estiquetas <form></form> de HTML
<form action="mail.php" method="POST"> //Aqui pondremos todo el código </form>
La etiqueta <form> tiene una serie de atributos básicos que vamos a ver.
El atributo “action” indica el tipo de acción que va a realizar el formulario. Es mediante esta etiqueta que se gestionan los formularios. En este caso, al pulsar en enviar el formulario, se ejecutará el archivo mail.php
Mediante el atributo «method» le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles, get y post, que ya te expliqué en este post.
Dentro del formulario podemos poner varios elementos. Principalmente son:
INPUT, donde nos crea un cuadro de texto para escribir un dato que se nos requiera.
<p>Nombre</p> <input type="text" name="name">
TEXTAREA, para poder añadir textos largos como observaciones o quejas
<p>Mensaje</p><textarea name=»mensaje» rows=»6″ cols=»25″></textarea><br />
CHECKBOX, donde hemos de seleccionar una opción entre varias
<p>Pedido URGENTE</p> Si:<input type="checkbox" value="Si" name="urgente"><br /> No:<input type="checkbox" value="No" name="urgente"><br />
SELECTOR, donde elegimos una opción entre un desplegable de opciones.
<p>Selecciona VEHICULO</p> <select name="vehiculo" size="1"> <option value="coche">Alquilar un Coche</option> <option value="moto">Alquilar una Moto</option> <option value="camion">Alquilar un Camión</option> </select>
Y juntando todo esto, el código HTML de nuestro formulario quedaría asi:
<form action="mail.php" method="POST"> <p>Nombre</p> <input type="text" name="name"> <p>Email</p> <input type="text" name="email"> <p>Teléfono</p> <input type="text" name="phone"> <p>Llamada URGENTE:</p> Si:<input type="checkbox" value="Si" name="urgente"><br /> No:<input type="checkbox" value="No" name="urgente"><br /> <p>Website</p> <input type="text" name="website"> <p>Selecciona VEHICULO</p> <select name="vehiculo" size="1"> <option value="coche">Alquilar un Coche</option> <option value="moto">Alquilar una Moto</option> <option value="camion">Alquilar un Camión</option> </select> <p>Mensaje</p><textarea name="mensaje" rows="6" cols="25"></textarea><br/> <input type="submit" value="Enviar"><input type="reset" value="Clear"> </form>
Código PHP del formulario de contacto:
Y, una vez que pulsamos el botón «Enviar» de nuestro formulario HTML, todos esos datos se pasan al archivo mail.php (tal como marca el atributo “action” de nuestro formulario) por método POST
El archivo mail.php recibe todos los datos y realiza varias acciones:
1. Guarda los datos en variables, por ejemplo, el nombre…
$nombre = $_POST['nombre'];
…y lo mismo con el resto de campos del formulario.
2. Crea el cuerpo del correo y el header ($formcontent, $mailheader):
A los datos recibidos le añadimos el correo destinatario ($recipient), el asunto ($subject) y el $header
3. Y envia el correo electrónico mediante la función mail() de PHP
mail($recipient, $subject, $formcontent, $mailheader);
Todo el código del archivo quedaría así:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$urgente= $_POST['call'];
$website = $_POST['website'];
$vehiculo= $_POST['vehiculo'];
$mensaje= $_POST['mensaje'];
//creamos el texto del mensaje que recibiremos:
$formcontent="
From: $name \n
Teléfono: $phone \n
Urgencia: $call \n
Website: $website \n
Vehiculo: $vehiculo\n
Mensaje: $mensaje";
$recipient = "TU_EMAIL@AQUI.COM";
$subject = "Formulario de contacto";
$mailheader = "From: $email \r\n";
//enviamos el correo electrónico:
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
?>
Y hasta aquí la explicacion de cómo realizar un formulario de contacto para nuestra web. Lógicamente, y como siempre, el tema de estilos y CSS lo dejo en vuestras manos.
Espero que os sea de utilidad.
Hasta la proxima!!