templates/contacto.html.twig line 1

Open in your IDE?
  1. {% extends 'include/base.html.twig' %}
  2. {% set bodyClass = 'formulario' %}
  3. {% block body %}
  4.     <h1><a href="{{ path('program_campaigns') }}" title="">Entrez dans le club</a></h1>
  5.     <div class="formulario">
  6.         <form id="contact-form" method="POST" action="{{ path('contacto_ok') }}" novalidate>
  7.             <div class="box">
  8.                 <h2>Contact</h2>
  9.                 <p>Une question ? Un doute ? N’hésite pas à nous en faire part en remplissant le formulaire ci-dessous :</p>
  10.                 <label for="nombre">
  11.                     <span>Prénom *</span>
  12.                     <input type="text" name="nombre" id="nombre" required />
  13.                 </label>
  14.                 <label for="apellidos">
  15.                     <span>Nom *</span>
  16.                     <input type="text" name="apellidos" id="apellidos" required />
  17.                 </label>
  18.                 <label for="email">
  19.                     <span>Email *</span>
  20.                     <input type="email" name="email" id="email" required />
  21.                 </label>
  22.                 <label for="phone">
  23.                     <span>Téléphone *</span>
  24.                     <input type="phone" name="phone" id="phone" required />
  25.                 </label>
  26.                 <label for="message">
  27.                     <span>Ton message *</span>
  28.                     <textarea name="message" id="message" required ></textarea>
  29.                 </label>
  30.                 <label class="recaptcha-wrapper">
  31.                     <div id="recaptcha_container"></div>
  32.                     <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
  33.                     <span></span>
  34.                 </label>
  35.             </div>
  36.             <div class="wrapper-btn">
  37.                 <input type="submit" value="Valider" class="btn" onclick="return onSubmit();" />
  38.             </div>
  39.         </form>
  40.     </div>
  41.     <footer>
  42.         <ul>
  43.             <li><a href="{{ path('reglamento') }}" title="Règlement">Règlement</a></li>
  44.             <li> - <a href="{{ path('confidencialidad') }}" title="Politique de confidentialité">Politique de confidentialité</a></li>
  45.             <li> - <a href="{{ path('contacto') }}" title="Contact">Contact</a></li>
  46.         </ul>
  47.     </footer>
  48. {% endblock %}
  49. {% block externalsjs %}
  50.     <script>
  51.         let recaptched = false;
  52.         function onLoadedRecaptcha(response){
  53.             if (response){
  54.                 recaptched = true;
  55.                 var $recaptcha = $('#g-recaptcha-response');
  56.                 if ($recaptcha.length > 0) {
  57.                     $('#hiddenRecaptcha').valid();
  58.                     $recaptcha.removeAttr('required');
  59.                 }
  60.                 onSubmit(false);
  61.             }
  62.         }
  63.         function onLoadRecaptcha(){
  64.             grecaptcha.render('recaptcha_container', {
  65.                 sitekey: '6LeePFwiAAAAAL_hz7XBow_OlyZQ-CXLUtjO8YqA',
  66.                 hl: '{{ app.request.locale }}',
  67.                 callback: onLoadedRecaptcha
  68.             });
  69.         }
  70.         function onSubmit(submit = true) {
  71.             jQuery.validator.addMethod(
  72.                 "regex",
  73.                 function(value, element, regexp) {
  74.                     if (regexp.constructor != RegExp)
  75.                         regexp = new RegExp(regexp);
  76.                     else if (regexp.global)
  77.                         regexp.lastIndex = 0;
  78.                     return this.optional(element) || regexp.test(value);
  79.                 },"Error en expresión regular"
  80.             );
  81.             $("#contact-form").validate({
  82.                 errorPlacement: function(error, element) {
  83.                     error.insertAfter( element.parents("label").find("span") );
  84.                 },
  85.                 ignore: ".ignore",
  86.                 rules: {
  87.                     nombre : {
  88.                         required: true
  89.                     },
  90.                     apellidos : {
  91.                         required: true
  92.                     },
  93.                     email: {
  94.                         required: true,
  95.                         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,}))$/
  96.                     },
  97.                     phone: {
  98.                         required: true,
  99.                     },
  100.                     message: {
  101.                         required: true,
  102.                     },
  103.                     hiddenRecaptcha: {
  104.                         required: function () {
  105.                             if (grecaptcha.getResponse() == '') {
  106.                                 return true;
  107.                             } else {
  108.                                 return false;
  109.                             }
  110.                         }
  111.                     }
  112.                 },
  113.                 messages : {
  114.                     nombre: {
  115.                         required: "Merci de bien vouloir introduire un prénom valide"
  116.                     },
  117.                     apellidos: {
  118.                         required: "Merci de bien vouloir introduire un nom valide"
  119.                     },
  120.                     email: {
  121.                         required: "Merci de bien vouloir introduire une email valide",
  122.                         regex: "Merci de bien vouloir introduire une email valide"
  123.                     },
  124.                     phone: {
  125.                         required: "Merci de bien vouloir introduire un phone valide",
  126.                     },
  127.                     message: {
  128.                         required: "Merci de bien vouloir introduire un message valide",
  129.                     },
  130.                     hiddenRecaptcha: {
  131.                         required: "Campo de preenchimento obrigatório",
  132.                     }
  133.                 },
  134.                 errorClass: 'inp-error'
  135.             });
  136.         }
  137.     </script>
  138.     <script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha&render=explicit" async defer></script>
  139. {% endblock %}