Send contact form via an ajax call instead of directly redirecting to the php script
This commit is contained in:
parent
2076740bf7
commit
e76b0dcb13
src
@ -10,7 +10,10 @@
|
||||
{% elif contactTitle %}
|
||||
<h2 id="contact-form" class="[ contact-heading ]">{{ contactTitle }}</h2>
|
||||
{% endif %}
|
||||
<form name="contact" method="POST" action="/form/contact-form-handler.php">
|
||||
|
||||
<div class="form-messages" aria-live="polite"></div>
|
||||
|
||||
<form name="contact" method="POST" action="/form/contact-form-handler.php" class="contact-form">
|
||||
<ol class="[ field-list ]">
|
||||
<li class="[ field-list__field-group ]">
|
||||
{{ label("Nom", "namezzz") }}
|
||||
@ -30,7 +33,7 @@
|
||||
{% else %}
|
||||
{{ select( "select", [
|
||||
{label: "Obtenir un rendez-vous (décrivez votre projet en quelques lignes)", value: "option 1"},
|
||||
{label: "Obtenir des précisions sur le statut d’entrepreneur salarié", value: "option 2"},
|
||||
{label: "Obtenir des précisions sur le statut d'entrepreneur salarié", value: "option 2"},
|
||||
{label: "Proposer une mission à un coopérateur", value: "option 3"},
|
||||
{label: "Proposer un partenariat", value: "option 4"}
|
||||
], { required: true, options_before: [""], options_after: ["Autre demande"] } ) }}
|
||||
@ -44,7 +47,7 @@
|
||||
{{ hidden_field('subscribe', '') }}
|
||||
{% else %}
|
||||
<li class="[ field-list__field-group ] [ full-width ]">
|
||||
{{ checkboxes("", "subscribe", [ "Je souhaite être tenu au courant de l’actualité Astrolabe"], { description: "" } ) }}
|
||||
{{ checkboxes("", "subscribe", [ "Je souhaite être tenu au courant de l'actualité Astrolabe"], { description: "" } ) }}
|
||||
</li>
|
||||
{% endif %}
|
||||
<!-- H o n e y p o t -->
|
||||
@ -67,3 +70,71 @@
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.form-messages {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-messages .error {
|
||||
color: #dc3545;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-messages .success {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: #dc3545;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.querySelector('.contact-form');
|
||||
const messagesContainer = document.querySelector('.form-messages');
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Clean previous messages
|
||||
messagesContainer.innerHTML = '';
|
||||
|
||||
// Get form data
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
const response = await fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Display success message
|
||||
messagesContainer.innerHTML = `<div class="success">${data.message}</div>`;
|
||||
form.reset();
|
||||
// Redirect to thank you page
|
||||
window.location.href = '/thank-you/index.html';
|
||||
} else {
|
||||
// Display errors
|
||||
const errorHtml = data.errors.map(error =>
|
||||
`<div class="error">${error}</div>`
|
||||
).join('');
|
||||
messagesContainer.innerHTML = errorHtml;
|
||||
|
||||
// Scroll to error messages
|
||||
messagesContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
} catch (error) {
|
||||
messagesContainer.innerHTML = `
|
||||
<div class="error">Une erreur est survenue lors de l'envoi du formulaire. Veuillez réessayer.</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -3,9 +3,12 @@ require("/usr/share/php/libphp-phpmailer/autoload.php");
|
||||
use PHPMailer\PHPMailer\PHPMailer;
|
||||
use PHPMailer\PHPMailer\Exception;
|
||||
|
||||
// Set header to return JSON
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$mail = new PHPMailer(true);
|
||||
|
||||
$errors = '';
|
||||
$errors = [];
|
||||
$myEmail = getenv('ASTRO_SMTP_FROM');
|
||||
$myEmailSplitted = explode('@', $myEmail);
|
||||
$domainFromMyEmail = (
|
||||
@ -27,11 +30,11 @@ $hcaptchaSecret = getenv('HCAPTCHA_SECRET_KEY');
|
||||
$hcaptchaVerifyUrl = "https://api.hcaptcha.com/siteverify";
|
||||
|
||||
if(empty($_POST['namezzz']) || empty($_POST['emailzzz']) || empty($_POST['message'])) {
|
||||
$errors .= "\n Erreur : champs obligatoires manquants.";
|
||||
$errors[] = "Erreur : champs obligatoires manquants.";
|
||||
}
|
||||
|
||||
if(!empty($_POST['name']) && !empty($_POST['email'])) {
|
||||
$errors .= "\n Erreur : spam détecté.";
|
||||
$errors[] = "Erreur : spam détecté.";
|
||||
}
|
||||
|
||||
/* Captcha verification */
|
||||
@ -53,10 +56,10 @@ if(!empty($_POST['h-captcha-response'])) {
|
||||
$responseData = json_decode($response, true);
|
||||
|
||||
if(!$responseData['success']) {
|
||||
$errors .= "\n Erreur lors de la validation du captcha.";
|
||||
$errors[] = "Erreur lors de la validation du captcha.";
|
||||
}
|
||||
} else {
|
||||
$errors .= "\n Erreur lors de la validation du captcha.";
|
||||
$errors[] = "Erreur lors de la validation du captcha.";
|
||||
}
|
||||
|
||||
$name = $_POST['namezzz'];
|
||||
@ -66,81 +69,84 @@ $message = $_POST['message'];
|
||||
$subscribe = $_POST['subscribe'];
|
||||
|
||||
if (!filter_var($emailAddress, FILTER_VALIDATE_EMAIL)) {
|
||||
$errors .= "\n Erreur d'adresse e-mail invalide : $emailAddress";
|
||||
$errors[] = "Erreur d'adresse e-mail invalide : $emailAddress";
|
||||
}
|
||||
|
||||
if(empty($errors)) {
|
||||
$emailSubject = "[Formulaire Astrolabe] Nouveau message";
|
||||
try {
|
||||
$emailSubject = "[Formulaire Astrolabe] Nouveau message";
|
||||
|
||||
switch ($select) {
|
||||
case "option 1":
|
||||
$purpose = "Demande de rendez-vous";
|
||||
break;
|
||||
case "option 2":
|
||||
$purpose = "Demande de précisions sur le statut d’entrepreneur salarié";
|
||||
break;
|
||||
case "option 3":
|
||||
$purpose = "Proposition de misson";
|
||||
break;
|
||||
case "option 4":
|
||||
$purpose = "Proposition de partenariat";
|
||||
break;
|
||||
default:
|
||||
$purpose = "Autre demande";
|
||||
switch ($select) {
|
||||
case "option 1":
|
||||
$purpose = "Demande de rendez-vous";
|
||||
break;
|
||||
case "option 2":
|
||||
$purpose = "Demande de précisions sur le statut d'entrepreneur salarié";
|
||||
break;
|
||||
case "option 3":
|
||||
$purpose = "Proposition de misson";
|
||||
break;
|
||||
case "option 4":
|
||||
$purpose = "Proposition de partenariat";
|
||||
break;
|
||||
default:
|
||||
$purpose = "Autre demande";
|
||||
}
|
||||
$emailSubject .= " : $purpose";
|
||||
|
||||
$emailBody = "Vous avez reçu un nouveau message depuis le formulaire du site Astrolabe :".
|
||||
"\r\n\r\nNom: $name \r\nEmail: $emailAddress \r\nRaison: $purpose\r\nSubscribe: $subscribe\r\n\r\n$message";
|
||||
|
||||
$emailBodyHTML = str_replace("\r\n", "<br>", $emailBody);
|
||||
|
||||
$mail->isSMTP();
|
||||
$mail->Host = getenv('ASTRO_SMTP_HOSTNAME');
|
||||
$mail->SMTPAuth = true;
|
||||
$mail->Username = getenv('ASTRO_SMTP_USERNAME');
|
||||
$mail->Password = getenv('ASTRO_SMTP_PASSWORD');
|
||||
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
|
||||
$mail->Port = 587;
|
||||
|
||||
//Options
|
||||
$mail->CharSet = 'UTF-8';
|
||||
$mail->WordWrap = 70;
|
||||
|
||||
//Recipients
|
||||
$mail->setFrom($myEmail);
|
||||
$mail->addAddress($wantedContact);
|
||||
$mail->addReplyTo($emailAddress, $name);
|
||||
|
||||
// Content
|
||||
$mail->isHTML(true);
|
||||
$mail->Subject = $emailSubject;
|
||||
$mail->Body = $emailBodyHTML;
|
||||
$mail->AltBody = $emailBody;
|
||||
|
||||
$mail->send();
|
||||
|
||||
// if subscribe add to mailing list
|
||||
if(!empty($subscribe)) {
|
||||
// process
|
||||
// enovoi mail add to mailing list
|
||||
}
|
||||
|
||||
http_response_code(200);
|
||||
echo json_encode([
|
||||
'success' => true,
|
||||
'message' => 'Message envoyé avec succès'
|
||||
]);
|
||||
|
||||
} catch (Exception $e) {
|
||||
http_response_code(500);
|
||||
echo json_encode([
|
||||
'success' => false,
|
||||
'errors' => ["Erreur lors de l'envoi du message : " . $mail->ErrorInfo]
|
||||
]);
|
||||
}
|
||||
$emailSubject .= " : $purpose";
|
||||
|
||||
$emailBody = "Vous avez reçu un nouveau message depuis le formulaire du site Astrolabe :".
|
||||
"\r\n\r\nNom: $name \r\nEmail: $emailAddress \r\nRaison: $purpose\r\nSubscribe: $subscribe\r\n\r\n$message";
|
||||
|
||||
$emailBodyHTML = str_replace("\r\n", "<br>", $emailBody);
|
||||
|
||||
$mail->isSMTP();
|
||||
$mail->Host = getenv('ASTRO_SMTP_HOSTNAME');
|
||||
$mail->SMTPAuth = true;
|
||||
$mail->Username = getenv('ASTRO_SMTP_USERNAME');
|
||||
$mail->Password = getenv('ASTRO_SMTP_PASSWORD');
|
||||
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
|
||||
$mail->Port = 587;
|
||||
|
||||
//Options
|
||||
$mail->CharSet = 'UTF-8';
|
||||
$mail->WordWrap = 70;
|
||||
|
||||
//Recipients
|
||||
$mail->setFrom($myEmail);
|
||||
$mail->addAddress($wantedContact);
|
||||
$mail->addReplyTo($emailAddress, $name);
|
||||
|
||||
// Content
|
||||
$mail->isHTML(true);
|
||||
$mail->Subject = $emailSubject;
|
||||
$mail->Body = $emailBodyHTML;
|
||||
$mail->AltBody = $emailBody;
|
||||
|
||||
$mail->send();
|
||||
|
||||
// if subscribe add to mailing list
|
||||
if(!empty($subscribe)) {
|
||||
// process
|
||||
// enovoi mail add to mailing list
|
||||
}
|
||||
|
||||
// redirect to the 'thank you' page
|
||||
header("Location: /thank-you/index.html");
|
||||
} else {
|
||||
http_response_code(400);
|
||||
echo json_encode([
|
||||
'success' => false,
|
||||
'errors' => $errors
|
||||
]);
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Contact form handler</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- This page is displayed only if there is some error -->
|
||||
<?php
|
||||
echo nl2br($errors);
|
||||
?>
|
||||
<a href="javascript:history.back()">Retour</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user