templates/public/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/base.html.twig' %}
  2. {% block javascripts %}
  3.     <script>
  4.         $(document).ready(function () {
  5. $('.js-datepicker').datepicker({format: 'dd/mm/yyyy', language: 'fr'});
  6. });
  7.     </script>
  9.     <script>
  10.         $("input ,select ,textarea").on('keyup change', function (event) {
  11. $(this).css('border', '1px solid #d3d8dd');
  12. $(this).next('label').css('color', 'black');
  13. let elem = $(this).next('.tooltiptext').css('display', 'none');
  14. });
  17. $("#user_form_subject , #user_form_subject").on('change', function (event) {
  18. $('#user_form_subject label').css('color', 'black');
  19. });
  21. $("#validate").click(function (event) {
  22. $("#user_form_subject, #user_form_subject").on("invalid", function (event) {
  23. $("#user_form_subject").css('color', '#dc3545');
  24. });
  26. $("#user_form_lastName, #user_form_firstName, #user_form_address, #user_form_email, #user_form_contacts___name___subject, #user_form_lastName, #user_form_firstName, #user_form_contacts___name___message").on("invalid", function (event) {
  27. event.preventDefault();
  28. $(this).css('border', '2px solid #dc3545');
  29. let elem = $(this).next('.tooltiptext').css('color', '#dc3545');
  30. // show the tooltip
  31. elem.css({'display': 'block', 'opacity': '1'});
  33. if ($('#user_form_purchases___name___purchaseReceiptFile').is(':empty')) {
  34. event.preventDefault();
  35. $('#user_form_purchases___name___purchaseReceiptFile').css('border', '2px solid #dc3545');
  36. let elem = $('#user_form_purchases___name___purchaseReceiptFile').next('.tooltiptext').css('color', '#dc3545');
  37. // show the tooltip
  38. elem.css({'display': 'block', 'opacity': '1'});
  39. }
  40. })
  42. if ($("#user_form_email").val() != "") {
  43. let str = $("#user_form_email").val();
  44. if (str.indexOf('@') < 1 || str.split('@').length > 2 || str.indexOf('.') < 1) {
  45. console.log(str.indexOf('.'));
  46. success = false;
  47. let elem = $("#user_form_email").next('.tooltiptext');
  48. elem.css({'display': 'block', 'color': '#dc3545'});
  49. elem.text('Votre e-mail doit être composé d\'une @ et d\'un point');
  50. }
  51. }
  54. $("#user_form_purchases___name___shop").on("invalid", function (event) {
  55. event.preventDefault();
  56. $('#select2-user_form_purchases___name___shop-container').css('border', '2px solid #dc3545');
  57. var error = $('<p>Merci de remplir tous les champs</p>').addClass('tooltiptext').css({'color': '#dc3545', 'display': 'block'});
  58. if (!$(this).next().hasClass('tooltiptext')) {
  59. $(error).insertAfter($(".select2-container--default"));
  60. }
  61. });
  64. $("#user_form_purchases___name___purchasedAt, #user_form_purchases___name___product").on("invalid", function (event) {
  65. event.preventDefault();
  66. $(this).css('border', '2px solid #dc3545');
  67. var error = $('<p>Merci de remplir tous les champs</p>').addClass('tooltiptext').css({'color': '#dc3545', 'display': 'block'});
  68. if (!$(this).next().hasClass('tooltiptext')) {
  69. $(error).insertAfter($(this));
  70. }
  72. })
  75. $("#user_form_purchases___name___purchaseReceiptFile").on("invalid", function (event) {
  76. event.preventDefault();
  77. $(this).css('border', '2px solid #dc3545');
  78. var error = $('<p>Merci de télécharger votre ticket de caisse</p>').addClass('tooltiptext').css({'color': '#dc3545', 'display': 'block'});
  79. if (!$(this).next().hasClass('tooltiptext')) {
  80. $(error).insertAfter($(this));
  81. }
  83. })
  84. });
  85.     </script>
  86.     <!--  CUSTOM JS -->
  87.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&amp;language=fr&amp;key=AIzaSyDzOeFYHe8ciD9v_y7MYqj3LVz7XYUfh3U"></script>
  88.     <script src="{{ asset('assets/js/autocomplete.js') }}"></script>
  89. {% endblock %}
  90. {% block main %}
  91.     <!--MAIN INFO BLOCK -->
  93.         <h1 class="text-center mt-3 mb-3">CONTACT</h1>
  94.         <p class="text-center m-4 mt-0 mb-1">Pour toute question relative à l'opération,
  95.             <br>
  96.             merci de bien vouloir remplir le formulaire ci-dessous.</p>
  97.         {{ form_start(form,{'attr': {'class': 'row g-3 mt-3 width-80'}}) }}
  98.         <div class="col-lg-12">
  99.             <div class="row mb-md-4">
  100.                 <div class="col-lg-6">
  101.                     {{ form_widget(form.subject) }}
  102.                     <span class="tooltiptext">Veuillez remplir ce champ</span>
  103.                     <div class="col-lg-12 mt-3">
  104.                         {{ form_widget(form.lastName, {'attr': {'placeholder': 'Nom *'}}) }}
  105.                         <span class="tooltiptext">Veuillez remplir ce champ</span>
  106.                     </div>
  107.                     <div class="col-lg-12  mt-3">
  108.                         {{ form_widget(form.firstName, {'attr': {'placeholder': 'Prénom *'}}) }}
  109.                         <span class="tooltiptext">Veuillez remplir ce champ</span>
  110.                     </div>
  111.                     <div class="col-lg-12 mt-3">
  112.                         {{ form_widget(form.email, {'attr': {'placeholder': 'Email *'}}) }}
  113.                         <span class="tooltiptext">Veuillez remplir ce champ</span>
  114.                     </div>
  115.                     <div class="col-lg-12 mt-3">
  116.                         {{ form_widget(form.phoneNumber, {'attr': {'placeholder': 'Téléphone'}}) }}
  117.                         <span class="tooltiptext">Veuillez remplir ce champ</span>
  118.                     </div>
  119.                 </div>
  120.                 <div class="col-lg-6">
  121.                     <div class="mb-3">
  122.                         {{ form_widget(form.message) }}
  123.                         <span class="tooltiptext">Veuillez remplir ce champ</span>
  124.                     </div>
  125.                 </div>
  126.             </div>
  127.             <div class="text-center">
  128.                 <button type="submit"  id="colorBouton" class="col-12 col-sm-12 col-md-5 col-lg-5 btn btn-custom py-3 text-dark">Envoyer</button>
  129.             </div>
  130.         </div>
  131.         {{ form_end(form) }}
  132.         <div class="d-flex justify-content-start">
  133.             <p class="small mt-5 " style="text-align: start;">
  134.                 * Champs obligatoires<br>
  135.                 Vos données à caractère personnel sont traitées par Data Gest pour répondre à votre demande d’informations.
  136.                 Conformément à la réglementation et dans les conditions qu’elle définit, vous disposez des droits suivants sur vos données : droit d’accès, droit de rectification, droit à l’effacement (droit à l’oubli), droit d’opposition, droit à la limitation du traitement, droit à la portabilité, droit de définir des directives relatives au sort de vos données après votre décès. Vous pouvez exercer vos droits en adressant un courrier à Opérations Lunii / SGA, 18 rue Horace Vernet, 92130 Issy-les-Moulineaux   ou un courriel à <a target="_blank" href="mailto:dpo@pierre-lannier.fr">mesdonnees@lunii.com</a>. En cas de réclamation, vous pouvez choisir de saisir la CNIL. 
  137.                     
  138.                     
  139.                     Pour en savoir plus sur la protection de vos données, cliquez
  140.                 <a target="_blank" href="{{ asset('assets/documents/LUNII_FR_6_Politique_de_confidentialite_Lunii.pdf') }}">
  141.                     <u>ici</u>
  142.                 </a>.
  144.             </p>
  145.         </div>
  147. {% endblock %}