Modificare il valore di input di Contact Form 7 prima dell'invio

Question

Modificare il valore di input di Contact Form 7 prima dell'invio

23 giu 2018, 19:45:02

Visualizzazioni: 28.8K

Voti: 1

Sto utilizzando Contact Form 7 e Flamingo per creare un modulo di registrazione consulenti sul mio sito WordPress. Su richiesta del mio cliente, ogni invio deve avere un codice di registrazione (reg_code) che è una combinazione della data di invio e un numero casuale per renderlo univoco.

Ho quindi aggiunto un campo input nascosto al mio codice CF7 con l'id "reg_code". Nel mio primo tentativo, ho usato JS per generare una variabile "reg_code" subito dopo che gli utenti visitano il mio sito e impostare il valore del campo nascosto alla variabile "reg_code" generata. Il "reg_code" è stato salvato correttamente nell'invio CF7 ma in alcuni casi, quando un utente non inviava il modulo alla prima visita ma dopo alcuni giorni, la parte della data nel suo "reg_code" non sarebbe stata corretta perché quel codice era stato generato al momento della sua prima visita e memorizzato nella cache del browser.

Per evitare questo problema, ho deciso di spostare la funzione di generazione del "reg_code" da JS a PHP e la procedura sarebbe questa:

Clic sul pulsante di invio
Utilizzo di AJAX per chiamare una funzione PHP che restituisce un reg_code
Impostare il valore del campo nascosto "reg_code" in CF7 al risultato restituito
Eseguire effettivamente l'invio CF7 che salva tutti i campi CF7 in Flamingo

Questo è il mio JS per attivare la chiamata AJAX prima dell'evento di invio 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('Qualcosa è andato storto')
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('fallito: ' + textStatus, errorThrown);
        },
        complete: function() {
        }
    })
})

Il mio risultato: Funziona solo alcune volte. Solo alcuni invii hanno il valore "reg_code", altri hanno "reg_code" vuoto.

Secondo la mia ipotesi, l'evento di invio CF7 non aspetterà che la chiamata AJAX sia completata. Ho provato ad aggiungere e.preventDefault() al codice sopra per fermare l'invio predefinito CF7 ma senza successo. Ho provato anche l'eventListener di CF7 "wpcf7submit" ma ancora senza fortuna.

Infine, la domanda è: C'è un modo per mettere in pausa l'evento di invio predefinito CF7 per modificare il valore di un campo input, e poi continuare il processo di invio?

Grazie mille

LocNguyen

53

plugin contact form 7

Commenti

Non sono sicuro se ricevi un avviso quando le risposte vengono modificate, quindi ti informo che ho aggiunto un metodo che dovrebbe permetterti di aggiungere il tuo tag CF7 senza utilizzare il plugin aggiuntivo. Non l'ho testato, ma il codice è piuttosto semplice.

Andy Macaulay-Brook

23 giu 2018 23:40:21

Possiamo usare qualcosa di simile per la numerazione automatica degli invii, in modo che ogni nuovo invio ottenga un numero +1?

Mitja

28 feb 2020 10:50:48

Tutte le risposte alla domanda

Vorrei intervenire qui perché stavo proprio affrontando lo stesso problema - modificare gli input prima che CF7 venisse inviato via ajax. Credo che l'autore originale del post stesse cercando di capire come farlo tramite Javascript, cosa che Andy non ha affrontato nella sua risposta. Quindi ecco un esempio di come farlo:

var form = document.getElementsByClassName('wpcf7-form')[0];
form.addEventListener('submit', function(evt) {
    form.elements['reg_code'].value = 'parsed_code';
}, { capture: true });

Fate molta attenzione all'ultimo argomento nell'event listener - useCapture = true. Questo argomento è false per impostazione predefinita. Il mio codice originale, che non funzionava, ignorava questo argomento. L'invio Ajax di CF7 veniva sempre eseguito per primo, ignorando così il mio evento. Semplicemente cambiando useCapture a true, il vostro evento viene attivato prima dell'evento Ajax di CF7.

~~Non l'ho ancora provato, ma presumo che usando anche evt.preventDefault(), si potrebbe effettivamente impedire l'invio del modulo Ajax di CF7 se necessario.~~ Testato il 22/04/2019 - non funziona.

Dan S

81

21 apr 2020 22:19:21

Commenti

Nessun problema. Grazie - mi hai spinto finalmente a esaminare come codificare i miei tag CF7 personalizzati e lo aggiungerò anche come modifica a questa risposta.

Andy Macaulay-Brook

23 giu 2018 21:19:47

Andy Macaulay-Brook 3.86K · Accepted Answer · 2018-06-23T20:56:22Z

Potresti evitare il dolore dell'AJAX e affrontare il problema in modo diverso inserendo un campo nascosto all'interno del tuo form in PHP.

Metodo 1, con l'aiuto di un plugin

Generalmente utilizzo il plugin Contact Form 7 Dynamic Text Extension come soluzione semplice per creare tag personalizzati in CF7, che comunque richiede un po' di codice. Potresti anche spingerti oltre e codificare direttamente i tuoi tag CF7, ma non l'ho ancora provato, anche se potrei farlo come modifica a questa risposta.

Con questo plugin attivo, puoi inserire tag nel tuo form CF7 in questo modo:

[dynamichidden custom-reg-code “CF7_custom_reg_code”]

E nel pannello email della pagina di amministrazione di CF7 inseriresti [custom-reg-code].

Per farlo funzionare, crea semplicemente uno shortcode corrispondente per generare la tua stringa:

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');

Un ringraziamento a https://stackoverflow.com/a/13212994/6347850 per la generazione del numero casuale.

Ora avrai un campo nascosto nel tuo form composto dalla data corrente e un numero casuale che puoi utilizzare nell'email inviata dal form o salvare in Flamingo come qualsiasi altro campo CF7.

Metodo 2, senza l'aiuto di un plugin

Una piccola ricerca ha dimostrato che è ancora più semplice creare il proprio tag CF7 senza preoccuparsi del plugin.

Per creare un tag CF7 [serial], lo registri utilizzando wpcf7_add_form_tag() sull'hook wpcf7_init, passando il nome del tag e il nome di una funzione di callback per gestirlo:

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' );
}

E per il tuo caso, la callback deve semplicemente restituire il valore della stringa seriale:

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();
}