Formulaires

FORMINATOR: Créer un formulaire

13 views 4 octobre 2019 amorisseau 0

CRÉER UN NOUVEAU FORMULAIRE

La création de votre formulaire Forminator implique plusieurs étapes. En un mot, vous allez:

  • Créer un formulaire
  • Insérer et configurer des champs
  • Configurez l’aspect général et le comportement du formulaire
  • Connecter des applications tierces (facultatif)
  • Testez le formulaire
  • Publier

Passons en revue pour créer un formulaire de base. Dans le tableau de bord, cliquez sur + Créer dans le volet Formulaires ou naviguez dans le menu Admin: Forminator Pro> Formulaires, puis cliquez sur + Créer .

Une fenêtre contextuelle s’ouvrira où vous pourrez sélectionner un modèle de formulaire ou choisir de recommencer à zéro en sélectionnant Vierge , puis en cliquant sur Continuer .

Une fenêtre contextuelle apparaît dans laquelle vous pouvez donner un nom à votre formulaire. Chaque formulaire doit avoir un nom, mais le changer ultérieurement est facile. Lorsque vous avez entré un nom, cliquez sur + Créer . Forminator créera votre formulaire brut et ouvrira l’écran de synthèse du formulaire, où tous vos formulaires apparaîtront.

Selon le modèle que vous avez choisi, votre formulaire comportera quelques champs prédéfinis, chacun pouvant être facilement supprimé, comme vous le verrez.

AJOUT DE CHAMPS

REMARQUE:

Il existe plus de deux douzaines de types de champs dans Forminator, chacun ayant son propre objectif. Cette section explique simplement les bases de l’insertion de champs dans vos formulaires. Pour une explication détaillée sur l’utilisation et la configuration de chaque type de champ, regardez le tutoriel Forminator : les différents types de champs .

Pour ajouter un nouveau champ, appuyez sur le bouton violet Insérer des champs .

Une boîte de dialogue s’ouvrira où vous pourrez choisir parmi une variété de champs différents. Vous devez configurer reCAPTCHA avant que le champ n’apparaisse.

Vous devez toujours ajouter une RECPATCHA à votre formulaire.

Vous pouvez sélectionner plusieurs champs. Lorsque vous avez fini de choisir les champs, appuyez sur le bouton Insérer des champs .

 

Organisation des champs:

Par défaut, les nouveaux champs occuperont une ligne. Pour organiser vos champs en colonnes, faites simplement glisser un champ dans la même ligne qu’un autre champ. Vous pouvez ajouter jusqu’à quatre champs à une seule ligne.

 

Configuration de champs:

Lorsque vous ajoutez un nouveau champ ou modifiez un champ existant, vous pouvez spécifier si le champ est obligatoire ou non dans l’ onglet Paramètres . Lorsque vous sélectionnez Obligatoire , un champ supplémentaire s’ouvre pour vous permettre de saisir un message d’erreur indiquant que l’utilisateur verra s’il laisse le champ vide ou incomplet.

 

Chaque champ obligatoire aura un *  dans le formulaire pour indiquer visuellement à votre utilisateur que le champ doit être répondu).

CLASSES CSS SUPPLÉMENTAIRES

Vous pouvez définir les classes CSS supplémentaires dans l’ onglet Styling dans les paramètres de champ.

Ici, vous pouvez ajouter une classe au champ afin d’ajouter du CSS personnalisé (pour ajouter plusieurs classes, utilisez un espace pour les séparer). Cela vous aidera, par exemple, à séparer un champ des autres en y ajoutant un remplissage ou en colorant le texte d’un certain champ. Pas un expert en CSS, mais vous souhaitez quand même accomplir quelque chose comme ça? contactez l’assistance.

LOGIQUE CONDITIONNELLE

La logique conditionnelle est une fonctionnalité qui vous permet d’afficher ou de masquer facilement des champs de formulaire en fonction de la façon dont une personne répond aux autres champs du formulaire. Cela rationalisera votre formulaire, le «fera» paraître plus court (pour que vous puissiez afficher d’autres champs lorsqu’une condition est remplie, par exemple) ou créera une expérience de formulaire personnalisée.

Pour ajouter des règles de logique conditionnelles, accédez à l’ onglet Visibilité et cliquez sur la section Ajouter une règle .

Dans la fenêtre contextuelle, indiquez si vous souhaitez ou non que la ou les règles masquent ou affichent un champ. Si vous avez plusieurs règles, vous devrez spécifier si toutes les conditions doivent être remplies ou une seule.

Lorsque vous ouvrez une règle, vous devez choisir le champ utilisé par la condition. Sélectionnez également la condition et la valeur du champ.

Faisons un exemple simple et rapide ici, avec une fonction Show.

Dans ce formulaire, vous voulez créer des champs pour que quelqu’un puisse entrer des liens vers leurs profils de réseaux sociaux. Au lieu d’afficher un ensemble de champs pour chaque réseau social, vous allez d’abord créer une case à cocher avec une liste de profils de réseaux sociaux. Ainsi, si quelqu’un sélectionne un champ dans la liste, un champ apparaît pour lui permettre de saisir un lien. leur profil.

Pour ce faire, je vais créer un champ pour chaque réseau social et l’afficher uniquement si quelqu’un le coche dans ma liste de cases à cocher.

Après avoir créé un champ pour un réseau social, accédez à l’ onglet Visibilité .

Nous allons afficher ce champ Twitter si quelqu’un coche la case Twitter.

Pour le champ , vous sélectionnez Quels réseaux de médias sociaux utilisez-vous? Puisque c’est le champ que la condition prend en considération. Pour la condition que nous allons choisir d’ avoir et choisir Twitter de la valeur déroulante.

Faites cela pour les autres champs du réseau social, mais au lieu de Twitter, entrez la valeur qui correspond au champ.

CLONAGE ET SUPPRESSION DE CHAMPS

Pour couronner le tout, vous pouvez, si vous le souhaitez, cloner ou supprimer votre champ en cliquant sur l’icône représentant un engrenage à côté d’un champ.

Lorsque vous utilisez Cloner, l’ensemble du champ sera automatiquement ajouté à la fin du formulaire actuel.

 

PERSONNALISATION DU BOUTON D’ENVOI

Sous les champs de formulaire et la section Champs d’insertion, vous pouvez personnaliser le comportement et l’étiquette du bouton d’envoi de votre formulaire.

Soumettre des étiquettes de bouton

Texte du bouton: le message du bouton vous permet de modifier le texte de votre bouton d’envoi.

Message d’erreur : message personnalisé lorsque le formulaire n’est pas rempli correctement? Activez simplement la fonctionnalité et entrez votre texte personnalisé ici.

Comme avec les champs, vous pouvez utiliser Visibilité pour définir des règles de logique conditionnelle qui afficheront ou masqueront votre bouton d’envoi en fonction de certaines conditions.

PUBLIER VOTRE FORMULAIRE

Lorsque vous créez votre formulaire pour la première fois, vous avez la possibilité d’enregistrer votre progression sous forme de brouillon ou de publier votre formulaire.

Une fois que votre formulaire est publié, vous serez en mesure de Dépublier ou mise à jour après avoir fait des changements.

 n’bouliez pas : Vous devez toujours ajouter une RECPATCHA à votre formulaire.

APPARENCE

Ici, vous pouvez éditer et configurer l’apparence de votre formulaire dans les moindres détails.

Style de design

Utilisez l’un de nos thèmes préconfigurés comme point de départ pour une personnalisation plus poussée ou sélectionnez Aucun pour que votre formulaire hérite des styles du code CSS de votre thème.

Si vous sélectionnez Aucun , vous ne pourrez pas modifier les couleurs , les polices ou le conteneur de formulaire à partir de l’ onglet Apparence . Vous devrez personnaliser les fichiers CSS de votre thème.

Couleurs

Pour les couleurs, vous pouvez utiliser les couleurs par défaut ou sélectionner Personnalisé pour accéder aux couleurs d’arrière-plan et de texte de nombreux éléments de votre formulaire. Ouvrez simplement l’élément pour lequel vous souhaitez modifier la couleur et apportez vos modifications.

Les polices

Configurez les polices, la taille et l’épaisseur de police souhaitées, ainsi que les étiquettes , les titres de section , les étapes de pagination et tous les autres éléments de votre formulaire.

Conteneur de formulaire

Personnalisez davantage l’apparence du conteneur principal de formulaire en ajoutant des rembourrages, une bordure et l’espacement entre les champs de formulaire.

Vous permet de choisir un compact ou une séparation plus large et confortable entre les champs.

Pagination

Si vous avez inséré un ou plusieurs champs de pagination dans votre formulaire, vous pouvez configurer un indicateur de progression ou personnaliser le texte du bouton pour les pages du formulaire.

