Atenção!

Este artigo contém código JavaScript e destina-se a programadores. Oferecemos este código como cortesia, mas não fornecemos suporte para personalizações de código ou desenvolvimento de terceiros.

Para obter orientações adicionais, consulte o tutorial do WPBeginner sobre como adicionar código personalizado.

Recusar

Como abrir um novo link no envio de um formulário com AJAX

Gostaria de abrir uma nova hiperligação na submissão de formulários quando tem o AJAX ativado? Utilizando um pequeno fragmento de código, vamos mostrar-lhe como pode apresentar a sua mensagem de confirmação, mas também abrir uma nova ligação quando o formulário é submetido.

Por defeito, o WPForms dá-lhe a opção de mostrar uma mensagem de confirmação, redirecionar para uma página no seu site, ou fornecer um URL personalizado quando o formulário é submetido. Mas e se você quisesse fazer uma combinação dessas opções? Para este tutorial, vamos criar 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.

Criar o formulário

Primeiro, precisamos de criar o nosso formulário. O nosso formulário é um simples formulário de inscrição na newsletter, mas também vamos permitir que os utilizadores forneçam comentários de feedback, pelo que teremos os campos de formulário Nome, Email e Texto do parágrafo no nosso formulário.

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

crie o seu formulário e adicione os seus campos

Antes de sair do construtor de formulários, certifique-se de que seleciona a opção Ativar envio de formulário AJAX no separador Geral.

certifique-se de que ativa o ajax no separador das definições gerais

Uma vez que vamos definir a ligação dentro do fragmento de código, pode deixar o separador Confirmações Tipo de confirmação para apresentar apenas a sua mensagem de confirmação.

Uma vez que vamos definir a ligação dentro do fragmento de código, pode deixar o tipo Confirmação para apresentar apenas a sua mensagem de confirmação.

Agora é hora de adicionar o snippet que abrirá um novo link nos envios de formulários.

Se precisar de ajuda para adicionar snippets ao seu site, consulte este tutorial.

Este snippet específico só funcionará se o AJAX estiver ativado no envio do formulário.

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

Lembre-se apenas de alterar o #wpforms-form-780 para corresponder ao seu próprio ID de formulário. Se precisar de ajuda para encontrar o seu ID de formulário, consulte este tutorial. Também terá de substituir o URL (https://google.com) para corresponder ao URL de que necessita para o seu formulário.

Agora, quando o formulário for submetido, será aberto um novo separador com a sua ligação, enquanto a mensagem de confirmação continuará a ser apresentada numa janela separada.

e é assim que se abre uma nova ligação aquando da apresentação de um formulário

E já está! Gostaria de impedir que os utilizadores introduzam links nos seus campos de formulário? Veja o nosso tutorial sobre Como bloquear URLs dentro dos campos do formulário.

Ação Referência

wpforms_wp_footer_end

FAQ

P: Como é que posso fazer isto sem AJAX?

R: Se preferir não utilizar AJAX, temos um tutorial sobre como conseguir isso quando não estiver a utilizar AJAX. Consulte esse tutorial aqui.

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

R: Para configurar este snippet para vários formulários com vários links diferentes, basta adicionar IDs de formulário adicionais, copiando esta secção do código, colando-a sob o original e alterando o ID do formulário.

No snippet, basta ler os comentários para encontrar cada bloco de código "forms".

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