Loading
Dans cet article, nous allons voir comment mettre en place un formulaire de contact sur un blog créé sur systeme.io.
Ce dont vous aurez besoin :
- un compte systeme.io
- un blog
1. Créer un formulaire de contact :
Il faudra d'abord créer un formulaire de contact depuis votre tunnel de vente.
Pour cela, veuillez vous rendre sur votre tunnel de vente à cet effet, puis Ajouter une étape (1), ensuite choisissez Formulaire (2).
Choisissez le template de votre choix en cliquant sur Sélectionner (3).
Allez dans l'éditeur de page du formulaire en cliquant sur le bouton Modifier la page pour personnaliser votre formulaire (4).
Un formulaire de contact doit obligatoirement comporter au minimum un champ du formulaire, aussi, vous pouvez mettre autant de champs de formulaire que vous souhaitez.
Veuillez sélectionner l'élément Champ de formulaire, puis depuis l'icône en forme d'engrenage, paramétrez le champ en question en choisissant le type de données que vous souhaitez recueillir, en sélectionnant un élément depuis la liste déroulante à cet effet.
Il faudra également paramétrer le bouton qui enregistrera l'action à faire avec l'élément recueilli.
N'oubliez pas d'enregistrer vos modifications en cliquant sur Enregistrer avant de quitter la page.
2. Créer un formulaire de contact sous forme de Popup :
Allez sur votre tunnel de vente, cliquez sur Ajouter une étape pour créer une nouvelle étape (5), puis choisissez Formulaire popup (6).
Choisissez le template de votre choix en cliquant sur Sélectionner (7).
Allez dans l'éditeur de page du formulaire en cliquant sur le bouton Modifier la page pour personnaliser votre formulaire (8).
Un formulaire de contact doit comporter au moins un champ. Toutefois, vous pouvez en ajouter autant que vous le souhaitez.
Veuillez sélectionner l'élément champ de formulaire, puis depuis l'icône en forme d'engrenage, paramétrer le champ en question en choisissant le type de données que vous souhaitez recueillir, en sélectionnant un élément depuis la liste déroulante à cet effet.
Il faudra aussi paramétrer le bouton qui enregistrera l'action à faire avec l'élément recueilli.
Le délai d'affichage de la popup contenant le formulaire de contact sur votre page de blog peut être déterminé depuis votre éditeur (vous devez indiquer le délai en secondes).
N'oubliez pas de cliquer sur Sauvegarder pour que vos modifications ne soient pas perdues avant de quitter la page.
3. Mise en place du formulaire sur votre blog :
Le principe est le suivant : afin de mettre en place le formulaire de contact sur votre blog, il faut récupérer le script de celui-ci et le coller sur votre page de blog.
La première étape consiste à revenir sur la page de paramètres de votre formulaire en ligne, puis à cliquer sur Script.
Une popup s’affiche contenant un lien vers votre page de formulaire en ligne, cliquez sur Copier le lien dans le presse-papiers.
Vous devrez ensuite vous rendre dans l'éditeur de la page du blog en cliquant sur Éditer dans le menu à trois points ou en cliquant directement sur le nom de la page à laquelle vous souhaitez ajouter le formulaire de contact.
Puis, il faut mettre en place un élément Code HTML sur votre page de blog.
Enfin, il faudra accéder aux paramètres de votre élément Code HTML.
Cliquez sur Modifier le code et collez-y le script du lien récupéré depuis votre page de formulaire en ligne.
Cliquez sur Enregistrer pour valider le code HTML, puis cliquez sur Sauvegarder dans l'éditeur.
Si nous prévisualisons ensuite la page du blog, nous remarquerons que le formulaire s'affiche comme indiqué ci-dessous :
4. Mise en place du lien de votre formulaire de contact sous forme de popup sur votre blog :
Lors de la mise en place d’un formulaire de contact sous forme de popup, il existe deux manières possibles de l’afficher sur votre page de blog :
- Sous forme de popup qui s’affiche en fonction du délai défini pour son apparition.
- À partir d’un texte qui sera cliquable et configuré pour ouvrir la popup.
Pour la première option, la méthode est identique à celle utilisée lorsque vous ajoutez un formulaire de contact sur un blog, nous allons donc expliquer la deuxième méthode en détail.
Pour afficher le formulaire en popup après avoir cliqué sur un texte, il faut d’abord revenir sur la page de paramètres de votre formulaire de contact popup, puis cliquer sur Créer un lien.
Une popup s'affichera qui vous permettra de créer un lien qui ouvre la popup depuis un texte.
- Il faut choisir le contenu du texte qui sera cliquable.
- Il faut cliquer sur Copier le script dans le presse-papier.
Pour cela, vous devez vous rendre sur l'éditeur de votre page de blog sur laquelle vous souhaiteriez afficher celui-ci.
Puis, il faut mettre en place un élément HTML sur votre page de blog.
Enfin, il faudra rejoindre les Paramètres de votre élément HTML.
Cliquez sur Modifier le code et collez-y le script du lien qui ouvre une page de formulaire popup.
Assurez-vous de cliquer sur Enregistrer pour sauvegarder le code HTML, puis cliquez sur Sauvegarder dans l’éditeur.
Si nous prévisualisons ensuite la page du blog, nous remarquerons que le formulaire popup s’affiche lorsque l’on clique sur le texte Cliquez ici pour ouvrir la popup, comme indiqué ci-dessous :
Articles associés :