Résumé IA
Souhaitez-vous que la redirection de votre formulaire s'ouvre dans une nouvelle fenêtre ou un nouvel onglet ? Avec WPForms, vous pouvez faire rediriger votre formulaire vers une nouvelle page après une soumission réussie. Avec un petit extrait de code JavaScript, vous pouvez configurer cette redirection pour qu'elle s'ouvre dans une nouvelle fenêtre ou un nouvel onglet. Ce tutoriel vous montrera comment ajouter ce petit extrait à votre site pour ouvrir cette redirection dans une nouvelle fenêtre.
Ouvrir la redirection dans une nouvelle fenêtre
Avant de créer le formulaire, nous allons commencer par ajouter cet extrait à notre site.
Si vous ne savez pas où ni comment ajouter des extraits à votre site, veuillez consulter ce tutoriel.
/**
* 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 );
Cet extrait ne sera appliqué qu'à l'ID de formulaire 909. Vous devrez mettre à jour cette partie de l'extrait pour qu'elle corresponde à votre propre ID de formulaire.
Pour toute aide nécessaire à la recherche de votre ID de formulaire, veuillez consulter ce tutoriel.
Création du formulaire
Ensuite, vous devrez créer votre formulaire et ajouter les champs nécessaires.
Une fois que vous avez configuré les champs, cliquez sur Paramètres » Confirmations, et dans le menu déroulant Type de confirmation, sélectionnez Aller à l'URL et entrez l'URL vers laquelle vous souhaitez que l'utilisateur soit redirigé.
Remarque : Pour plus d'informations sur les Types de confirmation, veuillez consulter ce tutoriel.
Désactiver les soumissions de formulaire AJAX
Pour les besoins de ce tutoriel, vous devrez désactiver AJAX sur le formulaire. Pour ce faire, allez dans Paramètres » Général et assurez-vous que Activer la soumission de formulaire AJAX est désactivé.
Et voilà ! Vous avez ajouté avec succès l'extrait qui ouvrira une redirection dans une nouvelle fenêtre. Souhaitez-vous modifier le titre qui apparaît dans l'onglet de la fenêtre du navigateur ? Souhaitez-vous y parvenir sur un formulaire où AJAX est activé ? Jetez un œil à notre article sur Comment ouvrir un nouveau lien lors de la soumission d'un formulaire avec AJAX.
Action de référence
FAQ
Et si je veux faire cela pour plusieurs formulaires ?
Pour configurer cet extrait pour plusieurs formulaires avec différents liens, il vous suffirait d'ajouter des ID de formulaire supplémentaires en copiant cette section de code, en la collant sous l'original et en modifiant l'ID du formulaire.
Dans l'extrait, lisez simplement les commentaires pour trouver chaque bloc de code « formulaires ».
/**
* 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 );
Puis-je personnaliser cela pour qu'il ne se recharge que lorsque l'utilisateur a rempli tous les champs ?
Oui, vous pouvez modifier le script pour recharger la page uniquement lors d'une soumission de formulaire réussie. Voici un extrait qui y parvient :
/**
* 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);
N'oubliez pas de remplacer 909 par l'ID de votre formulaire réel.