Diseño web

Cómo enviar un email desde un formulario HTML

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!

Caronte Studio

Ver comentarios

      • 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

        • No he manejado Firebase, no sabría decirte ¿Puede ser que no esté configurado para interpretar el PHP y por eso lo descargue?

  • ¡¡¡ GRACIAS, GRACIAS, GRACIAS !!!
    Justo lo que estaba buscando. Sin rodeos, BIEN explicado.

    • 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'

  • 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?

    • 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.

  • Donde se pondria el codigo php? hay que armar un nuevo directorio? o entre que etiquetas del html se pondrian?

    • El código PHP lo pondríamos en la ruta que le hemos indicado, en el archivo 'enviar.php' de la carpeta 'php'.

  • 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

  • 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 ?

Compartir
Publicado por
Caronte Studio
Etiquetas: HTML

Entradas recientes

Colores HTML

Como en todas las áreas del diseño, el color tiene un papel fundamental. Comprenderlo y… Leer más

7 días hace

WordPress 6.5 Regina

Ha llegado el momento. Al fin tenemos entre nuestras manos la primera gran actualización de… Leer más

1 semana hace

Zapier: ¿Qué es y cómo funciona? Guía de iniciación a Zapier

¿No has oído hablar de Zapier todavía? ¿Quizás te han hablado por encima de Zapier… Leer más

2 semanas hace

Etiquetas Hreflang: Optimiza el SEO de tu web multidioma

Imagina que un usuario que esté ubicado en Inglaterra encuentre tu web en la versión… Leer más

2 semanas hace

Cómo desindexar una URL de Google

En este artículo no solo te explicaremos algunas formas para conseguir quitar una página de… Leer más

3 semanas hace

Cómo duplicar un curso en Moodle

Dentro de la gestión de cursos de Moodle, existe una característica destacada, su capacidad para… Leer más

3 semanas hace