Pour commencer avec vos formulaires | Tutoriel étape par étape

Dans cet article :

Tutoriel vidéo
Créer un formulaire étape par étape
Exemples de formulaires

étape par étape

Le formulaire d'abonnement est l'outil par excellence pour augmenter votre nombre d'abonnés et obtenir une liste de qualité. Voyez dans cette courte vidéo comment il est facile de créer et de personnaliser un formulaire d'abonnement à l'image de votre entreprise ou de votre organisation. Pour savoir comment faire, suivez pas à pas les instructions grâce au tutoriel détaillé que vous trouverez ci-dessous.

Comment faire

Pour créer un nouveau formulaire d’abonnement, allez au menu Formulaires en haut de l'écran ou à partir de la barre d'outils à votre gauche, cliquez sur l'icône Icône Créer un formulaire.

Une fois dans la section Formulaires d'abonnement, cliquez sur le bouton + Ajouter un formulaire d'abonnement situé en haut à droite pour démarrer.
Sélectionnez l’un de nos modèles de formulaires ou débutez à partir d’un formulaire vierge.

Vous cherchez un raccourci ? Le résultat final de ce tutoriel est disponible dans nos modèles de formulaires. Vous n’aurez pratiquement rien à faire ! Vous n’avez qu’à le sélectionner et à l’adapter légèrement, selon vos besoins.
Cliquez l’option Choisir sur le formulaire sélectionné, une fenêtre s'ouvrira pour vous demander le nom et la langue de votre formulaire. Sélectionnez le type de formulaire et cliquez Commencer pour confirmer. Vous serez ensuite dirigé vers l’éditeur pour le personnaliser..

Le nom de votre formulaire ne sert qu’à votre gestion interne et ne sera pas visible aux utilisateurs. Nous vous suggérons de lui donner un nom qui vous aidera à savoir à quel endroit il est utilisé, par exemple : “Inscription site web - fr” ou encore “Formulaire pour partage Facebook”.

La langue déterminera la langue d’affichage du formulaire ainsi que la langue du contact qui s'y inscrira. Par exemple, si vous choisissez Anglais, tous les contacts qui s'inscriront par ce formulaire obtiendront cette langue dans leur profil et le système interagira automatiquement avec eux dans ce langage pour la suite du processus d'abonnement.

Dans ce tutoriel, nous travaillerons à partir d’un formulaire hébergé. Cela étant dit, l’édition d’un formulaire iFrame est très semblable puisqu'elle se fait à partir du même éditeur et des mêmes outils.

Si vous avez un site web bilingue, créez un formulaire d'abonnement par langue. Pour effectuer cette opération rapidement, attendez d'avoir terminé la configuration d'un premier formulaire, puis dupliquez-le et modifiez sa langue en le copiant. Vous conserverez ainsi votre visuel et vos champs. Tout ce que vous aurez à faire est de traduire vos libellés. Et surtout, n'oubliez pas de modifier les groupes associés à votre nouveau formulaire. Pour simplifier la planification de vos envois, sélectionnez des groupes différents pour vos abonnés francophones et anglophones.
Ajoutez, au besoin, des champs supplémentaires à votre formulaire, comme le nom et le prénom, pour recueillir plus d'informations sur votre abonné. Demandez des informations qui vous seront utiles dans la personnalisation de vos courriels ou la segmentation de vos contacts.

Pour ce faire :
À partir de l'onglet Contenu situé dans la barre latérale à votre droite, glissez et déposez, en maintenant le bouton gauche de la souris enfoncé, les champs désirés dans le formulaire. En plus des champs réguliers, vous pouvez également ajouter des champs personnalisés.

Pour réordonner les champs, passez votre souris au-dessus d’une rangée dans l’aperçu du formulaire et glissez-les dans l’ordre désiré à l’aide de la poignée de déplacement que vous trouverez à la gauche du champ.

Pour retirer un champ, passez votre souris au-dessus d’une rangée dans la zone d’aperçu du formulaire et cliquez sur l’icône de corbeille à la droite de la rangée.

Attention de ne pas demander plus d'informations qu'il ne vous en faut ! Un long formulaire pourrait décourager de futurs abonnés.

