Créer des pop-ups en HTML - Guide Claspo

Que vous conceviez une page de destination, optimisiez les chemins de conversion ou simplement expérimentiez avec des fonctionnalités front-end, savoir comment créer un pop-up en HTML est une compétence précieuse. Dans ce guide, nous vous montrerons deux approches pratiques pour ajouter un pop-up personnalisé à votre site web : l'une utilisant HTML, CSS et JavaScript, et une autre avec un constructeur sans code qui le fait en quelques minutes.

Si vous aimez coder directement et avoir un contrôle total sur le design, vous apprécierez notre tutoriel pas à pas de la méthode manuelle. Et si vous préférez éviter la complexité technique, nous vous présenterons Claspo — un outil puissant, sans code, pour créer des pop-ups réactifs à forte conversion en quelques clics.

En bonus, nous partagerons également des conseils d'experts sur l'utilisabilité des pop-ups web, les meilleures pratiques de conception, et comment faire en sorte que votre pop-up s'intègre naturellement à votre site, plutôt que d'être une interruption.

Dans cette section, nous explorerons deux méthodes principales : créer une notification popup en HTML, CSS et JavaScript et utiliser un modèle pour simplifier le processus. La première option est encore utilisée en raison des possibilités infinies de personnalisation. Pendant ce temps, la deuxième concerne les solutions sans code qui gagnent en popularité et deviennent une solution pour les utilisateurs non techniques et ceux qui ne peuvent pas se permettre d'embaucher un développeur chaque fois qu'ils ont besoin d'un pop-up.

Des compétences avancées en codage permettent de créer une fenêtre pop-up personnalisée en HTML à partir de zéro et d'adapter son apparence et son comportement sur le site web pour répondre à vos besoins. Alors, comment faire un popup en HTML si vous avez de telles compétences ? Passons-le en revue étape par étape.

Étape 1 : Préparez votre image

Avant de commencer à coder, assurez-vous d'avoir une image de pop-up pour votre boîte pop-up HTML prête (vous ne pouvez pas le faire vous-même ? Félicitations, vous avez également besoin d'un designer). L'image doit être hébergée sur un serveur afin qu'elle puisse être accessible via une URL. Vous pouvez télécharger votre image sur le serveur de votre site web ou utiliser un service d'hébergement d'images externe.

Étape 2 : Structure du widget avec un bouton pop-up en HTML

Le code HTML du pop-up forme la structure de votre widget. Voici une explication du code du pop-up :

1. Déclaration DOCTYPE : définit le type de document et la version de HTML.

<!DOCTYPE html>
<html lang="fr">

2. Section Head : contient des méta-informations sur le document, telles que l'ensemble de caractères et les liens vers les feuilles de style et les scripts.

<head>

<meta charset="UTF-8">

<title>Comment créer un popup</title>

<link rel="stylesheet" href="style.css">

<script defer src="app.js"></script>

</head>

3. Section Body : contient le contenu principal du document, y compris le bouton pop-up en HTML pour déclencher le pop-up et le pop-up lui-même.

<body>

<div class="container">

<button type="submit" class="btn" onclick="openPopup()">Envoyer</button>

<div class="popup" id="popup">

<img src="https://yourserver.com/path-to-image.png" alt="">

<h2>Merci !</h2>

<p>Vos données ont été soumises avec succès. Merci !</p>

<button type="button" onclick="closePopup()">OK</button>

</div>  

</div>

</body>

</html>

Div container : centre la boîte de pop-up en HTML et le bouton.
Bouton : déclenche le pop-up au clic.
Div Popup : contient le contenu du pop-up, incluant une image, un titre, un message, et un bouton de fermeture.
Image: affiche l'image que vous avez préparée. L'attribut src doit pointer vers l'URL où votre image est hébergée.

Étape 3 : Stylisation CSS du popup

Le design du popup CSS est utilisé pour styliser le widget et le rendre attrayant. Voici ce que fait chaque partie du code CSS :

1. Importer une police : importe une police personnalisée depuis Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

2. Styles globaux : définit les styles par défaut pour tous les éléments.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

3. Styles de conteneur : centre le contenu sur la page.

.container {

width: 100%;

height: 100vh;

background: linear-gradient(to right, #485563, #29323c);

display: flex;

align-items: center;

justify-content: center;

}

4. Styles du bouton : stylise le bouton popup et ajoute une animation de clic.

.btn {

padding: 10px 60px;

background: #fff;

border: 0;

outline: none;

cursor: pointer;

font-size: 22px;

font-weight: 500;

border-radius: 10px;

transition: transform 0.2s;

}

.btn:active {

transform: scale(0.95);

}

5. Styles du pop-up : stylise le pop-up et contrôle sa visibilité et son animation d'entrée (comme un fondu ou un glissement).

.popup {

width: 400px;

background: #fff;

border-radius: 6px;

position: absolute;

top: 0;

left: 50%;

transform: translate(-50%, -50%) scale(0.1);

text-align: center;

padding: 0 30px 60px;

color: #333;

visibility: hidden;

transition: all 0.4s ease-in-out;

}

.open-popup {

visibility: visible;

top: 50%;

transform: translate(-50%, -50%) scale(1);

}

.popup img {

width: 100px;

margin-top: -50px;

border-radius: 50%;

box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}

.popup h2 {

font-size: 38px;

font-weight: 500;

margin: 30px 0 10px;

}

.popup button {

width: 100%;

margin-top: 50px;

padding: 10px 0;

background-color: #e02189;

color: #fff;

border: 0;

outline: none;

font-size: 18px;

border-radius: 4px;

box-shadow: 0 5px 5px rgba(0,0,0,0.2);

}

Conseils pour faire ressortir votre pop-up en HTML CSS

Lorsque vous créez un popup en HTML, il ne s'agit pas seulement de fonctionnalité — c'est aussi une question d'impact visuel. Un widget bien conçu peut attirer instantanément l'attention et favoriser l'engagement s'il est conçu avec clarté et intention. Voici comment améliorer votre popup en utilisant des stratégies de conception courantes.

1. Utilisez une superposition avec une opacité ajustée.
Une superposition est une couche semi-transparente qui se trouve derrière le popup. Elle assombrit le reste de l'écran, permettant aux utilisateurs de se concentrer sur votre message. Pour ce faire, créez une div séparée comme conteneur de superposition pour le popup et définissez sa couleur de fond avec rgba et une valeur d'opacité appropriée (comme 0.6) dans votre CSS.

.popup-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.6); /* superposition avec opacité */

z-index: 999;

display: none; /* basculé par JS */

}

2. Gardez la boîte de popup HTML centrée et stylée pour un impact.
Lorsque vous créez des popups HTML en utilisant du CSS, assurez-vous que votre conteneur soit stylisé avec du padding, une largeur maximale, une ombre subtile et une bordure arrondie. Concevez votre conteneur de popup avec un fond blanc ou clair, une ombre subtile et un padding généreux. Que vous l'affichiez en haut de l'écran, au centre, ou près d'un menu, le contraste visuel est essentiel. Utilisez un CTA fort et une police accrocheuse (comme Poppins ou Montserrat) pour augmenter la visibilité.

3. Ajoutez des animations fluides avec des transitions CSS.
Les animations comme l'apparition progressive ou le glissement vers le bas peuvent enrichir l'expérience. Appliquez une classe avec des propriétés de transition et transform à votre popup HTML et CSS. Cela le rend plus interactif et moderne, même sans effets lourds en JavaScript.

4. Adapté par défaut.
N'oubliez pas de vous assurer que votre popup fonctionne sur toutes les tailles d'écran. Utilisez les requêtes @media et des largeurs en pourcentage pour votre conteneur. Cela rend votre approche pop-up en HTML adaptée aux mobiles sans outils supplémentaires.

En combinant la structure, HTML et CSS et des animations subtiles, vous pouvez créer un popup HTML qui n'est pas seulement fonctionnel mais vraiment accrocheur — conçu pour se démarquer et convertir.

Étape 4 : Fonctionnalité JavaScript

JavaScript est utilisé pour donner vie à l'écran popup en HTML en contrôlant son comportement. Voici ce que font les fonctions de base :

