Créer un formulaire dynamique sur WordPress

Grâce à Calculated Fields Form vous pouvez créez des devis, des formulaires dynamiques avec calculs intégrés.

Si vous louez des chambres d’hôtes, vous avez besoin d’un formulaire de réservation qui calcul le prix de la location en fonction du nombre de personnes et de la durée. Vous pouvez aussi fournir des services ( comme moi ) et permettre à vos visteurs/prospects d’avoir une offre de prix en direct grâce à un formulaire dynamique.

Dans ce tuto je vous explique comment créé un devis en ligne ou un formulaire de réservation dynamique étape par étape.

Description du plugin

Comme ce plugin dispose d’un ensemble solide de caractéristiques et de fonctionnalités de base, il peut être utilisé à plusieurs fins, notamment

Formulaire de contact : créer un formulaire de contact avancé avec des cases à cocher, des listes radio, des listes déroulantes et des téléchargements de fichiers.

Formulaire de calcul : ajouter une calculatrice générale, un outil de conversion, une calculateur avec date, un formulaire de réservation, un générateur de devis ou un formulaire d’auto-calcul.

Formulaire de paiement PayPal : vendre des biens ou des services avec des totaux et des suppléments calculés automatiquement pour l’achat via PayPal.

En tant que web designer wordpress freelance j’utilise ce plugin de formulaire de champs calculés qui est un outil polyvalent qui peut être utilisé sur tout site web wp nécessitant un formulaire avancé, en particulier ceux qui nécessitent la possibilité d’afficher un calcul pour un devis dans un ou plusieurs des champs.

Étape par étape : Comment créer un formulaire calculé sur votre site WordPress.

1. Choisir sa version: gratuite ou premium ?

La première étape consiste à se procurer le plugin, Il existe une version gratuite et des versions payantes. Ici je ne vais parler que de la version gratuite et la version pro qui coûte 49,99€.

Voici un petit tableau comparatif entre les deux versions. Pour découvrir le tableau officiel n’hésitez pas visiter leur page dédier ici.

La grande différence entre les deux versions est la possibilité d’envoyer des emails, d’accepter les paiements en direct (paypal), l’exportation et surtour les 60 jours d’assistance technique.

2. Installation du plugin

Une fois que vous avez choisit la version dont vous avez besoin vous allez devoir installer celui-ci. Si vous ne l’avez pas encore téléchargé rendez-vous ici pour le télécharger sur votre pc.

Ceci fait rendez-vous sur votre panneau d’administation WordPress

1. Si une autre version du plugin a été installée, désactivez-la, puis appuyez sur le bouton « Supprimer » correspondant.
2. Naviguer sur « Ajouter une extension »
3. Ensuite « Téléverser l’extension »
4. Selectionnez le fichier sur votre ordinateur
5. Activer l’extension

3. Création de votre premier formulaire

Depuis l’écran principal du plugin, vous pouvez voir la liste des formulaires qui ont déjà été créés, tout en ayant la possibilité de créer un nouveau formulaire.

Vous pouvez ajouter le shortcode à droite à n’importe quel endroit sur votre site. Vous pouvez également appuyer sur Cloner pour dupliquer le formulaire et modifier les calculs qui s’y trouvent déjà en utilisant le bouton Settings.

Sur ce tuto nous allons concevoir un formulaire de réservation de chambre d’hôtes. Disons que nous avons 2 chambres de 4 personnes à louée, avec une tarification différente pour les enfants et les adultes.

Nous allons créer via l’encadré New Form un nouveau formulaire intitulé : Réservation chambres d’hôtes (le nom importe peu c’est juste pour vous aider à reconnaitre les formulaires)

4. Paramétrage de votre formulaire

Votre formulaire créé cliquez sur le bouton « Settings » à droite de celui-ci.

Supprimez le champ « Number » créé par défault.

Nous allons maintenant demander de au visiteur d’inscrire son nom, prénom, son numéro de téléphone et son email.

Commençons par le nom et le prénom:

1. Cliquez sur « Add a Field »
2. Ajoutez une « Single Line Text »
3. Accédez aux paramètres du champ via « Fields Settings »

Editer les champs

1. Modifiez le « Field Label » par « Entrez votre nom: »
2. Cochez la case « Required » si vous souhaitez que ce champ soit obligatoire
3. Dupliquez le champ grâce au bouton prévu à cet effet et modifier le « Field Label » par  « Entrez votre prénom: »

Ajouter un champ email

1. Cliquez sur « Add a Field »
2. Ajoutez un champ « Email »
3. Accédez aux paramètres du champ via « Fields Settings »

Ensuite éditer les champs comme fait précédamment en cochant la case « Required » si vous désirez que le champ soit requis.

Pour ce qui est du téléphone je vais inséré un champ « number » plus simple à utilisé que le champ « Phone field », cependant si vous désirez obligé un format prédéfinit vous pouvez utilisé le champ « Phone field » et dans les paramètres choisir le format désiré. Cependant je déconseille cette méthode, qui ajoute une barrière à l’envoi du formulaire pas forcément nécessaire.

5. Ajout de champs dynamiques

Entrons dans le vif du sujet. Nous allons intégrer les champs calculés au travers du formulaire qui va de façon dynamique modifier les champs en fontion des choix du visiteur.

Dans notre exemple de réservation de chambres d’hôtes nous allons laisser le choix de choisir entre deux chambres. la chambre Confort et la chambre Luxe.

