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 Entreprise (anciennes offres Premium et Entreprise).

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 Sendinblue.

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 Sendinblue :
    • 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 Sendinblue 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 Sendinblue.
  • 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 Sendinblue.
❗️ 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 Sendinblue. 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 Sendinblue.

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.