Comment créer un formulaire sur WordPress avec Caldera Forms ?


Dans cet article, je vais vous présenter un plugin WordPress très simple à utiliser pour créer un formulaire sur votre blog (formulaire de contact, de demande de devis, de réservation ou autre). Il s’agit du plugin Caldera Forms, gratuit et très bien noté par les utilisateurs.

Commencez par installer le plugin depuis le menu Extensions > Ajouter de WordPress et activez-le.

Installation du plugin Caldera Forms
Installation du plugin Caldera Forms

Créer un formulaire avec Caldera Forms

Le plugin Caldera Forms vous permet de créer n’importe quel formulaire… ou presque ! Sur la plupart des blogs, on se contente d’un formulaire de contact mais selon l’objectif de votre site (professionnel ou amateur) et selon votre activité, vous pouvez avoir besoin d’une multitude d’autres formulaires : un formulaire de réservation, un formulaire de demande de devis, un formulaire d’inscription à un événement, etc.

Le plugin WordPress Caldera Forms permet justement de partir d’un modèle ou d’un formulaire vierge, selon ce qui est le plus simple pour vous.

Créer un formulaire à partir d’un modèle

Si vous choisissez de partir d’un modèle, vous pouvez littéralement créer votre formulaire en deux clics : choisissez le modèle, donnez un nom au formulaire… puis cliquez sur « Créer un formulaire » pour finaliser la procédure.

Vous pouvez également cliquer sur « Changer le modèle » si vous souhaitez personnaliser le modèle en question.

Créer un formulaire WordPress avec le plugin Caldera Forms
Créer un formulaire WordPress avec le plugin Caldera Forms

Créer un formulaire sur mesure ou personnaliser un modèle

Caldera Forms, c’est aussi la possibilité de créer un formulaire répondant entièrement à vos attentes, sans structure imposée, ou en retravaillant un modèle.

On accède à ce type d’interface :

Un formulaire vierge sur Caldera Forms
Un formulaire vierge sur Caldera Forms

Par défaut, votre formulaire comporte une seule page mais vous pouvez tout à fait concevoir un formulaire en plusieurs pages en cliquant sur le bouton « Ajouter une page ».

La plupart du temps, votre première préoccupation consistera à ajouter des champs à votre formulaire : il faut d’abord cliquer sur le gros signe « + ». Ça va créer une nouvelle rangée dans votre formulaire, que vous pouvez diviser en deux colonnes si vous le souhaitez.

Diviser le formulaire en deux colonnes
Diviser le formulaire en deux colonnes

Dans cet espace, nous allons placer notre premier champ. Mais qu’est-ce qu’un champ de formulaire au juste ? Un champ correspond à une information que vous voulez collecter auprès du visiteur : ça peut être un nom, une adresse e-mail, une réponse à une question, un message, etc.

En fonction de la nature de l’information que vous demandez, la nature du champ va elle aussi évoluer. Par exemple, si vous demandez un numéro de téléphone, il faut un champ qui n’accepte que les chiffres.

