Vous ne connaissez pas encore Caldera Forms ? Vous utilisez plutôt Contact Form 7, Form Maker ou bien encore Smart Form ? Et bien si c’est le cas, vous allez certainement changer votre fusil d’épaule lorsque vous découvrirez la puissance et l’efficacité de ce superbe plugin WordPress pour vos formulaires !
Caldera Forms, un plugin aux multiples avantages
Caldera forms est stupéfiant, car, à lui seul, il couvre la totalité des besoins en terme de formulaire. Il permet de mettre en place toutes les fonctionnalités disponibles en HTML/PHP mais d’une manière simplissime, c’est à dire sans coder une seule ligne !
Caldera Forms est un freemium, c’est à dire que le plugin est disponible gratuitement mais que pour certaines fonctionnalités vous devrez acheter des add-ons.
Côté AVANTAGES :
- les champs sont personnalisables
- des conditions peuvent être attribuées en fonction des besoins
- le formulaire est responsive
- la facilité de son builder le rend très “user friendly” !
- la possibilité de réponses automatiques
- de nombreux addons peuvent être rajoutés (version payante)
- sa version gratuite est amplement suffisante pour un blog ou un site vitrine
- le nombre de création de formulaire est illimité
- etc…
Côté INCONVÉNIENTS :
- Rien dans sa version gratuite, peut-être le prix des add-ons !
Tutoriel Caldera Forms en 12 étapes
Assez discuté ! Je vous propose de découvrir un tutoriel pas à pas qui vous permettra d’installer Caldera Forms et de créer rapidement votre premier formulaire.
Etape 1 : Installation du plugin Caldera Forms
Pour installer le plugin, rendez-vous à l’onglet EXTENSIONS > AJOUTER (1) du tableau de bord de WordPress pour recherchez l’extension en saisissant son nom (2) puis cliquez sur INSTALLER MAINTENANT (3).
Veillez à cliquer ensuite sur ACTIVER L’EXTENSION, puis vous verrez alors un raccourci s’insérer dans la barre latérale gauche de votre administration. Il s’agit du menu de Caldera Forms.
Étape 2 : Régler les paramètres d’envoi des emails
Lorsque vous arrivez dans le builder de Caldera Forms, votre tableau de bord est vide puisque vous n’avez pas encore créé de formulaires. Je vous conseille alors de paramétrer d’abord l’onglet EMAIL SETTINGS qui vous permettra de choisir entre le système d’envoi de WordPress ou bien celui de SendGrid en utilisant votre API Key.
Étape 3 : Définir les réglages généraux
Les réglages généraux sont plutôt basiques puisqu’il s’agit d’activer ou de désactiver les styles proposés par Bootstrap 3 du côté visiteur (frontend). Si cela n’impacte pas votre visuel, laissez ces options activées.
Étape 4 : Créer un formulaire
Une fois les quelques fonctionnalités précédentes paramétrées, vous n’aurez plus qu’à cliquer sur NOUVEAU FORMULAIRE. Une pop-up s’ouvrira et vous proposera 4 templates de formulaires pré-paramétrées. Vous pourrez alors choisir la version :
- “Formulaire de contact basic” : idéal pour créer un formulaire simple (contact, upload etc…).
- “Variable pricing form” : idéal pour des formulaires de calcul de prix avec produits variables.
- “Registration form” : idéal pour l’enregistrement ou l’inscription d’un visiteur.
- “Blank form” : formulaire vierge à créer de toutes pièces.
Sélectionnez alors la template adéquate à votre projet, donnez un nom à votre formulaire puis cliquez sur CRÉER UN FORMULAIRE.
Étape 5 : Construire le formulaire – Onglet “DISPOSITION”
Dans l’onglet DISPOSITION, vous trouverez tous les champs, déjà importés avec la template, que vous pourrez modifier dans l’éditeur de champs situé dans la barre latérale droite.
Vous pourrez supprimer les champs qui ne vous intéressent pas mais surtout vous pourrez en rajouter des nouveaux simplement en faisant un glisser-déposer du bouton nommé ADD FIELD vers le rectangle en pointillé contenant le signe “+”.
Les champs disponibles sont nombreux et offrent une fonctionnalité propre à chacun.
Comme vous pourrez le voir sur la capture d’écran ci-dessus, les champs sont classés par type : BASIC, SELECT, FICHIER, CONTENU et SPECIAL. Faites votre petit marché puis cliquez sur SET FIELD
Étape 6 : Construire le formulaire – Onglet “DE”
Dans l’onglet “DE”, vous pourrez paramétrer les notifications des emails que vous enverrez et que vous recevrez lorsqu’un visiteur rempli et envoi le formulaire. Vous pourrez ajouter des destinataires, des copies cachées et même joindre une version CSV des données.
Étape 7 : Construire le formulaire – Onglet “TRAITEMENT”
Cet onglet TRAITEMENT est destiné à attribuer un traitement à vos formulaires. Vous pourrez alors paramétrer l’envoi d’une RÉPONSE AUTOMATIQUE, envoyer vos visiteurs sur une URL externe ou vers une autre page de votre site (REDIRECTION) ou appliquer une VALEUR D’INCRÉMENTATION comme vous le remarquerez dans la capture d’écran ci-dessous :
Étape 8 : Construire le formulaire – Onglet “CONDITIONS”
Dans l’onglet CONDITIONS, vous pourrez ajouter des conditions à votre formulaire. Il vous suffira de cliquer sur AJOUTER UN GROUPE CONDITIONNEL, de le nommer (exemple : condition 1), de choisir le “type” puis de sélectionner les champs auxquels ces conditions doivent être appliquées.
Pour en savoir plus sur l’utilisation des conditions, voici une petite vidéo avec un exemple :
Étape 9 : Construire le formulaire – Onglet “VARIABLES”
Dans l’onglet VARIABLES, cliquez sur AJOUTER UNE VARIABLE, nommez-la puis attribuez-lui une VALEUR ainsi qu’un COMPORTEMENT. Je ne vais pas vous cacher que cet onglet est plutôt réservé aux développeurs PHP. Si vous n’êtes pas à l’aise avec cela et si vous n’y voyez pas d’utilité, n’ajoutez pas de variables à votre formulaire.
Étape 10 : Construire le formulaire – Onglet RESPONSIVE
Cet onglet permet d’agir sur le comportement visuel selon les tailles d’écrans, autrement dit, vous pouvez influer sur le côté responsive du formulaire. Ces options sont basées sur les grilles de Bootstrap 3.0.
Étape 11 : Terminer les réglages du formulaire
C’est l’une des dernières étapes très importante lors de la création de votre formulaire. Rendez-vous dans l’onglet FORM SETTINGS puis vérifiez chacun des paramètres par défaut et modifier-les selon votre projet. Dans cet onglet, vous pourrez saisir le message que votre visiteur verra lorsque qu’il envoi sa requête, sauvegarder les données envoyées, saisir une description de votre formulaire etc…
Attention, n’oubliez pas de sauvegarder votre nouveau formulaire en cliquant sur SAVE FORM !
Étape 12 : Intégrez votre formulaire dans votre site
Pour intégrer votre formulaire dans votre site, vous aurez trois solutions qui s’offrent à vous:
- Solution 1 : Copier le shortcode que vous trouverez dans l’onglet FORM SETTINGS puis coller-le à l’endroit désiré dans votre site.
- Solution 2 : Directement depuis votre page ou votre article, cliquez sur le bouton nommé CALDERA FORM, sélectionnez le formulaire désiré puis cliquez sur INSÉRER LE FORMULAIRE. Ce dernier apparaîtra et vous n’aurez plus qu’à mettre à jour votre page ou votre article.
- Solution 3 : Insérer le formulaire dans la sidebar ou le footer grâce au widget prévu à cet effet. Pour cela, aller à APPARENCE > WIDGET puis glisser-déposer le widget Caldera Forms à l’endroit désiré. Ensuite choisissez votre formulaire grâce au menu déroulant sans oublier d’enregistrer.
Le rendu visuel
J’ai fait un petit essai sur les trois types de templates proposées par Caldera Forms pour vous montrer l’intégration du formulaire dans le frontend (côté visiteur) et là, surprise ! Le formulaire s’intègre parfaitement… Ce n’est malheureusement pas le cas de tous les plugins de ce type.
Rendu du Template Caldera Basic :
Rendu du Template Registration Form :
Rendu du Template Variable Pricing :
En conclusion…
Je suis sous le charme de cet excellent plugin freemium qui réponds à de nombreux besoins. Très bien codé et facile d’utilisation, il pourra vous être utile dans de nombreux cas tout en restant gratuit. Simple, responsive, drag&drop et gratuit, Caldera Form a vraiment tout pour plaire !
Caldera forms dans sa version gratuite couvre un large champ de possibilités, toutefois si vous avez besoin de fonctionnalités supplémentaires, les add-ons suivants sont également disponibles :
- MailChimp – Pour intégrer les formulaires Opt in à Mailchimp.
- Stripe – Accepter les paiements par CB avec Stripe.
- PayPal Express – Accepter les paiements via Paypal Express.
- A/B Testing – Du A/B testing pour vos formulaires.
- Aweber – Automatisation et email marketing avec Aweber.
- Geolocation – Pour utiliser la géolocalisation dans vos formulaires.
- Nexmo – Obtenir des notifications SMS pour les soumissions..
- Mail Templates – Ajouter votre logo, vos couleurs aux emails envoyés via Caldera Forms.
- Caldera Custom Fields – Enregistrer les soumissions en tant que post et/ou post meta.
- et bien d’autres à découvrir sur https://calderawp.com/caldera-forms-add-ons/
Hello,
je l’utilise depuis un moment (pas fan de Gravity)…
Mon add’on préféré (gratuit) : “Run Action”, c’est l’équivalent du hook “form_submission” de Gravity… très pratique pour créer un user, un CPT etc…
Bonjour,
Top résumé et excellent plugin.
Petite question, je dois pour un client envoyer une copie du formulaire à une personne spécifique en fonction d’une valeur reprise dans un menu déroulant. En résumé, je complète le formulaire et il arrive en fonction de la demande à la bonne personne. Une idée pour faire cette manipulation ?
Merci et bonne continuation !!!
Bonjour Fabrice, je cherche justement un formulaire de contact gratuit avec des champs personnalisables, cet article tombe à pic si je puis dire :)
Concernant les performances de ce plugin, pouvez-vous me dire si celui-ci est très léger ou est-ce une usine à gaz ? Le formulaire de contact de ce plugin se charge t-il uniquement sur la page contact ou sur toutes les pages du site internet ? C’est un point très important niveau performance, j’ai déjà vu des formulaires de contact qui chargeaient énormément de fichiers et sur toutes les pages du site internet alors qu’un formulaire de contact ne devrait uniquement se chargeait que sur la page ou se trouve le formulaire de contact. Merci d’avance pour les renseignements et merci pour cet excellent article. Bon week-end !
@stephane c’est selon plusieurs facteurs… Plugin de cache, defer du Js, add-ons utilisés, etc…
Pour ma part, j’ai trouvé le plugin assez léger sans chargement à tout va (mais j’utilise un plugin de cache donc), rien ne vous empêche de le tester dans sa version gratuite ;)
Salut !
Ce plugin a l’air très sympa et me permettrait de changer un peu du classique Contact Form 7.
Par contre j’ai une question : permet-il (de base ou avec un add-on) de créer un formulaire avec plusieurs étapes ?
Merci de ta réponse
Salut @jonsnow64 de mémoire oui, mais à vérifier avec la version free !
Bonjour,
Tout d’abord, félicitation pour ce tutoriel. C’est vrai que le programme est bien fait. Je pense que vous utilisez également ce formulaire. J’ai une question, comment avez-vous intégrer “CAPTCHA ANTISPAM” dans votre formulaire ?
Merci d’avance pour votre réponse.
Bonjour @streelbelgium merci de votre commentaire !
Pour WPFormation, j’utilise Gravity Forms et le Captcha est intégré !
Caldera Forms ne propose plus cette option, ils l’ont enlevé depuis la version 1.3.5 arguant que leur antispam était bien meilleur qu’un captcha => https://calderawp.com/doc/recaptcha-field/
Excellent, merci pour cet article (et pour tous les autres au passage).
Je voudrais savoir ce que vous entendez par widget RESPONSIVE. Est-ce à dire que non seulement le design s’adapte à l’écran, mais qu’aussi un écran virtuel s’affiche sur les smartphones et les tablettes pour répondre aux questions ?
Bonjour,
Merci pour ce tuto. Il m’a beaucoup servi. Je cherchais justement un plugin qui calcule des champs. ils sont pas nombreux en free.
J’ai un problème lors des envois des formulaires dans les boites mail.
Je ne recois pas tous les formulaires. Alors qu’ils sont bien enregistré dans l’administration du plugin.
J’ai vérifier dans mes indésirables ils n’y sont pas.
Je suis en mutu chez ovh, Est-ce que ça viendrait de ça?
Y a-t-il une blocage ou une limitation dans la version free?
Bonjour,
excellent plug-in je l’utilise pour un projet d’étude, pour répondre à la question sur le responsive, oui les champs se repositionnent très bien sur un mobile en position portrait et c’est très léger coté perf, mais je lui trouve quand même 2 inconvénients :
_ côté support faut s’accrocher pour trouver des réponses en dehors de la version PRO
l’auteur ne fourni quasiment aucun support pour la version Free et conseil plutôt d’acheter la licence.
_ le date-picker caldera que j’utilise pour afficher un calendrier dans un champ date marche très bien, mais n’est pas du tout adapté si le champ en question est une date de naissance. En effet, l’année qui s’affiche par défaut est toujours l’année de fin de “range” et bien les jours et les mois postérieurs à cette date sont tous désactivés par défaut, impossible de les sélectionner, il faut toujours remonter en arrière pour pouvoir sélectionner un date. Si je met 1983 en année par défaut et si la personne est née en 54 elle doit se palucher toutes les années en arrière, si je met 1950 elle ne pourra pas aller en avant et choisir 1954, impossible de couper la poire en deux.
Fred
Bonjour,
Est ce que quelqu’un à trouvé comment modifier le “This value is required.” ?
je vois vraiment pas :(
Bonjour WPFormation, savez vous si il est possible de faire une auto réponse personnalisée avec caldera ?
Exemple. le visiteur à 3 case a cocher sur le formulaire :
1 / Offre film institutionnel
2 / Offre vidéo de studio
3 / Offre 3D
Une fois le mail envoyé le visiteur reçoit une réponse automatique avec la bonne offre ? (En fonction de la case cochée)