WordPress : Désactiver la soumission du formulaire de contact 7

Publié par Jean-Michel le

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>

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *