WordPress : Ton Formulaire de Contact attractif en 5 minutes avec Flo Forms

/

article flo forms

Cet article prend environ 7 minutes à lire en intégralité.

Pour intégrer un formulaire de contact sur WordPress, tu avais le choix entre Contact Form 7 avec ses lignes de code et des extensions freemium qui n’incluent pas le RGPD en version gratuite.

Avec Flo Forms, tu reçois par e-mail tes contacts commerciaux et tes demandes d’informations sans te prendre la tête.

Tu crées ton formulaire à l’aspect professionnel sans toucher une ligne de code. L’interface en glisser-déposer est intuitive.

formulaire en glisser-déposer flo forms

Tu pourras ajouter tes formulaires où tu le souhaites sur ton site : page de vente, pied de page, colonne latérale avec le bloc Gutenberg (ou un short code pour l’éditeur classique).

Découvre le tutoriel pas à pas pour créer des formulaires esthétiques sans y passer des heures

Le formulaire est sobre et attractif.

Voici un exemple réalisé sous le thème Twenty SevenTeen.

Flo Forms sous le thème WordPress Twenty SevenTeen

Il s’adapte automatiquement à ton thème.

Flo Forms sous le thème WordPress OceanWP
OceanWP
Flo Forms sous le thème WordPress GeneratePress
GeneratePress
Flo Forms sous le thème WordPress Astra
Astra
Flo Forms sous le thème WordPress  TwentyTwo
Twenty TwentyTwo

Pourquoi créer ton formulaire de contact avec Flo Forms ?

Pourquoi choisir de créer ton formulaire de contact avec Flo Forms ?

L’extension se configure rapidement et tu conçois ton formulaire en quelques minutes. Elle intègre tous les champs dont tu as besoin pour un formulaire classique dans sa version gratuite.

Tu personnalises les champs comme tu le souhaites sans pour autant tomber dans la prolifération d’options dont tu ne te sers jamais.

Tu disposes également de l’affichage conditionnel pour adapter les champs proposés en fonction de la situation. Cette fonctionnalité est systématiquement payante dans les autres solutions freemium.

Que comporte la version payante ?

  • Les polices personnalisées
  • Les couleurs (en dehors de celles du bouton)
  • Les styles de bouton
  • Les espaces
  • Le champ de transmission d’un document
  • Les intégrations à Mailchimp, MailerLite et Zapier
  • Les exports sur Excel
  • L’envoi des e-mails via SMTP

Installe et configure Flo Forms

installe et configure Flo Forms

Tu installes et actives l’extension Flo Forms – Easy Drag & Drop Form Builder depuis le répertoire des plugins de WordPress.

extension WordPress Flo Forms – Easy Drag & Drop Form Builder

Tu disposes désormais de deux nouvelles entrées dans le menu : Flo Forms pour créer tes formulaires et FloForms Settings pour les réglages. Je ne comprends pas pourquoi tout n’est pas dans un seul menu.

Tu testes un envoi d’e-mail pour valider que Flo Forms fonctionne sur ton site dans l’onglet Test email de FloForms Settings.

menu des réglages de flo forms
email de test

Tu devrais voir ce message s’afficher.

test email validé

Passons à la configuration dans l’onglet Settings.

Email sender name : Tu personnalises le nom associé qui s’affiche à côté de l’e-mail de l’expéditeur d’un message.

Email address where reminders are sent : tu précises l’adresse de réception des rappels des retours des formulaires non consultés.

réglages de flo forms

Custom date format : tu entres le format d/m/y. Ce format est normalement géré mais autant le compléter.

Tu sauvegardes.

réglages flo forms suite

Je te recommande de ne pas toucher aux autres options.

E-mail as plain text : Tes e-mails sont au format texte brut.

Enable Responding Email Header : Le destinataire peut répondre directement depuis sa boîte de réception.

Enable email reminder : tu reçois des notifications par e-mail lorsqu’il y a une entrée non lue dans vos formulaires. Tu choisis le délais d’attente avant le rappel.

