Bueno bueno… Ya está aquí, ya ha llegado. Te presento el primer post donde vamos a unir “backend” (PHP) e inteligencia artificial. En esta ocasión haremos un formulario de contacto en HTML y PHP de forma fácil y completamente funcional.
Aunque para ser exactos, podríamos decir que ChatGPT se encargará de escribir el código por nosotros. Veremos si esta IA puede crearnos todo un formulario de contacto que sea funcional.
No quiero adelantar acontecimientos pero… nos aguarda una pequeña sorpresa que dará pie a una conclusión final (cómo me gusta sacar conclusiones de cualquier cosa).
Por cierto, antes de nada advertir que no soy ningún “mega profesional” del Backend ni de PHP y que esto lo hago con fines experimentales. ¡Quedas advertido! Por si algo explota…
Formulario de contacto HTML y PHP con ChatGPT
Lo que haremos primero será diseñar un pequeño prompt para introducirlo en ChatGPT y que nos genere todo el código necesario.
Luego revisaremos un poco el código y comprobaremos si está bien o nos ha troleado (ojo spoiler).
Una vez terminemos con el “chequeo”, crearemos los archivos necesarios y pasaremos el código a nuestro editor o ide, en este caso VScode.
Después de crear todos los archivos necesarios y el código vamos a averiguar si realmente funciona o no este formulario. Y solo hay una manera de comprobarlo. Vamos a subir el formulario que nos ha creado ChatGPT a nuestra página web (a nuestro hosting) y haremos “la prueba final”.
Por cierto, te dejo el vídeo donde muestro todo el proceso aquí:
Y ahora vamos con el código, o mejor dicho, con el prompt.
Parte HTML de formulario
He usado el siguiente prompt para que nos genere el código del formulario de contacto (HTML y PHP) ¡PERO OJO!
Resulta que nos ha troleado un poco la Inteligencia artificial y ahora entenderás porqué.
Prompt usado:
Explícame por favor como se hace un formulario de contacto en HTML y PHP con los siguientes campos:
Nombre
Asunto
Mensaje (text area)
El resultado ha sido el siguiente. Adjunto código HTML del formulario a continuación.
<!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>
</head>
<body>
<h1>Formulario de Contacto</h1>
<form action="procesar_formulario.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" required>
<br><br>
<label for="asunto">Asunto:</label>
<input type="text" name="asunto" id="asunto" required>
<br><br>
<label for="mensaje">Mensaje:</label>
<br>
<textarea name="mensaje" id="mensaje" rows="4" cols="40" required></textarea>
<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Ok, hasta aquí todo bien. Nos ha creado todo el Doctype con el head y dentro del body ha creado todo el formulario de contacto usando método post (como es lógico).
Parte PHP de formulario
Ahora veamos el código PHP que ha creado.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nombre = htmlspecialchars(trim($_POST["nombre"]));
$asunto = htmlspecialchars(trim($_POST["asunto"]));
$mensaje = htmlspecialchars(trim($_POST["mensaje"]));
// Aquí puedes agregar el código para enviar el correo electrónico o almacenar la información en una base de datos.
// Por ejemplo, vamos a mostrar la información en la pantalla.
echo "Nombre: " . $nombre . "<br>";
echo "Asunto: " . $asunto . "<br>";
echo "Mensaje: " . nl2br($mensaje) . "<br>";
} else {
// Redireccionar al formulario si el método no es POST
header("Location: formulario.html");
exit();
}
?>
Fíjate aquí qué nos ha creado toda la parte de la validación de datos usando varias funciones para evitar que el usuario ponga carácteres especiales (con htmlspecialchars).
Y además, ha implementado la función trim() para descartar espacios innecesarios.
Luego nos ha creado las variables de los campos (nombre, asunto y mensaje) que le hemos dicho que recoja en el formulario.
Bien, hasta aquí todo correcto.
Pero si te fijas, se le ha olvidado la parte más importante… se le ha olvidado implementar la función mail() para que el formulario funcione…
Me quito el sombrero ante semejante troleo que nos ha hecho.
Por suerte para nosotros, sabemos un poco de PHP y nos hemos dado cuenta.
Así que ahora le diremos que deje de trollearnos y que nos haga el formulario funcional.
Promt usado:
¿Podrías implementar la función mail() para poder recibir el mensaje en un correo electrónico?
Y ahora sí, nos ha creado el siguiente código del formulario PHP.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nombre = htmlspecialchars(trim($_POST["nombre"]));
$asunto = htmlspecialchars(trim($_POST["asunto"]));
$mensaje = htmlspecialchars(trim($_POST["mensaje"]));
// Aquí agregamos el código para enviar el correo electrónico
$destinatario = "[email protected]"; // Cambia esto por tu correo electrónico
$asunto_email = "Nuevo mensaje de contacto: " . $asunto;
$contenido = "Nombre: " . $nombre . "\r\n";
$contenido .= "Asunto: " . $asunto . "\r\n";
$contenido .= "Mensaje: " . $mensaje;
// Configurar encabezados adicionales
$headers = "From: [email protected]" . "\r\n";
$headers .= "Reply-To: " . $nombre . "\r\n";
$headers .= "X-Mailer: PHP/" . phpversion();
// Enviar el correo electrónico
if (mail($destinatario, $asunto_email, $contenido, $headers)) {
echo "Mensaje enviado con éxito.";
} else {
echo "Error al enviar el mensaje. Intente nuevamente.";
}
} else {
// Redireccionar al formulario si el método no es POST
header("Location: formulario.html");
exit();
}
?>
Cómo ves ahora la IA ya ha implementado la función mail() donde pasa los siguiente valores: $destinatario, $asunto_email, $contenido, $headers.
Nos crea una redirección final, hacia la misma página web para culminar el código.
Ahora sí, parece que está todo bien.
Y ahora solo hace falta comprobar si funciona o no.
Probando formulario de contacto
Para ello, he ido a VSCode y he creado dos archivos.
Por un lado creamos el archivo formulario.html donde está toda la parte del formulario en HTML (valga la redundancia).
Y por otro lado, creamos el archivo procesar_formulario.php que es donde irá todo el código PHP para que nuestro formulario funcione correctamente.
Una vez lo tenemos todo hecho, o mejor dicho, cuando lo tengamos todo copiado, ya lo podremos subir a nuestro alojamiento web, para implementarlo en cualquiera de nuestras páginas web.
Simplemente copias y pegas los archivos en tu web. Normalmente, en la carpeta con el nombre de tu web o app o también en el directorio public_html.
Bastante fácil ¿No?
Conclusión
En este ejemplo, hemos podido comprobar que la IA es realmente potente, pero que hay que ir con cuidado ya que nos puede “trolear” en un abrir y cerrar de ojos.
Así que, la conclusión está clara. Antes de ponernos a crear cualquier cosa de código, necesitamos ciertas bases para que todo salga bien.
Aunque si te gusta vivir peligrosamente puedes empezar a pedirle cosas e intentar crearlas o modificarlas tu mismo. También es otra manera de aprender.
Y hasta aquí este post en el que hemos aprendido de forma bastante fácil como crear un formulario de contacto en HTML y PHP sin picar (casi) ni una sola línea de código.
¡Hasta luegor!