Formulario de contacto con PHP - Diseño de formulario

Formulario de contacto en PHP y Bootstrap

5 comentarios / HTML, php, web / Por

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:

  1. Será un formulario en donde se pedirá el nombre, correo y mensaje
  2. Esos 3 datos serán enviados al correo electrónico del administrador del sitio y se podrá responder directamente al correo del remitente

Para ello vamos a usar la función mail y un formulario de Bootstrap.

Diseñando el formulario

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í:

Formulario de contacto con PHP - Diseño de formulario
Diseñando el formulario de contacto con PHP usando Bootstrap 4

Procesando datos en PHP

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.

Probando formulario de contacto en PHP

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.

Así es como llegaría el mensaje al correo del administrador; haciendo un formulario de contacto en PHP muy simple pero funcional.

Como lo dije, queda en ti modificarlo por si quieres guardarlo en una base de datos o algo así.

Conclusión y notas finales

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

5 comentarios en “Formulario de contacto en PHP y Bootstrap”

  1. Facundo

    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?

    Responder
  2. Facundo Demarco

    Hola, hice este formulario en mi pag pero cuando quiero enviar no funciona, me podes contactar y ayudarme por favor!

    Gracias y Saludos!

    Responder

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *