Créer un formulaire dynamique sur WordPress

by | 14 Fév 2020 | Blog, Tuto WordPress | 0 comments

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.

Créer un formulaire dynamique sur WordPress 1

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.

Ce plugin de formulaire de champs calculés est un outil polyvalent qui peut être utilisé sur tout site web nécessitant un formulaire avancé, en particulier ceux qui nécessitent la possibilité d’afficher un calcul 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
Créer un formulaire dynamique sur WordPress 2

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.

Créer un formulaire dynamique sur WordPress 3

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.

Créer un formulaire dynamique sur WordPress 4

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

Créer un formulaire dynamique sur WordPress 5

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 »
Créer un formulaire dynamique sur WordPress 6

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: »
Créer un formulaire dynamique sur WordPress 7

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 »
Créer un formulaire dynamique sur WordPress 8

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.

Créer un formulaire dynamique sur WordPress 9

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
Créer un formulaire dynamique sur WordPress 10

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.

Créer un formulaire dynamique sur WordPress 11

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

Créer un formulaire dynamique sur WordPress 12

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.

Créer un formulaire dynamique sur WordPress 13

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.
Créer un formulaire dynamique sur WordPress 14

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 : 

Créer un formulaire dynamique sur WordPress 15

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 ».
Créer un formulaire dynamique sur WordPress 16

Traitement des formulaires / Paramètres des courriels :

Créer un formulaire dynamique sur WordPress 17

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

Créer un formulaire dynamique sur WordPress 18

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}

Sébastien Chaidron

Créer un formulaire dynamique sur WordPress 19
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Comment insérer un iframe dans WordPress

Contenu de l'article Intégrer un Iframe dans WordPress Qu'est-ce qu'un Iframe ? Pourquoi ai-je besoin d'un Iframe? Intégrer Google Maps Intégrer une vidéo YouTube  Intégrer un Iframe dans WordPress Depuis des années, je développe avec passion des sites web et je...

Comment aligner verticalement le contenu avec Divi

Contenu de l'article Comment aligner verticalement le contenu avec Divi Résultat 1. Ouvrir les paramètres de la colonne 2. Harmoniser les hauteurs des colonnes 3. Accédez aux paramètres de la colonne ou si situe le contenu à centrer 4. Centrer le contenu verticalement...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories