Diseñando el formulario de contacto con PHP usando Bootstrap 4
Resumen: Crear formulario de contacto en PHP y Bootstrap usando mail
Los formularios de contacto son esenciales en una página web donde hay interacción con clientes o usuarios, pues así pueden pedir más información o enviar un mensaje.
Hoy vamos a ver cómo crear un formulario de contacto con PHP muy simple:
Para ello vamos a usar la función mail y un formulario de Bootstrap.
Vamos a diseñar el formulario de contacto con en PHP usando Bootstrap. Es así:
<!doctype html>
<html lang="es">
<!--
Formulario de contacto con PHP
https://parzibyte.me/blog
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="Contacto">
<meta name="author" content="Parzibyte">
<title>Formulario de contacto</title>
<!-- Cargar el CSS de Boostrap-->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Termina la definición del menú -->
<main role="main" class="container">
<div class="row">
<!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
<div class="col-12">
<h1>Gracias por contactarme</h1>
<a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
</div>
<div class="col-12">
<form method="POST" action="contacto.php">
<div class="form-group">
<label for="nombre">Nombre</label>
<input name="nombre" required type="text" id="nombre"
class="form-control" placeholder="Tu nombre">
</div>
<div class="form-group">
<label for="correo">Correo electrónico</label>
<input name="correo" required type="email" id="correo"
class="form-control" placeholder="Tu correo electrónico">
</div>
<div class="form-group">
<label for="mensaje">Mensaje</label>
<textarea required placeholder="Escribe tu mensaje"
class="form-control" name="mensaje" id="mensaje"
cols="30" rows="5"></textarea>
</div>
<div class="form-group">
<button class="btn-success btn" type="submit">
Enviar
</button>
</div>
</form>
</div>
</div>
</main>
</body>
</html>Por el momento solo es el formulario que será enviado al archivo llamado contacto.php usando el método post. Estamos recogiendo el nombre, correo y mensaje del usuario; además de que estamos indicando que los 3 campos son requeridos con el atributo required.
Hasta el momento se ve así:
Del lado del servidor podemos hacer varias cosas; podríamos poner un pequeño panel de administración y guardar los mensajes en una base de datos.
Lo que yo haré será enviar un correo electrónico al administrador del sitio, pero queda en ti lo que se hace al final.
Así queda el código:
<?php
/**
* Simple formulario de contacto con PHP
*
* @author parzibyte
* @see https://parzibyte.me/blog
*/
if (empty($_POST["nombre"])) {
exit("Falta el nombre");
}
if (empty($_POST["correo"])) {
exit("Falta el correo");
}
if (empty($_POST["mensaje"])) {
exit("Falta el mensaje");
}
$nombre = $_POST["nombre"];
$correo = $_POST["correo"];
$mensaje = $_POST["mensaje"];
$correo = filter_var($correo, FILTER_VALIDATE_EMAIL);
if (!$correo) {
echo "Correo inválido. Intenta con otro correo.";
exit;
}
$asunto = "Nuevo mensaje de sitio web";
$datos = "De: $nombre\nCorreo: $correo\nMensaje: $mensaje";
$mensaje = "Has recibido un mensaje desde el formulario de contacto de tu sitio web. Aquí están los detalles:\n$datos";
$destinatario = "tu_correo@dominio.com"; # aquí la persona que recibirá los mensajes
$encabezados = "Sender: correo@dominio.com\r\n"; # El remitente, debe ser un correo de tu dominio de servidor
$encabezados .= "From: $nombre <" . $correo . ">\r\n";
$encabezados .= "Reply-To: $nombre <$correo>\r\n";
$resultado = mail($destinatario, $asunto, $mensaje, $encabezados);
if ($resultado) {
echo "<h1>Mensaje enviado, ¡Gracias por contactarme!</h1>";
echo "<p>Tu mensaje se ha enviado correctamente.</p><h2>Importante</h2><p>Revisa tu bandeja de SPAM, en ocasiones mis respuestas quedan ahí. </p>";
} else {
echo "Tu mensaje no se ha enviado. Intenta de nuevo.";
}
Al inicio hacemos una validación simple (que podrías mejorar usando una librería) después configuramos dos cosas: el sender y el from.
El Sender debe ser un correo de tu dominio. Por ejemplo, si tu dominio es parzibyte.me tu correo debería ser algo como contacto@parzibyte.me; es decir, un correo que exista en tu web.
El From es el nombre y correo de la persona que te contacta.
Al final, mail devuelve un booleano que indica el éxito del mensaje. Si todo va bien, se imprime:
Si no, se indica con otro mensaje.
Voy a probar en mi localhost; también tengo una versión online en mi página web para que me contactes. Si quieres un cliente de correo para desarrollo mira smtp4dev.
Como lo dije, queda en ti modificarlo por si quieres guardarlo en una base de datos o algo así.
Este formulario se adapta a cualquier sitio web incluso si usas WordPress u otro CMS, pues utiliza PHP y es muy simple.
Si quieres podrías poner un captcha para controlar los bots, queda todo en ti.
Por cierto, el código completo lo he dejado en GitHub, ahí puedes ver también el CSS.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios
Hola buenas tardes, muy buen articulo!
Tuve un error, cuando envio los correos desde la web, me los guarda en la carpeta del localhost, no me los envia al correo, que puede ser el error?
Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!
Hola, hice este formulario en mi pag pero cuando quiero enviar no funciona, me podes contactar y ayudarme por favor!
Gracias y Saludos!
Hola. Envíeme su solicitud en https://parzibyte.me/#contacto
Muy buen contenido, simple y concreto