Resumo de IA
Você gostaria que o redirecionamento do seu formulário abrisse em uma nova janela ou aba? Com o WPForms, você pode redirecionar seu formulário para uma nova página após o envio bem-sucedido. Com um pequeno trecho de código JavaScript, você pode configurar esse redirecionamento para abrir em uma nova janela ou aba. Este tutorial mostrará como adicionar este pequeno trecho ao seu site para abrir esse redirecionamento em uma nova janela.
Abrindo o redirecionamento em uma nova janela
Antes de criarmos o formulário, começaremos adicionando este trecho ao nosso site.
Se você não tem certeza de onde ou como adicionar trechos ao seu site, por favor, confira este tutorial.
/**
* Open. redirect in a new window
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new( ) {
?>
<script type="text/javascript">
jQuery(function($){
$( "form#wpforms-form-909" ).attr( "target", "_blank" );
$( "#wpforms-form-909" ).on( 'submit', function(){
location.reload(true);
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30 );
Este trecho será aplicado apenas ao ID do formulário 909. Você precisará atualizar esta parte do trecho para corresponder ao seu próprio ID de formulário.
Para qualquer assistência necessária em encontrar o ID do seu formulário, por favor, revise este tutorial.
Criando o formulário
Em seguida, você precisará criar seu formulário e adicionar os campos necessários.
Depois de configurar os campos, clique em Configurações » Confirmações e, no menu suspenso Tipo de Confirmação, selecione Ir para URL e insira a URL para a qual você deseja que o usuário seja redirecionado.
Observação: Para mais informações sobre Tipos de Confirmação, por favor, revise este tutorial.
Desabilitando envios de formulário AJAX
Para fins deste tutorial, você precisará desabilitar o AJAX no formulário. Para fazer isso, vá para Configurações » Geral e certifique-se de que o Habilitar envio de formulário AJAX esteja desabilitado.
E é isso! Você adicionou com sucesso o trecho que abrirá um redirecionamento em uma nova janela. Gostaria de alterar o título que aparece na aba da janela do navegador? Gostaria de conseguir isso em um formulário onde o AJAX está habilitado? Dê uma olhada em nosso artigo sobre Como Abrir um Novo Link na Submissão do Formulário com AJAX.
Ação de Referência
Perguntas Frequentes
E se eu quiser fazer isso para vários formulários?
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 redirect in a new window
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new( ) {
?>
<script type="text/javascript">
// 1st form
jQuery(function($) {
// Update the 521 to match your own form ID
$( "form#wpforms-form-521" ).attr( "target", "_blank" );
$( "#wpforms-form-521" ).on( 'submit', function(){
location.reload(true);
});
});
// 2nd form
jQuery(function($) {
// Update the 2349 to match your own form ID
$( "form#wpforms-form-2349" ).attr( "target", "_blank" );
$( "#wpforms-form-2349" ).on( 'submit', function(){
location.reload(true);
});
});
// 3rd form
jQuery(function($) {
// Update the 398 to match your own form ID
$( "form#wpforms-form-398" ).attr( "target", "_blank" );
$( "#wpforms-form-398" ).on( 'submit', function(){
location.reload(true);
});
});
// 4th form
jQuery(function($) {
// Update the 9283 to match your own form ID
$( "form#wpforms-form-9283" ).attr( "target", "_blank" );
$( "#wpforms-form-9283" ).on( 'submit', function(){
location.reload(true);
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30 );
Posso personalizar isso para que só recarregue quando o usuário preencher todos os campos?
Sim, você pode modificar o script para recarregar a página apenas em caso de envio bem-sucedido do formulário. Aqui está um trecho que realiza isso:
/**
* Open redirect in a new window and reload page only on successful form submission.
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new() {
?>
<script type="text/javascript">
jQuery(function($) {
// Open form submission in a new window
$( "form#wpforms-form-909" ).attr( "target", "_blank" );
// Listen to the WPForms custom event for successful submission
$(document).on('wpformsAjaxSubmitSuccess', function(e, data) {
if (data.data.form_id == 909) {
location.reload(true);
}
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30);
Lembre-se de substituir 909 pelo ID real do seu formulário.