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:
<!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:
(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:
<?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]
Comentarios