¿Le gustaría que la redirección de su formulario se abra en una nueva ventana o pestaña? Con WPForms puede hacer que su formulario sea redirigido a una nueva página cuando el formulario se envíe correctamente. Con un pequeño fragmento de código JavaScript, puede configurar esta redirección para que se abra en una nueva ventana o pestaña. Este tutorial le mostrará cómo agregar este pequeño fragmento a su sitio para abrir esa redirección en una nueva ventana.
Abrir la redirección en una ventana nueva
Antes de crear el formulario, vamos a empezar por añadir este fragmento a nuestro sitio.
Si no está seguro de dónde o cómo añadir fragmentos a su sitio, consulte este 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 );
Este fragmento sólo se aplicará al formulario ID 909. Tendrá que actualizar esta parte del fragmento para que coincida con su propio ID de formulario.
Si necesita ayuda para encontrar el ID de su formulario, consulte este tutorial.
Creación del formulario
A continuación, tendrá que crear su formulario y añadir los campos necesarios.
Una vez que haya configurado los campos, haga clic en Configuración " Confirmaciones y, en el menú desplegable Tipo de confirmación, seleccione Ir a URL e introduzca la URL a la que desea redirigir al usuario.
Nota: Para obtener más información sobre los tipos de confirmación, consulte este tutorial.
Desactivar el envío de formularios AJAX
Para el propósito de este tutorial, necesitarás deshabilitar AJAX en el formulario. Para ello, vaya a Configuración " General y asegúrese de que la opción Habilitar el envío de formularios AJAX está desactivada.
Y ya está. Has añadido con éxito el fragmento que abrirá una redirección en una nueva ventana. ¿Le gustaría cambiar el título que aparece dentro de la pestaña de la ventana del navegador? ¿Te gustaría conseguir esto en un formulario donde AJAX está habilitado? Eche un vistazo a nuestro artículo sobre Cómo abrir un nuevo enlace al enviar un formulario con AJAX.
Acción de referencia
PREGUNTAS FRECUENTES
¿Y si quiero hacer esto para varios formularios?
Para configurar este fragmento para múltiples formularios con varios enlaces diferentes, sólo tiene que añadir IDs de formulario adicionales copiando esta sección del código, pegándola debajo de la original y cambiando el ID del formulario.
En el fragmento, basta con leer los comentarios para encontrar cada bloque de código de "formularios".
/**
* 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 );
¿Puedo personalizarlo para que sólo se recargue cuando el usuario haya rellenado todos los campos?
Sí, puede modificar el script para que recargue la página sólo cuando el formulario se envíe correctamente. Aquí hay un fragmento que logra esto:
/**
* 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);
No olvide sustituir 909 por su ID de formulario real.