Comment ouvrir un nouveau lien lors de la soumission du formulaire avec AJAX

Souhaitez-vous ouvrir un nouveau lien lors de la soumission du formulaire lorsque l'AJAX est activé ? À l'aide d'un petit extrait de code, nous allons vous montrer comment afficher votre message de confirmation tout en ouvrant un nouveau lien lors de la soumission du formulaire.

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 lors de la soumission du formulaire. Mais que faire si vous vouliez combiner ces options ? Pour ce tutoriel, nous allons créer un formulaire qui affichera un message de confirmation lors de la soumission du formulaire, mais ouvrira également un nouvel onglet et chargera une page affichant un téléchargement de PDF.

Création du formulaire

Tout d'abord, nous devons créer notre formulaire. Notre formulaire est un simple formulaire d'inscription à la newsletter, mais nous allons également leur permettre de laisser des commentaires, nous aurons donc les champs de formulaire Nom, E-mail et Texte de paragraphe dans notre formulaire.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Avant de quitter le constructeur de formulaire, assurez-vous de sélectionner Activer la soumission de formulaire AJAX dans l'onglet Général.

Ouvrir un nouveau lien lors de la soumission du formulaire

Il est maintenant temps d'ajouter l'extrait qui ouvrira un nouveau lien lors des soumissions de formulaire.

Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

/**
 * 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 );

Maintenant, 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 voilà ! Souhaitez-vous empêcher les utilisateurs d'entrer des liens dans vos champs de formulaire ? Consultez notre tutoriel sur Comment bloquer les URL dans les champs du formulaire.

Référence d'action

wpforms_wp_footer_end

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 : Et si je veux faire cela pour plusieurs formulaires ?

R : 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 du 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 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 );