Modifică valoarea input-ului din Contact Form 7 înainte de trimitere

Question

Modifică valoarea input-ului din Contact Form 7 înainte de trimitere

23 iun. 2018, 19:45:02

Vizualizări: 28.8K

Voturi: 1

Folosesc Contact Form 7 și Flamingo pentru a crea un formular de înregistrare pentru consultanți pe site-ul meu WordPress. La cererea clientului meu, fiecare înregistrare trebuie să aibă un cod de înregistrare (reg_code) care este o combinație între data trimiterii și un număr aleatoriu pentru a-l face unic.

Așa că am adăugat un câmp ascuns în codul CF7 cu id-ul "reg_code". În prima încercare, am folosit JS pentru a genera o variabilă "reg_code" imediat după ce utilizatorii vizitează site-ul meu și am setat valoarea câmpului ascuns la variabila "reg_code" generată. Codul "reg_code" a fost salvat cu succes în trimiterea CF7, dar în unele cazuri, când un utilizator nu a trimis formularul la prima vizită ci după câteva zile, partea de dată din "reg_code" nu ar fi corectă deoarece acel cod a fost generat la momentul primei vizite și stocat în cache-ul browserului.

Pentru a evita această problemă, am decis să mut funcția de generare a "reg_code" din JS în PHP, iar procedura ar fi următoarea:

Butonul de trimitere este apăsat
Se folosește AJAX pentru a apela o funcție PHP care returnează un reg_code
Se setează valoarea câmpului ascuns "reg_code" din CF7 la rezultatul returnat
Se execută efectiv trimiterea CF7 care salvează toate câmpurile CF7 în Flamingo

Acesta este JS-ul meu pentru a declanșa apelul AJAX înainte de evenimentul de trimitere 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('Ceva nu este în regulă')
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('eșec: ' + textStatus, errorThrown);
        },
        complete: function() {
        }
    })
})

Rezultatul meu: Funcționează doar uneori. Doar unele trimiteri au valoarea "reg_code", altele au "reg_code" gol.

După cum bănuiesc, evenimentul de trimitere CF7 nu va aștepta ca apelul AJAX să fie complet. Am încercat să adaug e.preventDefault() la codul de mai sus pentru a opri trimiterea implicită CF7 dar fără succes. Am încercat și cu listener-ul de evenimente CF7 "wpcf7submit" dar tot fără noroc.

În final, întrebarea este: Există vreo modalitate de a întrerupe evenimentul implicit de trimitere CF7 pentru a modifica valoarea unui câmp input, apoi să continue procesul de trimitere?

Vă mulțumesc mult

LocNguyen

53

formular contact 7

Comentarii

Nu sunt sigur dacă primești notificări la editările răspunsurilor, așa că acest mesaj este doar pentru a te anunța că am adăugat o metodă care ar trebui să îți permită să adaugi propriul tag CF7 fără a utiliza plugin-ul suplimentar. Nu l-am testat, dar codul este destul de simplu.

Andy Macaulay-Brook

23 iun. 2018 23:40:21

Putem folosi ceva similar pentru numerotarea automată a trimiterilor, astfel încât fiecare nouă trimitere să primească un număr cu +1?

Mitja

28 feb. 2020 10:50:48

Toate răspunsurile la întrebare

Vreau să adaug și eu ceva aici, tocmai mă confruntam cu aceeași problemă - modificarea câmpurilor din formular înainte ca CF7 să fie trimis prin ajax. Cred că inițial postarea se referea la cum să faci asta prin Javascript, lucru pe care Andy nu l-a abordat în răspunsul său. Așadar, iată un exemplu cum poți face asta:

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

Atenție la ultimul argument din event listener - useCapture = true. Acest argument este implicit false. Codul meu original, care nu funcționa, ignora acest argument. Trimitera prin Ajax a CF7 se declanșa mereu prima, ignorând astfel evenimentul meu. Prin simpla schimbare a useCapture la true, evenimentul tău se declanșează mai întâi înainte de evenimentul Ajax al CF7.

~~Nu am încercat încă, dar presupun că prin folosirea evt.preventDefault(), ai putea efectiv opri trimiterea formularului CF7 prin Ajax dacă e necesar.~~ Testat pe 22.04.2019 - nu funcționează.

Dan S

81

21 apr. 2020 22:19:21

Comentarii

Nicio problemă. Mulțumesc - m-ai determinat să mă uit în sfârșit cum să codez propriile mele tag-uri CF7 și voi adăuga asta ca un edit la acest răspuns.

Andy Macaulay-Brook

23 iun. 2018 21:19:47

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

Puteți evita durerea AJAX și aborda această problemă într-un mod diferit prin plasarea unui câmp ascuns în formularul dvs. PHP.

Metoda 1, cu ajutorul unui plugin

Eu folosesc în general pluginul Contact Form 7 Dynamic Text Extension ca o cale ușoară pentru a crea tag-uri personalizate CF7, care totuși necesită puțină codare. Ați putea merge mai departe și să vă scrieți propriile tag-uri CF7, dar nu am încercat încă, deși aș putea să o fac ca o completare la acest răspuns.

Cu acest plugin instalat, puteți introduce tag-uri în formularul CF7 astfel:

[dynamichidden custom-reg-code "CF7_custom_reg_code"]

Și în panoul de email din pagina de administrare CF7, ați introduce [custom-reg-code].

Pentru a-l face să funcționeze, creați un shortcode corespunzător pentru a genera șirul dorit:

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

Mulțumiri către https://stackoverflow.com/a/13212994/6347850 pentru generarea numărului aleator.

Acum veți avea un câmp ascuns în formular, format din data curentă și un număr aleator pe care îl puteți folosi în emailul trimis din formular sau salva în Flamingo, la fel ca orice alt câmp CF7.

Metoda 2, fără ajutorul unui plugin

Și puțină cercetare a arătat că este chiar mai ușor să vă scrieți propriul tag CF7 și să nu vă deranjați cu pluginul.

Pentru a crea un tag CF7 [serial], îl înregistrați folosind wpcf7_add_form_tag() pe acțiunea hook wpcf7_init, trecând numele tag-ului și numele unei funcții de callback care să-l gestioneze:

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

Iar pentru cazul dvs., callback-ul trebuie doar să returneze valoarea șirului serial:

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