En este nuevo artículo vamos a ver cómo enviar un email desde un formulario web creado con HTML, y posteriormente enviar un email con PHP.
Cualquier página web que se precie de hoy en día dispone de un formulario de contacto, y lo normal es que dichos formularios envíen un correo electrónico a quien lo ha rellenado, a modo de confirmación, y otro correo electrónico a los administradores del sitio.
Crear un formulario con HTML y después enviar un email con PHP es un proceso muy sencillo, solamente requiere de una estructura HTML y un pequeño script PHP que recoja y envíe los datos.
Este tipo de formularios son los más comunes en una página web, por lo que a la hora de trabajar en diseño web es muy típico realizar este proceso varias veces.
Pasos a seguir
A continuación veremos cuáles son los pasos a seguir.
Crear un formulario HTML
El primer paso consiste en crear el formulario mediante código HTML. La etiqueta principal para un formulario en HTML es la etiqueta <form>, dentro de la cual estarán todos los componentes del formulario. Dentro de un formulario HTML podemos introducir varios tipos de campos distintos, aquí listamos los más importantes y utilizados:
- Campos de texto: Este tipo de campo permite insertar texto, se hace mediante el elemento HTML <input type=’text’/>.
- Campo contraseña: Al igual que el campo anterior, permite introducir texto, la diferencia es que en un campo contraseña el contenido introducido no se muestra, este campo se añade con la etiqueta HTML <input type=’password’/>.
- Checkbox: Este tipo de campos permite al usuario marcar una casilla o desmarcarla. Todos los formularios de contacto deberían tener un checkbox para que el usuario acepte la política de privacidad o el aviso legal. Para añadir casillas de verificación se utiliza el elemento <input type=’checkbox’/>.
- Áreas de texto: Este es otro tipo de campo muy utilizado en los formularios de contacto, permite al usuario añadir mucha información, suele ser utilizado para añadir comentarios o notas adicionales, utiliza el código HTML <textarea name=’nombre’ rows=’filas’ cols=’columnas’></textarea> para añadirlo.
Existen más tipos de campos que se pueden introducir, pero los mencionados anteriormente son los más utilizados.
Ahora que conocemos los campos más importantes, es el momento de pasar a crear el formulario HTML. En este caso, se ha creado un formulario muy sencillo con los campos nombre, email, mensaje y la casilla de aceptación de cookies. El código HTML del formulario es el siguiente:
<form method='POST'>
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" name='nombre' id="nombre" placeholder="nombre...">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name='email' id="email" placeholder="email...">
</div>
<div class="form-group">
<label for="exampleTextarea">Mensaje</label>
<textarea class="form-control" name='mensaje' id="mensaje" rows="3"></textarea>
</div>
<div class="form-group">
<input type="checkbox" required> Acepto la política de privacidad.
</div>
<button class="btn btn-primary" type="submit">Enviar</button>
</form>
El anterior código HTML utiliza la maquetación de bootstrap, dando como resultado el siguiente formulario:
Crear el script PHP
Una vez tenemos el formulario HTML listo, es el momento de crear un script PHP que se encargará de recoger los datos introducidos en el formulario y enviar la información correspondiente por email.
Para ello, debemos añadir los parámetros method y action al elemento form. En el parámetro method podemos indicar dos valores; GET o POST. Es recomendable usar el método POST, ya que los datos se envían de forma segura. En el parámetro action indicaremos la ruta del script PHP que gestionará los datos y el envío. El elemento form quedaría algo semejante a esto:
<form method='POST' action='/php/enviar.php'>
Finalmente, procedemos a crear el script PHP en el cual utilizaremos la función mail(). Es una función propia de PHP, si no funciona, es posible que el servidor la tenga deshabilitada y que tengas que habilitarla, o solicitar que la habiliten.
A continuación te mostramos un código PHP muy sencillo y simple que recogerá los datos introducidos en el formulario, y enviará un email a la dirección que especifiques.
<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$asunto = 'Formulario Rellenado';
$mensaje = "Nombre: ".$nombre."<br> Email: $email<br> Mensaje:".$_POST['mensaje'];
if(mail('tuEmail', $asunto, $mensaje)){
echo "Correo enviado";
}
?>
Debes sustituir donde pone tuEmail por la dirección de correo electrónico a la que quieres que se mande el email.
Si quieres aprender más sobre programación segura en PHP, te recomiendo que visites mi artículo sobre la temática. Espero que este artículo te haya resultado útil, si tienes cualquier duda no dudes en dejar un comentario. ¡Muchas gracias!
loki dice:
no me sirvio
Alberto Bravo dice:
¿Qué problemas te dio?
luca dice:
hola me pasa que cuando hago el deploy con firebase, al enviar formulario me descarga el archivo php que puede ser que este haciendo mal? gracias
Alberto Bravo dice:
No he manejado Firebase, no sabría decirte ¿Puede ser que no esté configurado para interpretar el PHP y por eso lo descargue?
Mayte dice:
¡¡¡ GRACIAS, GRACIAS, GRACIAS !!!
Justo lo que estaba buscando. Sin rodeos, BIEN explicado.
Leire dice:
No veo en el HTML donde se incluye este script
Lo puedes aclarar
Gracias
Alberto Bravo dice:
La primera parte, la llamada, se incluye en la etiqueta form:
form method=’POST’ action=’/php/enviar.php’
El resto del código iría en la ruta que le hemos indicado antes, en el archivo ‘enviar.php’ de la carpeta en raíz ‘php’
NELO CAMPOS dice:
PORFA COMO DIRECCIONO A QUE CORREO VA ESA INFO..GRACIAS
adam dice:
no me sirvio sale error cuando le doy enviar al formulario
Alberto Bravo dice:
Revisa si la ruta es correcta y los archivos se encuentran donde se indica en el código.
adam dice:
me salio esta pagina no funciona que debe hacer
Daniel dice:
Hola, sabes como puedo hacer para que cuando se envíe el formulario aparezca un modal con un mensaje diciendo «Correo Enviado», pero sin que se recargue la página?
Alberto Bravo dice:
Con este método no sería posible, ya que al enviar el formulario se carga la página ‘php/enviar.php’ (ya hemos salido de la página). Tendríamos que añadir un ‘header(«location: pagina-del-formulario.php»);’. A esta URL le podríamos pasar un parámetro y que se dispare el modal si recoge el valor adecuado.
gabriel dice:
Donde se pondria el codigo php? hay que armar un nuevo directorio? o entre que etiquetas del html se pondrian?
Alberto Bravo dice:
El código PHP lo pondríamos en la ruta que le hemos indicado, en el archivo ‘enviar.php’ de la carpeta ‘php’.
Samuel dice:
No me funcionó, pero tengo algunas dudas:
1.- La carpeta php? tengo WampServer: www/micarpeta
2.- ¿Cómo configuro el servidor de localhost para SMTP?
Saludos
Martin dice:
copie tal cual el codigo y modifique para que llegue a mi mail pero al presionar el boton de enviar, me redirije a /php/enviar.php y dice que la pagina no funciona. ademas del codigo de php que describiste hay que meter algo mas en ese archivo o que estoy haciendo mal ?
Martin dice:
buenas, como va ? pude hacer funcionar correctamente el formulario e incluso acomodar un poco el formato que llega al mail para que no sea todo en una sola linea de corrido.
ahora tengo dos consultas:
1) hay forma de cambiar el remitente de este mail ? para poder darle un nombre o un mail en particular y el remitente del mail no sea u254635947@srv……..
2) como puedo hacer para que al enviarse el mail, luego de unos segundos redireccione nuevamente a la pagina principal del sitio web ?
Vald dice:
Te agradezco la informacion! ** deja dos monedas de plata para el peaje de caronte**
Juan Felipe Fonseca dice:
Gracias a ti por la lectura, ¡Apuntado queda!