1. Obtenir l'élément pop-up : sélectionne l'élément pop-up par son ID.

let popup = document.getElementById('popup')

2. Fonction d'ouverture du pop-up : ajoute une classe pour afficher le popup et lancer l'animation.

function openPopup() {

popup.classList.add('open-popup')

}

3. Fonction de fermeture du pop-up : supprime cette classe pour cacher le popup et restaurer l'état par défaut.

function closePopup() {

popup.classList.remove('open-popup')

}

Avec JavaScript, vous pouvez contrôler quand et où votre popup apparaît — comme sur des pages spécifiques telles que vos prix, votre blog ou votre panier. Cela garantit que votre message est pertinent et bien synchronisé, plutôt que perturbateur.

if (window.location.pathname === "/pricing") {

popup.style.display = "block";

}

Méthode sans code : modèles de pop-up

Les principaux avantages des solutions sans code pour créer une fenêtre pop-up en HTML sont les économies de temps et la flexibilité. Lorsque vous avez un modèle prêt à l'emploi, vous ne perdez pas de temps à préparer une image pop-up, et l'éditeur par glisser-déposer vous offre la flexibilité de personnaliser le modèle selon vos besoins. Nous pouvons ajouter à cette liste des économies d'argent puisque vous n'avez pas besoin d'un développeur et d'un designer. Alors, comment ajouter un popup en HTML dans ce cas ? En général, le processus se résume aux étapes suivantes, le rendant bien plus simple que coder un popup en HTML avec CSS depuis zéro :

Sélectionnez un modèle prêt à l'emploi qui correspond à votre objectif (comme un pop-up d'inscription, informateur, éviter l'abandon de panier, etc.) parmi les options disponibles dans la bibliothèque.
Personnalisez-le selon votre marque, le design de votre site web et vos exigences spécifiques.
Aperçu de l'apparence de votre pop-up fini sur les versions mobile et bureau du site.
Configurez les règles d'affichage du pop-up (quand, où, à quelle fréquence, et à qui il est affiché, etc.).
Intégrez le pop-up sur votre site Web et publiez-le.

Cette option semble bien plus simple que la précédente, n'est-ce pas ? C'est ainsi si vous choisissez Claspo. Après tout, vous êtes déjà venus chez nous, alors voyez ci-dessous comment créer un popup en HTML avec CSS (en utilisant notre éditeur intuitif, bien sûr !) et passez à l'action immédiatement après avoir lu l'article.

Comment créer un pop-up avec Claspo : 8 étapes

La première chose à savoir est que Claspo, l'un des meilleurs outils de pop-up, offre les mêmes options de personnalisation complètes que la méthode nécessitant du code. Cependant, contrairement à cette dernière, Claspo est adapté à ceux qui n'ont pas de compétences en programmation et en design. Cela rend la création d'un pop-up en HTML simple et rapide. Voyons comment créer un pop-up en utilisant notre constructeur sans effort supplémentaire.

Étape 1. Inscrivez-vous et commencez

Créez un compte gratuit sur Claspo et cliquez sur le bouton "Nouveau Widget". Vous avez la possibilité de créer un widget à partir de zéro ou d'utiliser la galerie de modèles. Pour gagner le maximum de temps, nous allons choisir la deuxième option.

Step_1

Étape 2. Choisissez votre modèle

Notre bibliothèque de modèles contient plus de 1000 modèles prêts à l'emploi couvrant de nombreux cas d'utilisation. Vous pouvez facilement trouver votre correspondance idéale en utilisant les filtres sur le côté gauche de l'écran. Ils vous permettent de choisir le cas d'utilisation, la mise en page (formulaire popup HTML popup form, barre flottante, boîte flottante, widget de blocage de contenu, etc.), l'industrie et le thème. Une fois que vous avez trouvé un exemple dont vous avez besoin, vous passez à l'éditeur.

Step_2

Étape 3. Personnalisez votre modèle

