Come visualizzare nuovamente la conferma e il modulo dopo l'invio

Sei interessato a mostrare il messaggio di conferma del modulo insieme al modulo stesso dopo l'invio? Di solito, quando un modulo viene inviato, hai la possibilità di visualizzare un messaggio di conferma o di reindirizzare a un'altra pagina web. Tuttavia, in questo tutorial, ti guideremo attraverso il processo per realizzare entrambe le cose utilizzando un semplice snippet di codice.

Creazione del modulo

Innanzitutto, dovrai creare un nuovo modulo. Ai fini di questo tutorial, abbiamo già completato questo passaggio. Tuttavia, se hai bisogno di assistenza nella creazione di un modulo con WPForms, ti preghiamo di consultare questa documentazione.

Per il nostro modulo, abbiamo aggiunto solo i campi modulo Nome, Email e Testo Paragrafo.

Disabilitare AJAX sul modulo

Successivamente, dovrai assicurarti che l'opzione Abilita invio modulo AJAX sia disabilitata sul modulo. Per controllare questa impostazione, fai clic sulla scheda Impostazioni all'interno del generatore di moduli e quindi fai clic su Generale.

Visualizzare la conferma e il modulo

Successivamente, dovrai aggiungere un piccolo snippet di codice al tuo sito che permetterà al modulo di essere visualizzato di nuovo prima del messaggio di conferma.

Se hai bisogno di aiuto per aggiungere snippet al tuo sito, ti preghiamo di consultare 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 modulo specifico, stiamo usando if ( absint( $form_data[ 'id' ] ) !== 235 ). Ciò significa che questo snippet verrà eseguito solo se l'ID del modulo corrisponde a 235.

Se desideri mantenere i valori all'interno dei campi del modulo dopo l'invio del modulo, commenta semplicemente unset( $_POST[ 'wpforms' ][ 'fields' ] );. Puoi farlo aggiungendo due barre (//) davanti al codice dei campi non impostati.

Esempio:

// unset( $_POST[ 'wpforms' ][ 'fields' ] );

Ora vedrai che quando il modulo viene inviato, i tuoi visitatori vedranno la conferma e il modulo sulla stessa pagina dopo l'invio del modulo!

E questo è tutto! Vorresti impostare una data predefinita sul tuo selettore di date? Dai un'occhiata al nostro tutorial su Come impostare una data predefinita per il tuo campo modulo selettore di date.

Azione di riferimento

wpforms_frontend_output_success

FAQ

D: Perché il mio messaggio di conferma appare sotto il modulo?

R: Se il tuo messaggio di conferma appare sopra il tuo modulo e vorresti che apparisse sotto, cambia la priorità di questa funzione.

Per spiegare cos'è la priorità di una funzione, diamo un'occhiata allo snippet 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'hook di azione (come definito da WPForms) è wpforms_frontend_output_success, il nome della nostra funzione è wpf_dev_frontend_output_success. All'interno di questa funzione, passiamo 3 argomenti ($form_data, $fields, $entry_id), e abbiamo la priorità predefinita impostata su 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. Per fare ciò, aumenteremo la priorità a 1000.

La maggior parte delle funzioni utilizza 10 come numero di priorità predefinito, quindi se vuoi che qualcosa venga eseguito prima, dovresti impostare una priorità inferiore a 10, se vuoi che la funzione venga eseguita dopo, aumenta 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, assicurati di aver modificato il 235 per corrispondere all'ID del tuo modulo sul tuo sito. Guarda questo tutorial per trovare il tuo ID modulo.

D: Perché vedo una pagina bianca dopo aver inviato per la seconda volta?

R: Se vedi una pagina bianca o un errore AJAX nel registro della console, assicurati di aver disabilitato AJAX come menzionato nei passaggi precedenti. Questo snippet funzionerà solo se AJAX è disabilitato sul modulo.