¿Te gustaría abrir un nuevo enlace al enviar un formulario cuando tienes AJAX activado? Utilizando un pequeño fragmento de código, vamos a mostrarte cómo puedes mostrar tu mensaje de confirmación pero también abrir un nuevo enlace cuando se envíe el formulario.
Por defecto, WPForms le da la opción de mostrar un mensaje de confirmación, redirigir a una página en su sitio, o proporcionar una URL personalizada cuando se envía el formulario. Pero, ¿qué pasaría si quisiera hacer una combinación de estas opciones? Para este tutorial, vamos a crear un formulario que mostrará un mensaje de confirmación cuando se envíe el formulario, pero también abrir una nueva pestaña y cargar una página que muestra una descarga de PDF también.
Creación del formulario
En primer lugar, tendremos que crear nuestro formulario. Nuestro formulario es un simple formulario de suscripción al boletín de noticias, pero también vamos a permitir que proporcionen comentarios, así que vamos a tener los campos Nombre, Correo electrónico y Párrafo de texto en nuestro formulario.
Si necesita ayuda para crear su formulario, consulte esta documentación.
Antes de salir del constructor de formularios, asegúrese de seleccionar la opción Habilitar envío de formularios AJAX en la pestaña General.
Dado que definiremos el enlace dentro del fragmento de código, puede dejar la pestaña Confirmaciones Tipo de confirmación para que sólo muestre su mensaje de confirmación.
Abrir un nuevo enlace al enviar un formulario
Ahora es el momento de añadir el fragmento que abrirá un nuevo enlace en los envíos de formularios.
Si necesitas ayuda para añadir snippets a tu sitio, consulta este tutorial.
Este fragmento en particular sólo funcionará si AJAX está habilitado en el envío del formulario.
/**
* 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 );
Sólo recuerda cambiar el #wpforms-form-780 para que coincida con su propio ID de formulario. Si necesita ayuda para encontrar su ID de formulario, consulte este tutorial. También tendrá que sustituir la URL (https://google.com) para que coincida con la URL que necesita para su formulario.
Ahora, cuando se envíe el formulario, se abrirá una nueva pestaña con el enlace, mientras que el mensaje de confirmación seguirá apareciendo en una ventana aparte.
Y ya está. ¿Quieres bloquear a los usuarios para que no introduzcan enlaces en los campos de tus formularios? Eche un vistazo a nuestro tutorial sobre Cómo bloquear URLs dentro de los campos de formulario.
Acción Referencia
PREGUNTAS FRECUENTES
P: ¿Cómo puedo hacerlo sin AJAX?
R: Si prefiere no utilizar AJAX, tenemos un tutorial sobre cómo conseguirlo cuando no se utiliza AJAX. Por favor, echa un vistazo a ese tutorial aquí.
P: ¿Y si quiero hacer esto para varios formularios?
R: 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 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 );