Siete interessati a mostrare il messaggio di conferma del modulo accanto al modulo stesso dopo l'invio? In genere, quando un modulo viene inviato, si ha la possibilità di visualizzare un messaggio di conferma o di reindirizzare a un'altra pagina web. Tuttavia, in questo tutorial, vi guideremo attraverso il processo di realizzazione di entrambe le cose, utilizzando un semplice snippet di codice.
Creazione del modulo
Per prima cosa, è necessario creare un nuovo modulo. Per lo scopo di questo tutorial, abbiamo già completato questo passaggio. Tuttavia, se avete bisogno di assistenza per creare un modulo con WPForms, consultate questa documentazione.
Per il nostro modulo, abbiamo aggiunto solo i campi Nome, Email e Testo del paragrafo.
Disabilitare AJAX nel modulo
Successivamente, è necessario assicurarsi che l'opzione Abilita invio modulo AJAX sia disabilitata sul modulo. Per verificare questa impostazione, fare clic sulla scheda Impostazioni all'interno del costruttore di moduli e poi su Generale.
Visualizzazione della conferma e del modulo
Successivamente, è necessario aggiungere al sito un piccolo snippet di codice che consenta di visualizzare nuovamente il modulo prima del messaggio di conferma.
Se avete bisogno di aiuto per aggiungere gli snippet al vostro sito, consultate questo tutorial.
/*
* Display confirmation message and form after successful submission.
*
* @link https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
*/
function wpf_dev_frontend_output_success( $form_data, $fields, $entry_id ) {
// Optional, you can limit it to specific forms. Below, we restrict output to form #235.
if ( absint( $form_data[ 'id' ] ) !== 235 ) {
return;
}
// Reset the fields to blank
unset(
$_GET[ 'wpforms_return' ],
$_POST[ 'wpforms' ][ 'id' ]
);
// Comment this line out if you want to clear the form field values after submission
unset( $_POST[ 'wpforms' ][ 'fields' ] );
// Actually render the form.
wpforms()->frontend->output( $form_data[ 'id' ] );
}
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );
Poiché vogliamo che questo snippet venga eseguito solo su un particolare form, usiamo l'opzione if ( absint( $form_data[ 'id' ] ) !== 235 ). Ciò significa che questo snippet solo viene eseguito se l'ID del modulo corrisponde 235.
Se avete bisogno di aiuto per identificare il numero ID del vostro modulo, consultate questa guida.
Se si desidera mantenere i valori all'interno dei campi del modulo dopo l'invio del modulo, è sufficiente commentare l'elemento unset( $_POST[ 'wpforms' ][ 'fields' ] );. È possibile farlo aggiungendo due barre (//) davanti al codice dei campi non impostati.
Esempio:
// unset( $_POST[ 'wpforms' ][ 'fields' ] );
Ora, quando il modulo viene inviato, i visitatori vedranno la conferma e il modulo nella stessa pagina dopo l'invio del modulo!
E questo è tutto! Volete impostare una data predefinita nel vostro selezionatore di date? Date un'occhiata al nostro tutorial su Come impostare una data predefinita per il campo del modulo Date Picker.
Azione di riferimento
wpforms_frontend_output_success
FAQ
D: Perché il mio messaggio di conferma appare sotto il modulo?
R: Se il messaggio di conferma appare sopra il modulo e si desidera che appaia sotto, modificare la priorità di questa funzione.
Per spiegare che cos'è la priorità di una funzione, diamo un'occhiata allo snippet qui sopra, in particolare all'ultima riga.
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );
In questo caso, il nome dell'action hook (come definito da WPForms) è wpforms_frontend_output_success, il nome della nostra funzione è wpf_dev_frontend_output_success. All'interno di questa funzione, vengono passati 3 argomenti($form_data, $fields, $entry_id) e la priorità predefinita è impostata a 10.
Poiché vogliamo che la funzionalità predefinita del modulo appaia per prima, in questo caso il messaggio di conferma, dobbiamo modificare la priorità in modo che il messaggio appaia per primo e la funzione venga eseguita dopo. A tale scopo, aumenteremo la priorità a 1000.
La maggior parte delle funzioni utilizza 10 come numero di priorità predefinito, quindi se si vuole che qualcosa venga eseguito prima, la priorità deve essere inferiore a 10. Se si vuole che la funzione venga eseguita dopo, aumentare la priorità a qualcosa di superiore a 10.
/*
* Display confirmation message and form after successful submission.
*
* @link https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
*/
function wpf_dev_frontend_output_success( $form_data, $fields, $entry_id ) {
// Optional, you can limit it to specific forms. Below, we restrict output to form #235.
if ( absint( $form_data[ 'id' ] ) !== 235 ) {
return;
}
// Reset the fields to blank
unset(
$_GET[ 'wpforms_return' ],
$_POST[ 'wpforms' ][ 'id' ]
);
// Comment this line out if you want to clear the form field values after submission
unset( $_POST[ 'wpforms' ][ 'fields' ] );
// Actually render the form.
wpforms()->frontend->output( $form_data[ 'id' ] );
}
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 1000, 3 );
D: Perché lo snippet non funziona per me?
R: Se lo snippet non funziona, assicurarsi di aver modificato il 235 in modo che corrisponda all'ID del modulo sul proprio sito. Consultare questo tutorial per trovare l'ID del proprio modulo.
D: Perché vedo una pagina vuota dopo il secondo invio?
R: Se si vede una pagina bianca o un errore AJAX nel log della console, assicurarsi di aver disabilitato AJAX come indicato nei passaggi precedenti. Questo snippet funziona solo se AJAX è disabilitato nel form.