Como Abrir um Novo Link na Submissão de Formulário com AJAX

Você gostaria de abrir um novo link nas submissões de formulário quando o AJAX estiver ativado? Usando um pequeno trecho de código, mostraremos como exibir sua mensagem de confirmação, mas também abrir um novo link quando o formulário for enviado.

Por padrão, o WPForms oferece a opção de exibir uma mensagem de confirmação, redirecionar para uma página em seu site ou fornecer um URL personalizado quando o formulário for enviado. Mas e se você quisesse fazer uma combinação dessas opções? Para este tutorial, criaremos um formulário que exibirá uma mensagem de confirmação quando o formulário for enviado, mas também abrirá uma nova aba e carregará uma página que exibe um download de PDF.

Criando o formulário

Primeiro, precisaremos criar nosso formulário. Nosso formulário é um simples formulário de inscrição para newsletter, mas também permitiremos que eles forneçam comentários de feedback, então teremos os campos de formulário Nome, Email e Texto em Parágrafo em nosso formulário.

Se precisar de ajuda para criar seu formulário, consulte esta documentação.

Antes de sair do construtor de formulários, certifique-se de selecionar Ativar submissão de formulário AJAX na aba Geral.

Abrindo um novo link na submissão de formulário

Agora é hora de adicionar o trecho que abrirá um novo link nas submissões de formulário.

Se precisar de ajuda para adicionar trechos ao seu site, 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 );

Agora, quando seu formulário for enviado, uma nova aba será aberta com seu link, enquanto sua mensagem de confirmação ainda será exibida em uma janela separada.

E é isso! Gostaria de impedir que usuários insiram links em seus campos de formulário? Dê uma olhada em nosso tutorial sobre Como Bloquear URLs Dentro dos Campos do Formulário.

Referência de Ação

wpforms_wp_footer_end

Perguntas Frequentes

P: Como posso fazer isso sem AJAX?

R: Se preferir não usar AJAX, temos um tutorial sobre como conseguir isso quando você não estiver usando AJAX. Consulte este tutorial aqui.

P: E se eu quiser fazer isso para vários formulários?

R: Para configurar este trecho para vários formulários com diferentes links, você apenas adicionaria IDs de formulário adicionais copiando esta seção do código, colando-a sob a original e alterando o ID do formulário.

No trecho, apenas leia os comentários para encontrar cada bloco de código de "formulários".

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