templates/contact/index.html.twig line 1

  1. {% extends 'site.html.twig' %}
  3. {% block title %}Contact Guardian France - Services de Sécurité et Gardiennage SSIAP{% endblock %}
  5. {% block meta_description %}Contactez Guardian France pour des services de sécurité professionnels et de prévention afin de protéger votre entreprise et vos événements. Le groupe Guardian France est spécialiste de la sécurité événementielle, avec des agents cynophiles, vigiles, SSIAP et maîtres-chiens qualifiés disponibles.{% endblock %}
  7. {% block meta_keywords %}Guardian France, devis, sécurité, gardiennage, agent cynophile, vigile, SSIAP, maître-chien, protection, commerces, vitrines, rapports, documentation, événementiel, contrôle d'accès{% endblock %}
  9. {% block meta_itemprop %}<span itemprop="telephone">01 48 10 23 50</span>{% endblock %}
  12. {% block body %}
  14. {% if app.session.flashBag.has('success') %}
  15.     <script>
  16.         document.addEventListener('DOMContentLoaded', function() {
  17.             Swal.fire({
  18.                 icon: 'success',
  19.                 title: 'Message envoyé avec succès !',
  20.                 text: '{{ app.session.flashBag.get('success')[0] }}',
  21.               confirmButtonText: 'OK',
  22.                 customClass: {
  23.                     confirmButton: 'my-confirm-button-class'
  24.                 }
  25.             });
  26.           
  27.         });
  28.     </script>
  29. {% endif %}
  31.      <div class="container-fluid bg-primary py-5 bg-header-contact" style="margin-bottom:40px;">
  32.             <div class="row py-5">
  33.                 <div class="col-12 pt-lg-5 mt-lg-5 text-center">
  34.                 
  35.                     <a href="" class="h5 text-white"></a>
  36.                     
  37.                     <a href="" class="h5 text-white"></a>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.     </div>
  43.    
  45.     <!-- Contact Start -->
  46.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  47.         <div class="container py-5">
  48.             <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  49.                 <h5 class="fw-bold text-primary text-uppercase">Contactez nous</h5>
  50.                 <h1 class="mb-0">Protégez ce qui compte le plus pour vous.</h1>
  51.             </div>
  52.             <div class="row g-5 mb-5">
  53.                 <div class="col-lg-4">
  54.                     <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.1s">
  55.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  56.                             <i class="fa fa-phone-alt text-white"></i>
  57.                         </div>
  58.                         <div class="ps-4">
  59.                             <h5 class="mb-2">Pour toutes questions </h5>
  60.                             <h4 class="text-primary mb-0"><a href="tel:0148102350"> 01 48 10 23 50 </a></h4>
  61.                         </div>
  62.                     </div>
  63.                 </div>
  64.                 <div class="col-lg-4">
  65.                     <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.4s">
  66.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  67.                             <i class="fa fa-envelope-open text-white"></i>
  68.                         </div>
  69.                         <div class="ps-4">
  70.                             <h5 class="mb-2">Demandez un devis</h5>
  71.                             <h4 class="text-primary mb-0"><a href="mailto:contact@guardianfrance.fr"></a>contact@guardianfrance.fr</h4>
  72.                         </div>
  73.                     </div>
  74.                 </div>
  75.                 <div class="col-lg-4">
  76.                     <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.8s">
  77.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  78.                             <i class="fa fa-map-marker-alt text-white"></i>
  79.                         </div>
  80.                         <div class="ps-4">
  81.                             <h5 class="mb-2">5 Rue de Rome</h5>
  82.                             <h4 class="text-primary mb-0">
  83.                              Rosny-sous-Bois 93110 </h4>
  84.                         </div>
  85.                     </div>
  86.                 </div>
  87.             </div>
  88.             <div class="row g-5" style="  margin-top: 20px;">
  89.                 <div class="col-lg-6 wow slideInUp" data-wow-delay="0.3s">
  90.                     {{ form_start(form) }}
  91. <div class="row g-3">
  92.     <center>
  93.         <h5 class="fw-bold text-primary text-uppercase">Formulaire de contact</h5>
  94.     </center>
  95.     <div class="col-md-12">
  96.         {{ form_row(form.name, {'label_attr': {'class': 'required-label'}}) }}
  97.     </div>
  98.     <div class="col-md-12">
  99.         {{ form_row(form.firstname, {'label_attr': {'class': 'required-label'}}) }}
  100.     </div>
  101.     <div class="col-md-12">
  102.         {{ form_row(form.email, {'label_attr': {'class': 'required-label'}}) }}
  103.     </div>
  104.     <div class="col-md-12">
  105.         {{ form_row(form.phone, {'label_attr': {'class': 'required-label'}}) }}
  106.     </div>
  107.     <div class="col-md-12">
  108.         {{ form_row(form.society) }}
  109.     </div>
  110.     <div class="col-md-12 mb-3">
  111.         {{ form_row(form.city, {'label_attr': {'class': 'required-label'}}) }}
  112.     </div>
  113.     <div class="col-md-12 mb-3">
  114.         {{ form_row(form.adresse, {'label_attr': {'class': 'required-label'}}) }}
  115.     </div>
  116.     <div class="col-md-12 mb-3">
  117.         {{ form_row(form.zip, {'label_attr': {'class': 'required-label'}}) }}
  118.     </div>
  119.     <div class="col-md-12">
  120.         {{ form_row(form.services) }}
  121.     </div>
  122.     <div class="col-12">
  123.         {{ form_row(form.subject) }}
  124.     </div>
  125.     <div class="form-check">
  126.         {{ form_widget(form.consent, {'attr': {'class': 'form-check-input'}}) }}
  127.         {{ form_label(form.consent, null, {'label_attr': {'class': 'form-check-label'}}) }}
  128.     </div>
  129.     <div class="col-12">
  130.         <button class="btn btn-primary w-100 py-3" type="submit">Envoyer</button>
  131.     </div>
  132. </div>
  133. {{ form_end(form) }}
  135.                 </div>
  136.                 <div class="col-lg-6 wow slideInUp" data-wow-delay="0.6s">
  137.                    
  138.                         <iframe class="position-relative rounded w-100 h-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.088561559587!2d2.4706204337501334!3d48.875588241213386!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66cf9cdc9a9c5%3A0x2795130cad16ed6d!2sGUARDIAN%20FRANCE!5e0!3m2!1sfr!2sfr!4v1680827495891!5m2!1sfr!2sfr" frameborder="0" style="min-height: 350px; border:0;" allowfullscreen="" aria-hidden="false"
  139.                         tabindex="0"></iframe>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.     </div>
  144.     <!-- Contact End -->
  146.    <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  147.         <div class="container py-5 mb-5">
  148.             <div class="bg-white">
  149.                 <div class="owl-carousel vendor-carousel">
  150.                     <img src="/../assets/site/img/vendor-1.jpg" alt="">
  151.                     <img src="/../assets/site/img/vendor-2.jpg" alt="">
  152.                     <img src="/../assets/site/img/vendor-3.jpg" alt="">
  153.                     <img src="/../assets/site/img/vendor-4.jpg" alt="">
  154.                     <img src="/../assets/site/img/vendor-5.jpg" alt="">
  155.                     <img src="/../assets/site/img/vendor-6.jpg" alt="">
  156.                     <img src="/../assets/site/img/vendor-7.jpg" alt="">
  157.                     <img src="/../assets/site/img/vendor-8.jpg" alt="">
  158.                     <img src="/../assets/site/img/vendor-9.jpg" alt="">
  159.                 </div>
  160.             </div>
  161.         </div>
  162.     </div>
  164.  <style>
  165.  .custom-checkbox {
  166.     /* Styles pour la div englobant la case à cocher et son étiquette */
  167.     display: inline-flex;
  168.     align-items: center;
  169.     margin-right: 20px; /* Ajoutez un espacement à droite pour séparer ce champ des autres */
  170. }
  172. .custom-checkbox input {
  173.     /* Cachez la case à cocher native */
  174.     position: absolute;
  175.     opacity: 0;
  176. }
  178. .custom-checkbox input:checked + .form-check-label:before {
  179.     /* Styles pour la case cochée */
  180.     content: '\2713'; /* Utilisez ici un symbole de coche de votre choix */
  181.     margin-right: 5px;
  182.     font-size: 16px;
  183.     color: #007bff; /* Couleur de la coche cochée */
  184. }
  186. .form-check-label {
  187.     /* Styles pour l'étiquette du champ */
  188.     cursor: pointer;
  189. }
  190. .required-label::before {
  191.     content: "*";
  192.     color: red;
  193.     margin-right: 5px;
  194. }
  196.  </style> 
  197. {% endblock %}