Par défaut, rien ne sera affiché dans l’en-tête de pagination des formulaires, mais vous pouvez choisir de le configurer différemment.

Par exemple, si vous avez créé un formulaire avec 3 sections de pagination telles que Données personnelles, Contact et À propos de – vous pouvez choisir d’afficher un indicateur de progression en haut du formulaire sous forme de barre de progression ou d’ étapes .

Un indicateur de progression donne à l’utilisateur une idée de la progression et donne à votre formulaire un aspect encore plus impressionnant. Voici à quoi ressemblent les deux options différentes pour les barres de progression sur le front-end:

Par défaut, vos boutons de pagination des formulaires seront Précédent et Suivant, mais ici vous pouvez les rendre spéciaux pour votre public cible 🙂

CSS personnalisé

Notre option CSS personnalisée a été conçue pour vous permettre de personnaliser votre formulaire à l’aide de CSS. Nous avons ajouté de nombreux sélecteurs pour votre commodité, mais si vous avez besoin d’aide avec CSS, notre support 24/7 Live sera à vos côtés.

COMPORTEMENT

Le comportement du formulaire vous permettra de configurer la fonctionnalité de formulaire en coulisse.

Comportement de soumission

Le comportement de soumission configure ce qui se passe après la soumission du formulaire. Vous avez le choix entre masquer le formulaire, afficher un message de remerciement personnalisé ou rediriger vos utilisateurs vers une certaine page, par exemple, mydomain.com/thank-you.

Si vous utilisez un message en ligne, l’icône de bloc empilé est très pratique ici car elle vous permettra d’ajouter les données soumises au message.

Par exemple, si prénom est un champ de votre formulaire de contact, vous pouvez adresser le message en ligne au nom indiqué dans le champ prénom.

Merci de nous avoir contacté Alex, nous vous contacterons sous peu.

Vous pouvez également rediriger un utilisateur de formulaire vers une autre page de votre site ou d’un autre site.

Méthode de soumission

Enregistrez les ressources de votre serveur en utilisant AJAX pour la soumission de formulaire. Envoyez une seule demande au lieu des nombreuses nécessaires au chargement de la page complète.

Méthode de validation

Vous permet de choisir votre méthode de validation.

Serveur uniquement : lorsque vous cliquez sur le bouton Soumettre, une demande est envoyée au serveur et la validation est renvoyée par le serveur via AJAX ou via la validation PHP lors de l’actualisation. Cela est utile si vous savez que de nombreux utilisateurs utilisent des navigateurs obsolètes (tels que IE5 / IE6) ou vous dirigent vers votre formulaire à partir de navigateurs mobiles qui ne prennent pas en charge la validation en ligne.

Lors de la soumission du formulaire : la validation se produit lorsque vous cliquez sur le bouton Soumettre, mais les données ne sont jamais envoyées au serveur si elles ne sont pas valides (elles utilisent la validation Javascript) – cela devrait fonctionner avec la plupart des navigateurs.

Activer la validation en ligne : la validation a lieu lorsque l’utilisateur tape en Javascript, ce qui pourrait être la meilleure option pour les navigateurs modernes.

Remplissage automatique

Si vous avez besoin de champs automatiquement renseignés, vous pouvez les configurer ici. La saisie automatique fonctionne dans les champs Texte, Nom et Courriel.

Vous pouvez également rendre les données renseignées automatiquement modifiables ou non.

Sécurité

Cette section vous permet de protéger votre formulaire.

Activer la protection du pot de miel : Des problèmes avec les bots? Cela va piéger et piéger les robots de spam pour qu’ils se révèlent en leur donnant un défi que les utilisateurs humains ne peuvent pas voir. Comment cela marche-t-il? Lorsque le formulaire est affiché dans le navigateur, il crée une entrée masquée. Une entrée masquée doit correspondre à la condition souhaitée. Si la condition ne correspond pas, un message de succès tel que «Entrée de formulaire enregistrée» sera envoyé au bot, mais le formulaire ne sera pas réellement envoyé. De plus, étant donné que l’entrée du pot de miel est masquée et générée uniquement lorsque le formulaire est affiché dans le navigateur, les robots auront également tendance à le rater et enverront une requête sans l’entrée masquée (ce qui leur fera échouer au test du pot de miel).

Activer uniquement la soumission avec connexion : seuls les utilisateurs enregistrés pourront utiliser votre formulaire.

