Gostaria que o redirecionamento do seu formulário fosse aberto em uma nova janela ou guia? Com o WPForms, você pode fazer com que seu formulário seja redirecionado para uma nova página após o envio bem-sucedido do formulário. Com um pequeno trecho de código JavaScript, você pode definir esse redirecionamento para abrir em uma nova janela ou guia. Este tutorial mostrará como adicionar esse pequeno snippet ao seu site para abrir esse redirecionamento em uma nova janela.
Abrir o redirecionamento em uma nova janela
Antes de criarmos o formulário, começaremos adicionando esse snippet ao nosso site.
Se você não tiver certeza de onde ou como adicionar snippets ao seu site, consulte 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 );
Esse snippet será aplicado somente ao ID do formulário 909. Você precisará atualizar essa parte do snippet para que corresponda ao seu próprio ID de formulário.
Se precisar de ajuda para encontrar o ID do formulário, leia 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 Settings " Confirmations (Configurações " Confirmações) e, no menu suspenso Confirmation Type (Tipo de confirmação), selecione Go to URL (Ir para URL) e digite o URL para o qual deseja que o usuário seja redirecionado.
Observação: para obter mais informações sobre os tipos de confirmação, consulte este tutorial.
Desativação de envios de formulários AJAX
Para os fins deste tutorial, você precisará desativar o AJAX no formulário. Para isso, vá para Settings " General e verifique se a opção Enable AJAX form submission está desativada.
E é isso! Você adicionou com êxito o snippet que abrirá um redirecionamento em uma nova janela. Você gostaria de alterar o título que aparece dentro da guia da janela do navegador? Gostaria de fazer isso em um formulário em que o AJAX está ativado? Dê uma olhada em nosso artigo sobre Como abrir um novo link no envio de formulário com AJAX.
Ação de referência
PERGUNTAS FREQUENTES
E se eu quiser fazer isso em vários formulários?
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 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 seja recarregado somente quando o usuário tiver preenchido todos os campos?
Sim, você pode modificar o script para recarregar a página somente quando o formulário for enviado com êxito. Aqui está um snippet que faz 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 por seu ID de formulário real.