Hablemos del correo masivo, Newsletter
Hablemos de las inscripciones de Newsletter, que puede llevar al error en tu cuenta de hosting y altas facturas.
Table of contents [Show]
Formulario de contacto con HTML y PHP: Guía práctica para principiantes
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.
1. Estructura básica en HTML
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.
Explicación del codigo HTML
<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).
Campos del formulario:
<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.
2. Crear el archivo PHP para procesar los datos
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.
Explicación del Codigo PHP
if ($_SERVER["REQUEST_METHOD"] == "POST") {Esta línea verifica que los datos lleguen por el método POST.
Captura de cada campo:
$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).
Mostrar los datos en pantalla:
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.
3. Agregando un diseño básico con CSS
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>Explicación del Codigo CSS
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