Durée de vie

Configure la durée de vie de votre formulaire. Vous pouvez choisir de ne pas expirer, d’expirer à une certaine date ou après un certain nombre de soumissions.

Prenez note que lorsque le formulaire expirera, il ne sera plus visible sur le front-end (mais sera toujours disponible dans le back-end).

NOTIFICATIONS PAR EMAIL

Vous pouvez envoyer des notifications personnalisées par courrier électronique à tout administrateur chaque fois qu’un formulaire est soumis et des courriers électroniques de confirmation à chaque utilisateur qui soumet un formulaire.

Fusionner les balises

Forminator applique des balises de fusion uniques à chaque champ inséré dans un formulaire, un sondage ou un questionnaire. Les balises de fusion vous permettent de configurer les notifications par courrier électronique pour inclure automatiquement le contenu soumis par l’utilisateur.

Les champs du formulaire de balises de fusion apparaissent sur l’écran Champs sous les étiquettes de champs, comme suit: {email-1} .

Créez vos notifications par courrier électronique personnalisées dans l’onglet Notifications par courrier électronique du module Modifier un formulaire: Forminator> Formulaires> Modifier> Notifications par courrier électronique . Sélectionnez les curseurs pour activer, désactiver et modifier vos notifications par courrier électronique.

De nom

Par défaut, tous les e-mails de notification envoyés à partir de Forminator incluent le nom de l’expéditeur et l’adresse de l’expéditeur définis dans les paramètres de messagerie de Forminator, situés ici: Forminator> Paramètres> E-mail .

Vous pouvez personnaliser le nom de l’expéditeur en ajoutant des balises de fusion. Par exemple, si votre formulaire comprend des champs de nom, vous pouvez souhaiter que les notifications incluent le nom de l’utilisateur qui a soumis le formulaire dans votre notification d’administrateur.

Les balises de fusion appliquées ci-dessus font en sorte que le nom de l’utilisateur qui soumet s’affiche dans le champ Nom de l’ expéditeur, comme suit:

De l’adresse Destinataires

Vous pouvez ajouter toutes les adresses électroniques des utilisateurs administrateurs au champ Destinataire. Commencez à taper une adresse électronique d’administrateur dans le champ Destinataires et lorsque Forminator vérifie l’adresse, elle apparaît au bas de la liste des balises de fusion. Sélectionnez l’e-mail qui apparaît dans la liste des balises de fusion pour l’ajouter au champ.

Répondre à l’adresse
Adresses CC / BCC

Tapez une adresse email valide dans les champs CC ou BCC pour envoyer des copies des notifications de l’administrateur à qui vous voulez.

Par exemple, la ligne d’objet ci-dessus comprendra l’ID unique attribué à chaque soumission {ID_substance} et le titre du formulaire, {nom_formulaire}, comme suit:

Corps

Utilisez des balises de fusion pour inclure les données soumises dans le corps de votre courrier électronique de notification. Cliquez sur le bouton bleu Ajouter des données de formulaire pour accéder à la liste de toutes les balises de fusion disponibles pour ce formulaire. Cliquez sur un tag pour l’ajouter au corps de votre email.

Entrez la balise de fusion ‘{all_fields}’ et vos notifications incluront toutes les données de chaque formulaire soumis.

_____________

Email de l’administrateur

Envoyer un courrier électronique à l’administrateur: vous pouvez envoyer un courrier électronique à vous-même, ou à tout administrateur du site si nécessaire, après la soumission du formulaire. Bien sûr, vous pouvez inclure certains / tous les champs ou diverses données.

Email de confirmation

Si vous souhaitez / devez envoyer un e-mail de notification à l’utilisateur qui a rempli le formulaire, une fois celui-ci soumis, vous pouvez le configurer rapidement ici et inclure tous les éléments divers. ou données de terrain.

Chacun des modules ci-dessus a des paramètres de livraison avancés dans lesquels vous pouvez configurer votre courrier électronique dans les moindres détails en indiquant qui envoie le courrier électronique, à partir de quelle adresse, à quel endroit la réponse est-elle adressée et aux adresses CC / BCC.

Une fois que vous avez fini de configurer les e-mails, vous pouvez continuer vers Intégrations en cliquant sur le bouton Continuer.

INTEGRATIONS

Souhaitez-vous connecter vos comptes d’applications tierces et envoyer des données à vos applications préférées? Notre module d’intégration rend cela facile et vous pourrez connecter vos applications en un rien de temps 🙂