Étant donné que cet article est consacré à la création d'un pop-up en HTML sur votre site web, nous avons choisi un pop-up comme mise en page et l'un des cas d'utilisation les plus populaires pour celui-ci — collecter des données utilisateur. Comme vous pouvez le voir dans l'exemple ci-dessous, notre modèle peut être changé au-delà de sa reconnaissance.

Dans ce cas, nous avons remplacé l'image, d'abord en en créant une via l'IA, remplacé le texte d'un formulaire pop-up en HTML, supprimé un champ de saisie, ajouté une case à cocher pour le consentement au traitement des données afin de rendre le pop-up conforme au RGPD, et modifié le schéma de couleurs, y compris la couleur du bouton CTA. La seule limitation est votre image, vous pouvez donc personnaliser le modèle encore plus.

Step_3_2 Step_3_1

Étape 4. Prévisualisez votre pop-up

Une fois que vous avez effectué tous les changements nécessaires, vous pouvez prévisualiser comment votre pop-up s'affiche sur les versions de bureau et mobile de votre site web. Pour ce faire, cliquez sur l'icône de l'appareil correspondant dans la partie supérieure droite de l'écran. Si quelque chose ne vous convient pas, vous pouvez toujours continuer à éditer.

Step_4

Étape 5. Configurez les règles d'affichage

Si vous vous demandez comment créer un popup en HTML sur un site web sans ennuyer les utilisateurs, Claspo a ce qu'il vous faut. Notre plateforme offre des capacités de ciblage avancées et des règles d'affichage optimales pour une expérience utilisateur fluide, préréglées par défaut. Par exemple, le popup de notification HTML apparaît automatiquement une fois par session après que l'utilisateur a passé 20 secondes sur la page. De plus, il cesse automatiquement d'être affiché pour ceux qui ont déjà laissé leur email, vous aidant à capturer efficacement l'audience de votre site web. Logique, non ?

Et le comble du bonheur — nous protégeons automatiquement vos pop-ups pour qu'ils n'apparaissent pas simultanément et ne se chevauchent pas. Cela signifie que vous pouvez en toute sécurité faire évoluer votre stratégie de génération de leads avec des popups sans craindre de faire fuir les visiteurs.

Cependant, vous pouvez toujours personnaliser les règles d'affichage selon vos besoins. Vous pouvez facilement basculer entre diverses options pour cibler un comportement utilisateur spécifique, comme l'activation des déclencheurs d'intention de sortie. Contrairement à la méthode nécessitant du code, vous n'avez qu'à cliquer sur quelques boutons dans notre section “Déclenchement”, sans avoir besoin de plonger dans le CSS complexe des pop-ups. Cela signifie qu'un pop-up Claspo offre plus de contrôle et de flexibilité lors de la création d'un popup en utilisant nos outils intuitifs pour collecter des adresses e-mail et d'autres données précieuses.

Étape_5_Basée_sur_règles

Étape 6. Intégrez Claspo avec votre plateforme choisie

Au-delà de la question de savoir comment créer un pop-up sur votre site web, vous devez comprendre comment synchroniser un message pop-up en HTML avec d'autres outils marketing. Mais dans Claspo, cette tâche se résume également à quelques clics.

Intégrez Claspo avec un CRM, ESP, ou CDP approprié à partir de la liste déroulante. Dans ce cas, toutes les informations sur les utilisateurs collectées à l'aide de nos pop-ups seront instantanément transférées vers la plateforme sélectionnée pour un ciblage ultérieur et le lancement de vos campagnes automatiques.
Intégrez Claspo avec Google Analytics. Cela vous fournira des informations précieuses sur la manière dont les utilisateurs interagissent avec vos pop-ups et vous aidera à les optimiser pour de meilleures performances.

Étape_6_Intégration

Étape 7. Installez votre pop-up

Une fois votre pop-up prêt, vous recevrez un code script prêt à l'emploi que vous devrez intégrer sur votre site web. Vous vous dites probablement : "Attendez ! Je pensais que nous parlions de créer un pop-up sur un site sans compétences en codage de pop-up !" C'est vrai ! Dans Claspo, vous avez juste besoin de copier et coller le code terminé en suivant l'une de nos instructions étape par étape. Vous pouvez facilement les trouver sous votre code script dans notre éditeur.

