Comment créer un formulaire de devis avec le module de formulaire de contact de Divi

Un formulaire de devis (alias formulaire de demande de devis) est une excellente solution pour les petites entreprises qui cherchent à saisir des prospects qualifiés sans avoir à répondre au téléphone. Un bon formulaire de devis peut trier les mauvais œufs qui ne sont pas prêts pour votre service en posant les bonnes questions de qualification. Cela peut également aider à identifier les besoins d'un client afin que vous puissiez préparer une réponse/une offre efficace et conclure la vente une fois que vous l'avez contacté par téléphone.

Il existe un certain nombre d'excellents plugins de formulaire dédiés au traitement des formulaires. Mais si vous recherchez une solution simple et efficace pour votre site Divi, le module de formulaire de contact mis à jour de Divi est exactement ce dont vous avez besoin.

Aujourd'hui, je vais vous expliquer le processus de création d'un formulaire de devis simple mais puissant en utilisant la logique conditionnelle pour mieux qualifier les prospects. J'ajouterai également quelques fonctionnalités de conception avancées utilisant des CSS personnalisés qui rendront le formulaire encore plus propre et plus lisible.

Commençons.

Mettre en œuvre le design avec Divi

Création de la section d'en-tête plein écran

Le formulaire de devis peut être ajouté à n'importe quelle page mais pour cet exemple, je vais utiliser une page dédiée uniquement pour le formulaire de devis.

Pour accueillir le visiteur, j'utilise un en-tête plein écran qui oblige l'utilisateur à cliquer sur le bouton ou à faire défiler pour voir le formulaire. C'est une fonctionnalité intéressante qui crée une expérience plus personnelle et réchauffe l'utilisateur à l'idée de faire défiler et de cliquer avant de voir le formulaire. Dans certains cas, cela semble un peu peu engageant et accablant lorsque j'arrive à une page avec rien d'autre qu'un long formulaire à remplir. Ceci est bien sûr facultatif et je le testerais certainement pour voir s'il se convertit mieux sans l'en-tête plein écran.

À l'aide de Visual Builder, ajoutez une section pleine largeur et un module d'en-tête pleine largeur en haut de votre page.

Mettez à jour les paramètres de l'en-tête pleine largeur comme suit :

Options de contenu

Titre : [entrez le titre ; essayez d'être plus personnel plutôt qu'un titre ennuyeux comme « Formulaire de devis »]
Texte du sous-titre : [entrez le texte du sous-titre]

Texte du bouton n° 1 : [entrez le texte du bouton ; quelque chose comme « montre-moi » ou « Faisons-le »]
URL du bouton #1 : #quote (cela sera utilisé pour l'identifiant CSS d'ancrage qui fera défiler jusqu'à la section contenant le formulaire ci-dessous)
URL de l'image du logo : [entrez l'image du logo]
Superposition d'arrière-plan : rgba(0,0,0,0.7)
Image d'arrière-plan : [téléchargez votre image d'arrière-plan 1920 x 1080]

Options de conception

