Aller au contenu principal

Landing pages - Partie 4 : Ajouter un formulaire et utiliser des options avancées

💡 Bon à savoir
Les landing pages sont disponibles avec les offres Business et BrevoPlus.

Cet article explique comment ajouter un formulaire à votre landing page et comment utiliser les options avancées disponibles dans l'éditeur de landing page. 

Nous avons créé une série d’articles pour vous aider à créer des landing pages. 

Ajouter un formulaire Ă  votre landing page

Les formulaires vous permettent de recueillir des adresses email et de les trier automatiquement dans vos listes sur Brevo.

Pour ajouter un élément Formulaire à votre landing page :

Nouvel éditeur de landing page Éditeur de landing page classique

Vous pouvez accéder à Section > Filtrer les sections préconçues > Formulaires et ajouter une section prédéfinie que vous modifierez selon vos besoins.

Ou vous pouvez aussi partir de zéro en ajoutant un nouvel élément Formulaire à votre landing page.

 

mceclip0.png

add_form-en_us.png

Configurer votre formulaire

Lorsque vous avez ajouté un élément Formulaire à votre landing page, vous pouvez le configurer :

Alignement

Ce paramètre est disponible uniquement dans le nouvel éditeur de landing page.

Le paramètre Alignement est décrit dans la rubrique Paramètres communs de l’article Partie 3 : Modifier les paramètres de tous les éléments de votre landing page.

GĂ©rer les champs

Les paramètres Gérer les champs vous permettent de définir à quel endroit seront stockés les contacts collectés à l'aide du formulaire et quelles informations vous souhaitez recueillir. Vous pouvez aussi configurer le formulaire en lui-même : ajouter des champs et les trier, rendre les champs obligatoires ou non, ajouter un texte d'aide, etc.

Pour accéder aux paramètres Gérer les champs, cliquez sur votre formulaire dans l’éditeur de landing page.

Choisir une liste de contacts

LP_gererchamps_FR.png
  1. Cliquez sur le formulaire pour ouvrir le panneau Edit Form sur la droite.
  2. Sous Gérer les champs, définissez l’emplacement où seront enregistrés les adresses email sur votre compte Brevo :
    • SĂ©lectionnez un dossier de listes dans le menu dĂ©roulant.
    • SĂ©lectionnez une liste de contacts dans le deuxième menu dĂ©roulant.
❗️ Important
Pour mettre à jour les contacts de votre liste lorsqu’ils remplissent le formulaire, vous devez cocher la case Mettre à jour les contacts existants dans Contrôle d’inscription du formulaire.

Configurer les champs

Vous devez ensuite ajouter à votre formulaire de génération de leads les différents champs correspondant aux données que vous souhaitez recueillir. 

LP_gererchampsform_FR.png

  1. Ajouter un champ de contact : cette liste déroulante vous permet d’ajouter des champs préexistants à votre formulaire.
  2. Créer un nouveau champ : si l’attribut de contact n’existe pas encore, vous pouvez en créer un ici.
  3. Réorganiser les champs : cliquez simplement sur = et faites glisser le champ que vous souhaitez réorganiser.
    Supprimer un champ : vous pouvez supprimer des champs à l’aide de l’icône de corbeille.

    Cliquez sur un champ pour le configurer :
  4. Label: permet d’afficher le nom du champ.
  5. Masqué : cliquez sur l’interrupteur pour créer un champ masqué ou visible sur le formulaire.
    Vous pouvez ajouter un champ masqué pour que les données correspondantes soient remplies automatiquement en les ajoutant dans l’URL à l’aide d’une chaîne de requête.
  6. Requis: indiquez si ce champ doit ĂŞtre obligatoirement rempli ou non pour pouvoir envoyer le formulaire.

7. Chaque champ comprend différents paramètres :

  • Label  : modifiez le nom du label qui s'affiche au-dessus du champ.
  • Substitut : saisissez le texte qui s’affiche dans le champ. Par dĂ©faut, il s’agit du mĂŞme texte que le label du champ.
  • Texte d’aide : saisissez le texte qui s’affiche sous le champ. Ce texte peut ĂŞtre utile pour donner des suggestions.
  • Valeur par dĂ©faut : il s’agit de la valeur qui sera synchronisĂ©e avec votre liste de contacts Brevo si votre visiteur ne remplit pas le champ.
  • Paramètre URL : il s’agit de la valeur qui sera automatiquement insĂ©rĂ©e dans le champ du formulaire. Votre utilisateur peut choisir ou non de la remplacer. Pour en savoir plus, consultez notre article PrĂ©remplir le formulaire d'une landing page avec les attributs des contacts.
❗️ Important
Si vous ajoutez un champ de numéro de téléphone à votre formulaire, le seul format accepté sera le format international, par exemple : +447911123456 pour le Royaume-Uni, +12025550101 pour les États-Unis ou +33655678834 pour la France.
Utilisez le champ Substitut pour aider vos utilisateurs à saisir le format approprié.

Redirection lors de l’envoi du formulaire

Dans les options de redirection, vous pouvez définir la page vers laquelle vos utilisateurs seront redirigés lorsqu’ils auront envoyé leurs informations de contact.

redirect_options_form-en_us.png

