Você gostaria de abrir um novo link nos envios de formulários quando tiver o AJAX ativado? Usando um pequeno trecho de código, mostraremos como você pode exibir sua mensagem de confirmação e também abrir um novo link quando o formulário for enviado.
Por padrão, o WPForms lhe dá a opção de exibir uma mensagem de confirmação, redirecionar para uma página do seu site ou fornecer um URL personalizado quando o formulário é enviado. 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 guia e carregará uma página que exibe um download de PDF.
Criando o formulário
Primeiro, precisamos criar nosso formulário. Nosso formulário é um formulário simples de inscrição em um boletim informativo, mas também permitiremos que eles forneçam comentários de feedback, portanto, teremos os campos de formulário Nome, E-mail e Texto do 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 a opção Habilitar envio de formulário AJAX na guia Geral.
Como definiremos o link dentro do snippet de código, você pode deixar a guia Confirmações do tipo Confirmação para exibir apenas a mensagem de confirmação.
Abertura de um novo link no envio do formulário
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.
Esse 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 seu ID de formulário, Dê uma olhada neste tutorial. Você também precisará substituir o URL (https://google.com) para que corresponda ao URL necessário para o formulário.
Agora, quando o formulário for enviado, uma nova guia será aberta com o link, enquanto a mensagem de confirmação ainda será exibida em uma janela separada.
E é isso! Gostaria de impedir que os usuários insiram links nos campos do formulário? Dê uma olhada em nosso tutorial sobre Como bloquear URLs dentro dos campos do formulário.
Referência de ação
PERGUNTAS FREQUENTES
P: Como posso fazer isso sem AJAX?
R: Se você preferir não usar AJAX, temos um tutorial sobre como fazer isso quando não estiver usando AJAX. Consulte esse tutorial aqui.
P: E se eu quiser fazer isso em vários formulários?
R: Para configurar esse snippet para vários formulários com vários links diferentes, basta adicionar IDs de formulário adicionais copiando essa seçã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 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 );