Sur Caldera Forms, cliquez sur le petit « + » situé juste sous le champ que vous avez créé… et vous allez voir tout de suite tout ce qu’il est possible de faire !

  • Champs basiques : adresse e-mail, numéro de téléphone, zone de texte, URL, tout ceci fait partie des champs basiques que l’on retrouve dans de nombreux formulaires de contact par exemple. Vous pouvez même intégrer un champ de texte avec éditeur enrichi, pour que vos visiteurs puissent mettre en forme le message qu’ils vous envoient.
  • Champs de sélection : ce sont tous les champs de formulaires qui permettront à vos visiteurs d’effectuer un choix entre différentes options. Ce choix peut prendre la forme d’un menu déroulant, de cases à cocher, d’un bouton radio, d’un système d’auto-complétion…
    Champs personnalisés sur Caldera Forms
    Champs personnalisés sur Caldera Forms
  • Champs de gestion de fichiers : sur certains sites, on souhaite permettre aux visiteurs d’envoyer un fichier en même temps que leur message. Par exemple, quand j’écris à mon hébergeur web pour poser une question au support technique, j’ai la possibilité de joindre une capture d’écran à mon message. Caldera Forms propose justement des champs personnalisés pour envoyer un fichier ou des fichiers multiples. On peut ensuite, dans un second temps, définir des types de fichiers autorisés.
  • Champs de contenu : ils permettent d’améliorer le rendu du formulaire, par l’ajout d’une ligne horizontale qui sépare deux champs par exemple ou encore l’ajout de texte ou de code HTML.
  • Champs e-commerce : numéro de carte de crédit, date d’expiration, numéro de vérification de la carte… Des champs qui peuvent être utiles pour un site e-commerce, à condition de veiller à la sécurité maximale de son service !
  • Champs spéciaux : les champs spéciaux vous permettent d’aller encore plus loin et d’imaginer d’autres usages créatifs des formulaires. Si vous créez par exemple un formulaire de demande de devis ou un formulaire de réservation, vous pourrez tirer profit de curseurs de valeur. Les champs spéciaux permettent aussi de voter en attribuant des étoiles, etc.

On peut ensuite organiser les champs à sa convenance, par un glisser-déposer en survolant le champ et en cliquant sur le bouton en haut à droite de celui-ci. Ça rend les formulaires très modulables.

Un formulaire de réservation sur Caldera Forms
Un formulaire de réservation sur Caldera Forms

Lorsque vous ajoutez un champ, vous avez ensuite la possibilité de le personnaliser en lui donnant un nom, en indiquant une description susceptible d’aider le visiteur à savoir comment remplir le champ, en spécifiant si le champ est obligatoire ou pas pour valider le formulaire…

Options d'un champ de texte sur un formulaire
Options d’un champ de texte sur un formulaire

Les utilisateurs plus expérimentés peuvent également ajouter une classe CSS spécifique pour une personnalisation extrêmement fine de l’apparence du champ.

Selon la nature du champ que vous aurez choisi, vous n’aurez pas accès aux mêmes options. Par exemple, si je propose aux visiteurs de réserver une ou plusieurs chambres dans un gîte imaginaire, je peux ajouter des options, les réorganiser, définir une option par défaut.

Cases à cocher sur un formulaire
Cases à cocher sur un formulaire

Si je crée un curseur de valeur pour savoir combien de personnes prendront un petit-déjeuner sur place, j’ai accès à des options différentes :

Curseur de valeur sur un formulaire Caldera Forms
Curseur de valeur sur un formulaire Caldera Forms

Une fois que vous avez créé l’ensemble des champs de votre formulaire, n’oubliez pas d’ajouter un champ basique de type « Bouton »… avec un bouton « Soumettre » pour envoyer le formulaire.

À tout moment, vous pouvez prévisualiser le formulaire grâce au bouton du même nom situé en haut de la page.

Aller plus loin : personnalisation avancée et conditions

Caldera Forms est un plugin WordPress de formulaires étonnant… car au premier abord, il paraît très simple et rudimentaire… et quand on l’explore, on découvre en réalité une foule d’options qui permettent d’aller très loin.

Quand vous êtes en train de créer un formulaire, vous avez accès à une barre d’options qui vous permet de profiter de nombreuses options complémentaires.

Barre d'options du plugin Caldera Forms sur WordPress
Barre d’options du plugin Caldera Forms sur WordPress

L’envoi du message

Ces options vous permettent de personnaliser le message que vous recevez, avec le contenu du formulaire de contact. Vous pouvez choisir le nom de l’expéditeur qui s’affiche (en récupérant par exemple le champ où votre visiteur a entré son nom), l’adresse e-mail qui reçoit le formulaire, la présentation du message dans le mail…

Par exemple, sur No Tuxedo, je vois comme expéditeur le prénom que la personne a entré dans le formulaire et je récupère l’adresse e-mail entrée, comme « adresse de réponse ». Ainsi, lorsque je clique sur « Répondre au mail » dans ma messagerie, ça répond donc automatiquement à cette adresse sans que j’aie besoin de faire un copier coller depuis le message envoyé par la personne.

