{% extends 'base.html.twig' %}
{% block title %}
Nous contacter
{% endblock %}
{% block body %}
<section class="contact-hero-section wf-section">
<div class="main-container">
<div class="contact-hero-container">
<div class="contact-hero-heading-container">
<h1 class="h1-m white-font">Une question, besoin d'aide ? </h1>
</div>
<div class="contact-sub-text-container">
<p class="paragraph-white">
Contactez-nous au plus vite, notre équipe vous réponds dans les plus brefs délais...
</p>
</div>
</div>
</div>
<div class="section-bottom-divider"></div>
</section>
<section class="contact-form-section wf-section">
<div class="main-container specFlex">
<div class="contact-flex-container">
<div class="contact-form-container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="contact-form-heading-container">
<h2 class="h4-m">Nous contacter</h2>
</div>
</div>
<div class="contact-form w-form">
<!-- formulaire -->
{{ form_start(form, {'attr': {'class': 'form_theme','id':'formContact'}}) }}
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 with-margin-top-20">
<div class="standard size-16 with-margin-bottom-10">
{% if message is not null %}
<div class="alert alert-primary" role="alert">
Votre message a été envoyé avec succès. Un de nos conseiller traitera votre demande dans les plus brefs délais.
</div>
{% else %}
Pour contacter nos équipes, veuillez remplir le formulaire ci-dessous.
{% endif %}
</div>
</div>
<input name="table" type="hidden" value="form"/>
<input name="action" type="hidden" value="contact"/>
<input name="form_contact" type="hidden" value="" class="" />
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 with-margin-top-10">
{{ form_row(form.nom) }}
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 with-margin-top-10">
{{ form_row(form.prenom) }}
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 with-margin-top-10">
{{ form_row(form.email) }}
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 with-margin-top-10">
{{ form_row(form.objet) }}
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 with-margin-top-10 unl-padding-bottom">
{{ form_row(form.message) }}
<br/>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 with-margin-top-10">
<div class="width-max red-color erase captchaMsg">
Merci de valider que vous n'êtes pas un robot.
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 with-margin-top-10 unl-padding-bottom">
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="6LcRDpogAAAAALaANabiRDff_Gz5H56gtrQXNr2h"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 with-margin-top-10 unl-padding-bottom">
<button disabled id="validForm" class="button_theme erase unl-border">
Envoyer ma demande
</button>
</div>
</div>
{{ form_end(form) }}
<div class="w-form-done" tabindex="-1" role="region" aria-label="Contact Form success">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="w-form-fail" tabindex="-1" role="region" aria-label="Contact Form failure">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
<address class="contact-address-container with-margin-top-20">
<div class="contact-address-block">
<div class="contact-address-icon-container">
<div class="contact-address-icon"><img
src="{{ asset('images/themes/614969c234f1d0429112e0a4_smartphone.svg') }}"
loading="lazy" alt="smartphone icon"></div>
</div>
<div class="contact-address-text-container">
<div class="contact-address-heading-container">
<div class="h6-m">Téléphone</div>
</div>
<div class="contact-address-paragraph-container">
<p class="para-17">
+41 78 236 90 90
</p>
</div>
</div>
</div>
</address>
</div>
</div>
</section>
<section class="faq-section wf-section">
<div class="main-container">
<div class="faq-container">
<div class="faq-heading-container">
<h2 class="h3-m">Foire aux questions (F.A.Q)</h2>
</div>
<div class="faq-sub-text-container">
<p class="align-center">
Obtenez des réponses rapides d'une équipe d'assistance amicale, professionnelle et compétente.
</p>
</div>
<div class="faq-accordion-container">
<div class="c-faq">
<div data-click="faq" class="c-faq-item">
<div class="c-faq-q">
<div class="c-faq-q-text">
<h3 class="h5-m">L'étude est-elle payante ?</h3>
</div>
<div class="c-faq-icon">
<div class="_w-faq-icon"
style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
<div class="faq-stripe-1" style="opacity: 1;"></div>
<div class="faq-stripe-2"></div>
</div>
</div>
</div>
<div class="c-faq-a erase">
<div class="c-faq-divider">
<div class="faq-divider"></div>
</div>
<div class="c-faq-a-text">
<p class="para-17">Non, nous réalisons votre étude en ligne gratuitement.</p>
</div>
</div>
</div>
<div data-click="faq" class="c-faq-item">
<div class="c-faq-q">
<div class="c-faq-q-text">
<h3 class="h5-m">Le déplacement de l'expert est-il payant ?</h3>
</div>
<div class="c-faq-icon">
<div class="_w-faq-icon"
style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
<div class="faq-stripe-1" style="opacity: 1;"></div>
<div class="faq-stripe-2"></div>
</div>
</div>
</div>
<div class="c-faq-a erase">
<div class="c-faq-divider">
<div class="faq-divider"></div>
</div>
<div class="c-faq-a-text">
<p class="para-17">Non, le déplacement de notre expert est pris en charge pas nos soins, il est donc complètement gratuit.</p>
</div>
</div>
</div>
<div data-click="faq" class="c-faq-item">
<div class="c-faq-q">
<div class="c-faq-q-text">
<h3 class="h5-m">En cas de panne, que dois-je faire ?</h3>
</div>
<div class="c-faq-icon">
<div class="_w-faq-icon"
style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
<div class="faq-stripe-1" style="opacity: 1;"></div>
<div class="faq-stripe-2"></div>
</div>
</div>
</div>
<div class="c-faq-a erase">
<div class="c-faq-divider">
<div class="faq-divider"></div>
</div>
<div class="c-faq-a-text">
<p class="para-17">
Dans le cadre d'une panne d'un ou plusieurs panneaux photovoltaïques, contactez notre support en indiquant votre numéro de commande ou référence client.
</p>
</div>
</div>
</div>
<div data-click="faq" class="c-faq-item">
<div class="c-faq-q">
<div class="c-faq-q-text">
<h3 class="h5-m">Est-il possible de calculer mes économies avec vos panneaux photovoltaïques ?</h3>
</div>
<div class="c-faq-icon">
<div class="_w-faq-icon"
style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
<div class="faq-stripe-1" style="opacity: 1;"></div>
<div class="faq-stripe-2"></div>
</div>
</div>
</div>
<div class="c-faq-a erase">
<div class="c-faq-divider">
<div class="faq-divider"></div>
</div>
<div class="c-faq-a-text">
<p class="para-17">
Oui, il est possible de calculer les différents gains de vos panneaux photovoltaïques, pour cela rendez-vous sur le compteur et cliquez sur la flèche de droite.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block javascriptFooter %}
<script type="text/javascript">
var onloadCallback = function() {
};
</script>
<script>
function recaptchaCallback() {
$('.captchaMsg').hide();
var response = grecaptcha.getResponse();
if(response.length == 0){
$('.captchaMsg').show();
}else{
$('#validForm').attr('disabled', false);
$('#validForm').show();
}
}
$(document).ready(function(){
if(width > 1024){
var background = "url('/images/fonds/fond-contact.jpg')";
$('#zone_contact').css({'background-image':background,
'background-repeat':'no-repeat',
'background-position':'center',
'background-size':'cover'
});
}
$('#form_contact_submit').submit(function(e){
e.preventDefault();
var post = $('#form_contact_submit').serialize();
$('#form_contact_submit').hide();
$('#form_attente').show();
$.ajax({
url : formURL,
type: "POST",
data : post,
success:function(data, textStatus, jqXHR)
{
if(data == 'NOT OK'){
$('#form_contact_submit').show();
$('#form_attente').hide();
}else{
$('#form_attente').hide();
$('#message_reussite').show();
}
},
complete:function(){
$("input[name='nom']").val('');
$("input[name='objet']").val('');
$("input[name='email']").val('');
$("input[name='telephone']").val('');
$("#message").val('');
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
});
$('.c-faq-item').click(function(){
if($(this).hasClass('openFaq')){
$(this).removeClass('openFaq');
$(this).find('.c-faq-a').hide();
}else{
$(this).addClass('openFaq');
$('.c-faq-a').hide();
$(this).find('.c-faq-a').show();
}
});
});
</script>
{% endblock %}