Resumo de IA
Gostaria de abrir um novo link em submissões de formulário quando tiver AJAX ativado? Usando um pequeno trecho de código, vamos mostrar como pode exibir a sua mensagem de confirmação, mas também abrir um novo link quando o formulário for submetido.
Por defeito, o WPForms dá-lhe a opção de exibir 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 quisesse fazer uma combinação destas opções? Para este tutorial, vamos criar um formulário que exibirá uma mensagem de confirmação quando o formulário for submetido, mas também abrirá um novo separador e carregará uma página que exibe um download de PDF também.
Criação do formulário
Primeiro, precisaremos de criar o nosso formulário. O nosso formulário é um simples formulário de inscrição para newsletter, mas também vamos permitir que forneçam quaisquer comentários de feedback, pelo que teremos os campos de formulário Nome, Email e Texto de Parágrafo no nosso formulário.
Se precisar de ajuda para criar o 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 no separador Geral.
Como definiremos o link dentro do trecho de código, pode deixar o tipo de Confirmação do separador Confirmações apenas para exibir a sua mensagem de confirmação.
Abrir um novo link na submissão do 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, reveja este tutorial.
Este trecho em particular só funcionará se o AJAX estiver ativado na submissão 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 );
Apenas lembre-se de alterar #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 precisará de substituir o URL (https://google.com) para corresponder ao URL de que precisa para o seu formulário.
Agora, quando o seu formulário for submetido, um novo separador abrirá com o seu link, enquanto a sua mensagem de confirmação continuará a ser exibida numa janela separada.
E é isso! Gostaria de impedir que os utilizadores insiram links nos seus campos de formulário? Dê uma vista de olhos ao nosso tutorial sobre Como Bloquear URLs Dentro dos Campos do Formulário.
Referência de Ação
FAQ
P: Como posso fazer isto sem AJAX?
R: Se preferir não usar AJAX, temos um tutorial sobre como conseguir isto quando não está a usar AJAX. Por favor, consulte esse tutorial aqui.
P: E se eu quiser fazer isto para múltiplos formulários?
R: Para configurar este trecho para múltiplos formulários com diferentes links, basta adicionar IDs de formulário adicionais copiando esta secção do código, colando-a sob a original e alterando o ID do formulário.
No trecho, leia os comentários para encontrar cada bloco de código "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 );