WordPress : Ton Formulaire de Contact attractif en 5 minutes avec 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.

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.

Il s’adapte automatiquement à ton thème.

Pourquoi 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

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

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.

Tu devrais voir ce message s’afficher.

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.

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

Tu sauvegardes.

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

Tu cliques sur Add New Form dans le menu 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.

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

ou tu rediriges vers une page de remerciements.

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.

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%.

Tu sauvegardes.

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)

Voici le rendu de tous les champs.

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

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.

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.

Tu n’oublies pas de sauvegarder systématiquement.

Zone de texte

Il est utilisé principalement pour le corps des messages.

E-mail

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

Nombre

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

Case à cocher unique

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).

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.

Boutons radio

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

Menu déroulant

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

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

Séparateur

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

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..

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.

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.

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.

Tu actives la logique conditionnelle.

Tu indiques le champ qui déclenchera l’affichage

et la condition à remplir.

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

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.

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

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

Conclusion

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

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.

Les articles susceptibles de t’intéresser :

• Une barre des cookies qui respecte le RGPD
• Crée les images de ton site
• Assure la sécurité de ton site
• Le contenu de ta page d’accueil

Retrouve tous les articles pour Créer seul ton site

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