{% extends 'include/base.html.twig' %}
{% set bodyClass = 'formulario' %}
{% block body %}
<h1><a href="{{ path('program_campaigns') }}" title="">Entrez dans le club</a></h1>
<div class="formulario">
<form id="contact-form" method="POST" action="{{ path('contacto_ok') }}" novalidate>
<div class="box">
<h2>Contact</h2>
<p>Une question ? Un doute ? N’hésite pas à nous en faire part en remplissant le formulaire ci-dessous :</p>
<label for="nombre">
<span>Prénom *</span>
<input type="text" name="nombre" id="nombre" required />
</label>
<label for="apellidos">
<span>Nom *</span>
<input type="text" name="apellidos" id="apellidos" required />
</label>
<label for="email">
<span>Email *</span>
<input type="email" name="email" id="email" required />
</label>
<label for="phone">
<span>Téléphone *</span>
<input type="phone" name="phone" id="phone" required />
</label>
<label for="message">
<span>Ton message *</span>
<textarea name="message" id="message" required ></textarea>
</label>
<label class="recaptcha-wrapper">
<div id="recaptcha_container"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<span></span>
</label>
</div>
<div class="wrapper-btn">
<input type="submit" value="Valider" class="btn" onclick="return onSubmit();" />
</div>
</form>
</div>
<footer>
<ul>
<li><a href="{{ path('reglamento') }}" title="Règlement">Règlement</a></li>
<li> - <a href="{{ path('confidencialidad') }}" title="Politique de confidentialité">Politique de confidentialité</a></li>
<li> - <a href="{{ path('contacto') }}" title="Contact">Contact</a></li>
</ul>
</footer>
{% endblock %}
{% block externalsjs %}
<script>
let recaptched = false;
function onLoadedRecaptcha(response){
if (response){
recaptched = true;
var $recaptcha = $('#g-recaptcha-response');
if ($recaptcha.length > 0) {
$('#hiddenRecaptcha').valid();
$recaptcha.removeAttr('required');
}
onSubmit(false);
}
}
function onLoadRecaptcha(){
grecaptcha.render('recaptcha_container', {
sitekey: '6LeePFwiAAAAAL_hz7XBow_OlyZQ-CXLUtjO8YqA',
hl: '{{ app.request.locale }}',
callback: onLoadedRecaptcha
});
}
function onSubmit(submit = true) {
jQuery.validator.addMethod(
"regex",
function(value, element, regexp) {
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},"Error en expresión regular"
);
$("#contact-form").validate({
errorPlacement: function(error, element) {
error.insertAfter( element.parents("label").find("span") );
},
ignore: ".ignore",
rules: {
nombre : {
required: true
},
apellidos : {
required: true
},
email: {
required: true,
regex: /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0–9]{1,3}\.[0–9]{1,3}\.[0–9]{1,3}\.[0–9]{1,3}])|(([a-zA-Z\-0–9]+\.)+[a-zA-Z]{2,}))$/
},
phone: {
required: true,
},
message: {
required: true,
},
hiddenRecaptcha: {
required: function () {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
},
messages : {
nombre: {
required: "Merci de bien vouloir introduire un prénom valide"
},
apellidos: {
required: "Merci de bien vouloir introduire un nom valide"
},
email: {
required: "Merci de bien vouloir introduire une email valide",
regex: "Merci de bien vouloir introduire une email valide"
},
phone: {
required: "Merci de bien vouloir introduire un phone valide",
},
message: {
required: "Merci de bien vouloir introduire un message valide",
},
hiddenRecaptcha: {
required: "Campo de preenchimento obrigatório",
}
},
errorClass: 'inp-error'
});
}
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha&render=explicit" async defer></script>
{% endblock %}