L'éditeur de formulaires est un outil intuitif qui vous permet de créer différents types de formulaires en ligne pour interagir avec les visiteurs de votre site ou collecter des informations sur les utilisateurs. Grâce à son interface intuitive, similaire à celle de l'éditeur de texte et d'image, mais avec des options de personnalisation supplémentaires, vous pouvez concevoir et configurer divers formulaires, tels que des formulaires de commentaires, d'abonnement, des enquêtes, etc.
Ajouter un formulaire à votre site Web
1. Accédez à l'onglet Créer dans le menu de gauche et sélectionnez la catégorie Formulaires.
2. Faites glisser et déposez l'élément de formulaire à l'endroit souhaité sur la page. L'espace réservé bleu indiquera l'emplacement disponible le plus proche pour le dépôt.
Composants du formulaire
1. Élements : Configurez le contenu, y compris leschamps de formulaire, les cases à cocher, lescases d’option et lebouton d’appel à l’action .
2. Paramètres : Définissez l'action à effectuer lors de l'envoi du formulaire, comme l'envoi des données par e-mail ou leur stockage dans une base de données.
Éléments du formulaire
1. Champ de texte
Le champ de texte permet aux utilisateurs de saisir des informations courtes sur une seule ligne dans votre formulaire.
Types de champs
Le paramètre Type définit le type de données que les utilisateurs peuvent saisir :
- Texte – Affiche l'entrée exactement telle qu'elle a été saisie.
- Mot de passe – Masque les caractères saisis en les affichant sous forme de *** (par exemple, pour les mots de passe).
- Masqué – Stocke des informations relatives au système (par exemple, les détails du référent ou du navigateur) ou des données préremplies que les utilisateurs ne doivent pas voir.
- Fichier* – Permet aux visiteurs de télécharger des images, de l’audio, de la vidéo ou d’autres fichiers. Les fichiers soumis génèrent un e-mail contenant un lien de téléchargement cliquable.
Options de personnalisation
- Nom – Un identifiant unique pour référencer le champ dans l’éditeur de formulaire et dans les e-mails ou les entrées de blog générés par le formulaire.
- Largeur – Ajustez la largeur du champ en saisissant une valeur ou en faisant glisser les poignées de redimensionnement.
- Longueur maximale – Définit le nombre maximum de caractères que le champ peut accepter.
- Valider en tant que – définit le type de contenu requis (par exemple, un champ d’e-mail doit contenir une adresse e-mail correctement formatée). Si l’entrée n’est pas valide, les utilisateurs verront une invite pour la corriger.
- Astuce – Affiche un texte d’assistance lorsque les utilisateurs cliquent à l’intérieur du champ, fournissant des conseils ou des exemples.
- Valeur par défaut – Pré-remplit le champ avec une valeur prédéfinie que les utilisateurs peuvent modifier.
Téléchargements de fichiers*
- Pour stocker les fichiers téléchargés, le formulaire doit être connecté à une base de données.
- Les fichiers stockés dans la base de données resteront accessibles et seront pris en compte dans la limite de stockage du compte.
- Les liens de fichiers envoyés par e-mail n’utilisent pas d’espace de stockage, mais expirent au bout de 30 jours
2. Zone de texte
Le champ de formulaire Zone de texte est similaire au champ de texte, mais il permet une saisie de texte plus longue et multiligne.
Options de personnalisation
En plus des options identiques à celles du champ de texte - Nom, Étiquette, Largeur, Astuce, Validation et Valeur par défaut, voici les options suivantes pour le champ de texte étendu :
- Hauteur – Ajustez la hauteur de la zone de texte en modifiant le nombre dans le champ de hauteur ou en faisant glisser les commandes de redimensionnement de la zone de texte.
- Habillage – Définit la façon dont le texte est affiché lorsqu’il est soumis dans des e-mails ou affiché dans des forums/blogs.
- Par défaut – Utilise les paramètres d’habillage de texte par défaut du navigateur ou du client de messagerie.
- Désactivé – Désactive l’habillage du texte, de sorte que le texte ne se sépare pas sur de nouvelles lignes lors de la saisie.
- Physique – Affiche le texte exactement tel qu’il a été enveloppé dans la zone de texte.
- Virtuel – Permet au client de messagerie de décider comment le texte sera renvoyé à la ligne.
3. Sélectionner un champ
Le champ de sélection permet aux utilisateurs de choisir parmi une liste prédéfinie d’options. Il peut être affiché sous la forme d’un menu déroulant ou d’une liste, selon la configuration sélectionnée.
Options de personnalisation
- Type – Définit la façon dont les options sont affichées :
- Menu – Affiche une liste déroulante où les utilisateurs peuvent sélectionner une option.
- Liste – Affiche toutes les options disponibles dans une liste verticale.
- Options – Représente les choix sélectionnables dans le champ.
- Nom de l’option – Le texte affiché dans la liste déroulante ou la liste.
- Valeur de l’option – Les données réelles envoyées dans les e-mails lorsque l’option est sélectionnée.
- Ordre et gestion – Utilisez les flèches haut/bas pour réorganiser les options, supprimer celles que vous ne souhaitez pas ou définir une sélection par défaut qui s'affichera lorsque le formulaire se charge.
4. Cases à cocher
Les cases à cocher permettent aux utilisateurs de sélectionner plusieurs options dans une liste ou d’activer ou de désactiver une seule option. Ils sont utiles pour présenter des sélections à choix multiples où plusieurs options peuvent être choisies.
Options de personnalisation
-Nom - L’identifiant unique de la case à cocher, utilisé dans l'éditeur de modèles de formulaire, les e-mails et les entrées de blog. Pensez-y comme à la question à laquelle les utilisateurs répondent en cochant ou en décochant des cases.
- Valeur – Représente la réponse sélectionnée. Par exemple, si la valeur de la case à cocher est définie sur « Oui », le fait de cocher la case signifie que l’utilisateur a répondu par l’affirmative.
- Sélectionné par défaut – Si cette option est activée, la case sera pré-cochée lors du chargement du formulaire.
- Obligatoire – Exige que les utilisateurs cochent la case avant de soumettre le formulaire. Cela est utile pour les cases à cocher d’accord, par exemple pour demander aux utilisateurs d’accepter les conditions générales avant de les soumettre.
5. Boutons radio
Les boutons radio sont utilisés lorsqu'une seule option peut être sélectionnée parmi une liste prédéfinie. Contrairement aux cases à cocher, la sélection d'un bouton radio désélectionne automatiquement toute autre option dans le même groupe.
Options de personnalisation
- Nom du groupe – Tous les boutons radio représentant des choix pour la même question doivent appartenir au même groupe. Un seul bouton par groupe peut être sélectionné à la fois.
- Valeur – Représente le choix de réponse. Par exemple, si la question est « Aimez-vous mon site ? », le nom du groupe peut être « LikeMySite », avec les options de valeur Oui, Non et Nécessite plus de travail. Si un utilisateur sélectionne Oui, la réponse envoyée s’affiche sous la forme suivante : LikeMySite : Oui
- État par défaut – Permet de présélectionner un bouton radio lors du chargement du formulaire.
- Obligatoire – Exige que l’utilisateur sélectionne une option avant de soumettre le formulaire.
6. Formulaire de rétroaction
L’éditeur de formulaires comprend un assistant de formulaire de commentaires intégré, qui peut être facilement ajouté en sélectionnant l’icône F.
Ce formulaire est préconfiguré avec tous les champs nécessaires pour soumettre des commentaires, y compris un bouton d’appel à l’action. Les champs sont définis avec des options par défaut, mais vous pouvez les personnaliser selon vos besoins pour mieux répondre à vos besoins.
7. Messages de réussite/erreur
Une fois le formulaire envoyé, le système affiche un message de réussite ou d’erreur. Vous pouvez contrôler l’emplacement de ces messages en spécifiant leur emplacement dans l’éditeur.
Utilisez l’icône Infos pour sélectionner l’emplacement où vous souhaitez que les messages apparaissent. Dans les propriétés du formulaire, lorsque les options avancées sont activées, vous pouvez également personnaliser le message de réussite. Si le champ n’est pas renseigné, le message de réussite par défaut s’affiche. Toutefois, si vous préférez, vous pouvez entrer un message personnalisé, dans les propriétés du formulaire, qui sera affiché à vos visiteurs une fois le formulaire envoyé.
8. Bouton d’appel à l'action
Le bouton d'appel à l'action (CTA) est un élément crucial du formulaire, car il permet aux utilisateurs de soumettre leurs commentaires et de compléter les actions prévues dans le formulaire. Sans lui, il n'est pas possible de soumettre des formulaires.
Pour insérer un bouton CTA, repérez son icône dans la section Éléments en ligne de la barre d'outils de l'éditeur de formulaires et cliquez dessus. Une fois ajouté, cliquez sur le bouton pour le configurer en tant que bouton de soumission. Dans le menu déroulant Lien, sélectionnez {Soumettre le formulaire} pour activer l'envoi du formulaire.
Si vous avez besoin d'un bouton de réinitialisation, vous pouvez en créer un en suivant les mêmes étapes et en sélectionnant {Réinitialiser} à la place. De plus, le panneau de droite fournit un champ modifiable dans lequel vous pouvez personnaliser le texte de la légende du bouton en fonction des besoins de votre formulaire.
Personnalisation des propriétés et du bouton d'appel à l'action
- Sous-sous-titre de la légende & du bouton : Définissez le texte principal et le sous-texte facultatif affichés sur le bouton.
- Taille : Choisissez parmi des boutons de petite, moyenne ou grande taille.
- Largeur minimale : Définissez une largeur minimale de bouton pour assurer la cohérence de la disposition.
- Légende au survol et sous-légende : Spécifiez le texte de remplacement qui s'affiche lorsque les utilisateurs survolent le bouton.
- Transition du texte Si un sous-titre au survol de la souris est défini, sélectionnez un effet de transition pour un changement visuel fluide.
- Effet de surbrillance : Ajoutez un effet d'animation qui s'active 3 secondes après le chargement de la page et se répète toutes les 30 secondes.
- Couleur : Choisissez parmi trois couleurs de bouton prédéfinies.
- Alignement : Alignez le bouton dans le contenu (gauche, centre ou droite).
- Marges : Ajustez le remplissage du bouton en pixels pour un espacement optimal.
- Icône du bouton : Choisissez une icône dans la bibliothèque d'images ou téléchargez une image personnalisée.
- Icône au survol : Optionnellement, ajoutez une icône différente qui s'affiche au survol.
- Emplacement de l'icône : Positionnez l'icône avant ou après la légende du bouton.
Paramètres du formulaire
1. Page suivante
Spécifiez la page qui doit s'ouvrir une fois l'envoi du formulaire réussi. Il peut s'agir d'une page de remerciement ou de toute autre page pertinente de votre site. Par défaut, le formulaire est configuré pour garder les utilisateurs sur la même page une fois l'envoi réussi. Pour changer cela - via le type de lien, choisissez la page souhaitée.
2. Envoyer par e-mail
Activez l'option "Envoyer par e-mail" pour recevoir les soumissions de formulaires par e-mail de la part des visiteurs de votre site. Cela élargira les options supplémentaires :
| - À envoyer par e-mail – Entrez l'adresse e-mail à laquelle les soumissions de formulaires doivent être envoyées, par exemple, orders@contactmywebsite.com. | |
| - À partir d'un e-mail – Pour garantir la délivrabilité des soumissions de formulaires, nous avons désactivé l'option permettant de spécifier l'adresse e-mail de l'expéditeur. | |
|
- Objet de l'e-mail – Définissez la ligne d'objet de l'e-mail (par exemple, « Nouvelle demande d'information »). Vous pouvez également utiliser des caractères génériques $xxxxx$ pour personnaliser l'objet en fonction de l'entrée de l'utilisateur. |
3. Format de l'e-mail et éditeur de modèle
Choisissez le format de l'e-mail :
- Simple – Envoie des e-mails uniquement en texte, en supprimant tout formatage.
- HTML – Envoie des e-mails formatés, à condition que votre client de messagerie prenne en charge le HTML.
Pour les mises en page d'e-mail personnalisées, sélectionnez Utiliser un modèle, ce qui ouvre l'éditeur de modèles :
- L'éditeur de modèles fonctionne comme un éditeur de texte et d'images simplifié.
- Utilisez la liste déroulante Valeur pour insérer des espaces réservés correspondant aux champs de formulaire.
- Une fois enregistré, chaque soumission de formulaire générera un e-mail basé sur la structure de votre modèle.
4. Envoyer le courriel de confirmation
Cette fonctionnalité envoie une réponse automatique aux visiteurs confirmant leur soumission.
- À envoyer par e-mail – Entrez l'adresse e-mail à laquelle les soumissions de formulaires doivent être envoyées, par exemple, orders@contactmywebsite.com.
- À partir d'un e-mail – Pour garantir la délivrabilité des soumissions de formulaires, nous avons désactivé l'option permettant de spécifier l'adresse e-mail de l'expéditeur.
- Objet de l'e-mail – Définissez la ligne d'objet de l'e-mail (par exemple, « Nouvelle demande d'information »).
- Contenu du message : activez l'option Utiliser la modification du modèle > pour ouvrir l'éditeur de modèle de texte, dans lequel vous pouvez personnaliser le message de confirmation. Utilisez les balises de fusion pour insérer des données de champ de formulaire (par exemple, $Email$).
5. Envoyer à la base de données
Activez l'option Envoyer à la base de données pour stocker les données de formulaire soumises dans une base de données hébergée sur le site. Le formulaire crée automatiquement une base de données dédiée avec les colonnes requises correspondant aux noms de champs et aux types de données du formulaire. Vous pouvez également utiliser une base de données importée, mais assurez-vous qu'elle contient des noms et des types de colonnes correspondants.
Paramètres supplémentaires :
- Nécessite une confirmation – Envoie un e-mail avec un lien de confirmation sur lequel les utilisateurs doivent cliquer pour valider leur soumission.
- Exiger l'approbation – Informe un modérateur par e-mail, lui demandant d'approuver ou de rejeter la soumission avant qu'elle ne soit stockée. Cela permet d'éviter les spams ou les soumissions accidentelles.
Pour plus d'informations, reportez-vous au didacticiel de l'application Éditeur de base de données.