Proposez un devis en ligne avec Caldera Forms et WordPress

Un devis en ligne avec Caldera Forms ? C’est possible ! En effet, Caldera Forms est un plugin qui vous permet de construire n’importe quel type de formulaire sur votre site WordPress. Si vous pouvez créer un formulaire de contact avec ce dernier, vous pourrez également proposer un devis en ligne car il propose des champs bien spécifiques qui permettent de générer des calculs, même les plus complexes…

Avant de vous lancer dans la création de ce type de formulaire, il faudra évidemment recenser vos besoins et définir quels sont les champs que vous souhaitez faire apparaître. Je vous propose de voir pas à pas quelles sont les étapes (non exhaustives) pour y parvenir !

 

Étape 1 : Créer le formulaire

Dans un premier temps, il vous faudra installer le plugin Caldera Forms que vous trouverez gratuitement sur le répertoire officiel de WordPress.

Ensuite, vous pourrez créer votre premier formulaire en quelques clics seulement :

1. Allez à l’onglet Caldera Forms > Formulaires
2. Cliquez sur Nouveau Formulaire
3. Choisissez le “Formulaire vide” et nommez-le comme vous le souhaitez, pour mon exemple, il s’appelle “Devis en ligne”
4. Cliquez sur le “+” pour ajouter une section
5. Ensuite, par glisser-déposer, ajoutez votre premier champ

 

Étape 2 : Définir les champs

Après avoir glissé votre premier champ dans la section, une fenêtre va s’ouvrir pour vous donner la possibilité de choisir vos types de champs. Pour un formulaire de devis, vous aurez certainement besoin d’insérer des champs qui proposent de sélectionner une ou plusieurs options :

1. Dans ce cas, c’est dans l’onglet “Sélectionner” que vous trouverez ces types de champs, vous pourrez alors choisir d’insérer un “menu déroulant” ou  un “bouton radio” pour un choix unique ou bien une “case à cocher” pour des choix multiples.
2. Cliquez sur “Définir le champ” afin de l’insérer et de le paramétrer
3. Donnez un titre à votre champ, spécifiez si c’est un champ “requis” et ajoutez une classe si vous souhaitez modifier le visuel de votre formulaire ultérieurement avec du CSS… Vous pouvez également ajouter une description.
4. Ajoutez autant d’options que nécessaire : pour l’exemple de mon champ nommé “site internet”, j’ai créé trois options (site vitrine, blog et e-commerce) à l’aide d’un bouton radio, ce qui signifie que la personne qui remplit le formulaire ne pourra choisir qu’une seule de ces options.
5. Cochez la case “montrer les valeurs” qui va vous permettre d’affecter un montant pour chacune des options. C’est étape est primordiale pour réaliser un devis en ligne. Ne précisez pas la devise “€”, inscrivez seulement le montant : par exemple saisissez “100” pour une option d’une valeur de 100€.

 

Étape 3 : Ajouter des conditions

Certains champs que vous créez peuvent devenir inutiles ou bien indispensables selon le choix opté par la personne qui remplit le formulaire. Pour mon exemple (capture d’écran ci-dessous), si on opte pour un site “e-commerce”, je souhaite proposer différents tarifs selon le nombre de produits proposés dans la boutique. Cela sous-entend que le champ permettant de choisir le nombre d’articles ne doit pas apparaitre si on choisit un “site vitrine”. Vous devrez donc créer des conditions selon vos champs et vos souhaits en vous rendant dans l’onglet “Conditions”.

1. Cliquez sur “Ajouter un groupe conditionnel”
2. Saisissez le nom de votre condition
3. Choisissez d’afficher ou de ne pas afficher ce groupe à l’aide du menu déroulant nommé “Type”
4. Cliquez ensuite sur “Ajouter une ligne de condition”
5. Définissez votre condition : à l’aide du premier menu déroulant, sélectionnez le champ qui doit faire l’objet de la condition. Le deuxième menu déroulant vous servira à définir l’action souhaitée (“est”, “n’est pas” etc…). Le troisième menu déroulant applique la condition en fonction de l’option choisie.
6. Sélectionnez le champ auquel appliquer la condition ainsi créée. Pour l’exemple présenté dans la capture d’écran ci-dessus, ma condition est : Afficher si “Site Internet” est “e-commerce” et cette condition s’applique à mon champ “nombre de produits”.

De la même manière, vous pourrez créer autant de conditions que nécessaire. Vous pourrez même créer plusieurs groupes au sein de la même condition. Il suffit d’adapter cela en fonction de votre projet et de vos besoins.

 