En savoir plus sur l'ajout et la configuration des champs dans un formulaire >

Les champs personnalisés sont des champs supplémentaires que vous pouvez utiliser en plus des champs de base. Pour déterminer quelles informations y seront stockées, rendez-vous dans la configuration de votre compte pour aller définir leur nom. Pour ce faire, allez au menu Icone Configuration > Application > Champs personnalisés.

Saviez-vous que l'on peut offrir des choix de réponses en utilisant les champs personnalisés ?
Ce qui est intéressant lorsque vous les utilisez dans un formulaire, c'est qu'ils peuvent prendre différentes formes. Pour recueillir des réponses ouvertes, optez pour le type champ texte. Pour offrir des choix de réponses prédéfinis, utilisez plutôt les types de champ sous forme de boutons radio, cases à cocher ou menu déroulant. Dans le cas des cases à cocher, toutes les réponses sélectionnées par votre nouvel abonné seront enregistrées dans le champ personnalisé et seront séparées par des virgules. Utilisez ensuite ces informations pour segmenter efficacement vos contacts ou personnaliser vos courriels. En savoir plus sur les champs personnalisés >
Configurez les groupes dans lesquels seront ajoutés les contacts qui s'inscriront à votre formulaire.

Pour ce faire :
1. Allez à l'onglet Paramètres, situé en haut à la gauche de l'éditeur de formulaires.
2. Choisissez le type d'inscription. Si vous désirez que votre abonné puisse choisir lui-même dans quel(s) groupe(s) il désire s'inscrire, optez pour le type d'inscription Choix multiples (cases à cocher) ou Sélection unique (menu déroulant). Si vous ne voulez pas que votre abonné ait à faire de sélection, choisissez Invisible.
3. Dans la section Groupes cibles, sélectionnez les groupes à lier à votre formulaire et ajustez leur libellé, au besoin.
4. Cliquez sur l'onglet Formulaire en haut à gauche pour revenir à l'édition du visuel de votre formulaire.
  
  Si vous avez choisi Choix multiples ou Sélection unique, les groupes sélectionnés s'afficheront visuellement dans le formulaire. Vous pouvez modifier l'ordre d'affichage des groupes en suivant les instructions ici.
Lisez ici nos recommandations sur les différents types d'inscription et les groupes cibles >

Lorsque vous offrez à vos abonnés le choix de s'inscrire à plusieurs groupes simultanément, nous vous conseillons d'utiliser des groupes publics afin de poursuivre ce choix dans le processus de désabonnement. Lorsqu'un abonné clique sur le lien de désabonnement au bas d'un courriel, s'il fait partie de groupes publics, il aura la possibilité de voir les groupes auxquels il est inscrit et de choisir de quel(s) groupe(s) il souhaite se retirer. C'est d'ailleurs pour cette raison qu'il n'est pas possible de modifier le libellé des groupes publics dans le formulaire, car le nom du groupe doit être le même dans le processus d'abonnement et de désabonnement. Quand un contact fait partie seulement de groupes privés, le désabonnement est systématique et instantané. Dès que l'abonné clique sur le lien de désabonnement, il sera retiré de tous les groupes dont il fait partie et il sera ajouté à la liste des contacts désabonnés. À partir de là, vous ne pourrez plus lui écrire. En savoir plus sur les groupes publics et privés >
Au besoin, modifiez le libellé de vos champs et/ou ajoutez-leur un texte de substitution.

Pour ce faire :
Sélectionnez le champ à modifier dans le formulaire et allez dans l'onglet Contenu, situé dans la barre latérale à votre droite, pour changer le libellé et ajouter le texte de substitution.

Dans les champs avec choix de réponses, comme le champ Genre ou les champs personnalisés de type cases à cocher, liste déroulante ou boutons radio, des options supplémentaires vous permettent de modifier les libellés des choix de réponses et d'en ajouter (pour les champs personnalisés seulement).

Utilisez le texte de substitution pour fournir une courte explication ou un exemple de l'information à entrer dans le champ.
Personnalisez le titre de votre formulaire et son style.

