Cómo crear y enviar un formulario por correo con HTML y PHP
Cuando trabajamos en un sitio web, a veces existe la necesidad de proveer al usuario con un formulario de contacto para hacernos llegar sus consultas, comentarios u otro tipo de información. En esta guía te enseñamos un ejemplo sobre cómo crear un formulario usando HTML y un script PHP para procesarlo y enviarlo por correo electrónico.
¿Cómo crear un formulario de contacto HTML con PHP?
- Para ello emplearemos un fragmento de código HTML que, al utilizar el TAG form, nos permite crear el formulario de entrada de datos (formulario.html) que después será completado por el usuario:
<!-- Inicio del formulario, especificando el nombre del formulario, el método POST y el script de procesamiento sendbymail.php -->
<form name="frmContacto" method="post" action="sendbymail.php">
<!-- Inicio de la tabla que contiene los campos del formulario -->
<table width="500px">
<!-- Fila para el campo "Nombre" -->
<tr>
<!-- Etiqueta para el campo "Nombre" -->
<td>
<label for="first_name">Nombre: *</label>
</td>
<!-- Campo de entrada para el "Nombre" -->
<td>
<input type="text" name="first_name" maxlength="50" size="25">
</td>
</tr>
<!-- Fila para el campo "Apellido" -->
<tr>
<!-- Etiqueta para el campo "Apellido" -->
<td valign="top">
<label for="last_name">Apellido: *</label>
</td>
<!-- Campo de entrada para el "Apellido" -->
<td>
<input type="text" name="last_name" maxlength="50" size="25">
</td>
</tr>
<!-- Fila para el campo "Email" -->
<tr>
<!-- Etiqueta para el campo "Email" -->
<td>
<label for="email">Dirección de E-mail: *</label>
</td>
<!-- Campo de entrada para el "Email" -->
<td>
<input type="text" name="email" maxlength="80" size="35">
</td>
</tr>
<!-- Fila para el campo "Número de teléfono" -->
<tr>
<!-- Etiqueta para el campo "Número de teléfono" -->
<td>
<label for="telephone">Número de teléfono:</label>
</td>
<!-- Campo de entrada para el "Número de teléfono" -->
<td>
<input type="text" name="telephone" maxlength="25" size="15">
</td>
</tr>
<!-- Fila para el campo "Comentarios" -->
<tr>
<!-- Etiqueta para el campo "Comentarios" -->
<td>
<label for="comments">Comentarios: *</label>
</td>
<!-- Campo de texto para los "Comentarios" -->
<td>
<textarea name="comments" maxlength="500" cols="30" rows="5"></textarea>
</td>
</tr>
<!-- Fila para el botón de enviar el formulario -->
<tr>
<!-- Botón de enviar -->
<td colspan="2" style="text-align:right">
<input type="submit" value="Enviar">
</td>
</tr>
</table> <!-- Fin de la tabla del formulario -->
</form> <!-- Fin del formulario -->
- Así, obtendremos este formulario:
¿Cómo enviar el formulario al correo?
La otra parte del código será la encargada de tomar los datos del formulario anterior, validarlos y enviar el formulario por correo electrónico a una dirección de destino concreta. Veámoslo en el ejemplo sendbymail.php:
<?php
// Verifica si el formulario ha sido enviado
if(isset($_POST['email'])) {
// Cambia las próximas dos líneas con tu dirección de email y el asunto del email
$email_to = "destinatario@sudominio.com";
$email_subject = "Contacto desde el sitio web";
// Validación de los campos del formulario. En caso de que alguno de los campos no exista, retorna un error.
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
echo "<b>Ocurrió un error y el formulario no ha sido enviado. </b><br />";
echo "Por favor, vuelva atrás y verifique la información ingresada<br />";
die();
}
// Construcción del mensaje del email
$email_message = "Detalles del formulario de contacto:\n\n";
$email_message .= "Nombre: " . $_POST['first_name'] . "\n";
$email_message .= "Apellido: " . $_POST['last_name'] . "\n";
$email_message .= "E-mail: " . $_POST['email'] . "\n";
$email_message .= "Teléfono: " . $_POST['telephone'] . "\n";
$email_message .= "Comentarios: " . $_POST['comments'] . "\n\n";
// Creación de las cabeceras del email
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
// Envío del email
@mail($email_to, $email_subject, $email_message, $headers);
// Mensaje de confirmación al usuario
echo "¡El formulario se ha enviado con éxito!";
}
?>
¿Cómo guardar los datos del formulario en una base de datos MySQL?
- Primero, debes establecer una conexión con tu base de datos MySQL:
// Configuración de la conexión a la base de datos
$host = "localhost"; // Dirección del servidor de la base de datos
$db_username = "usuario"; // Nombre de usuario de la base de datos
$db_password = "contraseña"; // Contraseña de la base de datos
$db_name = "mi_base_de_datos"; // Nombre de la base de datos
// Creación de la conexión
$conn = new mysqli($host, $db_username, $db_password, $db_name);
// Verificar la conexión
if ($conn->connect_error) {
die("La conexión a la base de datos ha fallado: " . $conn->connect_error);
}
- A continuación, puedes insertar los datos del formulario en tu base de datos:
// Verifica si el formulario ha sido enviado
if(isset($_POST['email'])) {
// Asignar los datos del formulario a variables
$nombre = $_POST['first_name'];
$apellido = $_POST['last_name'];
$email = $_POST['email'];
$telefono = $_POST['telephone'];
$comentarios = $_POST['comments'];
// Creación de la sentencia SQL
$sql = "INSERT INTO mi_tabla (nombre, apellido, email, telefono, comentarios)
VALUES ('$nombre', '$apellido', '$email', '$telefono', '$comentarios')";
// Ejecución de la sentencia SQL
if ($conn->query($sql) === TRUE) {
echo "¡El formulario se ha enviado con éxito y los datos se han almacenado en la base de datos!";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
// Cerrar la conexión a la base de datos
$conn->close();
}
- Este script insertará los datos del formulario en la tabla "mi_tabla" de tu base de datos MySQL.
¿Cómo limpiar los campos después de enviar el formulario HTML?
Partiendo del ejemplo creado inicialmente, formulario.html, puedes usar HTML puro para limpiar los campos después de enviar el formulario:
- Procesar el formulario en el servidor:
<?php
// Procesar la información del formulario
$nombre = $_POST['first_name'];
$apellido = $_POST['last_name'];
$email = $_POST['email'];
$telefono = $_POST['telephone'];
$comentarios = $_POST['comments'];
// ... procesamiento adicional, como enviar un correo electrónico, guardar en una base de datos, etc.
// Redirige al usuario de nuevo a la página del formulario
header("Location: ruta_del_formulario.html");
exit();
?>
- Resultado: Una vez que el usuario complete y envíe el formulario, será redirigido de nuevo a la página del formulario y encontrará todos los campos vacíos, como si estuviera accediendo a la página por primera vez.
¿Cómo configurar un botón en un formulario HTML?
Esto implica establecer propiedades, estilos y comportamientos para dicho botón dentro de un formulario HTML. Algunas configuraciones comunes incluyen:
- Botón de envío: Envia el formulario al servidor.
<input type="submit" value="Enviar">
- Botón de reinicio: Restablece todos los campos a sus valores iniciales.
<input type="reset" value="Restablecer">
- Botón estilizado: Modifica la apariencia usando CSS.
<input type="submit" value="Enviar" style="background-color: blue; color: white; padding: 10px 15px;">
- Botón para ejecutar JavaScript: Activa una función JavaScript al hacer clic.
<button type="button" onclick="miFuncion()">Haz clic aquí</button>
<script>
function miFuncion() {
alert('Botón presionado!');
}
</script>
- Botón personalizado: Utiliza la etiqueta <button> para contenido flexible, como íconos.
<button type="submit">Enviar <i class="icono-enviar"></i></button>
En resumen, la configuración determina el tipo, apariencia y comportamiento del botón dentro de un formulario.