J'ai fais légèrement évoluer le code, le traitement du formulaire donne à présent les résultats différemment et le formulaire de contact contient une div span pour afficher les éléments.
La page contact.php (simplifiée) :
<?php
session_start();
require('IconCaptcha-PHP/src/captcha-session.class.php');
require('IconCaptcha-PHP/src/captcha.class.php');
IconCaptcha::setIconsFolderPath('../assets/icons/');
IconCaptcha::setIconNoiseEnabled(false);
?>
<!doctype html>
<html>
<head>
<!--SCRIPTS BOOTSTRAP-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
<script src="js/format_tel.js"></script>
<script src="js/isNumberKey.js"></script>
<script src="IconCaptcha-PHP/assets/js/icon-captcha.min.js" type="text/javascript">
</script>
<script src="js/ajax-contact.js"></script>
</head>
<body>
<!-- DEBUT FORMULAIRE CONTACT -->
<?php
if(isset($captchaMessage)) {
echo '<b>Captcha Message: </b>' . $captchaMessage;
}
?>
<form id="formulaire_contact" role="form" method="post" action="envoiformulaire.php">
<div class="row">
<div class="col-md-6 form-group">
<label for="first_name"></label>
<input id="firstname" name="first_name" type="text" class="form-control" placeholder="Prénom" required="required">
</div>
<div class="col-md-6 form-group">
<label for="last_name"></label>
<input id="lastname" name="last_name" type="text" class="form-control" placeholder="NOM" required="required">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label for="email"></label>
<input id="email" name="email" type="email" class="form-control" placeholder="Courriel" required="required">
</div>
<div class="col-md-6 form-group">
<label for="telephone"></label>
<input id="telephone" type="tel" name="telephone" onkeyup="formatte(this,2)" onkeypress="return isNumberKey(event)" class="form-control" placeholder="Téléphone" required="required" minlength="14" maxlength="14">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="comments"></label>
<textarea id="message" name="comments" class="form-control" placeholder="Message (400 caractères maximum)" rows="4" required="required"></textarea>
</div>
<div class="col-md-12 form-group">
<br><div class="captcha-holder"></div>
</div>
<div class="col-md-12 form-group">
<br> <input type="submit" id="btnContactUs" class="btn btn-success btn-send" value="Envoyer le message">
</div>
</div>
<span id="response"></span>
</form>
<!-- Affichage messages d'erreurs / succès d'envoi du formulaire -->
<div class="messages"></div>
<!-- Initialize IconCaptcha -->
<script async type="text/javascript">
$(window).ready(function() {
$('.captcha-holder').iconCaptcha({
theme: ['light'],
fontFamily: '',
clickDelay: 500,
invalidResetDelay: 3000,
requestIconsDelay: 1500,
loadingAnimationDelay: 1500,
hoverDetection: true,
showCredits: 'show',
enableLoadingAnimation: false,
validationPath: 'IconCaptcha-PHP/src/captcha-request.php',
messages: {
header: "Vous devez choisir, « …but, choose wiesly! »",
correct: {
top: "« You have chosen… wisely. »",
bottom: "Félicitations! Vous n'êtes pas un robot."
},
incorrect: {
top: "« You chose poorly! »",
bottom: "Oups! Mauvaise image."
}
}
})
.bind('init.iconCaptcha', function(e, id) {
console.log('Event: Captcha initialized', id);
}).bind('selected.iconCaptcha', function(e, id) {
console.log('Event: Icon selected', id);
}).bind('refreshed.iconCaptcha', function(e, id) {
console.log('Event: Captcha refreshed', id);
}).bind('success.iconCaptcha', function(e, id) {
console.log('Event: Correct input', id);
}).bind('error.iconCaptcha', function(e, id) {
console.log('Event: Wrong input', id);
});
});
</script>
</body>
</html>
Et la page envoiformulaiure.php
<?php
session_start();
header('Content-Type: text/html; charset=utf-8');
require('IconCaptcha-PHP/src/captcha-session.class.php');
require('IconCaptcha-PHP/src/captcha.class.php');
IconCaptcha::setIconsFolderPath('../assets/icons/');
IconCaptcha::setIconNoiseEnabled(true);
if(isset($_POST['email'])) {
$email_to = "contact@monsite.com";
$email_subject = "Nouveau message web";
function died($error) {
echo "Oups! Une ou plusieurs erreurs se trouvent dans votre formulaire.<br>";
echo $error."<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('Oups! Un problème est survenu avec votre formulaire.');
}
if(!IconCaptcha::validateSubmission($_POST)) {
died('CAPTCHA non validé !');
}
$first_name = $_POST['first_name']; // requis
$last_name = $_POST['last_name']; // requis
$email_from = $_POST['email']; // requis
$telephone = $_POST['telephone']; // requis
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp ='/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; // vérifier absence de caractères interdits
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'Le courriel saisi ne semble pas valide.<br />';
}
$phone_exp = "/^\d{2}\s\d{2}\s\d{2}\s\d{2}\s\d{2}/"; // de la forme XX XX XX XX XX avec 14 caractères
if(!preg_match( $phone_exp,$telephone)) {
$error_message .= 'Le numéro de téléphone saisi ne semble pas valide.<br />';
}
$string_exp = "/^[A-Za-z àèìòùÀÈÌÒÙáéíóúýÁÉÍÓÚÝâêîôûÂÊÎÔÛãñõÃÑÕäëïöüÿÄËÏÖÜŸçÇßØøÅåÆæœ.'-]+$/"; // lettres uniquement avec accents
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'Le prénom saisi ne semble pas valide.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'Le nom saisi ne semble pas valide.<br />';
}
if(strlen($comments) < 2) { // message en dessous de 2 carac tères
$error_message .= 'Le message saisi ne semble pas valide.<br />';
}
if(!empty($_POST)) {
if(IconCaptcha::validateSubmission($_POST)) {
$captchaMessage = 'Le message a bien été envoyé!';
} else {
$captchaMessage = json_decode(IconCaptcha::getErrorMessage())->error;
}
}
$email_message = "Ci-après le formulaire complété.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Prénom: ".clean_string($first_name)."\n";
$email_message .= "NOM: ".clean_string($last_name)."\n";
$email_message .= "Courriel: ".clean_string($email_from)."\n";
$email_message .= "Téléphone: ".clean_string($telephone)."\n";
$email_message .= "Message: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'Content-Type: text/plain; charset="utf-8"'.
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
echo "Message envoyé, merci!";
}
else{
echo $error_message;
}
}
}
?>
Et le traitement ajax :
$(document).ready(function () {
$(function() {
// Variable to hold request
var request;
// Bind to the submit event of our form
$("#formulaire_contact").submit(function(event){
// Prevent default posting of form - put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "../envoiformumlaire.php"
type: "post",
data: serializedData
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
$( "span#response" ).text('AJAX Response: ' + response)
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
});
});
});
Lors de l'envoi du formulaire, ça ne fonctionne pas, la page envoie vers une page vide avec dans l'adresse celle de ma page contact suivie d'un ? et du contenu du formulaire avec leurs champs.