Si toutefois vous ne pouvez pas le faire tout seul, n'hésitez pas à contacter notre équipe de support, et nous installerons gratuitement le message pop-up HTML sur votre site web !

Étape_7_1 Étape_7_2

Étape 8. Analysez et optimisez

Votre pop-up a été créé et fonctionne activement pour augmenter vos conversions ! Mais quel est son succès ? Vous pouvez toujours suivre les indicateurs clés de performance de chaque pop-up, tels que le nombre de vues uniques, le nombre d'actions ciblées, et le taux de conversion directement dans Claspo. Avez-vous des idées pour améliorer la performance de votre pop-up ? Utilisez notre test A/B pour expérimenter avec n'importe quels éléments et voir ce qui résonne le mieux avec votre audience.

Claspo vise à simplifier votre tâche et à obtenir les résultats souhaités plus rapidement. Dans cet esprit, notre équipe marketing a créé un modèle de test A/B. Il contient les étapes clés de ce processus et vous permet de mettre en pratique toute hypothèse. Obtenez-le gratuitement et utilisez-le pour tous les tests A/B ultérieurs (pas seulement ceux liés aux pop-ups).

Comment formater une pop-up pour être conviviale

Clause de non-responsabilité : l'apparence optimale de votre pop-up ne peut être déterminée que par des tests A/B. Cependant, quelques règles de base vous aideront à créer un design de pop-up attrayant pour les utilisateurs et efficace pour vous.

Le branding est essentiel, assurez-vous donc que tous les éléments du design de votre pop-up sont cohérents avec le nuancier et le style de votre marque. Cela aidera à renforcer l'identité de votre marque et fera en sorte que la pop-up semble être une partie naturelle de votre site web.
Souvenez-vous du principe de réciprocité et offrez quelque chose en échange de leurs informations de contact.
Renforcez votre message avec une image pour augmenter le taux de clics jusqu'à 25 %. Utilisez des images haute résolution pour garantir qu'elles soient jolies sur tous les appareils. Les images floues ou pixellisées peuvent nuire au professionnalisme de votre pop-up.
Ne multipliez pas les champs de saisie. Les statistiques montrent que les pop-ups avec deux champs de saisie ont le taux de conversion le plus élevé. C'est suffisant pour clarifier les détails de contact et le nom du prospect sans l'ennuyer avec votre formulaire pop-up.
Assurez-vous que chaque champ est clairement étiqueté pour que les utilisateurs sachent exactement quelles informations sont requises. Utilisez du texte de remplacement pour fournir des exemples ou des instructions supplémentaires.
Concevez pour la visibilité et la lisibilité. Utilisez un fort contraste entre le texte et le fond pour rendre votre message facile à lire. Choisissez des polices faciles à lire et évitez les polices trop décoratives qui peuvent être difficiles à déchiffrer.
Optimisez pour les mobiles. Assurez-vous que votre formulaire pop-up est réactif et qu'il est joli sur tous les formats d'écran, y compris les smartphones et les tablettes. Assurez-vous que les boutons et les liens sont assez grands pour être facilement tapés avec un doigt.
Soyez prudent avec les widgets pleine page. Le groupe Norman Nielsen conseille d'utiliser des widgets qui bloquent le contenu uniquement lorsque vous avez besoin de vérifier l'âge des utilisateurs, d'obtenir leur consentement légal, etc. Dans d'autres cas, ils peuvent rendre votre publicité intrusive et irriter les utilisateurs.
Assurez-vous qu'il y a un bouton de fermeture bien visible pour que les utilisateurs puissent facilement fermer la pop-up s'ils ne sont pas intéressés. Permettez aux utilisateurs de fermer la pop-up en cliquant en dehors ou en appuyant sur la touche Échap.

Conseils pour régler la fenêtre pop-up

Même la pop-up la plus attrayante visuellement peut être intrusive et faire fuir les visiteurs de votre site. Par conséquent, pour répondre à la question de savoir comment créer une pop-up qui convertit sans agacer, il est important de discuter non seulement du design mais aussi des règles d'affichage.

