Comment créer un formulaire avec Caldera Forms ?

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

 

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

step1 Caldera Form

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

step2 Caldera Form

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

step2 Caldera Form

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

step4 Caldera Form

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

step5 Caldera Form

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"

step6 Caldera Form

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.

step7 Caldera Form

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"

step8 Caldera Form

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"

step9 Caldera Form

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 :

step10 Caldera Form

 

Étape 8 : Construire le formulaire - Onglet "CONDITIONS"

step11 Caldera Form

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"

step12 Caldera Form

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

step13 Caldera Form

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

step14 Caldera Form

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.

step18 Caldera Form

 

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

step19 Caldera Form

 

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

step20 Caldera Form

 

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 :

step15 Caldera Form

 

Rendu du Template Registration Form :

step17 Caldera Form

 

Rendu du Template Variable Pricing :

step16 Caldera Form

 

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 :

 

A propos de l'auteur...

WPFormation

Fabrice Ducarme, formateur WordPress je suis éditeur, auteur et fondateur du site WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015 ainsi qu'au WP Tech Nantes 2014, je vous propose plus de 400 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

8 commentaires pertinents à ce jour ;)

  • 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…
  • Yvandeuren dit :
    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 !!!
  • Stephane dit :
    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 !
  • WPFormation dit :
    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 ;)
  • JonSnow64 dit :
    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

  • WPFormation dit :
    Salut de mémoire oui, mais à vérifier avec la version free !
  • StreelBelgium dit :
    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.
  • WPFormation dit :
    Bonjour 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/

Et si vous donniez votre avis ?

Tweet33
Share19
Share15
Buffer