Pour voir comment configurer ces intégrations, Contactez l’assistance. 🙂

REGLAGES (Formulaire)

Paramètres vous permet de personnaliser le mode de stockage des données de votre formulaire.

Stockage de données

Si vous ne souhaitez pas stocker les données des formulaires sur votre serveur, vous pouvez choisir de désactiver les soumissions de magasin dans ma base de données .

Bien sûr, vous continuerez à envoyer les entrées à vous et / ou à vos emails de visiteur en utilisant le module Emails.

Intimité

Les formulaires collectent beaucoup d’informations sensibles. Dans la section Confidentialité , vous avez la possibilité de supprimer automatiquement les formulaires soumis une fois qu’ils ont atteint un certain âge.

Vous pouvez définir le nombre de jours, semaines, mois ou années. Une fois qu’un formulaire a atteint la date spécifiée, il est supprimé.

Demandes d’effacement de compte

Ici, vous pouvez choisir ce qu’il adviendra de la soumission d’un utilisateur que vous supprimez de votre site (en utilisant Outils / Effacer les données personnelles). Conserver les soumissions laissera toutes les soumissions de cet utilisateur intact et Supprimer les soumissions supprimera toutes les soumissions de l’utilisateur que vous avez supprimé de votre site.

Conservation des soumissions

Par défaut, toutes les soumissions sont conservées indéfiniment, mais vous pouvez les effacer automatiquement après un certain temps, au cas où vous auriez besoin de les configurer.

 

PRÉVISUALISATION DU FORMULAIRE

L’une des fonctionnalités les plus utiles de Forminator est la prévisualisation en direct.

Vous pouvez non seulement voir les champs de formulaire, y compris le fonctionnement de vos règles conditionnelles, mais vous pouvez également afficher les modifications que vous apportez à l’apparence de vos formulaires.

Si vous apportez des modifications au style de conception, aux couleurs, aux polices, au conteneur de formulaire, etc. de votre formulaire, vous pouvez utiliser le mode de prévisualisation pour voir le résultat.

Dans l’aperçu ci-dessous, l’arrière-plan du formulaire passe du bleu au vert en passant par le transparent. Le style de conception passe de gras à plat. Vous pouvez prévisualiser le formulaire à chaque étape pour vous assurer que le résultat obtenu correspond à vos attentes.

UTILISER DES FORMULAIRES

COMMENT AFFICHER UN FORMULAIRE SUR VOTRE SITE

Chaque formulaire sera accompagné d’un shortcode que vous pourrez utiliser pour l’insérer dans n’importe quelle page / publication de votre site (essentiellement avec un simple copier / coller).

Pour accéder aux codes courts de vos formulaires, accédez au tableau de bord Forminator . Recherchez le formulaire que vous souhaitez utiliser et sélectionnez l’icône représentant un engrenage pour ouvrir le menu déroulant des paramètres du formulaire.

Sélectionnez Copier le shortcode , qui l’ajoutera automatiquement à votre presse-papiers afin que vous puissiez le coller n’importe où.

De plus, vous pouvez également ajouter un formulaire à l’éditeur WordPress classique. Chaque page / publication aura un bouton Ajouter un formulaire:

Dans Gutenberg, il existe un bloc Forminator que vous pouvez utiliser pour insérer un formulaire.

Une fois appuyé, choisissez un formulaire et le shortcode sera automatiquement inséré pour vous:

Si vous souhaitez présenter votre formulaire dans un widget, accédez à Apparence> Widgets , faites glisser le widget Forminator vers votre barre latérale, choisissez ce que vous souhaitez afficher et appuyez sur le bouton Enregistrer:

 

GESTION DE FORMULAIRES

Lorsque vous accédez à Forminator> Formulaires, la liste complète de vos formulaires est présentée.

En développant les formulaires, vous pourrez voir le nombre de vues, de soumissions et le taux de conversion.

En cliquant sur l’ icône représentant une roue dentée , vous pourrez dupliquer, prévisualiser et accéder à des fonctionnalités supplémentaires pour le formulaire dans lequel vous vous trouvez.

En cliquant sur Afficher les soumissions , vous vous dirigerez vers le module Soumissions où vous pourrez voir / gérer / télécharger les entrées de votre formulaire.

Sources

Informations utiles?


Aller au contenu principal
Aller à la barre d’outils