web-dev-qa-db-fra.com

Modifier la valeur d'entrée du formulaire de contact 7 avant la soumission

J'utilise le formulaire de contact 7 et Flamingo pour créer un formulaire d'inscription de consultant sur mon site Wordpress. À la demande de mon client, chaque soumission doit avoir un code d'enregistrement (reg_code) qui combine la date de soumission et un numéro aléatoire pour le rendre unique.

J'ai donc ajouté un champ de saisie masqué à mon code CF7 avec l'id "reg_code". Lors de mon premier essai, j’ai utilisé JS pour générer une variable "reg_code" juste après que les utilisateurs ont visité mon site et défini la valeur du champ masqué sur la variable générée "reg_code". Le "reg_code" a bien été enregistré dans la soumission CF7, mais dans certains cas, lorsqu'un utilisateur ne soumettait pas le formulaire lors de la première visite mais au bout de quelques jours, la partie de la date de son "reg_code" ne serait plus correcte car ce code a été généré à sa première visite et mis en cache dans le navigateur.

Pour éviter ce problème, j'ai décidé de déplacer la fonction de génération "reg_code" de JS vers PHP et la procédure serait la suivante:

  1. Bouton Soumettre cliqué
  2. Utilisez AJAX pour appeler une fonction PHP qui renvoie un reg_code.
  3. Définit le champ caché "reg_code" dans la valeur CF7 sur le résultat renvoyé
  4. Effectuer vraiment la soumission CF7 qui sauvegarde tous les champs CF7 dans Flamingo

C'est mon JS qui déclenche l'appel AJAX avant l'événement de soumission CF7:

$('.wpcf7-form').on('submit', function (e) {
    $.ajax({
        type: "post",
        dataType: "json",
        url: js_object.ajax_url,
        data: {
            action: "custom_reg_code",
        },
        success: function (response) {
            if (response.success) {
                $('#reg_code').val(response.data)
            }
            else {
                console.log('Something wrong')
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('fail: ' + textStatus, errorThrown);
        },
        complete: function() {
        }
    })
})

Mon résultat: cela ne fonctionne que quelques fois. Seules certaines soumissions ont une valeur "reg_code", d'autres ont un "reg_code" vide.

Comme je le suppose, l'événement de soumission CF7 n'attendra pas que l'appel AJAX soit terminé. J'ai essayé d'ajouter e.preventDefault () au code ci-dessus pour arrêter l'envoi par défaut de CF7, mais sans succès. J'ai aussi essayé le eventListener CF7 "wpcf7submit" mais toujours pas de chance.

Enfin, la question est la suivante: existe-t-il un moyen de suspendre l'événement de soumission CF7 par défaut pour modifier une valeur de champ de saisie, puis de poursuivre le processus de soumission?

Merci beaucoup

plugin-contact-form-7
1
LocNguyen

Vous pouvez enregistrer votre douleur AJAX et le faire différemment en plaçant un champ caché dans votre formulaire en PHP.

Méthode 1, à l'aide d'un plugin

J'utilise généralement le plugin Contact Form 7 Dynamic Text Extension comme un moyen facile de créer des balises CF7 personnalisées, qui nécessitent encore un peu de code. Vous pouvez aussi aller plus loin et simplement coder vos propres balises CF7, mais je ne l'ai pas encore essayé, mais je pourrais peut-être modifier cette réponse.

Avec ce plugin en place, vous pouvez mettre des tags dans votre formulaire CF7 comme ceci:

[dynamichidden custom-reg-code “CF7_custom_reg_code”]

Et dans le volet de courrier électronique de la page d’administration de CF7, vous inséreriez [code personnalisé].

Pour le faire fonctionner, créez vous-même un shortcode pour générer votre chaîne:

function generateRandomString($length = 10) {
    return substr(str_shuffle(str_repeat($x='0123456789', ceil($length/strlen($x)) )),1,$length);
}

function wpse306816_CF7_custom_reg_code() {

    return date("Ymd") . generateRandomString();
}

add_shortcode('CF7_custom_reg_code', 'wpse306816_CF7_custom_reg_code');

Hat-tip à https://stackoverflow.com/a/13212994/6347850 pour la génération de nombres aléatoires.

Vous avez maintenant dans votre formulaire un champ masqué composé de la date du jour et un nombre aléatoire que vous pouvez utiliser dans le courrier électronique envoyé dans votre formulaire ou enregistré dans Flamingo comme tout autre champ CF7.

Méthode 2, sans l'aide d'un plugin

Et quelques recherches ont montré qu’il était encore plus simple d’écrire votre propre tag CF7 et de ne pas s’embêter avec le plugin.

Pour créer une balise CF7 [serial], vous l'enregistrez à l'aide de wpcf7_add_form_tag() sur le crochet d'action wpcf7_init, en transmettant le nom de la balise et le nom d'une fonction de rappel pour la gérer:

add_action( 'wpcf7_init', 'wpse306816_CF7_add_custom_tag' );

function wpse306816_CF7_add_custom_tag() {
    wpcf7_add_form_tag(
        'serial',
        'wpse306816_CF7_handle_custom_tag' );
}

Et pour votre cas, le rappel doit simplement renvoyer la valeur de la chaîne de série:

function generateRandomString($length = 10) {
    return substr(str_shuffle(str_repeat($x='0123456789', ceil($length/strlen($x)) )),1,$length);
}

function wpse306816_CF7_handle_custom_tag( $tag ) {
    return date("Ymd") . generateRandomString();
}
1
Andy Macaulay-Brook