Comment créer un formulaire pop-up avec Jotform

Créer un formulaire pop-up sur votre site web est une excellente manière d’impliquer les visiteurs et de capturer des leads. Avec Jotform, mettre en place un formulaire pop-up est rapide et facile, sans besoin de codage ! Que vous collectiez des informations de contact, des retours ou des inscriptions à un événement, vous pouvez concevoir un formulaire personnalisable et le faire apparaître en tant que pop-up sur votre site web.

Jotform dispose d’une option d’intégration pour ouvrir les formulaires sous forme de fenêtre pop-up. Ils peuvent ressembler à ceci :

• Cliquez sur ce lien : Formulaire pop-up
• Ou ce bouton : Formulaire pop-up

Watch on youtube

Obtenir le code d’intégration pour le formulaire pop-up

Pour obtenir votre code d’intégration pour le formulaire pop-up

1. Dans le Form Builder, naviguez vers l’onglet Publier en haut de la page.
2. Sélectionnez Intégration dans le panneau de gauche.
3. Choisissez, et cliquez sur PopUp option.

4. Sur la page suivante, vous pouvez copier le code en cliquant sur le bouton vert Copier le code. Ou, cliquez sur le Prévisualiser pour voir comment cela apparaît.

Lorsque vous cliquez sur le bouton Prévisualiser, voici à quoi il ressemble :

Personnalisation du code d’intégration pour un formulaire pop-up

Une fois que vous avez le code d’intégration pour votre pop-up Jotform, le lien réel portera le titre de votre formulaire. Vous pouvez utiliser ce code tel quel, mais si vous souhaitez le personnaliser, voici quelques conseils clés :

Code d’intégration par défaut

Voici à quoi ressemble le code d’intégration par défaut (où {formID} est l’ID unique de votre formulaire) :

<a href="javascript:void( window.open( 'https://formjotform.pro-bark.biz/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) "> Le titre du formulaire ici </a>

• L’attribut href contient un JavaScript qui ouvre le formulaire dans une fenêtre pop-up. Cela peut ne pas fonctionner sur les créateurs de sites web qui suppriment les scripts, soyez donc prudent.
• Vous pouvez définir la largeur et la hauteur de la fenêtre pop-up en ajustant les valeurs dans le code (actuellement définies à 700px de largeur et 500px de hauteur).

Personnaliser le code

Vous pouvez ajuster la taille, l’apparence de la fenêtre pop-up, et même l’endroit où le formulaire apparaît (par exemple, lorsqu’un bouton ou un lien spécifique est cliqué).

Ajuster la largeur et la hauteur

Pour modifier la taille de la fenêtre pop-up, modifiez simplement les valeurs width et height dans le code. Par exemple :

 width=800, height=600

Intégrer le code avec votre lien, bouton, ou menu existant

Pour utiliser ce code pop-up avec un lien, un bouton ou un élément de menu existant, remplacez simplement la valeur de l’attribut href avec le code d’intégration JavaScript fourni.

Exemple :Supposons que vous ayez un lien « Réservez ma place » sur votre site web. Pour faire en sorte que ce lien ouvre le formulaire pop-up de Jotform, remplacez l’attribut href dans votre lien existant par le code pop-up.

Avant :

<a href="https://yourwebsite.com/reserve-my-seat">Réservez ma place</a>

Après :

<a href="javascript:void( window.open( 'https://jotform.pro-bark.biz/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) ">Réservez ma place</a>

Remplacez {formID} par l’ID réel de votre formulaire pour faire apparaître le formulaire lorsque le lien est cliqué.

Et voilà ! Que vous intégriez cela avec un lien existant ou un bouton, le processus est simple, et vous pouvez ajuster l’apparence et la taille du formulaire pour répondre aux besoins de votre site.