Créer un formulaire d'inscription – Partie 2 : Concevoir votre formulaire d’inscription

Nous avons créé une série d’articles pour vous aider à créer votre formulaire d’inscription. Cet article s’intéresse à l’étape Conception de la création de votre formulaire d’inscription.

Nimail vous permet de personnaliser divers éléments du formulaire d’inscription, tels que l’arrière-plan, le texte (police, taille, couleur), les champs du formulaire, le texte de call-to-action et le message de confirmation (indiquant que l'utilisateur a bien été inscrit). 

  • Introduction aux formulaires d’inscription
  • Partie 1 : Configurer votre formulaire d’inscription
  • Partie 2 : Concevoir votre formulaire d’inscription – VOUS ÊTES ICI
  • Partie 3 : Sélectionner votre liste
  • Partie 4 : Ajouter une confirmation double opt-in à votre formulaire
  • Partie 5 : Partager votre formulaire

Faire glisser les éléments

Pour concevoir votre formulaire, il vous suffit de faire glisser les différents blocs de contenu (ex. : titre, texte, image, séparateur) dans le corps du formulaire et de les réorganiser selon vos besoins.

Dans l’éditeur de formulaires, vous trouverez un formulaire préconçu que vous pouvez personnaliser. Sur la gauche de l’éditeur, l’onglet Conception comprend des blocs et des champs, tandis que les éléments de design se trouvent sous l’onglet Apparence.

mceclip0.png

Blocs et champs

Dans l'onglet Conception, vous avez accès à des blocs et champs pour concevoir votre formulaire.

 

  1. Titre
  2. Texte
  3. Image
  4. Séparateur
  5. Attribut
    Choisissez les attributs de contact (email, nom, anniversaire, etc.) en fonction du type d’information que vous souhaitez recueillir au sujet de vos nouveaux abonnés. Vous devriez inclure au moins un attribut Email ou SMS afin de pouvoir contacter vos abonnés.
    Consultez la section ci-dessous Quels attributs inclure dans mon formulaire ?
  6. Inscription multi-liste
    Ce type de champ permet aux abonnés d’indiquer leurs intérêts ou leurs préférences lors de l’abonnement et de les inscrire dans les listes correspondantes. Veuillez consulter notre article à ce sujet : Ajouter un champ d’inscription multi-liste à vos formulaires.
  7. Choix unique
    Vous devez d’abord créer un champ d’attribut « catégorie » comprenant les différents choix. Ce type de champ permet au client de choisir la fréquence d’envoi ou la langue de votre newsletter, par exemple. Vous pouvez indiquer les différents choix à l’aide de boutons radio ou sous la forme d’une liste déroulante.
    Pour personnaliser le texte « Select one » dans le menu déroulant, vous pouvez rechercher le bloc de code indiqué ci-dessous dans votre formulaire HTML et remplacer le texte « Select one », compris entre les balises <option>, par le texte de votre choix :

    <option value="" disabled selected hidden>Select one</option>

  8. Champ RGPD
    Afin d’assurer votre conformité au RGPD, vous devez ajouter le champ RGPD. Ajoutez un lien menant vers votre politique de confidentialité sous « Note de conformité ». Assurez-vous d’ajouter le lien avant de finaliser votre formulaire.
  9. Déclaration RGPD
    Nous avons créé une déclaration RGPD préconçue indiquant que vous utilisez Nimail en tant que plateforme marketing.
  10. Captcha
    Nous vous recommandons fortement d’utiliser une confirmation Captcha (reCAPTCHA) afin d’empêcher tout spambot d’ajouter de fausses données à vos listes. Veuillez consulter notre article à ce sujet : Ajouter un captcha à votre formulaire d'inscription
  • Choix multiple
    Vous devez d’abord créer un champ d’attribut « booléen » (oui/non). Vous pourrez alors proposer un choix pour un attribut : « oui » si le client coche la case, « non » s’il ne la coche pas.
    Par exemple, il peut s’agir d’un champ demandant à l’utilisateur si les offres de vos partenaires commerciaux l’intéressent.

Quels attributs inclure dans mon formulaire ?

Le champ d’adresse email est indispensable, mais vous pouvez aussi demander quelques autres renseignements au sujet de vos nouveaux abonnés en ajoutant des champs d’attributs de contact. Par exemple, le nom, la date de naissance et la localisation sont des informations pouvant s’avérer très utiles pour personnaliser vos emails et segmenter vos contacts.

Toutefois, l’expérience utilisateur doit être la priorité. Si l’utilisateur doit saisir manuellement un trop grand nombre d’informations, il pourrait abandonner le processus.

Si vous décidez d’ajouter des champs supplémentaires, n’en choisissez que quelques-uns et veillez à les rendre facultatifs. Ainsi, l’utilisateur peut les ignorer s’il le souhaite, et vous obtenez toujours l’information la plus importante : son adresse email. Vous pourrez toujours créer des profils d’utilisateur plus tard : la priorité, pour le moment, est d’ajouter des utilisateurs à votre liste d’emailing.

Apparence

mceclip1.png

Sous l’onglet Apparence, vous pouvez modifier le design, les couleurs et les polices de votre formulaire. 

  • Texte
    Ce menu vous permet de modifier la mise en forme (police, couleur, taille, etc.) du texte et des titres, ainsi que du texte d’aide, des étiquettes et du texte de remplacement.
  • Arrière-plan
    Vous pouvez sélectionner une couleur ou une image d’arrière-plan.
  • Contenant
    Cette option vous permet de modifier l’apparence du contenant (l’endroit où vous faites glisser tous vos champs) : alignement, bordures, arrière-plan, etc.
  • Bouton
    Vous pouvez choisir la couleur du bouton d’inscription, son alignement, sa police d’écriture, etc.
  • Alertes
    Un exemple d’alerte s’affiche lorsque vous cliquez sur ce champ. Cette option vous permet de modifier le design. Les alertes peuvent être de type « État d’erreur » ou « État de succès ».
  • Espacement
    Vous pouvez choisir parmi trois types d’espacement : serré, par défaut ou espacé.

Affichage sur mobile

Tous vos formulaires sont conçus pour être adaptatifs par défaut. Pour obtenir un aperçu de l’affichage de votre formulaire sur un appareil mobile, cliquez sur l’interrupteur situé en haut de l’éditeur pour passer de la vue ordinateur à la vue mobile.

mceclip13.png