Utilisez le champ Action de redirection du formulaire pour rediriger vos contacts vers une page du funnel (une page de votre landing page) ou vers une URL spécifique :

  • Page dans le funnel : sĂ©lectionnez la page du funnel vers laquelle vous souhaitez rediriger vos contacts.
  • Lien vers une URL : entrez le lien de la page externe vers laquelle vous souhaitez rediriger vos contacts.

Double opt-in

double_optin-en_us.png

Le paramètre Double opt-in vous permet de choisir quelle méthode de double opt-in vous souhaitez utilisez dans votre formulaire :

  • Opt-in simple :
    1. Votre nouveau contact saisit son adresse email dans votre formulaire.
    2. Il est ajouté à votre liste de contacts Brevo.
  • Double opt-in :
    1. Votre nouveau contact saisit son adresse email dans votre formulaire.
    2. Le contact doit cliquer sur le lien reçu dans l’email de confirmation pour être ajouté à votre liste de contacts Brevo.
❗️ Important
Deux méthodes sont possibles pour mettre en place l’inscription double opt-in. Veillez à n’appliquer qu’une seule des deux méthodes disponibles : activez la validation double opt-in à l’aide de l’outil de Marketing Automation OU d’un formulaire d’inscription de Brevo. Si vous appliquez les deux méthodes, vos contacts recevront deux fois les emails de double opt-in.

Design

design_form-en_us.png

Le paramètre Design vous permet de définir le design de vos champs : aucun, contours, contours arrondis, souligné avec arrière-plan, souligné sans arrière-plan.

Vous pouvez également choisir une présentation horizontale pour votre formulaire. Si vous choisissez cette option, nous vous recommandons de supprimer les labels de vos champs.

Pour modifier la couleur d’arrière-plan, accédez aux paramètres de colonne, comme expliqué dans l’article Partie 3 : Modifier les paramètres de tous les éléments de votre landing page.

Voici quelques exemples de différents designs de formulaires :

Style_form_gif.gif

Espacement

Le paramètre Espacement est décrit dans la rubrique Paramètres communs de l’article Partie 3 : Modifier les paramètres de tous les éléments de votre landing page.

Contrôle d’inscription du formulaire

mceclip4.png

Le paramètre Paramètres d’inscription du formulaire vous permet de définir l'action de votre formulaire lors de sa soumission :

  • Mettre Ă  jour les contacts existants lors de la soumission du formulaire : cette option vous permet de mettre Ă  jour les contacts existants lorsqu’ils valident le formulaire. 
  • DĂ©sactiver reCAPTCHA : cette option vous permet de dĂ©sactiver le système reCAPTCHA de Google intĂ©grĂ© par dĂ©faut sur votre landing page publiĂ©e.

Style

Ce paramètre est disponible uniquement dans le nouvel éditeur de landing page.

style-en_us.png

Le paramètre Style vous permet de définir l'apparence de votre formulaire :

  • Style et couleur de la bordure : ajoutez une bordure Ă  votre formulaire et dĂ©finissez une couleur.
  • Largeur de la bordure : dĂ©finissez la largeur de la bordure de votre formulaire.
  • Arrondi des angles : dĂ©finissez l’arrondi des angles de votre formulaire.

Suivi Javascript (Pixel Facebook / Google Analytics)

L’option de Suivi vous permet d’insérer vos scripts de suivi dans certaines parties de la page.

Un script de suivi est un code utilisé pour contrôler le nombre d’utilisateurs qui visitent une page. Les scripts de suivi vous permettent d’analyser la durée passée par vos visiteurs sur une page, quels éléments attirent leur attention et de quelle manière ils interagissent avec votre contenu.

💡 Bon à savoir
Google Analytics et le pixel Facebook sont les scripts de suivi les plus fréquemment utilisés, mais vous pouvez ajouter n’importe quel script de suivi à une landing page Brevo.

Pour ajouter un script de suivi à votre landing page :

  1. Dans l’éditeur de landing page, cliquez sur Paramètres dans l’angle inférieur gauche.
  2. SĂ©lectionnez Suivi.
    2022-03-17_13-58-20.png

  3. Écrivez le script de suivi dans le tag approprié. Vous pouvez ajouter un script :

    • dans la balise<head> ;

    • après la balise <body> ouvrante ;

    • ou avant la balise </body> fermante.

      đź’ˇ Bon Ă  savoir

      Certains services tels que ceux de Facebook et de Google Analytics exigent d’insérer le script entre les balises <head>, tandis que d’autres demandent de l’insérer dans la section <body>. Veuillez lire attentivement les instructions du fournisseur concernant la section où insérer le script.

  4. Cliquez sur Terminé.

Landing page multipages

mceclip5.png Si vous souhaitez créer plusieurs pages supplémentaires afin de créer un funnel, cliquez sur l’onglet Pages dans le menu de gauche, puis sur + Create a blank page. Pour en savoir plus, consultez notre article dédié Gérer les pages de votre landing page.

Affichage sur différents appareils

mceclip6.png

Grâce aux boutons Bureau / Mobile en haut de l’écran, vous pouvez tester l’affichage de votre landing page sur un ordinateur de bureau et un smartphone.

❗️ Important
Vous pouvez choisir d’afficher ou non des sections et des éléments en fonction de l’appareil utilisé. Pour en savoir plus, consultez notre section dédiée Visibilité dans Partie 3 : Modifier les paramètres de tous les éléments de votre landing page.

⏩ Et après ?

🤔 Vous avez des questions ?

Pour toute question, n’hésitez pas à contacter notre service client en créant un ticket à partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.