Aprendé a crear un formulario de contacto funcional con HTML y PHP. Enviá mensajes desde tu web sin complicaciones. Guía clara y práctica para principiantes.
Table of contents [Show]
Un formulario de contacto es una de las funcionalidades más comunes en cualquier sitio web. Permite que los visitantes puedan enviarte mensajes de forma rápida, sin necesidad de abrir su correo. En esta guía, te muestro cómo crear uno básico usando HTML y PHP, ideal si estás dando tus primeros pasos en desarrollo web.
Primero, vamos a crear un archivo llamado formulario.html con el siguiente contenido:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=UTF-8>
<title>Formulario de Contacto</title>
</head>
<body>
<h2>Contacto</h2>
<form action="procesar.php" method="POST">
<label>Nombre:</label><br>
<input type=text name=nombre required><br><br>
<label>Email:</label><br>
<input type=email name=email required><br><br>
<label>Mensaje:</label><br>
<textarea name=mensaje required></textarea><br><br>
<input type=submit value="Enviar">
</form>
</body>
</html>Este formulario enviará los datos a un archivo PHP llamado procesar.php.
<form action="procesar.php" method="POST">form: Crea un formulario.
action="procesar.php": Indica que, al enviar el formulario, los datos se mandarán al archivo procesar.php.
method="POST": Usa el método POST, que envía los datos de manera segura (sin mostrar en la URL).
<input type=text name=nombre required>type="text": Campo de texto.
name="nombre": El nombre del campo que PHP usará para capturar el valor.
required: El campo debe completarse para enviar el formulario.
<input type=email name=email required>type="email": Valida que se escriba un email válido.
<textarea name=mensaje required></textarea>textarea: Campo de varias líneas para escribir el mensaje.
<input type=submit value="Enviar">Botón para enviar el formulario.
Ahora creamos el archivo procesar.php, que recibirá los datos y los enviará por correo (o los mostrará en pantalla por ahora).
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nombre = htmlspecialchars($_POST["nombre"]);
$email = htmlspecialchars($_POST["email"]);
$mensaje = htmlspecialchars($_POST["mensaje"]);
// Aquí podrías enviar por correo, guardar en base de datos, etc.
echo "<h3>Gracias por tu mensaje, $nombre.</h3>";
echo "<p>Te responderemos pronto a: $email</p>";
echo "<p>Mensaje recibido:</p>";
echo "<pre>$mensaje</pre>";
} else {
echo "Acceso no permitido.";
}
?>Este script es muy básico, pero ideal para entender cómo capturar datos desde un formulario.
if ($_SERVER["REQUEST_METHOD"] == "POST") {Esta línea verifica que los datos lleguen por el método POST.
$nombre = htmlspecialchars($_POST["nombre"]);
$email = htmlspecialchars($_POST["email"]);
$mensaje = htmlspecialchars($_POST["mensaje"]);$_POST["campo"]: Captura el valor del campo enviado desde el formulario.
htmlspecialchars(): Evita que alguien inyecte HTML o scripts (protección básica contra XSS).
echo "<h3>Gracias por tu mensaje, $nombre.</h3>";echo "<p>Te responderemos pronto a: $email</p>";
echo "<pre>$mensaje</pre>";
Se imprimen los datos del usuario de forma limpia.
Podés mejorar el diseño agregando un poco de estilo al HTML. Por ejemplo, agregá esto dentro del <head>:
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 30px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 30px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
}font-family: Cambia la fuente del texto.
max-width y margin auto: Centra el formulario en la pantalla.
padding y border-radius: Agrega espacio interno y bordes redondeados.
background-color: Color de fondo suave.
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}Hace que los campos se vean limpios y ocupen todo el ancho disponible.
input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}Estiliza el botón para que tenga un color azul con efecto hover al pasar el mouse.
Con esto, tu formulario se verá mucho más presentable.
Luego agregaremos la posibilidad de guardar los datos en una base de datos
Descubre qué es la programación, cómo funciona y por qué es esencial en el mundo digital actual. Aprende sobre los lenguajes, herramientas y lógica que mueven la tecnología que usas a diario.
