Volete aprire un nuovo link all'invio di un modulo quando avete attivato AJAX? Con un piccolo snippet di codice, vi mostreremo come potete visualizzare il messaggio di conferma, ma anche aprire un nuovo link quando il modulo viene inviato.
Per impostazione predefinita, WPForms vi dà la possibilità di visualizzare un messaggio di conferma, di reindirizzare a una pagina del vostro sito o di fornire un URL personalizzato quando il modulo viene inviato. Ma se voleste combinare queste opzioni? In 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 mostrerà anche il download di un PDF.
Creazione del modulo
Per prima cosa, dobbiamo creare il nostro modulo. Il nostro modulo è un semplice modulo di iscrizione alla newsletter, ma vogliamo anche consentire loro di fornire commenti di commento, quindi avremo i campi Nome, Email e Testo del paragrafo nel nostro modulo.
Se avete bisogno di aiuto per creare il vostro modulo, consultate questa documentazione.
Prima di uscire dal costruttore di moduli, assicurarsi di selezionare l'opzione Abilita invio modulo AJAX nella scheda Generale.
Poiché il collegamento sarà definito all'interno dello snippet di codice, si può lasciare il tipo di conferma della scheda Conferme per visualizzare solo il messaggio di conferma.
Apertura di un nuovo link all'invio del modulo
Ora è il momento di aggiungere lo snippet che aprirà un nuovo link all'invio del modulo.
Se avete bisogno di aiuto per aggiungere gli snippet al vostro sito, consultate questo tutorial.
Questo particolare snippet funziona solo se AJAX è abilitato all'invio del modulo.
/**
* 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 );
Ricordatevi solo di cambiare il parametro #wpforms-form-780 per far corrispondere l'ID del proprio modulo. Se avete bisogno di aiuto per trovare il vostro ID modulo, consultate questa esercitazione. È inoltre necessario sostituire l'URL (https://google.com) in modo che corrisponda all'URL necessario per il modulo.
Ora, quando il modulo viene inviato, si aprirà una nuova scheda con il link, mentre il messaggio di conferma verrà visualizzato in una finestra separata.
E questo è tutto! Volete bloccare l'inserimento di link nei campi del vostro modulo? Date un'occhiata al nostro tutorial su Come bloccare gli URL all'interno dei campi del modulo.
Azione Riferimento
FAQ
D: Come posso farlo senza AJAX?
R: Se si preferisce non usare AJAX, abbiamo un tutorial su come ottenere questo risultato quando non si usa AJAX. Consultate il tutorial qui.
D: E se volessi farlo per più moduli?
R: Per impostare questo snippet per più moduli con vari collegamenti diversi, basta aggiungere ulteriori ID di modulo copiando questa sezione del codice, incollandola sotto l'originale e cambiando l'ID del modulo.
Nello snippet, basta leggere 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 );