Orientation du texte et du logo : Centre
Faire plein écran : OUI
Afficher le bouton de défilement vers le bas : OUI
Icône : [choisir l'icône]
Couleur de l'icône de défilement vers le bas : #999999
Couleur du texte : clair
Police du titre : Ubuntu
Taille de la police du titre : 36px
Police de sous-titre : Ubuntu
Taille de la police du sous-titre : 22px
Utiliser des styles personnalisés pour le premier bouton : OUI
Taille du texte du bouton un : 20px
Bouton One Text Couleur: #ffffff
Couleur d'arrière-plan du bouton 1 : #e09900 ;
Couleur de la bordure du bouton One : #e09900
Espacement des boutons d'une lettre : 1px
Police du bouton One : Ubuntu

Enregistrer les paramètres

Construire le formulaire de devis

Maintenant pour le formulaire de devis, nous allons utiliser le module de formulaire de contact de Divi. Nous devons d'abord ajouter une section régulière avec une ligne pleine largeur (1 colonne). Ajoutez ensuite un module de formulaire de contact à la ligne.

Mettez à jour les paramètres du formulaire de contact comme suit.

Options de contenu ?

Titre : [définissez un titre pour votre formulaire de contact ou ajoutez des instructions supplémentaires]
Envoyer le texte du bouton : obtenir un devis
E-mail : [entrez l'adresse e-mail où les messages doivent être envoyés]
Activer l'URL de redirection : OUI (c'est facultatif mais c'est une bonne idée)
URL de redirection : [entrez l'URL de redirection vers une page de remerciement personnalisée]

Options de conception

Police du titre : Ubuntu
Taille de la police du titre : 30 px
Espacement des lettres du titre : 1px
Police du champ de formulaire : Ubuntu
Taille de la police du champ de formulaire : 24 px
Couleur du texte du champ de formulaire : #e09900
Rayon de bordure d'entrée : 5px
Utiliser la bordure : OUI
Couleur de la bordure : #999999
Largeur de la bordure : 1px
Utiliser des styles personnalisés pour le bouton : OUI
Taille du texte du bouton : 24 px
Couleur du texte du bouton : #ffffff
Couleur d'arrière-plan du bouton : #e09900 ;
Couleur de la bordure du bouton : #e09900
Espacement des lettres des boutons : 1px
Police des boutons : Ubuntu

Options avancées (CSS personnalisé)

Champ Captcha :

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

Texte du captcha :

Font-size: 24px

Enregistrer les paramètres

Ajout des champs du formulaire de devis

Pas ce que vous avez vos paramètres en place, il est temps d'ajouter nos éléments de formulaire. Par défaut, le formulaire contient les champs « nom », « e-mail » et « message ». Vous pouvez supprimer « message ».

Champ de l'entreprise

Sous le champ « e-mail », ajoutez un nouveau champ et mettez à jour les paramètres sous Options de contenu comme suit :

Identifiant du champ : entreprise
Titre : Quel est le nom de votre entreprise ?
Champ obligatoire : OUI

Champ de service

Sous le champ « entreprise », ajoutez un nouveau champ et mettez à jour les paramètres sous Options de contenu comme suit :

ID de champ : service
Titre : Comment pouvons-nous vous aider aujourd'hui ?
Type : boutons radio
Options :

• Création de site Web
• Développement d'applications
• Direction artistique
• Création vidéo

Champ obligatoire : OUI

Champ d'objet artistique

Sous le champ « service », ajoutez un nouveau champ et mettez à jour les paramètres sous Options de contenu comme suit :

ID de champ : art_purpose
Titre : De quelle direction artistique avez-vous besoin ?
Type : boutons radio
Options :

• Conception graphique
• Publicité
• l'image de marque
• Emballage

Champ obligatoire : OUI
Activer la logique conditionnelle
Relation : TOUT
Règles : Comment pouvons-nous vous aider aujourd'hui ? > Equals > Direction artistique

Remarque : Cette logique affiche ce champ chaque fois qu'un utilisateur sélectionne « Direction artistique » à partir de la question précédente.

Champ Objet Web

Sous le champ « art_purpose », ajoutez un nouveau champ et mettez à jour les paramètres sous Options de contenu comme suit :

ID de champ : web_purpose
Titre : De quel type de site Web avez-vous besoin ?
Type : boutons radio
Options :

• Commerce électronique
• Blog
• Application Web
• Page de destination

Champ obligatoire : OUI
Activer la logique conditionnelle
Relation : TOUT
Règles : Comment pouvons-nous vous aider aujourd'hui ? > Equals > Production de sites Web

Remarque : Cette logique affiche ce champ chaque fois qu'un utilisateur sélectionne « Web Production » à partir de la question précédente.

Champ vidéo

Sous le champ "web_purpose", ajoutez un nouveau champ et mettez à jour les paramètres sous Options de contenu comme suit :

ID de champ : vidéo
Titre : Sur quel appareil voulez-vous que la vidéo soit diffusée ?
Type : boutons radio
Options :

• Téléphone portable
• Tablette
• Moniteur ou TV
• Projecteur

Champ obligatoire : OUI
Activer la logique conditionnelle
Relation : TOUT
Règles : Comment pouvons-nous vous aider aujourd'hui ? > Equals > Création vidéo

Remarque : Cette logique affiche ce champ chaque fois qu'un utilisateur sélectionne « Création vidéo » à partir de la question précédente.

Champ de la plate-forme d'application

Sous le champ « vidéo », ajoutez un nouveau champ et mettez à jour les paramètres sous Options de contenu comme suit :

ID de champ : app_platform
Titre : Sur quelle plateforme souhaitez-vous développer l'application ?
Type : boutons radio
Options :

• iOS
• Android
• les fenêtres
• la mûre

Champ obligatoire : OUI
Activer la logique conditionnelle
Relation : TOUT
Règles : Comment pouvons-nous vous aider aujourd'hui ? > Equals > Développement d'applications

Remarque : Cette logique affiche ce champ chaque fois qu'un utilisateur sélectionne « Développement d'applications » à partir de la question précédente.

Champ budgétaire

Sous le champ « app_platform », ajoutez un nouveau champ et mettez à jour les paramètres sous Options de contenu comme suit :

Identifiant du champ : budget
Titre : Si vous avez un budget en tête, faites-le nous savoir.
Type : boutons radio
Options :

• Moins de 1 000 $
• Environ 5 000 $
• Plus de 10 000 $

Champ obligatoire : NON
Activer la logique conditionnelle
Relation : TOUT
Règles :
Que peut-on faire pour vous aider aujourd'hui? > Equals > Développement d'applications
Que peut-on faire pour vous aider aujourd'hui? > Equals > Création vidéo
Que peut-on faire pour vous aider aujourd'hui? > Equals > Production de sites Web
Que peut-on faire pour vous aider aujourd'hui? > Equals > Direction artistique

Enregistrer les paramètres

Ajouter l'identifiant CSS d'ancrage

Revenez en arrière et modifiez les paramètres de section pour la section contenant le formulaire. Sous l'onglet Avancé, entrez l'ID CSS « devis ».

Cela correspondra à l'url du bouton dans l'en-tête pleine largeur afin que le bouton défile jusqu'à la section lorsque vous cliquez dessus.

Définir une largeur personnalisée pour la colonne du formulaire de devis

Ensuite, accédez aux paramètres de ligne pour la ligne contenant le formulaire de devis et mettez à jour les options de conception comme suit :

Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 556 pixels

Personnalisations de conception supplémentaires

Pour ce formulaire de devis, nous utilisons des boutons radio, une fois qu'un bouton radio/cercle est cliqué, la couleur du remplissage du cercle correspond à la couleur d'accent du thème de votre site sous Personnalisateur de thème > Paramètres généraux > Paramètres de mise en page >

Si vous ne souhaitez pas modifier la couleur d'accent de votre thème sur l'ensemble du site pour la couleur de remplissage du bouton radio, accédez aux paramètres de la page et entrez le CSS personnalisé suivant dans l'onglet CSS :

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

Vous pouvez également ajouter le CSS suivant pour personnaliser le texte du titre des questions contenant des boutons radio :

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

Enfin, vous pouvez ajouter une bordure stylisée aux listes de boutons radio pour faire correspondre le style du formulaire avec le CSS suivant :

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

C'est ça.

Découvrez le résultat final :

Dernières pensées

Ce formulaire de devis est un exemple simplifié de ce que vous pouvez faire avec le formulaire de devis. Pour votre propre formulaire de devis, vous pouvez ajouter un champ supplémentaire tel que « Numéro de téléphone » afin de pouvoir rappeler vos prospects. Vous pouvez également utiliser une logique plus conditionnelle pour obtenir des informations plus spécifiques concernant les besoins du client.

Comme je l'ai dit au début de l'article, il existe des plugins plus avancés. Il existe des entreprises entières qui se spécialisent dans les solutions de formulaires de contact robustes pour une raison. J'espère que cet article a été utile pour montrer comment le module de formulaire de contact est plus que capable de gérer la plupart de vos besoins de formulaire de contact standard.