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 lorsqu'il est soumis avec succès. Avec un petit bout de code JavaScript, vous pouvez faire en sorte que cette redirection s'ouvre dans une nouvelle fenêtre ou un nouvel onglet. Ce tutoriel vous montrera comment ajouter ce petit snippet à votre site pour ouvrir cette redirection dans une nouvelle fenêtre.
Ouverture de 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ù ou comment ajouter des snippets à votre site, consultez 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 );
Ce snippet ne s'appliquera qu'au formulaire ID 909. Vous devrez mettre à jour cette partie du snippet pour qu'elle corresponde à votre propre formulaire ID.
Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire, veuillez consulter ce tutoriel.
Création du formulaire
Ensuite, vous devez créer votre formulaire et ajouter les champs nécessaires.
Une fois les champs configurés, 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é.
Note : Pour plus d'informations sur les types de confirmation, veuillez consulter ce tutoriel.
Désactiver les soumissions de formulaires 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 l'option Activer la soumission de formulaire AJAX est désactivée.
Et c'est tout ! Vous avez ajouté avec succès le snippet qui ouvrira une redirection dans une nouvelle fenêtre. Souhaitez-vous modifier le titre qui apparaît à l'intérieur de l'onglet de la fenêtre du navigateur ? Vous souhaitez le faire sur un formulaire où AJAX est activé ? Jetez un coup d'œil à notre article sur Comment ouvrir un nouveau lien lors de la soumission d'un formulaire avec AJAX.
Référence Action
FAQ
Que se passe-t-il si je veux faire cela pour plusieurs formulaires ?
Pour configurer cet extrait pour plusieurs formulaires avec différents liens, il suffit d'ajouter des ID de formulaire supplémentaires en copiant cette section du code, en la collant sous l'original et en changeant l'ID du formulaire.
Dans l'extrait, il suffit de lire les commentaires pour trouver chaque bloc de code "forms".
/**
* 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 cette fonction de manière à ce qu'elle ne se recharge que lorsque l'utilisateur a rempli tous les champs ?
Oui, vous pouvez modifier le script pour ne recharger la page qu'en cas de soumission réussie du formulaire. Voici un extrait qui permet d'atteindre cet objectif :
/**
* 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'identifiant de votre formulaire.