templates/front/layout/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'front/base.html.twig' %}
  2. {% block seo %}
  3.     {% include 'front/partials/seo.html.twig' %}
  4.     {% include 'front/partials/social.html.twig' %}
  5. {% endblock seo %}
  6. {% block stylesheet %}{{ parent() }}{% endblock stylesheet %}
  8. {% block layout %}
  9.     {# hero #}
  10.     <section class="bg-orange text-white pb-25 contact-hero">
  11.         <div class="fluid-grid lg:pt-13">
  12.             {% include 'front/partials/breadcrumb.html.twig' with {theme: 'orange-dark' } %}
  14.             <div class="row pt-10 xl:pt-0">
  15.                 <div class="col-12 lg-col-10 lg-col-offset-1">
  16.                     <h1 class="title font-light title--XL mt-6">
  17.                         Un besoin ? Une question ?
  18.                         <span>Contactez-nous !</span>
  19.                     </h1>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </section>
  25.     {# content #}
  26.     <div class="fluid-grid">
  27.         <div class="row pb-14 md:pb-20">
  28.             <div class="col-12 lg-col-10 xl-col-8 lg-col-offset-1 xl-col-offset-2">
  29.                 {# push #}
  30.                 {% include 'front/partials/push-adherent-contact.html.twig' %}
  32.                 <div class="contact-phone text-violet-dark">Contactez le standard de la CGF au <a href="tel:0144553500" class="font-weight-semibold">01 44 55 35 00</a></div>
  33.                 {# form #}
  34.                 <h2 class="title--L font-semibold text-violet-dark mb-6 md:mb-8">Vos informations</h2>
  36.                 <form action="" id="contact-form" class="form" js-form-validation="{isCustomSubmit: true}"
  37.                       js-form="{type: 'contact', url: '/contact-form/submit', success: 'Votre demande de contact a bien été envoyée.'}">
  38.                     {# identity #}
  39.                     <fieldset>
  40.                         <legend class="form__subtitle">Votre identité</legend>
  42.                         <fieldset class="form__row" js-form-validation-field-wrapper>
  43.                             <legend class="sr-only">Civilité</legend>
  45.                             <div class="flex flex-wrap mb-4 gap-3 md:gap-8">
  46.                                 <div class="custom-radio">
  47.                                     <input type="radio" id="civility-mr" name="contact[civility]" value="Monsieur"
  48.                                            required js-form-validation-field data-validation-type="radio"/>
  49.                                     <label class="form__label custom-radio__label" for="civility-mr">Monsieur</label>
  50.                                 </div>
  51.                                 <div class="custom-radio">
  52.                                     <input type="radio" id="civility-mme" name="contact[civility]" value="Madame"/>
  53.                                     <label class="form__label custom-radio__label" for="civility-mme">Madame</label>
  54.                                 </div>
  55.                                 <div class="custom-radio">
  56.                                     <input type="radio" id="civility-no" name="contact[civility]" value="Non spécifié"/>
  57.                                     <label class="form__label custom-radio__label" for="civility-no">Non
  58.                                         spécifié</label>
  59.                                 </div>
  60.                             </div>
  61.                         </fieldset>
  63.                         <div class="flex flex-wrap justify-between">
  64.                             <div js-form-validation-field-wrapper class="form__row form__row--half">
  65.                                 <label class="form__label" for="name">Nom<sup>*</sup></label>
  66.                                 <input class="text-input" type="text" id="name" name="contact[lastName]"
  67.                                        placeholder="Votre nom" required js-form-validation-field/>
  68.                             </div>
  69.                             <div js-form-validation-field-wrapper class="form__row form__row--half">
  70.                                 <label class="form__label" for="firstname">Prénom<sup>*</sup></label>
  71.                                 <input class="text-input" type="text" id="firstname" name="contact[firstName]"
  72.                                        placeholder="Votre prénom" required js-form-validation-field/>
  73.                             </div>
  74.                             <div js-form-validation-field-wrapper class="form__row form__row--half">
  75.                                 <label class="form__label" for="phone">Téléphone<sup>*</sup></label>
  76.                                 <input class="text-input" type="tel" id="phone" name="contact[phone]"
  77.                                        data-validation-type="tel" placeholder="Votre numéro de téléphone" required
  78.                                        js-form-validation-field/>
  79.                             </div>
  80.                             <div js-form-validation-field-wrapper class="form__row form__row--half">
  81.                                 <label class="form__label" for="mail">Adresse mail<sup>*</sup></label>
  82.                                 <input class="text-input" type="mail" id="mail" name="contact[email]"
  83.                                        data-validation-type="email" placeholder="Votre adresse mail" required
  84.                                        js-form-validation-field/>
  85.                             </div>
  86.                         </div>
  87.                     </fieldset>
  89.                     {# contact #}
  90.                     <fieldset class="mt-10 md:mt-12">
  91.                         <legend class="form__subtitle">La raison de votre prise de contact</legend>
  93.                         <div class="flex flex-wrap justify-between">
  94.                             <div js-form-validation-field-wrapper class="form__row form__row--half">
  95.                                 <label class="form__label" for="company">Société<sup>*</sup></label>
  96.                                 <input class="text-input" type="text" id="company" name="contact[company]"
  97.                                        placeholder="Votre société" required js-form-validation-field/>
  98.                             </div>
  99.                             <div js-form-validation-field-wrapper class="form__row form__row--half">
  100.                                 <label class="form__label" for="job">Fonction<sup>*</sup></label>
  101.                                 <input class="text-input" type="text" id="job" name="contact[job]"
  102.                                        placeholder="Votre fonction" required js-form-validation-field/>
  103.                             </div>
  104.                             {#<div js-form-validation-field-wrapper class="form__row has-placeholder with-placeholder">
  105.                                 <label class="form__label" for="division">Département<sup>*</sup></label>
  106.                                 <select js-form-validation-field required js-custom-select="{hasPlaceholder: true}"
  107.                                         name="contact[division]" id="division">
  108.                                     <option value="">Quel département souhaitez-vous contacter ?</option>
  109.                                     <option value="département 1">Département 1</option>
  110.                                     <option value="département 2">Département 2</option>
  111.                                 </select>
  112.                             </div>#}
  113.                             <div js-form-validation-field-wrapper class="form__row has-placeholder with-placeholder">
  114.                                 <label class="form__label" for="reason">Prise de contact<sup>*</sup></label>
  115.                                 <select js-form-validation-field required js-custom-select="{hasPlaceholder: true}"
  116.                                         name="contact[reason]" id="reason">
  117.                                     <option value="">Quelle est la raison de votre prise de contact ?</option>
  118.                                     <option value="À propos du site">À propos du site</option>
  119.                                     <option value="À propos de la CGF">À propos de la CGF</option>
  120.                                     <option value="Relations Presse">Relations Presse</option>
  121.                                     <option value="Partenariats">Partenariats</option>
  122.                                     <option value="Demande d'adhésion">Demande d'adhésion</option>
  123.                                     <option value="Autres">Autres</option>
  124.                                 </select>
  125.                             </div>
  126.                             <div js-form-validation-field-wrapper class="form__row">
  127.                                 <label class="form__label" for="message">Message<sup>*</sup></label>
  128.                                 <textarea class="text-input text-input--area" name="contact[message]" id="message"
  129.                                           cols="30" rows="8" placeholder="Écrivez votre message" required
  130.                                           js-form-validation-field></textarea>
  131.                             </div>
  132.                         </div>
  133.                     </fieldset>
  135.                     {{ render_esi(controller('App\\Controller\\FrontController::generateCSRF', {
  136.                         'key': 'contact_form',
  137.                         'fieldName': 'contact'
  138.                     })) }}
  139. {#                    <input js-form-validation-field type="hidden" name="contact[token]"#}
  140. {#                           value="{{ csrf_token('contact_form') }}"/>#}
  142.                     <p class="form__mandatory"><sup>*</sup>champs obligatoires</p>
  144.                     <div js-form-field-wrapper class="mt-4 md:mt-6">
  145.                         <div class="custom-checkbox">
  146.                             <input type="checkbox" id="rgpd" name="rgpd" required js-form-validation-field
  147.                                    data-validation-type="checkbox"/>
  148.                             <label class="custom-checkbox__label custom-checkbox__label--violet font-medium" for="rgpd">En
  149.                                 soumettant ce formulaire, j’accepte que les informations saisies soient collectées pour
  150.                                 permettre de me recontacter et dans le cadre de la relation commerciale qui pourrait
  151.                                 découler de cette demande d’informations.<sup>*</sup></label>
  152.                         </div>
  153.                     </div>
  155.                     <p class="form__legals mt-2 mb-6 md:mb-10">
  156.                         Les informations recueillies par la CGF via ce formulaire feront l’objet d’un traitement informatique envoyé aux services de la communication et du développement pour être utilisées à des fins statistiques et de prospection commerciale. Conformément au règlement général sur la protection des données, vous pouvez accéder aux données vous concernant, les rectifier, demander leur effacement ou exercer votre droit à la limitation du traitement de vos données en contactant les équipes de la CGF.
  157.                     </p>
  159.                     <button class="button button--arrow button--rounded button--orange">
  160.                         <span class="font-weight-bold">Envoyer</span>
  161.                         <svg width="12" height="12" class="picto icon ml-2 flex-shrink-0">
  162.                             <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  163.                         </svg>
  164.                     </button>
  165.                 </form>
  166.             </div>
  167.         </div>
  168.     </div>
  170.     {% if page.slices|length > 0 %}
  171.     <div>
  172.         {% include 'front/slices/index.html.twig' with {'slices': page.slices} %}
  173.     </div>
  174.     {% endif %}
  175. {% endblock layout %}
  177. {% block javascript %}{{ parent() }}{% endblock javascript %}