templates/contact/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.     {{ 'contact.title'|trans }}
  5. {% endblock %}
  7. {% block body %}
  8.     <div class="container px-4 sm:px-8 md:px-16 lg:px-32 xl:px-48 3xl:px-96 flex flex-wrap mx-auto justify-center items-center text-black">
  9.         <div>
  10.             <div class="content-center">
  11.                 <a href="{{ app.request.headers.get('referer') }}"
  12.                    class="bg-gray-300 text-nowrap hover:bg-gray-400 focus:ring-4 focus:outline-none focus:ring-gray-300 text-black w-full font-medium rounded-md text-sm px-3 py-2.5">
  13.                     <i class="fa-solid fa-arrow-left text-black"></i>
  14.                     <span>{{ 'button.back'|trans }}</span>
  15.                 </a>
  16.             </div>
  17.             <form method="post">
  18.                 <div class="flex items-center justify-center">
  19.                     <div class="max-w-md w-full my-54 space-y-8">
  20.                         <div>
  21.                             <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">{{ 'allform.contact.contactus'|trans }}</h2>
  22.                         </div>
  23.                         {{ form_start(form) }}
  24.                         {{ form_row(form.firstName) }}
  25.                         {{ form_row(form.lastName) }}
  26.                         {{ form_row(form.email) }}
  27.                         {{ form_row(form.phone) }}
  28.                         {{ form_row(form.requestType) }}
  29.                         <div id="problemType-container" style="display: none;">
  30.                             {{ form_row(form.problemType) }}
  31.                         </div>
  32.                         {{ form_row(form.message) }}
  33.                         <div>
  34.                             <button type="submit"
  35.                                     class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
  36.                                 {{ 'allform.contact.envoyer'|trans }}
  37.                             </button>
  38.                         </div> <br/>
  39.                         {{ form_end(form) }}
  40.                     </div> <br/>
  41.                 </div>
  42.                 <p>{{ 'contact.info'|trans }} <a href="{{ path('privacy') }}"><strong>{{ 'register.privacy'|trans }}</strong></a> {{ 'contact.info2'|trans }}</p>
  43.             </form>
  44.         </div> <br/>
  45.     </div>
  47.     <script>
  48.         document.addEventListener("DOMContentLoaded", function () {
  49.             const requestType = document.getElementById("contact_form_requestType");
  50.             const problemTypeContainer = document.getElementById("problemType-container");
  52.             function toggleProblemType() {
  53.                 if (requestType.value === "problem") {
  54.                     problemTypeContainer.style.display = "block";
  55.                 } else {
  56.                     problemTypeContainer.style.display = "none";
  57.                 }
  58.             }
  60.             // Initial check
  61.             toggleProblemType();
  63.             // When value changes
  64.             requestType.addEventListener("change", toggleProblemType);
  65.         });
  66.     </script>
  67. {% endblock %}