Étape 4 : Ajouter une section “TOTAL”

La section “total” va vous permettre d’afficher directement et dynamiquement le montant total des options sélectionnées par le client potentiel.

1. Ajoutez un nouveau champ : c’est dans l’onglet “Spécial” que vous trouverez le champ approprié nommé “calcul”
2. Saisissez le nom du champ
3. Ajoutez si besoin une classe personnalisée (pour modifier le CSS)
4. Définissez quelles mentions doivent apparaître avant et après le montant du calcul. Par exemple, “avant = Total :” / “après = €”
5. Choisissez les séparateurs à afficher pour les milliers et pour les décimales
6. Commencez à construire votre addition en cliquant sur “Ajouter un groupe d’opérateur”. Vous pouvez en ajouter autant que vous le souhaitez.
7. Dans chaque groupe d’opérateur, vous pouvez ajouter autant de lignes que nécessaire en cliquant sur “Add Line”
8. N’oubliez pas d’enregistrer votre formulaire

 

Étape 5 : Régler les notifications

À présent que vous avez créé les champs, avec ou sans conditions, votre formulaire est terminé. Toutefois, il est nécessaire de paramétrer les notifications à recevoir lorsqu’un utilisateur fait une demande de devis en ligne sur votre site.

Depuis l’onglet “De” :

1. Saisissez le nom de l’expéditeur : celui que vous verrez apparaître dans l’email que vous recevrez
2. Saisissez votre adresse email personnelle : [email protected]
3. Dans “email de réponse”, utilisez la valeur du champ email de votre formulaire, par exemple %email%. Cela vous permettra de pouvoir répondre directement au client depuis votre messagerie
4. Saisissez le sujet de votre mail
5. Construisez le contenu de votre mail ou bien utilisez {summary} pour obtenir un récapitulatif de la demande
6. Vous pouvez également faire le choix de ne recevoir aucune notification

 

Étape 6 : Ajouter un traitement de formulaire

Vous pouvez ajouter un traitement de votre formulaire depuis l’onglet “Traitements” :

1. Cliquez sur “Ajouter un traitement”
2. Vous pouvez envoyer une réponse automatique à l’utilisateur. Celle-ci se fera par l’envoi d’un email
3. Vous pouvez choisir de rediriger l’utilisateur sur une autre page de votre site ou même sur une URL externe
4. Vous pouvez ajouter une valeur d’incrémentation
5. Vous pourrez ajouter un filtre Anti-Spam et autres add-ons disponibles

 

Étape 7 : Définir les réglages du formulaires

Pour finir, il faudra vous rendre à l’onglet “Réglages du formulaire” où vous pourrez :

1. Obtenir le shortcode de votre formulaire
2. Décider de conserver ou non les données
3. Faire apparaître les entrées de votre formulaire dans un sous-onglet du menu de Caldera Forms
4. Faire disparaitre le formulaire une fois que l’utilisateur a cliqué sur le bouton “envoyer”
5. Ajouter un “honey pot” qui est un champ supplémentaire visible uniquement pour les robots, cela évitera de recevoir certains spams
6. Saisir le message à présenter en cas d’envoi réussi du formulaire

 

Étape 8 : Intégrer votre formulaire de devis en ligne

Lorsque votre formulaire est prêt et que tous vos réglages sont au point, vous pourrez alors insérer votre formulaire sur une page dédiée à cela, soit en copiant-collant le shortcode de votre formulaire de devis en ligne au sein de votre éditeur ou bien en cliquant sur le bouton “Caldera Form” situé à droite du bouton “Ajouter un media”. Avant de publier votre page, n’hésitez pas à effectuer plusieurs essais afin de vérifier le bon fonctionnement. Voici le résultat du test :

 

Les alternatives pour réaliser un devis en ligne

Bien sûr, il existe de nombreux plugins qui vous permettront de réaliser un formulaire de devis en ligne. En alternative à Caldera Forms, vous pourrez vous tourner vers des plugins premiums tels que WordPress Project Cost Calculator ou bien Quote Management Plugin for WordPress qui sont des plugins spécialistes en la matière !

Vous pouvez également vous tourner vers Gravity Forms et créer un devis en ligne tout aussi puissant. Sinon, il vous restera la solution d’un développement spécifique de manière manuelle.

 

En conclusion…

La souplesse et la simplicité de Caldera Forms permettent de réaliser des formulaires des plus complexes dont ceux prévus pour les devis en ligne… Le plus délicat sera d’étudier quels sont vos réels besoins afin de choisir la solution la plus appropriée vers laquelle se tourner…