Volete che il reindirizzamento del vostro modulo si apra in una nuova finestra o scheda? Con WPForms potete fare in modo che il vostro modulo venga reindirizzato a una nuova pagina dopo l'invio del modulo. Con un piccolo snippet di codice JavaScript, è possibile impostare questo reindirizzamento in modo che si apra in una nuova finestra o scheda. Questo tutorial vi mostrerà come aggiungere questo piccolo snippet al vostro sito per aprire il reindirizzamento in una nuova finestra.
Apertura del reindirizzamento in una nuova finestra
Prima di creare il modulo, iniziamo ad aggiungere questo snippet al nostro sito.
Se non siete sicuri di dove o come aggiungere gli snippet al vostro sito, consultate questo tutorial.
/**
* Open. redirect in a new window
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new( ) {
?>
<script type="text/javascript">
jQuery(function($){
$( "form#wpforms-form-909" ).attr( "target", "_blank" );
$( "#wpforms-form-909" ).on( 'submit', function(){
location.reload(true);
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30 );
Questo snippet verrà applicato solo all'ID del modulo 909. È necessario aggiornare questa parte dello snippet in modo che corrisponda all'ID del proprio modulo.
Per qualsiasi assistenza necessaria a trovare l'ID del modulo, consultare questa esercitazione.
Creazione del modulo
Successivamente, è necessario creare il modulo e aggiungere i campi necessari.
Una volta impostati i campi, cliccate su Impostazioni " Conferme e, nel menu a tendina Tipo di conferma, selezionate Vai all'URL e inserite l'URL a cui volete che l'utente sia reindirizzato.
Nota: per ulteriori informazioni sui tipi di conferma, consultare questa esercitazione.
Disabilitare l'invio di moduli AJAX
Per lo scopo di questo tutorial, è necessario disabilitare AJAX sul modulo. Per farlo, andare in Impostazioni " Generale e assicurarsi che l'opzione Abilita invio modulo AJAX sia disabilitata.
Ed ecco fatto! Avete aggiunto con successo lo snippet che aprirà un redirect in una nuova finestra. Volete cambiare il titolo che appare nella scheda della finestra del browser? Volete ottenere questo risultato in un modulo in cui è abilitato AJAX? Date un'occhiata al nostro articolo su Come aprire un nuovo link all'invio di un modulo con AJAX.
Azione di riferimento
FAQ
E se volessi farlo per più moduli?
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 redirect in a new window
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new( ) {
?>
<script type="text/javascript">
// 1st form
jQuery(function($) {
// Update the 521 to match your own form ID
$( "form#wpforms-form-521" ).attr( "target", "_blank" );
$( "#wpforms-form-521" ).on( 'submit', function(){
location.reload(true);
});
});
// 2nd form
jQuery(function($) {
// Update the 2349 to match your own form ID
$( "form#wpforms-form-2349" ).attr( "target", "_blank" );
$( "#wpforms-form-2349" ).on( 'submit', function(){
location.reload(true);
});
});
// 3rd form
jQuery(function($) {
// Update the 398 to match your own form ID
$( "form#wpforms-form-398" ).attr( "target", "_blank" );
$( "#wpforms-form-398" ).on( 'submit', function(){
location.reload(true);
});
});
// 4th form
jQuery(function($) {
// Update the 9283 to match your own form ID
$( "form#wpforms-form-9283" ).attr( "target", "_blank" );
$( "#wpforms-form-9283" ).on( 'submit', function(){
location.reload(true);
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30 );
Posso personalizzarlo in modo che venga ricaricato solo quando l'utente ha compilato tutti i campi?
Sì, è possibile modificare lo script per ricaricare la pagina solo quando il modulo viene inviato correttamente. Ecco uno snippet che consente di ottenere questo risultato:
/**
* Open redirect in a new window and reload page only on successful form submission.
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new() {
?>
<script type="text/javascript">
jQuery(function($) {
// Open form submission in a new window
$( "form#wpforms-form-909" ).attr( "target", "_blank" );
// Listen to the WPForms custom event for successful submission
$(document).on('wpformsAjaxSubmitSuccess', function(e, data) {
if (data.data.form_id == 909) {
location.reload(true);
}
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30);
Ricordarsi di sostituire 909 con l'ID effettivo del modulo.