En el desarrollo web, los formularios de contacto son esenciales para permitir que los usuarios se comuniquen con los propietarios de los sitios web. Un formulario de contacto bien diseñado facilita la interacción y la recolección de información valiosa. En esta guía, te mostraremos cómo crear un formulario de contacto en HTML desde cero, cubrir la estructura básica y también agregar el código PHP necesario para procesar el formulario.
Un formulario de contacto en HTML es una sección en un sitio web donde los usuarios pueden enviar mensajes o solicitudes al propietario del sitio. Normalmente, incluye campos para que el usuario ingrese su nombre, dirección de correo electrónico, asunto y mensaje. Los formularios de contacto también pueden incluir campos adicionales, como números de teléfono o casillas de verificación para preferencias.
A continuación, veremos la estructura básica de un formulario de contacto en HTML. Aquí está el código básico para crear un formulario simple:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Contacto</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: #555;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-group button {
background-color: #5da269;
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.form-group button:hover {
background-color: #4a8c5d;
}
</style>
</head>
<body>
<div class="container">
<h1>Contacto</h1>
<form action="procesar-formulario.php" method="post">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
</div>
<div class="form-group">
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="asunto">Asunto:</label>
<input type="text" id="asunto" name="asunto" required>
</div>
<div class="form-group">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="5" required></textarea>
</div>
<div class="form-group">
<button type="submit">Enviar</button>
</div>
</form>
</div>
</body>
</html>
Ahora, necesitamos agregar el código PHP para procesar los datos enviados por el formulario. Crea un archivo llamado procesar-formulario.php en el mismo directorio que tu archivo HTML y añade el siguiente código:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Recibir los datos del formulario
$nombre = htmlspecialchars($_POST['nombre']);
$email = htmlspecialchars($_POST['email']);
$asunto = htmlspecialchars($_POST['asunto']);
$mensaje = htmlspecialchars($_POST['mensaje']);
// Configurar la dirección de correo electrónico de destino
$destinatario = "[email protected]"; // Cambia esto por tu dirección de correo electrónico
// Configurar el asunto del correo electrónico
$asuntoCorreo = "Nuevo mensaje de contacto: $asunto";
// Construir el cuerpo del mensaje
$cuerpo = "Nombre: $nombre\n";
$cuerpo .= "Correo Electrónico: $email\n";
$cuerpo .= "Asunto: $asunto\n";
$cuerpo .= "Mensaje:\n$mensaje\n";
// Configurar los encabezados del correo electrónico
$encabezados = "From: $email\r\n";
$encabezados .= "Reply-To: $email\r\n";
$encabezados .= "Content-Type: text/plain; charset=UTF-8\r\n";
// Enviar el correo electrónico
if (mail($destinatario, $asuntoCorreo, $cuerpo, $encabezados)) {
echo "<p>Tu mensaje ha sido enviado con éxito. Gracias por ponerte en contacto.</p>";
} else {
echo "<p>Hubo un problema al enviar tu mensaje. Por favor, inténtalo de nuevo más tarde.</p>";
}
} else {
echo "<p>Acceso no autorizado.</p>";
}
?>
El código PHP comienza verificando que la solicitud sea un POST. Esto asegura que el procesamiento del formulario solo ocurra cuando se envíe el formulario.
Usamos htmlspecialchars para evitar inyecciones de código y sanitizar los datos recibidos del formulario. Esto ayuda a proteger tu sitio web contra ataques de scripting (XSS).
Define la dirección de correo electrónico de destino y el asunto del correo electrónico. Ajusta $destinatario con tu dirección de correo electrónico para recibir los mensajes.
El cuerpo del mensaje se construye con los datos del formulario. Se configuran los encabezados para que el correo electrónico sea enviado correctamente. La función mail() se utiliza para enviar el correo.
Se muestra un mensaje de éxito si el correo se envía correctamente, o un mensaje de error si hay problemas.
Crear un formulario de contacto en HTML es una tarea fundamental en el desarrollo web. Siguiendo los pasos descritos en esta guía y agregando el procesamiento PHP adecuado, podrás construir un formulario funcional y atractivo que mejore la comunicación con tus usuarios. Recuerda aplicar las mejores prácticas para asegurar una experiencia de usuario óptima y proteger tu sitio web de posibles amenazas. ¡Ahora estás listo para integrar formularios de contacto efectivos en tus proyectos web!
Page loaded in 26.86 ms