Pour ce faire :
1. Sélectionnez la rangée du titre.
2. Allez dans l'onglet Contenu à votre droite.
3. Modifiez le titre.
4. Cliquez sur le panneau Styles du titre pour le développer et voir les options disponibles. Vous pourrez y ajuster sa police, sa taille, sa couleur et son alignement.
5. Ajustez l'espacement avant et après en développant le panneau Espacement.
En savoir plus >
Modifiez l'apparence de la boîte de votre formulaire (comme sa couleur de fond et sa bordure).

Pour ce faire :
1. Allez dans l'onglet Mise en forme dans la barre latérale à droite, puis dans le sous-onglet Formulaire.
2. Cliquez sur le panneau Formulaire pour le développer et voir les options disponibles.
3. Changez la couleur de fond du formulaire via le sélecteur de couleur sous l'option du même nom. Cliquez avec le curseur dans les différentes nuances de couleur pour en sélectionner une ou entrez directement un code hexadécimal ou RGB.
4. Affichez ou masquez la bordure en activant/désactivant l'interrupteur. Modifiez sa couleur via le sélecteur de couleur et l'épaisseur du trait en déplaçant le curseur dans l'option Taille.
5. Lâchez votre fou et explorez les multiples options de personnalisation disponibles ! Vous avez le plein contrôle du visuel de votre formulaire : centrez-le verticalement, ajustez l'espacement autour de votre formulaire et ses dimensions, optez pour des coins carrés ou des coins ronds, ajoutez de l'ombrage... les possibilités sont infinies.
En savoir plus >

Créez des effets en ajoutant de la transparence dans vos couleurs !
Réglez l'opacité de la couleur de fond de votre formulaire en modifiant la valeur dans le champ A (alpha) de la couleur RGBA. Entrez-y un chiffre de 0 à 100. À 100, la couleur sera complètement opaque. Plus vous vous rapprochez de 0 et plus la couleur deviendra transparente et plus vous pourrez voir le fond de la page à travers la boîte du formulaire. Vous pouvez appliquer de la transparence sur plusieurs autres éléments du formulaire tels que les dégradés, le bouton de soumission et les champs pour créer des effets époustouflants. Amusez-vous !
Personnalisez le style de vos champs (ex.: leur apparence ainsi que la couleur, la police et la taille du texte des champs et des libellés).

Pour ce faire :
1. Allez dans l'onglet Mise en forme dans la barre latérale à droite, puis dans le sous-onglet Champs.
2. Dans le panneau Styles de champs, cliquez sur l'aperçu du champ pour choisir un style prédéfini.
3. Accédez ensuite aux options avancées en sélectionnant le bouton Personnaliser le style des champs pour ajuster des éléments séparément tels que la position du libellé, la rondeur des coins, les bordures et l'ombrage.
4. Parcourez les panneaux Libellé et Champs et ajustez les options pour personnaliser le style du texte (couleur, police et taille).
5. Allez dans le panneau Champs pour modifier la couleur de fond des champs.
En savoir plus >

Si les libellés extérieurs sont trop collés au haut de vos champs, dégagez-les en modifiant la hauteur de ligne à partir du panneau Libellé.
Personnalisez la page derrière votre formulaire en y ajoutant, par exemple, une image d'arrière-plan.

Pour ce faire :
1. Allez dans l'onglet Mise en forme dans la barre latérale à droite, puis dans le sous-onglet Formulaire.
2. Activez l'interrupteur à la droite de l'option Image d'arrière-plan.
3. Cliquez sur le bouton Choisir une image pour sélectionner une image. Pour utiliser une de vos images existantes ou en ajouter une nouvelle, choisissez Mes images. Sinon, trouvez l'image qui vous convient en parcourant les vastes choix disponibles dans notre Banque d'images libres de droits.
  
  Par défaut, l'image choisie couvrira toute la page. Décochez cette option si vous souhaitez sélectionner un motif qui se répète ou changer sa taille.
Il est également possible de personnaliser la couleur de fond et d'ajouter un dégradé dans la page du formulaire. Vous pouvez même utiliser simultanément tous ces effets. En savoir plus >
Ajoutez votre logo dans votre formulaire.

