templates/contact/form.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.     <div id="contact-form" class="container large-tile">
  6.         <h1>Nous contacter</h1>
  8.         {% for label, messages in app.flashes %}
  10.             {% for message in messages %}
  11.                 <p class="alert alert-{{ label }}">
  12.                     {{ message | nl2br }}
  13.                 </p>
  14.             {% endfor %}
  16.         {% else %}
  18.             <p>Vous pouvez nous envoyer un message à l'aide du formulaire ci-dessous.</p>
  19.             <p>Les informations marquées d'un astérisque (*) sont obligatoires.</p>
  21.             <form @submit="validate" action="{{ path('contact-action') }}" class="box" method="post"
  22.                   enctype="multipart/form-data">
  24.                 <div class="row">
  25.                     <div class="col col-xl-6 col-lg-6 col-sm-12 col-12">
  26.                         <div class="form-group">
  27.                             <label for="name" class="required">Nom et prénom *&nbsp;:&nbsp;</label>
  28.                             <input type="text" id="name" name="name"
  29.                                 {% if app.user %}
  30.                                     value="{{ connectedCustomer.get().getFullName | default('') }}"
  31.                                 {% else %}
  32.                                     value=""
  33.                                 {% endif %}
  34.                                    required class="form-control">
  35.                         </div>
  36.                         <div class="form-group">
  37.                             <label for="customer_email" class="required">Votre adresse e-mail *&nbsp;:&nbsp;</label>
  38.                             <input type="email" id="customer_email" name="customer_email"
  39.                                 {% if app.user %}
  40.                                     value="{{ connectedCustomer.getAccountInfo().getEmail | default('') }}"
  41.                                 {% else %}
  42.                                     value=""
  43.                                 {% endif %}
  44.                                    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  45.                                    required class="form-control">
  46.                         </div>
  47.                         <div class="form-group">
  48.                             <label for="phone" class="required">Téléphone *&nbsp;:&nbsp;</label>
  49.                             <input type="tel" id="phone" name="phone"
  50.                                    pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
  51.                                    minlength="10"
  52.                                 {% if app.user %}
  53.                                     value="{{ connectedCustomer.getAccountInfo().getPhoneNumber | default('') }}"
  54.                                 {% else %}
  55.                                     value=""
  56.                                 {% endif %}
  57.                                    required class="form-control">
  58.                         </div>
  59.                         <div class="form-group">
  60.                             <label for="reference">Référence client&nbsp;:&nbsp;</label>
  61.                             <input type="text" id="reference" name="reference"
  62.                                 {% if app.user %}
  63.                                     value="{{ connectedCustomer.get().getCliReference | default('') }}"
  64.                                 {% else %}
  65.                                     value=""
  66.                                 {% endif %}
  67.                                    class="form-control">
  68.                         </div>
  69.                         <div class="form-group">
  70.                             <label for="address" class="required">Adresse complète *&nbsp;:&nbsp;</label>
  71.                             <input type="text" id="address" name="address" required
  72.                                     {% if app.user %}
  73.                                         value="{{ connectedCustomer.getAddress().getAdrNumero() | default('') }} {{ connectedCustomer.getAddress().getRueNom() | default('') }} {{ connectedCustomer.getAddress().getAdrComplementrue() | default('') }}"
  74.                                     {% else %}
  75.                                         value=""
  76.                                     {% endif %}
  77.                                    class="form-control">
  78.                         </div>
  79.                         <div class="form-group">
  80.                             <label for="commune" class="required">Commune *&nbsp;:&nbsp;</label>
  81.                             <input type="text" id="commune" name="commune" required
  82.                                 {% if app.user %}
  83.                                     value="{{ connectedCustomer.getAddress().getVilNom() | default('') }}"
  84.                                 {% else %}
  85.                                     value=""
  86.                                 {% endif %}
  87.                                    class="form-control">
  88.                         </div>
  89.                     </div>
  90.                     <div class="col col-xl-6 col-lg-6 col-sm-12 col-12">
  91.                         <div class="form-group">
  92.                             <label for="subject" class="required">Objet de votre message *&nbsp;:&nbsp;</label>
  93.                             <input type="text" id="subject" name="subject" value="" required class="form-control"/>
  94.                         </div>
  95.                         <div class="form-group">
  96.                             <label for="message" class="required">Votre message *&nbsp;:&nbsp;</label>
  97.                             <textarea id="message" name="message" rows="10" cols="30" required
  98.                                       class="form-control"></textarea>
  99.                         </div>
  100.                         <div class="form-group documents">
  101.                             <label for="attachment">Joindre des documents :</label>
  102.                             <input type="hidden" name="MAX_FILE_SIZE" value="2000000">
  103.                             <p>
  104.                                 <label for="document1">Document 1 : </label>
  105.                                 <input type="file" id="document1" name="document1" value=""/>
  106.                             </p>
  107.                             <p>
  108.                                 <label for="document2">Document 2 : </label>
  109.                                 <input type="file" id="document2" name="document2" value=""/>
  110.                             </p>
  111.                             <p>
  112.                                 <small>
  113.                                     Attention, chaque fichier joint ne doit pas excéder un poids de 2 Mo.
  114.                                     <br/>
  115.                                     Seuls les fichiers PDF, DOC, DOCX, XLS, XLSX, JPG, PNG, ODT et ODS sont autorisés.
  116.                                 </small>
  117.                             </p>
  118.                         </div>
  119.                     </div>
  120.                 </div>
  122.                 <div v-if="errors.length" class="alert alert-danger">
  123.                     <p><strong>Certaines informations obligatoires sont manquantes : </strong></p>
  124.                     <p v-for="error in errors">${ error }</p>
  125.                 </div>
  127.                 <div class="widget widget-checkbox mandatory alert alert-info">
  128.                     <p>
  129.                         Conformément à la loi « Informatique et Libertés » modifiée, vous bénéficiez d’un droit d’accès, de rectification, d’effacement ou de limitation du traitement. Vous pouvez également pour des motifs légitimes, vous opposer au traitement de vos données.<br>
  130.                         Pour exercer vos droits, vous pouvez contacter le Service Clients de la Direction de l’Eau et de l’Assainissement via votre compte sur le site internet de l’eau <a href="https://ec-eau.grandreims.fr" target="_blank" rel="noopener">https://ec-eau.grandreims.fr</a> ou par courrier postal au Grand Reims Service Clients Eau - CS 80036 - 51722 REIMS CEDEX.<br>
  131.                         Vous avez également la possibilité de contacter notre délégué à la protection des données, pour toute information concernant vos données personnelles : <a href="mailto:dpo@grandreims.fr" title="dpo@grandreims.fr">dpo@grandreims.fr</a> ou d’introduire une réclamation auprès de la CNIL (<a href="https://www.cnil.fr" title="www.cnil.fr" target="_blank" rel="noopener">www.cnil.fr</a>).
  132.                     </p>
  134.                     <span>
  135.                         <input type="checkbox" name="rgpd" id="opt_rgpd" class="checkbox" value="oui" required="">
  136.                         <label id="rgpd" for="opt_rgpd">j’ai bien pris connaissance et j’accepte les conditions *</label>
  137.                     </span>
  138.                 </div>
  140.                 <p class="d-flex flex-row align-items-center justify-content-between">
  141.                     <span class="alert alert-warning">Vérifiez bien l'exactitude des informations fournies avant de valider ce formulaire.</span>
  142.                     <input type="submit" name="valider" value="envoyer mon message" class="button btn-primary">
  143.                 </p>
  144.             </form>
  146.         {% endfor %}
  148.         <p>Vous pouvez également nous contacter ou nous rencontrer à l'adresse :</p>
  150.         <div class="box">
  151.             <address>
  152.                 Hôtel de la Communauté
  153.                 <br>
  154.                 <a href="http://carto.ville-reims.fr/?/fr/_/lien/1/x/723687.04/y/174170.95/zoom/448.855/point/17124581643271500491/orthophoto/100"
  155.                    class="map"
  156.                    onclick="window.open(this.href,'', 'location=no,menubar=no,toolbar=no,width=800,height=600,resizable=yes');return false;">
  157.                     3, Rue Eugène Desteuque
  158.                 </a>
  159.                 <br>CS 80036
  160.                 <br>51722 REIMS Cedex
  161.                 <br>Du lundi au vendredi de 08h30 à 12h00 et de 13h30 à 17h00
  162.             </address>
  163.         </div>
  164.     </div>
  166. {% endblock %}