[Introducción a PHP] ¡El Corazón de un Sitio Web! Cómo Recibir Datos de un Formulario
Un formulario de "Contacto" es esencial para cualquier sitio web. Es una ventana vital que conecta a los operadores del sitio con los visitantes, permitiéndote recibir preguntas y comentarios, verdaderamente el corazón de un sitio web. Sin embargo, muchas personas pueden sentir que es difícil, preguntándose, "¿Quiero crear un formulario, pero cómo recibo los datos enviados?"
Este artículo explicará cuidadosamente el proceso central de "recibir datos de un formulario HTML con PHP y mostrarlos en una página de confirmación" de una manera que incluso los principiantes puedan entender. Esta vez, usando un formulario de correo simple con tres campos —`name`, `email`, `message`— como ejemplo, aprenderemos cómo implementar tanto el formulario de entrada como la pantalla de confirmación en un solo archivo. ¡Hemos preparado un código que funciona con solo copiar y pegar, así que por favor experimenta la alegría de hacer que las cosas "funcionen"!
Para preparar tu entorno para ejecutar PHP (entorno de desarrollo), si aún no has configurado XAMPP, por favor consulta ¡[Introducción a PHP] Guía completa para descargar e instalar XAMPP!. ¡Después de la instalación, simplemente coloca tu archivo PHP en la carpeta especificada (como `htdocs`) y estarás listo!
1. Cómo Funcionan los Formularios Web: HTML y PHP Trabajando Juntos
Un formulario web se compone en general de dos partes.
- HTML: La parte "visual" donde los usuarios introducen texto.
- PHP: La parte "tras bastidores" que recibe y procesa los datos enviados.
Primero, echemos un vistazo a la etiqueta <form> de HTML. Este es el cuerpo del formulario.
<!-- Especificar el destino de envío de datos (action) y el método (method) -->
<form action="receive.php" method="POST">
<!-- A cada campo de entrada se le da un "nombre (name)" para recibir los datos en PHP -->
<p>Nombre: <input type="text" name="user_name"></p>
<p>Correo electrónico: <input type="email" name="user_email"></p>
<p><button type="submit">Enviar</button></p>
</form>Las partes importantes son `method="POST"` y el atributo `name` de cada campo de entrada. `POST` es un método seguro para enviar datos sin mostrarlos en la URL, y se usa comúnmente para formularios. El nombre asignado al atributo `name` se convierte en la "clave" para recibir los datos en el lado de PHP.
En el lado de PHP, se utiliza una variable especial llamada `$_POST` (una variable superglobal) para recibir los datos. Al especificar el atributo `name` del HTML como la clave, como en `$_POST['user_name']`, puedes obtener el valor ingresado.
<?php
// Muestra los datos enviados desde el campo de entrada llamado "user_name"
echo $_POST['user_name'];
// Muestra los datos enviados desde el campo de entrada llamado "user_email"
echo $_POST['user_email'];
// Comprueba todos los datos enviados a través de POST (para depuración)
print_r($_POST);
?>Esta colaboración entre HTML y PHP es el mecanismo básico de los formularios web.
2. ¡A la práctica! Creando un Formulario de Entrada y una Pantalla de Confirmación en un Solo Archivo
Ahora, implementemos la funcionalidad para un formulario de entrada y una pantalla de confirmación en un solo archivo PHP. La ventaja de este método es que la gestión de archivos se vuelve más simple. El siguiente código es un ejemplo completo que puedes copiar y pegar en un archivo para verificar inmediatamente su funcionamiento en un navegador.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario de Contacto</title>
<style>
body { font-family: sans-serif; line-height: 1.7; padding: 20px; max-width: 600px; margin: auto; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"], input[type="email"], textarea {
width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}
textarea { height: 120px; }
.confirmation-table { width: 100%; border-collapse: collapse; }
.confirmation-table th, .confirmation-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
.confirmation-table th { background-color: #f2f2f2; width: 30%; }
button { padding: 10px 20px; border: none; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #0056b3; }
</style>
</head>
<body>
<?php
// Bifurcar el proceso dependiendo de si hay una solicitud POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// --- Muestra la pantalla de confirmación ---
$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8');
$message = htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8');
?>
<h1>Confirmación de su entrada</h1>
<p>Si el siguiente contenido es correcto, por favor presione el botón de enviar.</p>
<table class="confirmation-table">
<tr>
<th>Nombre</th>
<td><?php echo $name; ?></td>
</tr>
<tr>
<th>Correo electrónico</th>
<td><?php echo $email; ?></td>
</tr>
<tr>
<th>Contenido de la consulta</th>
<td><?php echo nl2br($message); ?></td>
</tr>
</table>
<p>*Nota: Este ejemplo no realiza el envío real de correo electrónico.</p>
<?php } else { ?>
// --- Muestra el formulario de entrada ---
<h1>Contacto</h1>
<form action="" method="POST">
<div class="form-group">
<label for="name">Nombre</label>
<input type="text" id="name" name="name" 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="message">Contenido de la consulta</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit">Confirmar contenido</button>
</form>
<?php } ?>
</body>
</html>El punto clave de este código es la bifurcación condicional `if ($_SERVER['REQUEST_METHOD'] === 'POST')`. `$_SERVER['REQUEST_METHOD']` contiene el método de acceso a la página (GET o POST).
- Cuando abres la página por primera vez: es un acceso normal, por lo que es `GET`. La declaración `if` es `false`, y se muestra el formulario de entrada dentro del bloque `else`.
- Cuando envías el formulario: se envía con `method="POST"`, por lo que la declaración `if` es `true`, y se muestra la pantalla de confirmación.
Además, al dejar vacío el atributo `action` del formulario como `action=""`, los datos se envían al propio archivo. Esto te permite representar dos pantallas con un solo archivo.
3. Puntos a tener en cuenta (Validación de entradas)
En un sitio web real, es posible que los usuarios no ingresen nada o envíen datos maliciosos. Por lo tanto, un proceso llamado **validación**, que comprueba si los datos recibidos son los esperados, es esencial.
Aquí, agreguemos una validación simple para verificar que cada campo no esté vacío.
<?php
// Procesamiento en el lado de la pantalla de confirmación (dentro de la declaración if)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$errors = []; // Array para almacenar mensajes de error
// Validación del nombre
if (empty($name)) {
$errors[] = 'El nombre es obligatorio.';
}
// Validación del correo electrónico
if (empty($email)) {
$errors[] = 'El correo electrónico es obligatorio.';
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'El formato del correo electrónico no es correcto.';
}
// Validación del contenido de la consulta
if (empty($message)) {
$errors[] = 'El contenido de la consulta es obligatorio.';
}
// Bifurcar el proceso dependiendo de si hay errores
if (!empty($errors)) {
// Si hay errores: muestra los mensajes de error
echo '<h1>Error de entrada</h1>';
echo '<ul style="color: red;">';
foreach ($errors as $error) {
echo '<li>' . htmlspecialchars($error) . '</li>';
}
echo '</ul>';
echo '<a href="javascript:history.back();">Volver al formulario</a>';
} else {
// Si no hay errores: muestra la pantalla de confirmación
// ... (código de visualización de la pantalla de confirmación del ejemplo anterior) ...
}
}
?>En este ejemplo, usamos `empty()` para verificar que cada entrada no esté vacía, y la útil función `filter_var()` para validar que el formato del correo electrónico es correcto. Esto crea un flujo más práctico donde se muestran mensajes de error si los hay, y el usuario avanza a la pantalla de confirmación si no los hay.
4. Resumen y próximos pasos
En este artículo, aprendimos el mecanismo básico de los formularios web y todo el proceso desde la recepción de datos con PHP hasta la visualización de una pantalla de confirmación. La variable `$_POST` y la bifurcación del proceso con una declaración `if` son las partes centrales de la creación de un formulario. La función de envío de correo electrónico es un poco más compleja ya que involucra la configuración del servidor, pero si dominas este flujo desde la entrada hasta la confirmación, puedes aplicarlo a cualquier formulario.
En cuanto a los próximos pasos, incluyen:
- El proceso de enviar un correo electrónico utilizando la función `mb_send_mail()` de PHP cuando se presiona el botón "Enviar" en la pantalla de confirmación.
- Validación más avanzada (límite de caracteres, permitir solo tipos de caracteres específicos, etc.).
- Redireccionar a una "página de agradecimiento" una vez que se completa el envío.
Cubriremos estos temas en detalle en otra ocasión. ¡Por ahora, intenta crear tu propio formulario original basado en este código!