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


  • 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.

  • Pingback: Google Captcha con PHP & Bootstrap - Sistemas Web()

  • 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!

  • Oswald Peña

    Buenas tardes, gracias por tu apoyo, excelente trabajo, me podrías ayudar en mi código que será un formulario de envio pero no logro hacerlo arrancar ya que le he agregado otras opciones, me gustaría que me ayudaras un poco con esto, escribeme al correo, estaré super agradecido Saludos

  • Isabel

    Hola, se puede colocar un array dentro de: define(“MY_EMAIL”, ” “); ? Lo que yo necesito es enviar el mail a diferentes casillas según el motivo de contacto que elija el usuario. Alguna sugerencia? Agradecida de antemano.

  • Jefferson Cardenas Otalora

    Buenas
    ya realice todo al probarlo localmente (Apache) el boton enviar queda en enviando lo subo a un hosting gratuito cpanel y me dice mensaje enviado pero no me llaga nada al correo.

    dudas:
    * tengo que configurar el hosting algo asi como SMTP para validar que si me esta funcionado este mi sitio web:
    http://macodesign.ml/CONTACTO.html

    • Obed

      Hola Jefferson.
      Generalmente lo servidores de hosting compartido gratuitos no permiten el envió de correo electrónico, esto para evitar que desde su servidores se haga spam.

      Para que el mensaje pueda ser enviado, debes subir el script a un hosting de pago, los cuales en su mayoría ya tienen configurado un servidor de mensajes smpt para el envío de correos.

      • Jefferson Cardenas Otalora

        Obed , no entiendo a cual script te refieres.. lo que entiendo es que podria subir el trabajo al hosting(pago)y colocar define(“MY_EMAIL”, “micorreo@dominiopago.com”); y quedaria funcionando no antes si haber creeado en el hosting el servidor de correo ?

  • Jefferson Cardenas Otalora

    Buenas
    Obed ya subí la pagina a un hosting de pago este tiene servidor SMTP , antes había una pagina web hecha en joomla tenia su formulario de contacto. que pasos debo tener en cuenta para que me funcione el formulario

    1. archivo php de conexion con el smtp
    2.modificar algunos datos o agregar en el contact-form.js

    Te agradezco …

  • Davide

    Buenas tardes. El código CSS que se enlaza en el index no me funciona. He añadido el de bootstrap.min.css. Por otra parte no me aparece la imágen de secure captcha.
    No sé que es lo que hago mal.
    Gracias, un saludo

  • edgardo a dominguez

    como hacer que un campo no sea obligatorio, hay una propiedad de optional pero no envia el email si no completo el campo

  • Lucas Mauro

    Buenas tardes. No me deja bajar el contenido me dice que esta bloqueado. Gracias por la ayuda

  • Dizain

    Hola! Podrías explicar como hacer el mismo formulario pero incorporando un botón para adjuntar archivos?