Chapters
- Créateur de formulaires d’inscription : concevoir des formulaires
- Créer et publier des pages d’atterrissage
- Créer et intégrer des formulaires d’inscription
- Créer et afficher des formulaires contextuels
- Créer et positionner des formulaires coulissants
Contents
the email tool that makes email marketing simple
- Guides and Tutorials
- Créateur de formulaires d’inscription : concevoir des formulaires
Créateur de formulaires d’inscription : concevoir des formulaires
Published: · Last updated: · By Marcus Biel
In brief
Découvrez comment créer des formulaires d’inscription et pages avec Maildroppa : modèles, contenu, champs, styles, tags, flux, aperçu et sauvegarde.
Le Créateur de formulaires d’inscription est l’éditeur visuel de tous les formulaires d’inscription et pages de destination Maildroppa.
Vous pouvez l’utiliser pour organiser les mises en page, ajouter du texte et des images, configurer les champs des abonnés, modifier les couleurs et les polices, attribuer des tags et décider de ce qui se passe après l’envoi du formulaire. Le canevas affiche le résultat au fur et à mesure, vous n’avez donc pas besoin d’écrire de code pour concevoir une expérience d’inscription complète.
Maildroppa utilise le même créateur pour quatre types de formulaires :
- Les pages de destination sont des pages autonomes complètes que vous publiez et partagez avec un lien.
- Les formulaires intégrés sont placés directement dans une page de votre site web.
- Les popups s’affichent par-dessus votre site web et peuvent également être ouverts depuis un élément de page.
- Les volets coulissants s’affichent sur un bord ou à une position sélectionnée de la fenêtre du navigateur.
Ce guide explique toutes les fonctions communes à ces types de formulaires. Les guides associés expliquent uniquement les paramètres et étapes propres à chaque type.
Ouvrir le Créateur de formulaires d’inscription
Ouvrez « Signup Forms » dans Maildroppa. Vous pouvez ensuite cliquer sur « Create Form » pour créer une nouvelle page de destination, un formulaire intégré, un popup ou un volet coulissant.
Pour continuer à travailler sur un formulaire existant, cliquez sur son nom ou choisissez « Edit Form » dans le menu d’actions à trois points de la vue d’ensemble des formulaires d’inscription.
Donnez au formulaire un nom interne explicite. Des noms tels que « Newsletter de la page d’accueil », « Popup du webinaire » ou « Aimant à prospects d’été » sont plus faciles à reconnaître ultérieurement que des noms génériques tels que « Formulaire 1 ». Le nom du formulaire vous aide à le gérer dans Maildroppa et n’est pas automatiquement affiché aux visiteurs.
Comprendre le créateur
Le créateur est divisé en quatre zones principales.
La barre supérieure contient le nom du formulaire et les actions principales. Vous pouvez y revenir à la vue d’ensemble, prévisualiser votre travail et l’enregistrer. Les pages de destination affichent également leurs commandes de brouillon et de publication dans cette barre.
La barre latérale gauche contient « Layout », « Content » et « Layers ». Utilisez-la pour créer la structure, ajouter de nouveaux éléments et gérer tout ce qui a déjà été placé sur le canevas.
Le canevas est la zone de travail centrale. Il affiche la page ou le formulaire actuel. Cliquez sur un élément pour le sélectionner. Vous pouvez également faire glisser des éléments vers un autre emplacement ou ajouter de nouveaux éléments depuis la barre latérale gauche.
La barre latérale droite contient « Settings » et « Page settings ». « Settings » modifie l’élément sélectionné. « Page settings » modifie l’arrière-plan général et les paramètres de conception par défaut.
Sur les écrans plus petits, les barres latérales s’ouvrent sous forme de panneaux à l’aide des boutons « Content » et « Settings ». Les fonctions disponibles restent les mêmes.
Commencer avec un modèle
Lorsque vous créez un formulaire, le créateur propose des designs de départ pour le type de formulaire sélectionné. Vous pouvez commencer avec un design vierge, utiliser le formulaire standard ou choisir un modèle prêt à l’emploi.
Les modèles fournissent une mise en page de départ, des couleurs, une typographie et un contenu d’exemple. Ils ne limitent pas ce que vous pouvez modifier par la suite. Après avoir sélectionné un modèle, chaque élément peut toujours être modifié, déplacé, dupliqué, restylé ou supprimé.
Chaque type de formulaire dispose de modèles adaptés à son objectif. Par exemple, les pages de destination comprennent des designs complets de pages pour newsletter, aimant à prospects, webinaire et liste d’attente. Les formulaires intégrés, les popups et les volets coulissants disposent de leurs propres designs compacts de départ.
Si vous ne savez pas quel modèle choisir, sélectionnez celui dont la structure se rapproche le plus de votre objectif. Modifier le texte, les couleurs et les images est généralement plus rapide que de recréer la même structure depuis un canevas vierge.
Créer la mise en page
Ouvrez « Layout » dans la barre latérale gauche pour ajouter une nouvelle ligne de cellules. Les mises en page disponibles comprennent :
- Une cellule
- Deux, trois ou quatre cellules de même largeur
- Deux cellules selon un ratio de 2:1
- Deux cellules selon un ratio de 1:2
Cliquez sur une mise en page pour l’ajouter à la position d’insertion actuelle, ou faites-la glisser sur le canevas. Vous pouvez ensuite placer du contenu dans chaque cellule.
Sélectionnez une boîte ou une colonne pour ajuster sa taille, ses espacements, son alignement, son arrière-plan, sa bordure et ses marges intérieures dans la barre latérale droite. Pour les mises en page à plusieurs colonnes, vous pouvez également modifier la largeur relative des colonnes.
Utilisez les mises en page pour créer un ordre de lecture clair. Une seule colonne convient bien aux formulaires d’inscription compacts. Une mise en page à deux colonnes est utile lorsqu’une image, une liste d’avantages ou des informations sur un événement doivent apparaître à côté du formulaire d’inscription.
Ajouter du contenu
Ouvrez « Content » dans la barre latérale gauche pour ajouter des blocs de contenu individuels. Vous pouvez cliquer sur un bloc pour l’insérer ou le faire glisser vers la position souhaitée sur le canevas.
Le créateur propose les blocs de contenu suivants :
Signup form — Contient les champs des abonnés et le bouton d’envoi. Un design doit comporter un bloc de formulaire d’inscription avant de pouvoir être enregistré comme formulaire fonctionnel. Une fois le bloc présent, il n’est plus proposé comme bloc de contenu supplémentaire.
Text — Ajoute des titres, des paragraphes ou tout autre texte mis en forme.
Image — Ajoute une image depuis une URL, un téléchargement ou la bibliothèque multimédia Maildroppa. Vous pouvez fournir un texte alternatif, ajouter un lien et contrôler les dimensions, le ratio d’aspect, le recadrage, le point focal, la rotation et le retournement.
Video — Ajoute une vidéo YouTube ou Vimeo, une URL d’intégration ou un fichier vidéo direct. Vous pouvez également configurer une image d’aperçu et l’apparence du bouton de lecture.
List — Ajoute une liste à puces ou numérotée. Modifiez les entrées et contrôlez la couleur des marqueurs, les espacements, la typographie et l’alignement.
Button — Ajoute un bouton de lien avec un texte, une URL, une taille, une largeur, des couleurs, une bordure, une typographie et un alignement configurables.
Social links — Ajoute des icônes liées à des services tels que Facebook, Instagram, LinkedIn, TikTok, YouTube ou votre site web.
Subscriber counter — Affiche le nombre actuel d’abonnés confirmés. Vous pouvez ajouter un décalage, modifier le libellé et styliser le nombre et le texte.
Spacer — Ajoute un espace vide contrôlé. Les espacements sur ordinateur et sur mobile peuvent être définis séparément.
Divider — Ajoute une ligne horizontale dont la couleur, l’épaisseur, la largeur, le style, l’alignement et les espacements sont configurables.
Les pages de destination proposent également des sections complètes réutilisables. Elles sont expliquées dans le guide des pages de destination.
Sélectionner et organiser les éléments
Cliquez sur un élément du canevas pour le sélectionner. Ses paramètres apparaissent dans la barre latérale droite.
Les commandes affichées sur ou près de l’élément sélectionné vous permettent de le déplacer, de le dupliquer ou de le supprimer. Vous pouvez également faire glisser un élément vers une autre cellule ou position. Un indicateur de placement montre où il sera inséré.
Ouvrez « Layers » lorsque la page contient de nombreuses boîtes, colonnes et blocs de contenu imbriqués. Le panneau Layers affiche la structure complète sous forme de liste. Vous pouvez alors :
- Sélectionner un élément
- Le renommer pour l’identifier plus facilement
- Le déplacer vers le haut ou vers le bas
- Le faire glisser vers une autre position
- Le verrouiller ou le déverrouiller
- Le dupliquer
- Le supprimer
Le verrouillage est utile lorsqu’un arrière-plan, une image ou une section terminée ne doit pas être déplacé accidentellement. Déverrouillez le calque lorsque vous souhaitez à nouveau le modifier ou le repositionner.
Utilisez « Undo » et « Redo » dans la barre d’outils du créateur pour revenir en arrière ou avancer dans les modifications de design récentes.
Modifier le texte
Cliquez à l’intérieur d’un élément de texte pour modifier directement son contenu sur le canevas. La barre d’outils de texte fournit des styles de paragraphe et de titre ainsi que les options de mise en forme courantes.
Selon le texte sélectionné, vous pouvez utiliser le gras, l’italique, le soulignement, le barré, l’indice, l’exposant, l’alignement, les listes à puces ou numérotées, les liens et les emojis. Les paramètres du texte sélectionné vous permettent également d’ajuster la typographie et les couleurs sans modifier tous les autres éléments de texte.
Utilisez les paramètres de typographie globaux sous « Page settings » lorsque tous les titres, le texte courant, les liens ou les boutons doivent partager un style cohérent. Utilisez les paramètres de l’élément sélectionné lorsqu’un seul bloc doit avoir une apparence différente.
Configurer le formulaire d’inscription
Sélectionnez le bloc de formulaire d’inscription sur le canevas pour ouvrir ses paramètres. Les sections disponibles couvrent la barre de progression, le compteur d’abonnés, les champs, les tags masqués, le conteneur du formulaire, les champs de saisie et le bouton d’envoi.
Champs des abonnés
L’adresse e-mail est le champ central d’un formulaire d’inscription. Vous pouvez également ajouter des champs d’abonné qui existent dans votre compte Maildroppa.
Pour chaque champ, vous pouvez modifier le libellé et le texte indicatif, déterminer s’il est obligatoire et choisir d’afficher ou non le libellé du champ. Les champs peuvent être réorganisés en les faisant glisser ou à l’aide des commandes de déplacement.
Ne demandez que les informations dont vous avez réellement besoin. Les formulaires plus courts sont plus rapides à remplir, tandis que les champs supplémentaires sont utiles lorsque les informations serviront à la segmentation ou à la personnalisation.
Tags masqués
Les tags masqués ne sont pas affichés aux visiteurs. Lorsqu’une personne s’inscrit via le formulaire, Maildroppa attribue automatiquement les tags sélectionnés à cet abonné.
Cela permet d’identifier la source ou le centre d’intérêt à l’origine d’une inscription. Par exemple, un formulaire pour un webinaire peut appliquer un tag « Webinaire », tandis qu’un formulaire pour un aimant à prospects peut appliquer un tag correspondant au sujet téléchargé.
Barre de progression
La barre de progression peut être désactivée ou affichée sous forme de pourcentage ou d’indicateur en deux étapes.
Pour un indicateur en pourcentage, vous pouvez modifier le texte, les couleurs, la taille de police, la graisse et l’alignement. Pour un indicateur en deux étapes, vous pouvez modifier les libellés des deux étapes et choisir les couleurs des étapes active et inactive.
Un indicateur de progression peut aider à expliquer que l’envoi du formulaire constitue la première étape et que la confirmation de l’e-mail de Double Opt-in constitue la deuxième.
Compteur d’abonnés dans le formulaire
Le formulaire d’inscription peut afficher le nombre actuel d’abonnés confirmés avant ou après le bouton d’envoi.
Vous pouvez ajouter un décalage, rédiger un libellé, choisir la position et ajuster la typographie et l’alignement. Le décalage est ajouté au nombre d’abonnés confirmés affiché par Maildroppa.
Ce compteur de formulaire est différent du bloc de contenu autonome « Subscriber counter ». Utilisez le paramètre du formulaire lorsque le nombre doit être directement associé à la zone d’envoi. Utilisez le bloc de contenu lorsque le compteur doit apparaître ailleurs dans le design.
Design du formulaire, des champs de saisie et du bouton
Les paramètres « Signup Form Block » contrôlent le conteneur autour des champs, notamment son arrière-plan, sa bordure, l’arrondi de ses angles et ses espacements.
Les paramètres des champs de saisie contrôlent les arrière-plans des champs, les libellés, le texte, les textes indicatifs, les bordures et les espacements. Le bouton d’envoi dispose de paramètres distincts pour son texte, sa typographie, ses couleurs, sa bordure, ses dimensions et son alignement.
Vous pouvez cliquer directement sur la barre de progression ou le bouton d’envoi sur le canevas pour ouvrir immédiatement les paramètres correspondants.
Modifier l’apparence générale
Ouvrez « Page settings » dans la barre latérale droite pour modifier le design général. Pour les formulaires intégrés, les popups et les volets coulissants, ces paramètres s’appliquent au canevas du formulaire plutôt qu’à une page hébergée complète.
Vous pouvez configurer l’arrière-plan principal, l’image d’arrière-plan, la largeur maximale et les espacements sur mobile. Les paramètres d’apparence définissent les valeurs par défaut pour :
- La police et la couleur du texte courant
- La couleur des liens, le soulignement et la couleur au survol
- La police, la couleur, la graisse, la taille et la hauteur de ligne des titres
- Les boutons
- Les boîtes, les bordures, les rayons d’angle, les écarts et les marges intérieures
- Les marges intérieures de la page sur mobile et le point auquel les colonnes s’empilent
Ces valeurs par défaut assurent la cohérence du design. Les blocs individuels peuvent toujours les remplacer si nécessaire.
Connecter un flux d’inscription
Chaque formulaire est connecté à un flux d’inscription. Le flux d’inscription contrôle le parcours de l’abonné après l’envoi du formulaire :
- Ce que le visiteur voit immédiatement après l’envoi du formulaire
- L’e-mail de Double Opt-in envoyé
- Ce qui se passe après que l’abonné a confirmé son adresse e-mail
Ouvrez le contrôle du flux d’inscription dans l’en-tête du créateur pour voir le flux actuellement attribué. Vous pouvez sélectionner un autre flux existant, modifier le flux sélectionné ou en créer un nouveau.
Un flux d’inscription peut être utilisé par plusieurs formulaires. Si vous modifiez un flux partagé, le changement affecte tous les formulaires qui l’utilisent. Maildroppa vous permet donc de choisir entre modifier le flux partagé et créer une copie distincte pour le formulaire actuel.
Prévisualiser et enregistrer
Cliquez sur « Preview » pour vérifier le design complet et l’expérience d’inscription avant de le rendre public. La prévisualisation est utile pour vérifier les textes longs, les proportions des images, l’ordre des champs, les libellés des boutons et l’équilibre général du formulaire.
Pour les formulaires intégrés, les popups et les volets coulissants, cliquez sur « Save changes » lorsque vous êtes prêt à enregistrer la version actuelle.
Les pages de destination utilisent les commandes de brouillon et de publication dans la barre supérieure. Elles peuvent être enregistrées sans être publiées, et les modifications apportées à une page déjà publiée restent non publiées jusqu’à ce que vous les publiiez. Le workflow complet est expliqué dans Créer et publier une page de destination.
Après l’enregistrement, revenez à la vue d’ensemble des formulaires d’inscription pour activer et intégrer un formulaire sur un site web ou gérer une page de destination publiée.
Poursuivre avec votre type de formulaire
Le travail de conception commun est maintenant terminé. Poursuivez avec le guide correspondant au formulaire que vous créez :
Ready to Send Better Emails?
Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.
No credit card required. No time limit.