A 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
- Bootstrap 3 version >3.1
- jQuery
Vamos a empezar con el código HTML del archivo index.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A contact form using the Bootstrap 3 framework."> <meta name="author" content=""> <link rel="shortcut icon" href="../../assets/ico/favicon.png"> <title>Bootstrap 3 Formulario de Contacto con CAPTCHA</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" > <link rel="stylesheet" href="assets/vender/intl-tel-input/css/intlTelInput.css"> <!-- EXTRACT ADDITIONAL STYLING HERE =======> --> <style> .container { width: auto; max-width: 800px; } .form-group { margin-bottom: 8px; } #feedbackForm { font-size: 12px; } </style> <!-- <======= UP TO HERE --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="assets/vender/bootstrap/assets/js/html5shiv.js"></script> <script src="assets/vender/bootstrap/assets/js/respond.min.js"></script> <![endif]--> </head> <body> <!-- EXTRACT FORM HERE =======> --> <div class="container"> <div id="contact_form" class="row"> <div class="col-md-12"> <h2>Contáctenos</h2> <form role="form" id="feedbackForm"> <div class="form-group"> <label class="control-label" for="name">Nombres *</label> <div class="input-group"> <input type="text" class="form-control" id="name" name="name" placeholder="Introduzca su nombre" /> <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span> </div> <span class="help-block" style="display: none;">Por favor, escriba su nombre.</span> </div> <div class="form-group"> <label class="control-label" for="email">Motivo de Contacto*</label> <select name="reason" class="form-control"> <option value="Consulta General">Consulta General</option> <option value="Realizar Pedido">Realizar Pedido</option> <option value="Informe un problema">Informe un problema</option> </select> <span class="help-block" style="display: none;">Por favor, introduce una dirección de correo electrónico válida.</span> </div> <div class="form-group"> <label class="control-label" for="email">Dirección de Correo Electrónico *</label> <div class="input-group"> <input type="email" class="form-control" id="email" name="email" placeholder="Introduzca su correo electrónico" /> <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span> </div> <span class="help-block" style="display: none;">Por favor, introduzca una dirección de correo electrónico válida.</span> </div> <div class="form-group"> <label class="control-label" for="message">Mensaje *</label> <div class="input-group"> <textarea rows="5" cols="30" class="form-control" id="message" name="message" placeholder="Introduzca su mensaje" ></textarea> <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span> </div> <span class="help-block" style="display: none;">Por favor, introduzca un mensaje.</span> </div> <img id="captcha" src="library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" /> <a href="#" onclick="document.getElementById('captcha').src = 'library/vender/securimage/securimage_show.php?' + Math.random(); return false" class="btn btn-info btn-sm">Mostrar una imagen diferente</a><br/> <div class="form-group" style="margin-top: 10px;"> <label class="control-label" for="captcha_code">Texto dentro de la Imagen *</label> <div class="input-group"> <input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="Por razones de seguridad, por favor ingrese el código que aparece en el cuadro." /> <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span> </div> <span class="help-block" style="display: none;">Por favor introduce el código que aparece en la imagen.</span> </div> <span class="help-block" style="display: none;">Por favor ingrese el código de la seguridad.</span> <button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg" data-loading-text="Enviando..." style="display: block; margin-top: 10px;">Enviar comentarios</button> </form> </div><!--/span--> </div><!--/row--> <hr> </div><!--/.container--> <!-- <======= UP TO HERE --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="assets/vender/intl-tel-input/js/intlTelInput.min.js"></script> <script src="assets/js/contact-form.js"></script> </body> </html> |
Nuestro código javascript “contact-form.js” se ve algo así como lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
(function () { var contactFormUtils = { isValidEmail: function (email) { var regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); }, clearErrors: function () { $('#emailAlert').remove(); $('#feedbackForm .help-block').hide(); $('#feedbackForm .form-group').removeClass('has-error'); }, clearForm: function () { $('#feedbackForm .glyphicon').removeClass('glyphicon-check').addClass('glyphicon-unchecked').css({color: ''}); $('#feedbackForm input,textarea').val(""); }, addError: function ($input) { var parentFormGroup = $input.parents('.form-group'); parentFormGroup.children('.help-block').show(); parentFormGroup.addClass('has-error'); }, addAjaxMessage: function(msg, isError) { $("#feedbackSubmit").after('<div id="emailAlert" class="alert alert-' + (isError ? 'danger' : 'success') + '" style="margin-top: 5px;">' + $('<div/>').text(msg).html() + '</div>'); } }; $(document).ready(function() { if ($("#phone").intlTelInput) { $("#phone").intlTelInput({validationScript: "assets/vender/intl-tel-input/js/isValidNumber.js"}); $(".intl-tel-input.inside").css('width', '100%'); } $("#feedbackSubmit").click(function() { var $btn = $(this); $btn.button('loading'); contactFormUtils.clearErrors(); //do a little client-side validation -- check that each field has a value and e-mail field is in proper format var hasErrors = false; $('#feedbackForm input,#feedbackForm textarea').not('.optional').each(function() { var $this = $(this); if (($this.is(':checkbox') && !$this.is(':checked')) || !$this.val()) { hasErrors = true; contactFormUtils.addError($(this)); } }); var $email = $('#email'); if (!contactFormUtils.isValidEmail($email.val())) { hasErrors = true; contactFormUtils.addError($email); } var $phone = $('#phone'); if ($phone.val() && $phone.intlTelInput && !$phone.intlTelInput("isValidNumber")) { hasErrors = true; contactFormUtils.addError($phone.parent()); } //if there are any errors return without sending e-mail if (hasErrors) { $btn.button('reset'); return false; } //send the feedback e-mail $.ajax({ type: "POST", url: "library/sendmail.php", data: $("#feedbackForm").serialize(), success: function(data) { contactFormUtils.addAjaxMessage(data.message, false); contactFormUtils.clearForm(); //get new Captcha on success $('#captcha').attr('src', 'library/vender/securimage/securimage_show.php?' + Math.random()); }, error: function(response) { contactFormUtils.addAjaxMessage(response.responseJSON.message, true); }, complete: function() { $btn.button('reset'); } }); return false; }); $('#feedbackForm input, #feedbackForm textarea').change(function () { var checkBox = $(this).siblings('span.input-group-addon').children('.glyphicon'); if ($(this).val()) { checkBox.removeClass('glyphicon-unchecked').addClass('glyphicon-check').css({color: 'green'}); } else { checkBox.removeClass('glyphicon-check').addClass('glyphicon-unchecked').css({color: ''}); } }); }); })(); |
El script PHP “sendmail.php” para enviar el correo electrónico se verá a continuación:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?php session_start(); //añadirle tu dirección de correo electrónico aquí define("MY_EMAIL", "ejemplo@ejemplo.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, $message) { $message_body = "Nombre: " . $name."nn"; $message_body .= "Comentario:n" . nl2br($message); return $message_body; } $email = $_POST['email']; $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.')); } ?> |
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 anterior. Hay 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:
[sociallocker]
Demostración en vivo Descargar archivos
[/sociallocker]