Après avoir créé votre formulaire de contact, formulé les bonnes questions et les avoir liées à Teamleader Focus, l'étape suivante consiste à personnaliser votre formulaire de contact. Lorsque vous intégrez le formulaire de contact à votre site web, la personnalisation permet de s'assurer qu'il correspond à l'esthétique de votre marque et de votre site web.


Dans cet article

Qu'est-ce que c'est ?

Chaque utilisateur peut ajouter des éléments spécifiques à la page, tels qu'une introduction, un texte pour le bouton et une page de réussite avec une image. Vous trouverez les détails de la page sur le côté droit de "Personnalisez votre formulaire".


Les clients du forfait Beyond ont la possibilité de personnaliser le formulaire en y ajoutant leur propre logo, en utilisant les couleurs de leur marque et en l'adaptant au style de celle-ci. Tout cela peut être configuré sur le côté gauche de l'écran, sous "Général".


Général

Dans la section de gauche intitulée "Général", vous trouverez un ensemble d'éléments personnalisables. Dans la section de droite, vous verrez immédiatement vos modifications dans l'écran de prévisualisation.


Images

La première option sur le côté gauche consiste à ajouter des images telles que votre logo et votre favicon. Vous pouvez ajouter votre logo en cliquant sur "Télécharger le logo" et en choisissant une image (type supporté : JPG ou PNG).


Remarque : si vous avez déjà téléchargé un logo dans les paramètres du Booster Capture de Leads, vous verrez la notification comme dans l'exemple ci-dessous. Vous pouvez modifier le logo téléchargé en cliquant sur les paramètres de l'équipe, ce qui vous redirigera vers l'emplacement correct. Modifiez le logo ou le Favicon en téléchargeant une nouvelle image.


Police

Dans la section générale, vous pouvez également ajuster la police du titre et du texte. Vous pouvez choisir différents styles, tailles et couleurs pour la police.

  • Il existe différents types de polices dans le menu déroulant. Vous pouvez soit choisir un type dans la liste, soit taper pour rechercher la police souhaitée. Par exemple, Kanit n'apparaît pas dans la liste, mais si je tape "Ka", elle apparaîtra.
  • Vous avez deux possibilités pour choisir la couleur du texte :
    • Utilisez un code de couleur hexadécimal : il suffit de saisir le code hexadécimal de la couleur souhaitée. Par exemple, #000000 correspond au noir. 
    • Cliquez sur le carré de couleur : sélectionnez une couleur directement dans la palette. Si vous souhaitez faire correspondre précisément une couleur sur votre site web, utilisez l'outil pipette (épingle) pour choisir cette couleur exacte.

Remarque : La police, la taille et la couleur choisies s'appliqueront également à la page de réussite. Vous pouvez en avoir un aperçu en cliquant sur "Page de réussite" sur le côté droit au lieu de "Page de formulaire".


Arrière-plan

Vous avez la possibilité de choisir des couleurs tant pour la page que pour le formulaire lui-même.

  • L'exemple ci-dessous montre que le formulaire et la page ont la même couleur.


  • Le choix d'une couleur se fait de la même manière que pour la couleur du texte. Remplissez le code de couleur hexadécimal, choisissez une couleur dans la palette ou utilisez l'épingle. Par exemple, le code hexagonal #ecd9b1 est utilisé ici, ce qui correspond à un beige neutre.


Bouton

Le dernier élément de la colonne générale est la couleur du bouton. Vous pouvez modifier à la fois la couleur du bouton et la couleur du texte du bouton.

  • Par exemple, un bouton noir avec un texte blanc.

Voici à quoi pourrait ressembler la personnalisation de votre formulaire :



Spécifique à la page

Dans la colonne de droite, vous trouverez des éléments relatifs aux spécificités de la page. Sous l'intitulé "Spécifique à la page", vous avez la possibilité de choisir entre la "Page du formulaire" et la "Page de réussite".


Page du formulaire

  • Vous pouvez personnaliser l'introduction et le texte qui apparaît sur le bouton dans le coin droit. 
  • De plus, vous pouvez prévisualiser votre formulaire de contact. En cliquant sur l'icône "Agrandir", vous pouvez visualiser l'ensemble du formulaire.

Remarque : Dans l'aperçu complet, vous aurez également la possibilité de cocher la case reCAPTCHA, qui n'est pas visible dans l'aperçu standard.


Page de réussite

  • Personnalisez le texte du titre comme vous le souhaitez. Par exemple, vous pouvez le remplacer par "Grand succès". 
  • Ajoutez un message de réussite personnalisé, tel que "Merci d'avoir rempli le formulaire de contact, nous vous contacterons sous peu". 
  • Si vous le souhaitez, vous pouvez insérer une image en cliquant sur "Télécharger une image". Les types d'images pris en charge sont JPG ou PNG.
  • Ajouter un fichier téléchargeable ou ajouter un lien permettant de télécharger un fichier (voir ci-dessous)


Ajouter un fichier téléchargeable


Il peut arriver que vous souhaitiez partager un fichier avec des clients potentiels à condition qu'ils soumettent d'abord des données (par exemple, un nom et une adresse électronique). Pour ce faire, vous pouvez utiliser un formulaire de contact qui contient un fichier téléchargeable. Il y a deux options :

  1. Ajoutez un lien (par exemple de votre propre site web) où ils peuvent télécharger le fichier.
  2. Ajouter un fichier qui peut être téléchargé après avoir soumis le formulaire de contact (max. 10MB)


Vous pouvez également personnaliser le texte du bouton pour le rendre plus clair, comme dans l'exemple ci-dessus. L'aperçu pourrait ressembler à ceci :


Enregistrez et partagez votre formulaire de contact

Après avoir vérifié l'aperçu de votre formulaire de contact, vous devez l'enregistrer en cliquant sur le bouton situé dans le coin inférieur droit. Vous obtiendrez alors un écran contextuel qui vous permettra soit de partager votre formulaire, soit d'accéder à la vue d'ensemble de vos formulaires de contact.


Intégrer le formulaire personnalisé dans votre site web

Vous pouvez intégrer ce formulaire personnalisé dans votre site web de manière à ce qu'il ait l'air de faire partie intégrante du site web. Copiez le code HTML intégré à partir de la page d'aperçu des formulaires de contact. Dans l'exemple ci-dessous, vous pouvez voir le formulaire de contact créé ci-dessus comme exemple intégré dans un site web.




Pour en savoir plus sur la façon d'intégrer le formulaire de contact dans votre site web, suivez les étapes de cet article.