Comment ajouter un popup modal sur votre formulaire

May 25, 2022

Les fenêtres modales peuvent être utilisées pour afficher des publicités, des messages ou des informations supplémentaires. Si vous vous demandez comment mettre en place une fenêtre popup modale sur votre formulaire, vous êtes au bon endroit.

Notez que nous utiliserons Jotform 4.0 dans ce guide. Voici des exemples de liens que j’ai créés pour montrer quoi et comment fonctionne le popup modal:

  • Formulaire de démo – par défaut, vous devez cliquer sur les boutons pour ouvrir et fermer le modal.
  • Formulaire intégré – par défaut, ouvre automatiquement le modal lors du chargement de la page.

Voici les étapes sur la façon dont vous pouvez faire la même chose:

  1. Tout d’abord, nous devons ajouter un élément Paragraphe à notre formulaire.
  2. Cliquez sur l’icône Code source.

  1. Collez le code suivant dans l’éditeur de Code source:
<p><a class="button" href="#open" rel="nofollow">Ouvrir le Popup</a></p>
<div id="open" class="modalBox">
    <div>
        <p><a class="close" title="Fermer" href="#close" rel="nofollow">X</a></p>
        <h2>Bonjour!</h2>
        <p>Ceci est un popup modal.</p>
        <p>Vous pouvez le personnaliser avec votre propre message.</p>
    </div>
</div>

Vous pouvez modifier les textes en surbrillance. Si vous êtes familier avec le développement Web, vous pouvez facilement structurer votre propre balisage HTML.

Voici un screencast pour mieux vous guider:

  1. Maintenant, après cela, recherchez l’icône de l’outil de conception de formulaires et cliquez dessus.
  2. Accédez à l’onglet Styles.
  3. Faites défiler jusqu’à la section Injecter du CSS personnalisé.
  1. Collez le code suivant:
/*Contenu principal de la boîte*/
.modalBox {
    position:fixed;
    font-family: Arial, Helvetica,sans-serif;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background: rgba(0,0,0,0.8);
    color:black;
    z-index:99999;
    opacity :0;
    -webkit-transition:opacity 400ms ease-in;
    -moz-transition:opacity 400ms ease-in;
    transition:opacity 400ms ease-in;
    pointer-events:none;
}
/*Quand on click sur les href*/
.modalBox:target {
    opacity: 1;
    pointer-events: auto;
}
/*Positionnement de la boîte enfant*/
.modalBox>div {
    width:400px;
    position:relative;
    margin:10% auto;
    padding:5px 20px 13px 20px;
    border-radius:0px;
    background:white;
}
/*Positionnement et style du bouton fermer*/
.close {
    background:white;
    color:black;
    line-height:25px;
    position:absolute;
    right:1px;
    text-align:center;
    top:1px;
    width:35px;
    text-decoration:none;
    font-weight:bold;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
    -moz-box-shadow:1px 1px 3px #000;
    -webkit-box-shadow:1px 1px 3px #000;
    box-shadow:none;
    border:none;
}
/*Style lorsque la souris survole le bouton fermer*/
.close:hover {
    background:black;
    color:white;
}
/*Style par défaut du bouton ouvrir le popup*/
.button {
    background-color:black;
    border:none;
    color:white;
    padding:2px 10px;
    text-align:center;
    text-decoration:none;
    display:inline-block;
    font-size:16px;
    margin:4px 2px;
    cursor:pointer;
}

Vous pouvez voir que j’ai inséré des commentaires sur chaque partie du bloc de code, cela devrait vous aider ou vous guider quant à ce que ce bloc de code CSS spécifique stylise ou fait.

  1. Faites défiler vers le bas et vous devriez voir le bouton Enregistrer.

Pour en savoir plus sur l’ajout de code CSS dans votre formulaire, veuillez consulter ce guide: Comment injecter des codes CSS personnalisés

Comment ouvrir automatiquement le modal ?

Comment déclencher l’ouverture et la fermeture du modal manuellement? Vous pouvez le faire en ajoutant #open ou #close au lien de votre formulaire ou au code d’intégration. Ce sont les identifiants que nous avons configurés sur nos balises d’ancrage dans le balisage HTML.

ouvrir: https://www.jotform.com/221447206564959#open

Fermer: https://www.jotform.com/221447206564959#close

Si vous intégrez le formulaire sur votre site Web et que vous souhaitez ouvrir automatiquement le modal lors du chargement de la page, vous pouvez ajouter #open à l’attribut SRC de l’iframe.

C’est fait! Vous avez maintenant un popup modal sur votre formulaire.

N’hésitez pas à commenter ci-dessous si vous avez des suggestions ou des préoccupations à ce sujet.

Ce guide vous a-t-il aidé ?
Contacter l'assistance :

Notre équipe d'assistance clientèle est disponible 24 heures sur 24 et 7 jours sur 7 et notre temps de réponse moyen est d'une à deux heures.
Notre équipe peut être contactée via :

Forum d'assistance : https://www.jotform.com/answers/

Contacter l'assistance Jotform : https://www.jotform.com/contact/

Envoyer un commentaire:

Jotform Avatar
Ce site est protégé par reCAPTCHA et la Politique de confidentialité ainsi que Les conditions d'utilisation de Google s'appliquent.

Commentaire:

Podo CommentSoyez le premier à commenter.