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.
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.
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.
Abrir uma nova ligação ao submeter um 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.
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 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
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 );