I have a contact form with bootstrap validador, and now my client wants to add a recaptcha. The site was developed with Bootstrap 3, and the contact form uses Bootstrap validator. The form already validates the fields so it won't be sent unless all fields are filled correctly via JS, so I didn't add any validations to the PHP, since all fields are checked before by my js and then it triggers the PHP. I need to do this with G-recaptcha, but I don't know how to add it to my code. Anyone could help me?
Here's my HTML form and scripts related to the contact form:
<body>
<div class="seis-cols-izq col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal" action="php/contacto.php" method="post" id="contact_form">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">
Nombre
</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="name" placeholder="Tu nombre" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" >Empresa</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-briefcase"></i></span>
<input name="company" placeholder="Tu empresa" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label forma">E-Mail</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="tucorreo@mail.com" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Teléfono</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(55)1234-5678" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Tu comentario</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea rows="4" class="form-control" name="comment" placeholder="Cuéntanos cómo podemos ayudarte:"></textarea>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message"><span class="bold">¡Listo!</span> Tu mensaje fue enviado, en breve nos pondremos en contacto contigo.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-12 control-label"></label>
<div class="col-md-12">
<button type="submit" class="btn btn-contacto">Enviar</button>
</div>
</div>
</fieldset>
</form>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Here's the JS that validates:
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
submitHandler: function(validator, form, submitButton) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
var bv = form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post(form.attr('action'), form.serialize(), function(result) {
console.log(result);
}, 'json');
},
fields: {
name: {
validators: {
stringLength: {
min: 4,
message: 'Este campo debe tener al menos 4 caracteres'
},
notEmpty: {
message: 'Por favor, indícanos tu nombre'
}
}
},
company: {
validators: {
stringLength: {
min: 2,
message: 'Este campo debe tener al menos 2 caracteres'
},
notEmpty: {
message: 'Por favor, dínos el nombre de tu empresa'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Necesitamos una dirección de correo donde contactarte'
},
emailAddress: {
message: 'Tu dirección de correo no es válida'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'Por favor, proporciónanos tu teléfono'
},
phone: {
country: 'MX',
message: 'Incluye un número de teléfono válido de 10 dígitos'
}
}
},
comment: {
validators: {
stringLength: {
min: 10,
max: 200,
message:'Tu comentario debe contener entre 10 y 200 caracteres'
},
notEmpty: {
message: 'Por favor, incluye tu comentario'
}
}
},
}
})
});
And my PHP:
<?php
$EmailFrom = "contacto@mail.mx";
$EmailTo = "hola@mail.mx";
$Subject = "Nuevo comentario en el website";
$name = Trim(stripslashes($_POST['name']));
$company = Trim(stripslashes($_POST['company']));
$email = Trim(stripslashes($_POST['email']));
$phone = Trim(stripslashes($_POST['phone']));
$comment = Trim(stripslashes($_POST['comment']));
// prepare email body text
$Body = "";
$Body .= "Nombre: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Empresa: ";
$Body .= $company;
$Body .= "\n";
$Body .= "E-mail: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Teléfono: ";
$Body .= $phone;
$Body .= "\n";
$Body .= "Comentario: ";
$Body .= $comment;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
// redirect to success page
if ($success){
echo "<h2>¡Gracias! Recibimos tu mensaje</h2>";
}
else{
echo "<h2>Lo sentimos, hubo un error, inténtalo nuevamente</h2>";
}
?>
Hope someone can help me.
