WordPress : Désactiver la soumission du formulaire de contact 7
J’utilise un formulaire de contact pour mon site Web WP. Je veux appeler une fonction avant de soumettre le formulaire.
J’ai pensé que je pouvais désactiver le formulaire de soumission en utilisant le code suivant :
let form = document.querySelector('form');
form.addEventListener('submit', function(ev){
ev.preventDefault();
//some more functions
});
Pour une raison quelconque, cela ne fonctionne pas et CF7 soumet toujours mon formulaire. Est-ce que quelqu’un sait comment empêcher la fonction de soumission.
Je ne veux pas utiliser la fonction désactivée sur le bouton car de cette façon le formulaire perd sa fonction d’origine.
Solution n°1 trouvée
L’option consiste à bloquer le « clic » sur l’entrée de soumission. Donc pas à 100% ce dont vous aviez besoin, mais pour moi ça fait le boulot.
Je ne sais pas si cela n’est pas contraire à votre condition pour éviter la « fonction désactivée sur le bouton », mais pour moi, le formulaire conserve la fonction d’origine, cela dépend uniquement de la décision de l’utilisateur.
<div class= »snippet » data-lang= »js » data-hide= »false » data-console= »true » data-babel= »false »>
var submit = document.getElementsByClassName('wpcf7-submit')[0];
submit.addEventListener('click', function(e) {
var confirmMessage = 'If you require a response, please make sure you have completed the Name and Email fields.';
if (!confirm(confirmMessage)) {
e.preventDefault();
}
});
<form method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
<p><label> Name<br>
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p>
<p><label> Email address<br>
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false"></span> </label></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
0 commentaire