Riassunto AI
Desideri che il reindirizzamento del tuo modulo si apra in una nuova finestra o scheda? Con WPForms puoi reindirizzare il tuo modulo a una nuova pagina dopo l'invio corretto. Con un piccolo snippet di codice JavaScript, puoi impostare questo reindirizzamento per aprirlo in una nuova finestra o scheda. Questo tutorial ti mostrerà come aggiungere questo piccolo snippet al tuo sito per aprire quel reindirizzamento in una nuova finestra.
Aprire il reindirizzamento in una nuova finestra
Prima di creare il modulo, inizieremo aggiungendo questo snippet al nostro sito.
Se non sei sicuro di dove o come aggiungere snippet al tuo sito, dai un'occhiata a 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 modulo 909. Dovrai aggiornare questa parte dello snippet per farla corrispondere al tuo ID modulo.
Per qualsiasi assistenza necessaria nel trovare il tuo ID modulo, ti preghiamo di rivedere questo tutorial.
Creazione del modulo
Successivamente, dovrai creare il tuo modulo e aggiungere i campi necessari.
Una volta impostati i campi, fai clic su Impostazioni » Conferme e nel menu a discesa Tipo di conferma, seleziona Vai a URL e inserisci l'URL a cui desideri reindirizzare l'utente.
Nota: Per ulteriori informazioni sui Tipi di conferma, ti preghiamo di rivedere questo tutorial.
Disabilitare l'invio AJAX del modulo
Ai fini di questo tutorial, dovrai disabilitare AJAX sul modulo. Per fare ciò, vai su Impostazioni » Generali e assicurati che Abilita invio modulo AJAX sia disabilitato.
E questo è tutto! Hai aggiunto con successo lo snippet che aprirà un reindirizzamento in una nuova finestra. Desideri cambiare il titolo che appare nella scheda della finestra del browser? Desideri ottenere questo risultato su un modulo con AJAX abilitato? Dai un'occhiata al nostro articolo su Come aprire un nuovo link all'invio del modulo con AJAX.
Azione di riferimento
FAQ
Cosa succede se voglio farlo per più moduli?
Per configurare questo snippet per più moduli con link diversi, dovresti semplicemente aggiungere ulteriori ID modulo copiando questa sezione di codice, incollandola sotto l'originale e modificando l'ID modulo.
Nello snippet, leggi 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 si ricarichi solo quando l'utente ha compilato tutti i campi?
Sì, puoi modificare lo script per ricaricare la pagina solo in caso di invio corretto del modulo. Ecco uno snippet che ottiene 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);
Ricorda di sostituire 909 con il tuo ID modulo effettivo.