Nous ajoutons un champ « Checkbox » pour laisser le choix au visiteur de selectionner une chambre ou l’autre, ou encore les deux.

Configuration des champs dynamiques

• Remplissez le « Field Label » ici j’indique: « Choisissez la chambre qui vous intéresse: »
• Dans l’encadré « Choices » je choisis deux possibilités (vous pouvez en ajoutez ou en supprimer grâce au + et -)
• Ensuite j’introduis une petite instruction pour le visiteur

Notre but est que lorsqu’un visiteur coche une case une nouvelle section s’affiche lui laissant la possibilité de selectionner le nombre de locataire.

Nous allons créer deux listes déroulantes, une pour chaque chambre, de 1 à 4 personnes.

On va remplir le « Field Label » pour la première chambre et configurer la liste déroulante, vous pouvez dès à présent entrer la valeur de la location pour une journée sous l’onglet « Value ».

Ici j’ai choisis 4 possibilités: 1, 2, 3 ou 4 adultes qui valent rescpectivement : 200, 250, 275 et 300€.

Il reste maintenant la deuxième liste déroulante à créer pour la « Chambre Luxe » on peut dupliquer le dernier champ « dropdown » à l’aide du bouton « duplicate » comme ci-dessous.

Il ne vous reste plus qu’a éditer le la liste déroulante pour que les champs correspondent à la seconde chambres ( textes et valeurs).

Comment cacher et afficher certain champ

Le principe est assez simple pour cacher ou afficher certain champ.

Dans mon exemple nous voulons afficher les deux derniers champs ( listes déroulantes ) quand un visiteur coche une chambre. Pour ce faire cliquer sur le champ des case à cocher ( la selection des chambres ) pour afficher la configuration.

1. Cliquer sur « Show Dependencies » de nouveaux champs apparaissent.
2. Choisir les les liste déroulantes correspondantes pour chaque chambre.

Et voila et le formulaire est maintenant dynamique et les listes déroulantes ne s’affichent qu’après avoir sélectionné une chambre. 

Création du formulaire calculé

Dans notre exemple de chambres d’hôtes nous allons laisser la possibilité aux visiteurs de choisir le nombre de nuitée grâce à une liste déroulante comme suit : 

Le champ « value » est important pour notre formulaire calculé. Veillez bien à ce que celui-ci corresponde au nombre de nuitée(s): 1 pour une nuit, 2 pour deux nuits etc…

Nous allons maintenant créer un champ « Calculated Field », un champ « Calculated Field » est déjà présent lors de la création du formulaire, on peut très bien le réutilisé.

1. Remplir le champ « Field Label » ici je vais simplement mettre « Total: »
2. Assurez-vous que le champ »Read Only » est bien coché, afin que le visiteur ne puisse pas modifier la valeur.
3. Créer la formule mathématique: dans notre cas nous allons additionner la valeur des listes déroulantes et le multiplier par le nombre de nuitée(s). A noté que vous pouvez retrouvez le nom des champs dans les paramètres de ceux-ci sous l’onglet « Field name ».

Traitement des formulaires / Paramètres des courriels :

Uniquement disponnible avec la version « pro » que vous pouvze vous procurez ici : se procurer le plugin

• « from » email: Il est fortement recommandé d’utiliser une adresse e-mail du domaine du site web. Les principaux services de courrier électronique (comme Gmail, Hotmail, Yahoo, MSN, etc.) vérifient la correspondance entre l’adresse électronique figurant dans l’en-tête « Sender » des courriers électroniques et les domaines qui envoient les courriers électroniques. Si la correspondance échoue, les e-mails peuvent être considérés comme du spam ou du « phishing », auquel cas ils seront supprimés pour des raisons de sécurité.

  Traduit avec www.DeepL.com/Translator (version gratuite)

• Destination emails (séparés par des virgules) : Liste des administrateurs qui recevront la notification par courrier électronique. Pour permettre la sélection dynamique des e-mails de destination avec un champ du formulaire, entrez la balise spéciale du champ, par exemple : <%fieldname1%>
• Email subject: Sujet de l’e-mail de notification envoyé après le paiement.
• Include additional information?: Informations facultatives sur l’adresse IP et le navigateur de l’utilisateur.
• Email format? Choisissez si le courriel sera envoyé en texte brut ou au format HTML.
• Message: Contenu de l’e-mail de notification que vous recevrez. Conservez la balise <%INFO%>, elle sera remplacée automatiquement par les données du formulaire envoyé par l’utilisateur.

Modification des libellés et des textes du formulaire

Les textes champs du formulaire ont été rédigés sous la forme suivante:

• Submit button label: La légende du bouton d’envoi.
• Previous button label: La légende du bouton précédent.
• Next button label: La légende du bouton suivant.
• Captcha label: Le titre de la section Captcha..
• Refresh captcha: Le message pour rafraîchir le code Captcha.
• Security code label: Étiquette recommandant de saisir le code Captcha.
• Captcha required: Message d’erreur si le Captcha est vide.
• Captcha error: Message d’erreur si le Captcha se échoue.
• Payment options: Texte de l’option de paiement
• Coupon code label: Libellé utilisé dans la section des coupons.
• Page X of Y: Libellé des pages dans un formulaire multi-pages. Utiliser le format : Page {0} de {0}