Options de formulaire de contact
Options de formulaire de contact

Les traitements

Que se passe-t-il quand votre formulaire est envoyé ? Vous pouvez le définir dans la rubrique « Traitements » :

  • Envoyer une réponse automatique ;
  • Rediriger le visiteur vers l’URL de votre choix une fois qu’il a posté le formulaire ;
  • Envoyer le formulaire à des destinataires différents en fonction de certaines conditions : par exemple, si un utilisateur écrit pour signaler un problème, son formulaire peut être envoyé au webmaster alors qu’il sera envoyé au propriétaire du site s’il s’agit d’un message de contact classique.

Caldera Forms propose aussi un filtrage antispam via le plugin Akismet de WordPress.

Traitements de formulaire sur Caldera Forms
Traitements de formulaire sur Caldera Forms

Les conditions

La fonctionnalité « Conditions » est très intéressante si vous souhaitez poser certaines questions en fonction de la réponse apportée à une autre question.

Prenons un exemple concret, avec mon formulaire de réservation pour le gîte. Si personne ne prend le petit-déjeuner sur place, ce n’est pas utile que je pose une question « Avez-vous des allergies alimentaires »… car la réponse ne me servira pas ! À l’inverse, si le visiteur indique qu’il prendra le petit-déjeuner sur place, ça devient utile de poser la question.

Je vais donc créer une condition qui s’appliquera au champ « Avez-vous des allergies alimentaires ou restrictions alimentaires ? »

Si la réponse à la question « Combien de personnes prendront le petit-déjeuner au gîte ? » est supérieure à 0, alors j’afficherai la question sur les allergies alimentaires.

Formulaire avec conditions - Plugin Caldera Forms
Formulaire avec conditions – Plugin Caldera Forms

Autres options

Les utilisateurs avancés peuvent également définir des variables à utiliser à différents endroits du formulaire ou à transmettre d’une page à l’autre et d’un formulaire à l’autre.

Il existe également un menu « Révisions » pour restaurer une version antérieure du formulaire si vous regrettez une modification effectuée dessus !

Restaurer un formulaire antérieur
Restaurer un formulaire antérieur

Enfin, vous disposez d’options « Responsive » pour définir le comportement du formulaire face à un petit écran (smartphone ou tablette). Le réglage par défaut est généralement satisfaisant.

Publier le formulaire Caldera Forms sur son site

Une fois que vous avez terminé et enregistré votre formulaire, vous pouvez cliquer sur le bouton « Obtenir le shortcode » pour récupérer un texte entre crochets.

Obtenir le shortcode sur le plugin Caldera Forms
Obtenir le shortcode sur le plugin Caldera Forms

Vous aurez juste à le copier dans un article dans une page WordPress à l’endroit où vous souhaitez faire apparaître votre formulaire !

Réglage des e-mails envoyés via le formulaire

Ce menu, disponible quand on clique sur « Caldera Forms » dans le menu de l’administration de WordPress, vous permet de choisir par quel biais sont envoyés les e-mails issus de vos formulaires Caldera Forms.

Par défaut, les e-mails sont envoyés directement via WordPress mais Caldera réfléchit à d’autres possibilités pour proposer l’envoi via un service externe.

C’est surtout utile si vous recevez énormément de messages via des formulaires car l’utilisation d’un service tiers permet souvent d’assurer une meilleure déliverabilité des messages, réduisant le risque qu’ils n’atterrissent dans le dossier Spam du destinataire.

Sauf cas particulier, vous pouvez donc ne pas toucher à ces options.

Réglages des e-mails - Plugin Caldera Forms
Réglages des e-mails – Plugin Caldera Forms

Paramètres généraux de Caldera Forms

Les paramètres généraux de Caldera Forms sont peu nombreux et la plupart du temps, vous n’aurez même pas besoin d’y toucher pour obtenir un affichage harmonieux des formulaires.