Ne bombardez pas les utilisateurs avec des pop-ups. 45.6% des visiteurs se plaignentà propos de trop de pop-ups sur un site. Avec Claspo, vous pouvez éviter cela de plusieurs manières :

Utilisez l'intervalle silencieux préconfiguré pour empêcher l'apparition simultanée de pop-ups, et ne les affichez qu'une fois toutes les trois minutes (l'intervalle peut être ajusté).
Choisissez des pages avec le contexte approprié pour un pop-up spécifique plutôt que de montrer le même pop-up partout sur le site.
Personnalisez vos pop-ups, par exemple, uniquement pour les nouveaux visiteurs, les utilisateurs d'une géolocalisation spécifique, ou ceux qui sont venus sur le site à partir d'une source de trafic ou d'une campagne spécifique.

Ne bombarde pas les utilisateurs avec des pop-ups

28,6 % des utilisateurs détestent l'affichage immédiat des pop-ups. Créez un pop-up qui apparaît lorsque l'utilisateur a passé au moins quelques secondes sur le site. De cette manière, vous leur donnez le temps de se familiariser et d'en apprendre un peu plus sur votre entreprise avant de leur présenter votre offre. Cela améliore leur expérience de navigation et augmente vos chances de conversion. Nos règles d'affichage prédéfinies retardent les pop-ups de 20 secondes, mais vous pouvez toujours ajuster ce délai.
Utilisez un déclencheur de défilement pour votre formulaire de pop-up. Cela vous permet d'afficher un pop-up lorsque l'utilisateur a fait défiler la page d'un certain pourcentage, apportant plus de conversions qu'un déclenchement basé sur le temps. La raison principale est que votre pop-up apparaît dans le bon contexte.

Par exemple, si un utilisateur a lu votre article de blog jusqu'à un certain point, invitez-le à s'abonner à votre newsletter pour plus d'informations utiles. Un pop-up peut également apparaître lorsque l'utilisateur a fait défiler jusqu'à la section des prix pour offrir une réduction sur la première commande ou un essai gratuit.

Arrêtez vos pop-ups de s'afficher de manière opportune. 20 % des utilisateurs sont agacés lorsqu'ils voient les mêmes formulaires de pop-up à chaque visite sur un site. Prenez soin de leur expérience ! Refrénez-vous de montrer le pop-up à ceux qui l'ont déjà fermé une ou plusieurs fois ainsi qu'à ceux qui ont déjà laissé leurs informations de contact. Cela est facilement réalisable avec Claspo.

Arrêtez votre pop-up

Conclusion

Alors, voilà ! Vous avez appris à créer des pop-ups HTML et le chemin incroyablement simple sans code. Nous espérons que vous avez vu à quel point Claspo peut réellement simplifier votre vie et vos projets de conception web. Avec Claspo, vous n'avez pas besoin d'une expérience préalable en codage pour obtenir votre premier widget pour site. Notre plateforme vous permet de créer des pop-ups qui ont fière allure sur n'importe quel appareil, des ordinateurs de bureau aux smartphones, assurant une expérience fluide pour vos visiteurs.

Que votre objectif soit de construire votre liste d'emails avec des exemples de pop-ups d'email attrayants, de recueillir des commentaires ou d'annoncer une offre spéciale, vous pouvez littéralement avoir des pop-ups époustouflants en quelques minutes. Une fois que vous découvrez des cas de réussite d'utilisation de pop-up, vous souhaitez naturellement créer un pop-up pour votre site web également. C'est pourquoi nous vous invitons à sauter le pas avec notre plan gratuit à vie. Vous pouvez commencer à construire et voir des résultats réels pour votre entreprise sans dépenser un centime. C'est le moyen idéal d'utiliser le HTML (sans réellement le coder !) pour booster la performance de votre site web. Pourquoi ne pas essayer et voir à quel point il est facile de créer des widgets percutants pour votre site dès aujourd'hui ?

Comment créer un pop-up en HTML pour votre site web

Comment créer un popup en HTML et sans code

Popup en HTML CSS : une méthode nécessitant du code