176 lines
8.2 KiB
PHP
176 lines
8.2 KiB
PHP
<h2 class="contacts-page-subtitle subtitle_paint"><?= the_title(); ?></h2>
|
||
<div class="contacts-category-page wrapper">
|
||
<div class="back-button-wrapper">
|
||
<a href="/nous-contacter/" class="back-button" title="Retour au choix de contact">Retour au choix de contact</a>
|
||
</div>
|
||
<div class="contacts-form__wrapper">
|
||
<form class="form">
|
||
<div class="form__container">
|
||
<div class="form__row">
|
||
<div class="form__field">
|
||
<div class="form__field-title">Nom *</div>
|
||
<input type="text" name="lastname" size="40" class="form__input" placeholder="Votre Nom" required>
|
||
</div>
|
||
<div class="form__field">
|
||
<div class="form__field-title">Prénom *</div>
|
||
<input type="text" name="firstname" size="40" class="form__input" placeholder="Votre Prénom" required>
|
||
</div>
|
||
</div>
|
||
<div class="form__row">
|
||
<div class="form__field">
|
||
<div class="geographic-checkboxes-block">
|
||
<div class="form__field-title">Type *</div>
|
||
<div class="geographic-checkboxes-result form__input"><span class="zones-wrapper">Liste déroulante</span></div>
|
||
<div class="geographic-checkboxes-list">
|
||
<?php $typesList = ["Client", "Fournisseur", 'Autre']; ?>
|
||
<?php foreach ($typesList as $t): ?>
|
||
<label class="form__field-pseudolabel">
|
||
<input type="checkbox" name="types" value="<?= $t; ?>" required>
|
||
<span class="form__field-pseudosquare"><?= $t; ?></span>
|
||
</label>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form__row">
|
||
<div class="form__field">
|
||
<div class="form__field-title">Code postal *</div>
|
||
<input type="text" name="postalcode" size="40" class="form__input" placeholder="Votre code postal" required>
|
||
</div>
|
||
<div class="form__field">
|
||
<div class="form__field-title">Ville *</div>
|
||
<input type="text" name="town" size="40" class="form__input" placeholder="Votre ville" required>
|
||
</div>
|
||
</div>
|
||
<div class="form__field">
|
||
<div class="form__field-title">Pays *</div>
|
||
<input type="text" name="country" size="40" class="form__input" placeholder="Votre pays" required>
|
||
</div>
|
||
<div class="form__row">
|
||
<div class="form__field">
|
||
<div class="form__field-title">Adresse Email *</div>
|
||
<input type="email" name="email" size="40" class="form__input" aria-required="true" aria-invalid="false" placeholder="Prenom.nom@mail.fr" required>
|
||
</div>
|
||
<div class="form__field">
|
||
<div class="form__field-title">Téléphone</div>
|
||
<input type="tel" name="phone" size="20" class="form__input" placeholder="Par exemple, 02 43 62 70 00">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form__container">
|
||
<div class="form__field-title">Message *</div>
|
||
|
||
<div class="form__field">
|
||
<textarea name="message" cols="40" rows="10" class="form__input" placeholder="Détailler ici votre projet et votre demande" required></textarea>
|
||
</div>
|
||
|
||
<div class="form__row">
|
||
<div class="form__field">
|
||
<label class="form__field-pseudolabel">
|
||
<input type="checkbox" name="agree">
|
||
<span class="form__field-pseudosquare">J’accepte les conditions d’utilisation *</span>
|
||
</label>
|
||
<label class="form__field-pseudolabel">
|
||
<input type="checkbox" name="newsletter">
|
||
<span class="form__field-pseudosquare">Je souhaite m’inscrire à la newsletter</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form__field"><div class="form__tip">* Champs obligatoires</div></div>
|
||
</div>
|
||
|
||
<div class="form__row">
|
||
<!-- TODO : Gestion recaptcha -->
|
||
<div class="form__field">[recaptcha]</div>
|
||
</div>
|
||
|
||
<div class="form__response" style="display: none;">Un ou plusieurs champs contiennent une erreur. Veuillez vérifier et essayer à nouveau.</div>
|
||
|
||
<div class="form__row">
|
||
<div class="form-submit">
|
||
<input type="submit" value="Envoyer" class="form-submit__btn btn">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
let lastname = $("input[name=lastname]");
|
||
let firstname = $("input[name=firstname]");
|
||
let postalcode = $("input[name=postalcode]");
|
||
let country = $("input[name=country]");
|
||
let town = $("input[name=town]");
|
||
let email = $("input[name=email]");
|
||
let phone = $("input[name=phone]");
|
||
let message = $("textarea[name=message]");
|
||
let agree = $("input[name=agree]");
|
||
// TODO : Gestion newsletter
|
||
let newsletter = $("input[name=newsletter]");
|
||
|
||
function reset(){
|
||
lastname.val('');
|
||
firstname.val('');
|
||
postalcode.val('');
|
||
country.val('');
|
||
town.val('');
|
||
email.val('');
|
||
phone.val('');
|
||
message.val('');
|
||
|
||
$('input[name=types]').prop("checked", false);
|
||
$('.geographic-checkboxes-result').html('');
|
||
|
||
agree.prop("checked", false);
|
||
newsletter.prop("checked", false);
|
||
}
|
||
|
||
$("input[type=submit]").on('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
let types = $('input[name=types]:checked').map(function(_, el) {
|
||
return $(el).val();
|
||
}).get();
|
||
|
||
if (lastname.val().length > 0 && firstname.val().length > 0 && postalcode.val().length > 0 && country.val().length > 0 && town.val().length > 0 && email.val().length > 0 && message.val().length > 0 && types.length > 0) {
|
||
|
||
$(".form__response").hide();
|
||
|
||
if (agree.is(':checked') === false){
|
||
alert("Vous devez accepter les conditions d'utilisation.");
|
||
}else{
|
||
$.ajax({
|
||
type: "POST",
|
||
url: window.location.origin + '/wp-admin/admin-ajax.php',
|
||
data: {
|
||
'action': 'ContactAjx',
|
||
'id': <?= $post->ID; ?>,
|
||
'firstname': firstname.val(),
|
||
'lastname': lastname.val(),
|
||
'postalcode': postalcode.val(),
|
||
'country': country.val(),
|
||
'town': town.val(),
|
||
'email': email.val(),
|
||
'phone': phone.val(),
|
||
'message': message.val(),
|
||
'type': types
|
||
},
|
||
success: function (response, textStatus, jqXHR ) {
|
||
reset();
|
||
alert('Bonjour. Nous vous remercions de nous avoir contactés pour une demande liée à l\'Export. Notre équipe vous répondra dans les meilleurs délais.');
|
||
},
|
||
error: function(jqXHR, textStatus, errorThrown) {
|
||
alert('Une erreur est survenue, veuillez recharger la page.');
|
||
}
|
||
});
|
||
}
|
||
}else{
|
||
$(".form__response").show();
|
||
}
|
||
|
||
});
|
||
</script>
|