Formulario de Contacto con Captcha usando PHP y Bootstrap 3

formulario_contacto_bs3A continuación les muestro un formulario de contacto bootstrap 3  usando SecureImage Captcha. Enviando mensajes a una dirección de correo electrónico específica, para el ejemplo lo haremos usando la función mail de php.

DEPENDENCIAS

PHP

  • version > 5.2.0 (con la biblioteca gd habilitado)
  • SecureImage Captcha Captcha (incluido en library/vender/securimage/**)

HTML/JS

Vamos a empezar con el código HTML del archivo index.html:

Nuestro código javascript “contact-form.js” se ve algo así como lo siguiente:

El script PHP “sendmail.php” para enviar el correo electrónico se verá a continuación:

Para conseguir esto que esto funcione  con tu sitio web, debes cambiar el valor de la constante de MY_EMAIL definido en la parte superior del archivo anteriorHay un par de funciones definidas en la parte superior para generar una respuesta de error y establecer el cuerpo del mensaje del correo electrónico. Una vez más, hacemos una validación sencilla para asegurarse que se haya introducido un correo electrónico y en mensaje. También comprobamos el Captcha para asegurarse de que el código introducido coincide con la imagen. Si no lo hace, nosotros respondemos con un error y no se envía el mensaje. Por último, se intenta enviar el mensaje.

Ahora sólo queda probar el funcionamiento del código 🙂

Bibliografía consultada:

  1. Bootstrap3-contact-form
  2. SecureImage Captcha
  3. Bootstrap 3
  4. PHP mail

Demostración en vivo Descargar archivos

  • Héctor Montoya Lüer

    Hola, al implementar este codigo al momento de enviar se queda el boton “enviando” y no pasa nada.
    Que puede estar fallando ?

    • Obed

      Hola Hector. haz realizado alguna modificacion al script? cual? Ve inspeccionar elemento (en google chrome) y envíame una captura de pantalla para verificar donde esta la falla.

      • Héctor Montoya Lüer

        Hola que rapido!!1

        Te cuento al momento de apretar enviar, el boton cambia a enviando pero no hace nada.

        • Héctor Montoya Lüer

          se arregloooo jaja no habia actualizado el archivo sendmail.php en la raiz

          Muchas gracias saludos !!!!

          • Héctor Montoya Lüer

            Lo que si no me muestra el nombre en el correo que recibo, solo el comentario, que puede ser? ? ?

  • Juan Pablo

    hola. gracias por compartir. está muy bueno. No logro hacerlo funcionar, me da error interno de servidor.
    Esto requiere de un servidor smtp o se ejecuta solo con el server php?

    • Obed

      Hola Juan, decirte que el código no funciona de forma local, para que funciones debes tener configurado un servidor smtp. La mayoría de proveedores de hosting actuales permiten el envío de correos electrónico por lo que te aconsejo que lo pruebes en una cuenta de hosting de pago!

      • Juan Pablo

        Es ese el problema entonces. gracias por la pronta respuesta.
        Saludos

  • Miguel Tripiana

    Muy bueno, funciona perfectamente. Pero no soy capaz de hacer que llegue el email con los caracteres de ñ y acentos. Me puedes ayudar. Gracias.

    • Raúl

      Miguel, yo también tuve problemas con eso, pero después de un par de horas de búsquedas, pruebas y errores, dí con la solución; lo que tienes que hacer es usar utf8_decode en la función para el cuerpo del mensaje en el archivo “sendmail.php”.

      Por ejemplo, el mío quedó así:

      function setMessageBody ($name, $city, $message) {
      $message_body = “Nombre: ” . utf8_decode($name).”nn”;
      $message_body .= “Ciudad: ” . utf8_decode($city).”nn”;
      $message_body .= “Comentarios: ” . utf8_decode($message);
      return $message_body;
      }

      Espero que te sea de utilidad.

  • pindy Cuero

    donde puedo agrear el campo teléfono? alguien sabe?

  • Beatriz López

    Hola ¿cómo puedo añadir más campos en el formulario? no consigo que lleguen al correo los campos que creo nuevos.

    • Obed

      Hola!
      La función setMessageBody, establece que datos se enviaran al correo electrónico. Búscala dentro del archivo sendmail.php

  • Valbol Worcester

    buen dia!!! Agregue al formulario 2 casilleros mas, pero no logro que recoja los datos y se queda en el boton “enviar”.
    No obstante el email llega, pero solo con el campo “nombre” y “comentario” completo, los demas casilleros “empresa” y “telefono” estan vacios.

    function setMessageBody ($name, $empresa, $telefono, $message) {
    $message_body = “Nombre: ” . utf8_decode($name).”nn”;
    $message_body .= “Telefono: ” . utf8_decode($telefono).”nn”;
    $message_body .= “Empresa: ” . utf8_decode($empresa).”nn”;
    $message_body .= “Comentarios: ” . utf8_decode($message);
    return $message_body;
    }

    $email = $_POST[‘email’];
    $message = $_POST[‘message’];

    • Obed

      Hola gracias por tu comentario!
      La función setMessageBody, establece que datos se enviaran al correo electrónico.

    • Obed

      Búscala dentro del archivo sendmail.php

  • Mariano Barreto

    hola. Muchas gracias por el aporte, está muy bueno. Me funciona perfectamente localmente, pero al subirlo no carga la imagen del captcha y no logro detectar cual es el problema. Alguna ayudita por favor

    • Mariano Barreto

      A alguien le paso lo mismo? Ayuda por favor

  • Valbol Worcester

    Estimado gracias por la respuesta, he tratado de recoger los datos de “empresa” y “telefono” pero no lo logro, aquí adjunto el codigo PHP (el HTML funciona bien enviando los datos). No se como modificar la variable setMessageBody para que me devuelva esos datos. Agradezco la ayuda.

    $messsage)));
    }

    /**
    * Funcion para establecer el cuerpo del mensaje
    */
    function setMessageBody ($name, $message) {
    $message_body = “Nombre: ” . utf8_decode($name).”nn”;
    $message_body .= “Telefono: ” . utf8_decode($telefono).”n”;
    $message_body .= “Empresa: ” . utf8_decode($empresa).”n”;
    $message_body .= “Comentarios: ” . utf8_decode($message);
    return $message_body;
    }

    $email = $_POST[‘email’];
    $telefono = $_POST[‘telefono’];
    $empresa = $_POST[‘empresa’];
    $message = $_POST[‘message’];

    header(‘Content-type: application/json’);

    //Pequeña validación. esto fue validado en el lado del cliente también
    if (empty($email) || empty($message)) {
    errorResponse(‘Correo electrónico o mensaje está vacío.’);
    }
    //hacer verificación Captcha, asegúrese de que el remitente no es un robot:)…
    require ‘./vender/securimage/securimage.php’;
    $securimage = new Securimage();
    if (!$securimage->check($_POST[‘captcha_code’])) {
    errorResponse(‘Código de Seguridad no válido’);
    }

    //tratar de enviar el mensaje usando la funcion mail de php
    if(mail(MY_EMAIL, $_POST[‘reason’], setMessageBody($_POST[“name”], $message), “From: $email”)) {
    echo json_encode(array(‘message’ => ‘Su mensaje se ha enviado correctamente.’));
    } else {
    header(‘HTTP/1.1 500 Error Interno del Servidor’);
    echo json_encode(array(‘message’ => ‘Error inesperado al intentar enviar correo electrónico.’));
    }
    ?>

    • Obed

      A la función setMessageBody agrégale otro parámetro ejemplo
      function setMessageBody ($name, $message,$telefono) {
      $message_body = “Nombre: ” . $name.”nn”;
      $message_body .= “Teléfono: ” . $telefono.”nn”;
      $message_body .= “Comentario:n” . nl2br($message);
      return $message_body;
      }

      Luego cuando la llames dicha función entonces debes pasarle ese parámetro “$telefono”

  • Valbol Worcester

    Estimado, lo logre!!!. Aquí les dejo el PHP con 2 casilleros extras. Elimine la opción de “motivo de consulta” y coloque el asunto del correo.
    Para que el PHP funcione deben en el HTML crear los casilleros “empresa” y “telefono”. Obed gracias por la mano, muy bueno el post!!!

    session_start();

    //añadirle tu dirección de correo electrónico aquí
    define(“MY_EMAIL”, “pedro@gmail.com”);

    /**
    * Establece la cabecera de error y la respuesta de mensaje de error JSON.

    */
    function errorResponse ($messsage) {
    header(‘HTTP/1.1 500 Error Interno del Servidor’);
    die(json_encode(array(‘message’ => $messsage)));
    }

    /**
    * Funcion para establecer el cuerpo del mensaje

    */

    function setMessageBody ($name, $telefono, $empresa, $message) {
    $message_body = “Nombre:” . utf8_decode($name).”nn”;
    $message_body .= “Telefono:” . utf8_decode($telefono).”nn”;
    $message_body .= “Empresa:” . utf8_decode($empresa).”nn”;
    $message_body .= “Comentario:” . utf8_decode($message);
    return $message_body;
    }

    $telefono = $_POST[‘telefono’];
    $empresa = $_POST[‘empresa’];
    $email = $_POST[‘email’];
    $message = $_POST[‘message’];
    $asunto = “Consulta Desde el Website”;

    header(‘Content-type: application/json’);

    //Pequeña validación. esto fue validado en el lado del cliente también
    if (empty($email) || empty($message)) {
    errorResponse(‘Correo electrónico o mensaje está vacío.’);
    }
    //hacer verificación Captcha, asegúrese de que el remitente no es un robot:)…
    require ‘./vender/securimage/securimage.php’;
    $securimage = new Securimage();
    if (!$securimage->check($_POST[‘captcha_code’])) {
    errorResponse(‘Código de Seguridad no válido’);
    }

    //tratar de enviar el mensaje usando la funcion mail de php
    if(mail(MY_EMAIL, $asunto, setMessageBody($_POST[“name”], $telefono, $empresa, $message), “From: $email”)) {
    echo json_encode(array(‘message’ => ‘Su mensaje se ha enviado correctamente.’));
    } else {
    header(‘HTTP/1.1 500 Error Interno del Servidor’);
    echo json_encode(array(‘message’ => ‘Error inesperado al intentar enviar correo electrónico.’));
    }

    ?>

    • Obed

      Muchas gracias a ti por compartir la forma de como agregar mas campos al formulario!