Los formularios de contacto son un elemento vital en todo sitio web que se precie para recibir feedback, preguntas, quejas... de nuestros visitantes. En este tutorial veremos cómo crear un formulario de contacto en Bootstrap con un captcha mediante Ajax y PHP. Este tutorial cubrirá en sencillos pasos cómo crear un formulario de contacto y un campo captcha con Google ReCaptcha. El envÃo del formulario lo gestionaremos con Ajax para no tener que recargar la página. Además enviaremos los datos a un archivo PHP que revisará si se ha introducido bien el captcha y enviará la información por correo electrónico.
La estructura que utilizaremos en este script de ejemplo será:
- index.php
- ajax_contact.js
- contact_process.php
Incluir los archivos de Bootstrap y jQuery
Diseñaremos nuestro formulario de contacto con Bootstrap, por lo que tendremos que incluir la librerÃa y los archivos de jQuery.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Registrar el recaptcha de Google
Como hemos dicho antes, en este formulario agregaremos un captcha, por lo que tendremos que registrarlo en la página oficial del recaptcha de Google. Una vez tengas la clave secreta de recaptcha y la clave del sitio, tendrás que incluir los archivos de Javascript proporcionados por Google ReCaptcha.
<script src='https://www.google.com/recaptcha/api.js'></script>
Tendremos que utilizar el siguiente HTML con la clave del sitio para mostrar el ReCaptcha de Google en nuestro formulario de contacto.
<div class="g-recaptcha" data-sitekey="6LfwyDEUAAAAAHwP7cx_q_Rdk4UN1dJ8S1XR9A04"></div>
Diseñar el formulario de contacto con Bootstrap
Ahora, en el index.php, diseñaremos nuestro formulario de contacto con Bootstrap. Recuerda añadir el captcha.
<div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h2>Bootstrap Contact Form with Captcha using PHP & Ajax</h2> <form id="contact_form" method="post" action="process_contact.php" role="form"> <div class="messages"></div> <div class="controls"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_name">Firstname *</label> <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_lastname">Lastname *</label> <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required."> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_email">Email *</label> <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_phone">Phone</label> <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone"> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="form_message">Message *</label> <textarea id="form_message" name="message" class="form-control" placeholder="Please enter message *" rows="4" required="required" data-error="Please,leave us a message."></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <div class="form-group"> <div class="g-recaptcha" data-sitekey="6LfwyDEUAAAAAHwP7cx_q_Rdk4UN1dJ8S1XR9A04"></div> </div> </div> <div class="col-md-12"> <input type="submit" class="btn btn-success btn-send" value="Send message"> </div> </div> </div> </form> </div> </div> </div>
Gestionar el envÃo del formulario de contacto con jQuery
En el fichero ajax_contact.js, gestionaremos el envÃo del formulario con jQuery Ajax para no recargar la página. La solicitud Ajax se enviará a process_contact.php donde se comprobará lo introducido en el ReCaptcha y se enviarán los datos del formulario por correo electrónico.
$( document ).ready(function() { $('#contact_form').on('submit', function (e) { $.ajax({ type: "POST", url: "process_contact.php", data: $(this).serialize(), success: function (response) { var message_type = 'alert-' + response.type; var message_text = response.message; var message = '<div class="alert ' + message_type + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + message_text + '</div>'; if (message_type && message_text) { $('#contact_form').find('.messages').html(message); $('#contact_form')[0].reset(); grecaptcha.reset(); } } }); return false; }) });
Enviar la información del formulario de contacto
Por último, en el fichero process_contact.php revisaremos si los datos enviados son correctos y si lo enviado en el campo captcha es válido. Si todo ha ido correctamente, se enviará un correo electrónico con la información recabada en el formulario.
<?php require('recaptcha/src/autoload.php'); $from_email = '[email protected]'; $send_to_email = '[email protected]'; $subject = 'New message from contact form'; $form_fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message'); $mail_send_suceess = 'Contact form successfully submitted. Thank you, I will get back to you soon!'; $mail_send_failed = 'There was an error while submitting the form. Please try again later'; $recaptcha_secret_key = ''; try { if (!empty($_POST)) { if (!isset($_POST['g-recaptcha-response'])) { throw new Exception('ReCaptcha is not set.'); } $recaptcha = new ReCaptchaReCaptcha($recaptcha_secret_key, new ReCaptchaRequestMethodCurlPost()); $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']); if (!$response->isSuccess()) { throw new Exception('ReCaptcha was not validated.'); } $message_body = "You have new message from contact formn=============================n"; foreach ($_POST as $key => $value) { if (isset($form_fields[$key])) { $message_body .= "$form_fields[$key]: $valuen"; } } $headers = array('Content-Type: text/plain; charset="UTF-8";', 'From: ' . $from_email, 'Reply-To: ' . $from_email, 'Return-Path: ' . $from_email, ); mail($send_to_email, $subject, $message_body, implode("n", $headers)); $responseArray = array('type' => 'success', 'message' => $mail_send_suceess); } } catch (Exception $e) { $responseArray = array('type' => 'danger', 'message' => $mail_send_failed); } if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $encoded = json_encode($responseArray); header('Content-Type: application/json'); echo $encoded; } else { echo $responseArray['message']; } ?>