Come aprire un nuovo link alla sottomissione del modulo con AJAX

Vuoi aprire un nuovo link all'invio del modulo quando hai l'AJAX abilitato? Utilizzando un piccolo snippet di codice, ti mostreremo come visualizzare il tuo messaggio di conferma ma anche aprire un nuovo link quando il modulo viene inviato.

Per impostazione predefinita, WPForms ti offre l'opzione di visualizzare un messaggio di conferma, reindirizzare a una pagina del tuo sito o fornire un URL personalizzato quando il modulo viene inviato. Ma cosa succede se volessi fare una combinazione di queste opzioni? Per questo tutorial, creeremo un modulo che visualizzerà un messaggio di conferma quando il modulo viene inviato, ma aprirà anche una nuova scheda e caricherà una pagina che visualizza anche il download di un PDF.

Creazione del modulo

Innanzitutto, dovremo creare il nostro modulo. Il nostro modulo è un semplice modulo di iscrizione alla newsletter, ma permetteremo anche di fornire commenti di feedback, quindi avremo i campi del modulo Nome, Email e Testo Paragrafo nel nostro modulo.

Se hai bisogno di aiuto nella creazione del tuo modulo, consulta questa documentazione.

Prima di uscire dal costruttore di moduli, assicurati di selezionare Abilita invio modulo AJAX nella scheda Generale.

Aprire un nuovo link all'invio del modulo

Ora è il momento di aggiungere lo snippet che aprirà un nuovo link all'invio dei moduli.

Se hai bisogno di aiuto per aggiungere snippet al tuo sito, consulta questo tutorial.

/**
 * Open new link on form submission with AJAX
 *
 * @link https://wpforms.com/developers/how-to-open-a-new-link-on-form-submission
 */
  
function wpf_dev_event_after_submit() {
   ?>
 
    <script type="text/javascript">
            ( function() {
                jQuery( window ).on( 'load', function() {
 
                    // Change your form ID or replace it to the .wpforms-form container.
                    jQuery( '#wpforms-form-780' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
						// replace the URL here
                        window.open( 'https://google.com', '_blank' ); 
                    } );
 
                } )
 
            }() );
 
    </script>
 
   <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_event_after_submit', 10 );

Ora, quando il tuo modulo verrà inviato, si aprirà una nuova scheda con il tuo link, mentre il tuo messaggio di conferma verrà ancora visualizzato in una finestra separata.

E questo è tutto! Vuoi impedire agli utenti di inserire link nei campi del tuo modulo? Dai un'occhiata al nostro tutorial su Come bloccare gli URL all'interno dei campi del modulo.

Riferimento Azione

wpforms_wp_footer_end

FAQ

D: Come posso fare questo senza AJAX?

R: Se preferisci non usare AJAX, abbiamo un tutorial su come ottenere questo risultato quando non stai usando AJAX. Dai un'occhiata a questo tutorial qui.

D: Cosa succede se voglio fare questo per più moduli?

R: Per configurare questo snippet per più moduli con diversi link, dovresti semplicemente aggiungere ulteriori ID modulo copiando questa sezione di codice, incollandola sotto l'originale e cambiando l'ID modulo.

Nello snippet, leggi i commenti per trovare ogni blocco di codice "moduli".

/**
 * Open new link on form submission with AJAX
 *
 * @link https://wpforms.com/developers/how-to-open-a-new-link-on-form-submission
 */
 
function wpf_dev_event_after_submit() {
   ?>

	<script type="text/javascript">
			( function() {
				jQuery( window ).on( 'load', function() {

					//1st form
					// Change your form ID or replace it to the .wpforms-form container.
					jQuery( '#wpforms-form-521' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
						window.open( 'https://myexamplesite.com/read-me', '_blank' ); //replace URL
					} );
					
					// 2nd form
					// Change your form ID or replace it to the .wpforms-form container.
					jQuery( '#wpforms-form-2349' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
						window.open( 'https://mypartnersite.com/read-me', '_blank' ); //replace URL
					} );
					
					// 3rd form
					// Change your form ID or replace it to the .wpforms-form container.
					jQuery( '#wpforms-form-983' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
						window.open( 'https://myexamplesite.com/read-me/privacy.pdf', '_blank' ); //replace URL
					} );
					
					// 4th form
					// Change your form ID or replace it to the .wpforms-form container.
					jQuery( '#wpforms-form-367' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
						window.open( 'https://mypartnersite.com/read-me/privacy.pdf', '_blank' ); //replace URL
					} );

				} )

			}() );

	</script>

   <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_event_after_submit', 10 );