Ce sont essentiellement des paramètres de mise en forme, qui permettent d’intégrer Bootstrap pour gérer l’apparence des formulaires. Pour schématiser, si vous ne connaissez pas Bootstrap, il s’agit d’un ensemble de règles de mise en forme prédéfinies.

L’option est activée par défaut sur le plugin Caldera Forms, ne la désactivez que si vous avez déjà intégré Bootstrap ou que vous voulez coder le design du formulaire à la main.

Paramètres généraux du plugin Caldera Forms
Paramètres généraux du plugin Caldera Forms

Caldera Forms propose également la possibilité de faire appel à un CDN, un système pour améliorer le temps de chargement d’un site. L’option fait appel au réseau jsDelivr, qui regroupe des CDN comme MaxCDN, CloudFlare ou Fastly.

Le principe est simple : ça permet de créer des « copies » de votre page sur différents serveurs dans le monde. Quand un visiteur veut accéder à la page contenant le formulaire, on lui propose automatiquement la version « la plus proche de chez lui », ce qui permet un chargement très rapide de la page.

L’option est toujours utile, même si elle ne me paraît pas indispensable pour un formulaire de contact simple… Si vous utilisez Caldera Forms à des fins professionnelles, par exemple pour un formulaire de demande de devis, ça peut devenir beaucoup plus stratégique car une trop grande latence de chargement peut tout simplement vous faire perdre des clients potentiels.

Export, clonage et autres options pour vos formulaires

Une fois votre formulaire créé, vous pouvez survoler son nom pour profiter d’options complémentaires : par exemple, il est possible de cloner un formulaire pour partir d’une base existante si vous souhaitez créer un second formulaire similaire au premier ; vous pouvez aussi exporter un formulaire, une option pratique si vous souhaitez dupliquer un formulaire sur un autre blog.

Il suffit de cliquer sur le bouton exporter pour récupérer le fichier Json correspondant au formulaire. Sur l’autre site, cliquez sur le bouton importer, donnez un nom au formulaire et choisissez le fichier… pour importer le formulaire (logique imparable !).

Exporter un formulaire sur Caldera Forms
Exporter un formulaire sur Caldera Forms

Caldera Forms est vraiment un plugin de formulaire ultra-puissant, qui peut s’adapter à toutes sortes d’usages professionnels ou amateurs. Il peut convenir aussi bien à des utilisateurs débutants – grâce à l’existence de modèles qui facilitent le travail – qu’à des utilisateurs expérimentés qui souhaitent créer un formulaire en partant de zéro.

Comment utilisez-vous les formulaires sur votre blog ?
Thèmes : WordPress 

Poster un commentaire

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

4 commentaires sur “Comment créer un formulaire sur WordPress avec Caldera Forms ?

  • Sarah - Un Café près du Clavier

    Oh ! Je suis tentée de l’utiliser ce plug-in là ! Je le note dans mes petits papiers. Merci pour ce tutoriel :)

    Répondre à Sarah
    • Marlène

      C’est une extension de formulaire très complète, je l’ai adoptée après avoir utilisé Contact Form 7 et je la trouve beaucoup plus puissante.

      Répondre à Marlène
  • Céline

    Hello Marlène,

    Merci pour ce tuto.
    Est-ce que ce plugin permet de faire ouvrir le formulaire dans une fenêtre pop-up ?

    Merci de ton aide !

    Répondre à Céline
    • Marlène

      Hello Céline, quand tu modifies un article/une page avec le plugin Caldera Forms installé, tu disposes d’un bouton pour insérer facilement un formulaire dans la page. On peut cocher une option pour qu’il s’affiche comme « fenêtre modale » (c’est-à-dire pop-up !). En revanche, pour afficher une pop-up avec des options plus complètes (et indépendamment d’un article/d’une page), mieux vaut opter pour un vrai plugin de pop-up qui offrira plus de possibilités (type PopUp Maker, etc).

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.