Pour ce faire :
1. Dans la barre latérale à droite, ouvrez l'onglet Contenu.
2. Cliquez sur le panneau Autres pour le développer.
3. En maintenant le bouton gauche de votre souris enfoncé, glissez et déposez un élément Image à l'endroit approprié dans votre formulaire.
4. Cliquez sur la rangée Image dans votre formulaire pour la sélectionner.
5. Cliquez sur le bouton Choisir une image dans la barre latérale, puis choisissez Mes images.
6. Si votre logo se trouve déjà dans les fichiers de votre compte, passez à l'étape suivante. S'il n'y est pas, pour l'ajouter, cliquez sur le bouton Envoyer situé en haut à gauche de la boîte. Parcourez vos dossiers jusqu'à votre image, puis double-cliquez dessus pour la télécharger.
7. De retour dans votre dossier Images, repérez l'aperçu de votre logo et double-cliquez dessus pour l'ajouter dans votre formulaire.
8. Ouvrez ensuite le panneau Styles de l'image, dans la barre latérale, pour modifier ses dimensions, l'espacement avant et après ainsi que son alignement. Vous pouvez également ajouter de l'ombrage ou arrondir les coins de votre image.
9. Allez dans le panneau Propriétés pour ajouter un lien vers votre site web sur l’image de votre logo.
En savoir plus sur l'ajout d'images >
Modifiez le libellé du bouton et personnalisez son style.

Pour ce faire :
1. De la même façon que pour les champs, sélectionnez la rangée du bouton de votre formulaire, puis allez dans l'onglet Contenu pour modifier son libellé.
2. Ouvrez le panneau Styles du bouton pour modifier l'apparence du texte (police, taille et couleur) et de l'affichage (rondeur des coins, couleur de fond, bordure et ombrage) du bouton.
3. Allez dans le panneau Espacement pour modifier les dimensions du bouton, son alignement ou l'afficher à la pleine largeur du formulaire.
Inspirez-vous de nos différents exemples de boutons ici >
Sauvegardez votre formulaire à l'aide du bouton situé en haut à votre droite.
Récupérez le lien ou le code du formulaire.

Pour ce faire :
1. Cliquez sur l'option </> Obtenir le lien (formulaire hébergé) ou </> Obtenir le code (formulaire iFrame).
2. Copiez le lien ou le code qui apparaîtra dans la nouvelle fenêtre.
Testez votre formulaire.

Pour tester un formulaire hébergé : collez tout simplement le lien de votre formulaire dans un nouvel onglet de votre navigateur et remplissez le formulaire.
Pour tester un formulaire iFrame : collez le code de votre formulaire dans le HTML d'une page test sur votre site web ou copiez et collez l'URL de votre formulaire (que vous trouverez dans l'attribut "src" du code de votre iFrame) dans un nouvel onglet de votre navigateur.

N'oubliez pas de confirmer votre inscription en cliquant sur le bouton dans le courriel de confirmation d'abonnement pour que votre adresse soit ajoutée à votre compte !

Découvrez plus de trucs pour bien tester votre formulaire ici >

Pour avoir rapidement un aperçu de votre formulaire sur différentes plateformes sans quitter l'éditeur, appuyez sur les interrupteurs Fureteur et Mobile (situés au haut du visuel du formulaire). Cette option vous permettra de basculer d'un mode plein écran à un affichage sur téléphone. Veuillez cependant prendre note que toutes les modifications que vous effectuez dans l’un ou l’autre des aperçus sont appliquées pour les deux. Cette option est disponible seulement dans les formulaires hébergés.
Publiez votre formulaire sur votre site web et/ou partagez-le sur vos médias sociaux.

Si vous avez créé un formulaire hébergé, tout ce que vous avez à faire est d'ajouter son lien aux différents endroits où vous désirez le partager (ex.: sur un bouton d'inscription sur votre site, sur Facebook, dans la signature de vos courriels, etc.)

Besoin d'aide pour intégrer votre formulaire iFrame sur votre site web ? Lisez nos conseils ici >