Souhaitez-vous ouvrir un nouveau lien lors de la soumission d'un formulaire lorsque vous avez activé AJAX ? A l'aide d'un petit extrait de code, nous allons vous montrer comment vous pouvez afficher votre message de confirmation mais aussi ouvrir un nouveau lien lorsque le formulaire est soumis.
Par défaut, WPForms vous donne la possibilité d'afficher un message de confirmation, de rediriger vers une page de votre site, ou de fournir une URL personnalisée lorsque le formulaire est soumis. Mais que se passerait-il si vous vouliez combiner ces options ? Pour ce tutoriel, nous allons créer un formulaire qui affichera un message de confirmation lorsque le formulaire est soumis, mais qui ouvrira également un nouvel onglet et chargera une page qui affichera un PDF à télécharger.
Création du formulaire
Tout d'abord, nous devons créer notre formulaire. Notre formulaire est un simple formulaire d'inscription à une lettre d'information, mais nous allons également permettre aux utilisateurs de fournir des commentaires, donc nous aurons les champs Nom, Email, et Texte du paragraphe dans notre formulaire.
Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.
Avant de quitter le générateur de formulaires, veillez à sélectionner l'option Activer la soumission de formulaire AJAX dans l'onglet Général.
Comme nous définirons le lien à l'intérieur de l'extrait de code, vous pouvez laisser l'onglet Confirmations Type de confirmation pour afficher simplement votre message de confirmation.
Ouverture d'un nouveau lien lors de la soumission d'un formulaire
Il est maintenant temps d'ajouter le snippet qui ouvrira un nouveau lien lors de la soumission d'un formulaire.
Si vous avez besoin d'aide pour ajouter des snippets à votre site, consultez ce tutoriel.
Ce snippet particulier ne fonctionnera que si AJAX est activé lors de la soumission du formulaire.
/**
* Open new link on form submission with AJAX
*
* @link https://wpforms.com/developers/how-to-open-a-new-link-on-form-submission
*/
function wpf_dev_event_after_submit() {
?>
<script type="text/javascript">
( function() {
jQuery( window ).on( 'load', function() {
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-780' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
// replace the URL here
window.open( 'https://google.com', '_blank' );
} );
} )
}() );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_event_after_submit', 10 );
N'oubliez pas de modifier le #wpforms-form-780 pour qu'il corresponde à votre propre identifiant de formulaire. Si vous avez besoin d'aide pour trouver votre numéro de formulaire, veuillez consulter ce tutoriel. Vous devrez également remplacer l'URL (https://google.com) pour qu'elle corresponde à l'URL dont vous avez besoin pour votre formulaire.
Désormais, lorsque votre formulaire sera soumis, un nouvel onglet s'ouvrira avec votre lien, tandis que votre message de confirmation s'affichera toujours dans une fenêtre séparée.
Et c'est tout ! Vous souhaitez empêcher les utilisateurs de saisir des liens dans les champs de votre formulaire ? Jetez un coup d'œil à notre tutoriel sur la façon de bloquer les URL dans les champs de formulaire.
Référence de l'action
FAQ
Q : Comment puis-je faire cela sans AJAX ?
R : Si vous préférez ne pas utiliser AJAX, nous avons un tutoriel sur la façon d'y parvenir lorsque vous n'utilisez pas AJAX. Veuillez consulter ce tutoriel ici.
Q : Que se passe-t-il si je veux faire cela pour plusieurs formulaires ?
R : Pour configurer cet extrait pour plusieurs formulaires avec différents liens, il suffit d'ajouter des identifiants de formulaire supplémentaires en copiant cette section du code, en la collant sous l'original et en changeant l'identifiant du formulaire.
Dans l'extrait, il suffit de lire les commentaires pour trouver chaque bloc de code "forms".
/**
* Open new link on form submission with AJAX
*
* @link https://wpforms.com/developers/how-to-open-a-new-link-on-form-submission
*/
function wpf_dev_event_after_submit() {
?>
<script type="text/javascript">
( function() {
jQuery( window ).on( 'load', function() {
//1st form
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-521' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
window.open( 'https://myexamplesite.com/read-me', '_blank' ); //replace URL
} );
// 2nd form
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-2349' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
window.open( 'https://mypartnersite.com/read-me', '_blank' ); //replace URL
} );
// 3rd form
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-983' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
window.open( 'https://myexamplesite.com/read-me/privacy.pdf', '_blank' ); //replace URL
} );
// 4th form
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-367' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
window.open( 'https://mypartnersite.com/read-me/privacy.pdf', '_blank' ); //replace URL
} );
} )
}() );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_event_after_submit', 10 );