templates/front/form/support.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Formulaire - Demande de support{% endblock %}
  5. {% block body %}
  6.   <main class="container" style="max-width: 800px;">
  7.     <header class="p-3 text-bg-dark">
  8.       <div class="container">
  9.         <div class="d-flex flex-wrap align-items-center justify-content-center">
  10.           <a href="https://hoplie.com" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
  11.             <img src="https://www.hoplie.com/media/images/header/logo.png">
  12.           </a>
  13.         </div>
  14.       </div>
  15.     </header>
  16.   
  17.     <div class="py-5 text-center">
  18.       <h1>Formulaire - Demande de support</h1>
  19.       <p class="alert alert-info">Les demandes de support <span class="fw-bold">ne concèrnent que les bugs et la maintenance</span> de votre site. Toutes demandes ne faisant pas partie du cahier des charges initial et nécessitant une évolution ou une modification d'une fonctionnalité déjà existante sur votre site, doit faire l'objet d'une demande d'évolution via <a class="text-link" href="{{ path('app_form_evolution_new') }}">le formulaire d'évolution</a>.</p>
  20.     </div>
  21.   
  22.     <div class="row g-5">
  23.       <div class="col">
  24.         {{ form_start(form,{'attr': {'class': 'needs-validation'}}) }}
  26.           <div class="form-section">
  27.             <h2>Informations client</h2>
  28.             <div class="row g-3 p-3">
  29.               <div class="col-sm-6">
  30.                 {{ form_row(form.customer_information.company) }}
  31.               </div>
  32.               <div class="col-sm-6">
  33.                 {{ form_row(form.customer_information.name) }}
  34.               </div>
  35.               <div class="col-12">
  36.                 {{ form_row(form.customer_information.email) }}
  37.               </div>
  38.             </div>
  39.           </div>
  40.   
  41.           <div class="form-section">
  42.             <h2>Problème rencontré ?</h2>
  43.             <div class="row g-3 p-3">
  44.               <div class="col-12">
  45.                 {{ form_row(form.description) }}
  46.               </div>
  47.               <div class="col-12">
  48.                 {{ form_row(form.actions_realized) }}
  49.               </div>
  50.               <div class="col-12">
  51.                 {{ form_row(form.expected_actions) }}
  52.               </div>
  53.               <div class="col-12">
  54.                 {{ form_row(form.url) }}
  55.               </div>
  56.               <div class="col-12">
  57.                 {{ form_row(form.date_time) }}
  58.               </div>
  59.               <div class="col-12">
  60.                 {{ form_row(form.another_details) }}
  61.               </div>
  62.             </div>
  63.           </div>
  65.           <div class="form-section">
  66.             <h2>Urgence du problème</h2>
  67.             <div class="row g-3 p-3">
  68.               <div class="col-12">
  69.                 {{ form_row(form.is_blocking) }}
  70.               </div>
  71.               <div class="blocking">
  72.                 <div class="col-12">
  73.                   {{ form_row(form.blocking_description) }}
  74.                 </div>
  75.                 <div class="col-12">
  76.                   {{ form_row(form.blocking_deadline) }}
  77.                 </div>
  78.               </div>
  79.             </div>
  80.           </div>
  82.           <button class="w-100 btn btn-primary btn-lg" type="submit">Envoyer la demande</button>
  84.         {{ form_end(form) }}
  85.       </div>
  86.     </div>
  87.   
  88.     <footer class="my-5 pt-5 text-muted text-center text-small">
  89.       <p class="mb-1">Agence Hoplie</p>
  90.     </footer>
  91.   </main>
  93.   <script>
  94.     const urgent = document.querySelector('#support_is_blocking');
  96.     urgent.addEventListener('click', () => {
  97.       const blocks = document.querySelector('.blocking');
  98.       console.log(urgent.checked);
  99.       if (urgent.checked == true) {
  100.         blocks.style.display = 'block';
  101.       } else if (urgent.checked == false) {
  102.         blocks.style.display = 'none';
  103.       }
  104.     });
  105.   </script>
  106. {% endblock %}