Enable Google Captcha : Tu actives les captchas de Google sur ton formulaire.

Paramètre ton formulaire

parametre ton formulaire

Tu cliques sur Add New Form dans le menu Flo Forms.

menu formulaire de flo forms

Tu complètes le titre de ton formulaire.

Il nous reste deux ou trois derniers réglages à effectuer dans l’onglet Form settings.

Recipient email : Tu spécifies l’adresse e-mail à laquelle le formulaire sera envoyé. Tu peux en ajouter plusieurs séparées par une virgule.

Email subject : L’objet de l’e-mail de transmission du formulaire.

réglages formulaire

Columns : tu peux afficher tout le formulaire sur 2 colonnes. Je ne le recommande pas car tu peux personnaliser l’affichage des champs sur une demi-largeur.

Tu rédiges le message qui s’affiche lors de la validation

Personnalisation message de confirmation

ou tu rediriges vers une page de remerciements.

redirection page

Tu actives Send Confirmation E-mail pour adresser un e-mail de confirmation au visiteur.

Tu complètes l’objet du message.

Tu rédiges et tu mets en forme ton message.

email de confirmation

Pour le personnaliser, tu intègres le nom des champs (fid_XXXXXXX) que tu retrouves dans l’intitulé Field CSS Class des champs du formulaire encadré de %. Cela donnera par exemple %fid_6517762%.

personnalisation message

Tu sauvegardes.

Crée ton formulaire

crée ton formulaire

Tu disposes de 12 champs :

  • Ligne de texte simple
  • Zone de texte
  • E-mail
  • Nombre (que tu utilises pour les codes postaux et les numéros de téléphone)
  • Case à cocher unique (pour le RGPD)
  • Liste de Cases à cocher
  • Boutons radio (un choix unique)
  • Liste déroulante
  • Texte (pour des explications)
  • Barre de séparation
  • Date
  • Champ caché (pour un code d’identification)
ajout nouveaux champs

Voici le rendu de tous les champs.

rendu de tous les champs flo forms

Quand tu cliques sur un champ, il s’ajoute à la suite des autres et avant le bouton qui est placé par défaut. Tu les déplaces ensuite comme tu le souhaites en glisser-déposer.

Les options se dévoilent quand tu cliques sur un champ dans la zone formulaire. Je te présente les options communes dans le premier point puis les particularités des autres.

Texte sur une seule ligne

texte simple

Ce champ sert pour les prénoms, noms, adresse, ville, objet…

Field label : l’étiquette au-dessus du champ.

Field Placeholder : le texte indicatif à l’intérieur du champ.

réglages champ texte

Field width : la largeur du champ en % : 100 %, 50 %, 33 % ou 25 %. Les champs s’ajustent automatiquement en fonction de l’espace disponible.

Required : Tu l’actives pour rendre la saisie obligatoire.

reglages champ suite

Tu n’oublies pas de sauvegarder systématiquement.

Zone de texte

zone de texte

Il est utilisé principalement pour le corps des messages.

E-mail

e mail

Ce champ valide que le format respecte celui des e-mails.

Nombre

nombre

Seuls les chiffres sont acceptés : codes postaux, numéros de téléphone, nombre de participants…

Case à cocher unique

case à cocher simple

Sa vocation est d’intégrer un consentement RGPD.

Tu complètes ton texte dans la description. Il est impératif de rendre ce champ obligatoire et de décocher par défaut (tu cliques directement dans la case dans le formulaire si la case est cochée).

case à cocher rgpd flo forms

Liste des cases à cocher

Pour les options multiples comme des services additionnels.

Tu complètes les intitulés. Tu ajoutes ou tu supprimes des options selon tes besoins.

checkbox réglages

Boutons radio

radio

Le visiteur ne peut sélectionner qu’une seule option comme pour la civilité. Ils fonctionnent comme les listes.

liste

Une liste d’options qui occupe moins d’espace que les boutons radio.

Je te recommande de tester ton menu déroulant sur mobiles. L’expérience utilisateurs est souvent malheureuse.

