Resumen de IA
¿Te gustaría que la redirección de tu formulario se abriera en una ventana o pestaña nueva? Con WPForms puedes hacer que tu formulario se redirija a una página nueva tras el envío correcto del mismo. Con un pequeño fragmento de código JavaScript, puedes configurar que esta redirección se abra en una ventana o pestaña nueva. Este tutorial te mostrará cómo añadir este pequeño fragmento a tu sitio para abrir esa redirección en una ventana nueva.
Abrir la redirección en una ventana nueva
Antes de crear el formulario, vamos a empezar añadiendo este fragmento a nuestro sitio.
Si no estás seguro de dónde o cómo añadir fragmentos a tu sitio, por favor, consulta 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 solo se aplicará al ID del formulario 909. Necesitarás actualizar esta parte del fragmento para que coincida con tu propio ID de formulario.
Para cualquier ayuda que necesites para encontrar tu ID de formulario, por favor, revisa este tutorial.
Creación del formulario
A continuación, necesitarás crear tu formulario y añadir los campos necesarios.
Una vez que hayas configurado los campos, haz clic en Ajustes » Confirmaciones y, en el menú desplegable Tipo de confirmación, selecciona Ir a URL e introduce la URL a la que quieres que se redirija al usuario.
Nota: Para más información sobre Tipos de confirmación, por favor, revisa este tutorial.
Desactivar envíos de formularios AJAX
Para el propósito de este tutorial, necesitarás desactivar AJAX en el formulario. Para hacer esto, ve a Ajustes » General y asegúrate de que la opción Activar envío de formularios AJAX esté desactivada.
¡Y eso es todo! Has añadido con éxito el fragmento que abrirá una redirección en una ventana nueva. ¿Te gustaría cambiar el título que aparece dentro de la pestaña de la ventana del navegador? ¿Te gustaría lograr esto en un formulario donde AJAX está activado? Echa un vistazo a nuestro artículo sobre Cómo abrir un enlace nuevo en el envío de formularios con AJAX.
Acción de referencia
Preguntas frecuentes
¿Qué pasa si quiero hacer esto para varios formularios?
Para configurar este fragmento para varios formularios con diferentes enlaces, solo tendrías 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, simplemente lea 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 personalizar esto para que solo se recargue cuando el usuario haya completado todos los campos?
Sí, puedes modificar el script para que la página se recargue solo en el envío correcto del formulario. Aquí tienes 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);
Recuerda reemplazar 909 con tu ID de formulario real.