Cómo abrir un nuevo enlace al enviar un formulario con AJAX

¿Desea abrir un nuevo enlace en el envío de formularios cuando tenga AJAX habilitado? Usando un pequeño fragmento de código, le mostraremos cómo puede mostrar su 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 de su sitio o proporcionar una URL personalizada cuando se envía el formulario. Pero, ¿y si quisiera hacer una combinación de estas opciones? Para este tutorial, crearemos 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 muestre una descarga de PDF.

Creación del formulario

Primero, necesitaremos crear nuestro formulario. Nuestro formulario es un simple formulario de suscripción al boletín, pero también les permitiremos proporcionar comentarios de opinión, por lo que tendremos los campos del formulario Nombre, Correo electrónico y Texto de párrafo en nuestro formulario.

Si necesita ayuda para crear su formulario, consulte esta documentación.

Antes de salir del creador de formularios, asegúrese de seleccionar Habilitar envío de formularios AJAX en la pestaña General.

Abrir un nuevo enlace en el envío del formulario

Ahora es el momento de agregar el fragmento que abrirá un nuevo enlace en los envíos de formularios.

Si necesita ayuda para agregar fragmentos a su sitio, revise este tutorial.

/**
 * 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 );

Ahora, cuando se envíe su formulario, se abrirá una nueva pestaña con su enlace mientras que su mensaje de confirmación seguirá mostrándose en una ventana separada.

¡Y eso es todo! ¿Desea bloquear que los usuarios ingresen enlaces en los campos de su formulario? Eche un vistazo a nuestro tutorial sobre Cómo bloquear URL dentro de los campos del formulario.

Referencia de acción

wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Cómo puedo hacer esto sin AJAX?

R: Si prefiere no usar AJAX, tenemos un tutorial sobre cómo lograr esto cuando no está usando AJAX. Consulte ese tutorial aquí.

P: ¿Qué pasa si quiero hacer esto para varios formularios?

R: Para configurar este fragmento para varios formularios con diferentes enlaces, simplemente agregaría ID 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 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 );