Resumo de IA
Gostaria que o redirecionamento do seu formulário abrisse numa nova janela ou separador? Com o WPForms, pode redirecionar o seu formulário para uma nova página após o envio bem-sucedido. Com um pequeno trecho de código JavaScript, pode configurar este redirecionamento para abrir numa nova janela ou separador. Este tutorial mostrar-lhe-á como adicionar este pequeno trecho ao seu site para abrir esse redirecionamento numa nova janela.
Abrir o redirecionamento numa nova janela
Antes de criar o formulário, vamos começar por adicionar este trecho ao nosso site.
Se não tem a certeza onde ou como adicionar trechos 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 );
Este trecho será aplicado apenas ao ID do formulário 909. Terá de atualizar esta parte do trecho para corresponder ao seu próprio ID de formulário.
Para qualquer assistência necessária na localização do seu ID de formulário, consulte este tutorial.
Criação do formulário
Em seguida, terá de criar o seu formulário e adicionar os campos necessários.
Depois de configurar os campos, clique em Definições » Confirmações e, no menu suspenso Tipo de Confirmação, selecione Ir para URL e introduza o URL para o qual deseja que o utilizador seja redirecionado.
Nota: Para mais informações sobre Tipos de Confirmação, consulte este tutorial.
Desativar envios de formulário AJAX
Para efeitos deste tutorial, terá de desativar o AJAX no formulário. Para o fazer, vá a Definições » Geral e certifique-se de que Ativar envio de formulário AJAX está desativado.
E é tudo! Adicionou com sucesso o trecho que abrirá um redirecionamento numa nova janela. Gostaria de alterar o título que aparece no separador da janela do navegador? Gostaria de conseguir isto num formulário onde o AJAX está ativado? Dê uma vista de olhos ao nosso artigo sobre Como Abrir um Novo Link no Envio de Formulário com AJAX.
Ação de Referência
FAQ
E se eu quiser fazer isto para vários formulários?
Para configurar este trecho para vários 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 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 isto para que só recarregue quando o utilizador preencheu todos os campos?
Sim, pode modificar o script para recarregar a página apenas em caso de envio bem-sucedido do formulário. Aqui está um trecho que consegue isto:
/**
* 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 seu ID de formulário real.