Paragraphe

paragraphe

Il ne s’agit pas d’un champ de saisie mais d’un texte pour des consignes ou des précisions.

Séparateur

séparateur

Il marque la limite entre deux sections d’un formulaire.

Date

ajout date

Naissance, date de rendez-vous souhaitée…

Hint : ce texte apparaîtra en dessous pour expliquer la raison de la demande : pour envoyer un cadeau…

Tu précises le format de date et monday pour indiquer que la semaine commence un lundi..

reglages champ date
rendu date
Le rendu des dates dans le formulaire avec hint.

Masqué

masqué

Ce sont des informations administratives destinées uniquement aux propriétaires et invisibles pour les visiteurs.

Il sera peut-être nécessaire de l’accoler contre un autre champ si le thème gère mal et laisse un espace.

Cache champ caché

Bouton

Text : le texte dans le bouton.

Position : l’alignement (automatique, gauche, centre ou droite)

Les couleurs du texte et de l’arrière-plan.

réglages bouton

Logique conditionnelle

logique conditionnelle

Tu affiches ou tu masques les champs de formulaire en fonction des réponses données dans les autres champs.

Prenons l’exemple d’un loueur de salles. Tu veux présenter des options supplémentaires spécifiques pour chaque événement. Cela fait bizarre de proposer des centres de tables pour un concert.

exemple de logique conditionnelle dans un formulaire

Tu actives la logique conditionnelle.

Tu indiques le champ qui déclenchera l’affichage

réglages de la logique conditionnelle flo forms

et la condition à remplir.

conditions d'affichage

Tu peux ajouter des conditions qui s’ajoutent : Séminaire + Végétarien (and) ou des circonstances d’affichage alternatives Concert ou Mariage (or).

conditions supplémentaires
nouvelles conditions

Ajoute le formulaire de contact sur ton site

Ajoute le formulaire de contact sur ton site

Le code court qui apparaît à la sauvegarde sous le formulaire s’utilise avec l’éditeur classique.

shortcode

Sur Gutenberg, tu disposes d’un nouveau bloc dédié.

bloc gutenberg flo forms

Tu choisis le formulaire à afficher dans le menu de droite.

choix du formulaire de la page d'accueil

Conclusion

Flo Forms est une excellente solution pour intégrer facilement un formulaire esthétique sur WordPress.

Découvre Flo Forms pour ajouter gratuitement et en 5 minutes un formulaire esthétique sur WordPress. Cliquez pour tweeter

Tu peux te tourner vers Contact Form 7 pour disposer de plus d’options pour ton formulaire. L’interface n’est clairement pas aussi intuitive.

J’ai essayé de simplifier au maximum la procédure de Contact Form 7 dans ce tutoriel et d’améliorer le rendu.

signature de Jean du site pour pas un rond

Les articles susceptibles de t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean


3 réponses à “WordPress : Ton Formulaire de Contact attractif en 5 minutes avec Flo Forms”

  1. Bonjour Jean,

    Tu m’as conseillé ce plugin suite à mes déboires avec contact form7 et bien je ne suis pas déçu : il s’intègre parfaitement à mon site ! IMPECCABLE !

    Juste une dernière chose pour l’adaptation au design de mon site: comment procéder pour enlever ou diminuer les contours noirs des champs ?
    Merci Jean
    Gilles

    • Bonjour Gilles,

      Tu récupères l’ID (ou la classe de l’élément) avec l’inspecteur dans Chrome ou Firefox. Tu ajoutes des CSS supplémentaires sur ton site. Sinon, cela doit être réalisable avec la version pro que je n’ai pas essayée.

      Excellente soirée,
      Jean

  2. Super clair comme d’habitude !
    Pas mal du tout Flo Forms, j’ai un peu hésité quand j’ai vu le nombre d’installations du plugin, mais je ne regrette pas de l’avoir installé. Configuration simple et rapide, fonctionne nickel. J’avais juste besoin d’un formulaire de contact basique et pas trop moche. Il fait le job !
    Merci Jean 🙂

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *