Comment créer un formulaire de devis en utilisant le formulaire de contact Divi

Les formulaires de devis (également appelés formulaires de demande de devis) constituent une excellente solution pour les petites entreprises qui veulent obtenir des contacts qualifiés sans avoir à répondre aux appels. Un bon devis peut résoudre des problèmes qui ne vous ont pas encore servi en posant les bonnes questions d’admissibilité. Il peut également vous aider à déterminer les besoins de vos clients afin que vous puissiez préparer une réponse \/ devis efficace et terminer la vente après avoir reçu les besoins de vos clients par téléphone. Il existe un certain nombre d’excellents plug – ins de modules dédiés au traitement de modules. Cependant, si vous cherchez une solution simple et efficace pour le site Divi, les coordonnées de Divi Update sont exactement ce dont vous avez besoin.
Aujourd’hui, je vais vous guider dans la création d’une feuille de cotation simple mais puissante en utilisant la logique conditionnelle pour mieux qualifier les pistes. Je vais également ajouter des fonctionnalités de conception avancées qui utilisent des CSS personnalisés pour rendre les modules plus lisibles. On y va. La construction d’une feuille de cotation partielle en – tête plein écran à l’aide de l’implémentation de conception Divi peut être ajoutée à n’importe quelle page, mais dans ce cas, je n’utiliserai que des pages dédiées pour la Feuille de cotation. Pour accueillir les visiteurs, j’utilise un titre plein écran pour forcer les utilisateurs à cliquer sur un bouton ou à faire défiler le formulaire. C’est une fonctionnalité intéressante qui crée une expérience plus personnalisée et permet aux utilisateurs de défiler et de cliquer avant de voir le formulaire. Dans certains cas, lorsque j’arrive à une page qui n’a qu’un long formulaire à remplir, cela semble un peu peu peu peu attrayant et déroutant. Bien sûr, c’est optionnel, et je vais certainement essayer de voir si c’est mieux converti sans titre plein écran.
Ajout de sections avec Visual Builder
Lita redirection URL: S (optionnel, mais c’est une bonne idée) redirection URL: [insérer l’URL de redirection dans la page de remerciement personnalisée]
Options de conception police d’en – tête: Ubuntu taille de la police d’en – tête: 30px espacement des lettres d’en – tête: 1px police de champ de formulaire: Ubuntu taille de la police de champ de formulaire: 24 Px couleur du texte du champ de formulaire: # e09900 Entrez le rayon de la bordure: 5px utilisez la couleur de la bordure: s couleur de la bordure: # 9999999 largeur de la bordure: 1px utilisez le style personnalisé pour les boutons: s taille du texte du bouton: 24 Px button text color: # FFFFFF button Background color: # e09900; Couleur de la bordure du bouton: # e09900 espacement des lettres du bouton: 1px caractères du bouton: Ubuntu Advanced options (Custom CSS) Champ de code de vérification:
Taille de la police: 24px;
Largeur maximale: 60 Px;
Remplissage: 16px 14px 14px;
Texte du Code de vérification: taille de la police: 24px Enregistrer les paramètres ajouter un champ de formulaire de devis n’est pas votre paramètre, il est temps d’ajouter nos éléments de formulaire. Par défaut, le formulaire contient les champs nom, courriel et message. Vous pouvez supprimer le message. Sous le champ e – mail, ajoutez un nouveau champ et mettez à jour les paramètres dans les options de contenu comme suit: ID du champ: nom de l’entreprise: Quel est votre nom d’entreprise? Champ requis: Oui
Champs de service sous le champ entreprise, ajoutez un nouveau champ et mettez à jour les paramètres dans les options de contenu comme suit: ID du champ: titre du Service: Que pouvons – nous vous aider aujourd’hui? Type: options bouton Options: site Web production application développement direction artistique création vidéo champs obligatoires: Oui sous le champ « services » but artistique ajouter de nouveaux champs et mettre à jour les paramètres dans les options de contenu comme suit: ID du champ: Art _ titre de la destination: quelle direction artistique avez – vous besoin? Type: option button option: di
LOGO graphique emballage de la marque champ obligatoire: Oui activer le rapport logique conditionnel: n’importe quelle règle: Comment pouvons – nous vous aider aujourd’hui? > Équivalence > direction artistique Remarque: Cette logique affiche ce champ chaque fois que l’utilisateur sélectionne direction artistique dans la question précédente. Champ sous le champ « Art _ purpose » Web purpose ajoutez un nouveau champ et mettez à jour les paramètres dans les options de contenu comme suit: ID du champ: web purpose Title: quel type de site Web avez – vous besoin? Type: options bouton Options: E – business blog Web Application login page Required fields: Yes enable Conditional Logic reporting: any Rules: How can we help you today? > égal à > webmaker Note: Cette logique affiche ce champ chaque fois que l’utilisateur sélectionne webmaker à partir de la question précédente.
Champ vidéo sous le champ d’utilisation Web, ajoutez un nouveau champ et mettez à jour les paramètres dans les options de contenu comme suit: ID du champ: titre de la vidéo: sur quel appareil voulez – vous que la vidéo apparaisse? Type: options bouton Options: déplacer l’écran de tablette ou le projecteur TV champs obligatoires: Oui activer le rapport logique conditionnel: n’importe quelle règle: Comment pouvons – nous vous aider maintenant? > Equal > création vidéo Remarque: Cette logique affiche ce champ chaque fois que l’utilisateur sélectionne création vidéo dans la question précédente. Sous le champ vidéo, ajoutez un nouveau champ et mettez à jour les paramètres dans les options de contenu comme suit:
Champ ID: app \ u Platform Title: sur quelle plate – forme souhaitez – vous développer votre application? Type: options bouton Options: IOS Android Windows Mora champs obligatoires: Oui activer les rapports logiques conditionnels: n’importe quelle règle: Comment pouvons – nous vous aider aujourd’hui? > Similaire > développement d’application Remarque: Cette logique affiche ce champ chaque fois que l’utilisateur sélectionne développement d’application à partir de la question précédente. Champ budgétaire sous le champ « app \ u pla»
_ champ Radio title {taille de la police: 24px; famille de polices: \
Enfin, vous pouvez ajouter une bordure élégante à la liste des boutons options pour faire correspondre le style de formulaire aux CSS suivants:. Et _ pb contact Field Radio package. Et _ pb contact Field Radio List {float point: left; overflow: hidden; border: 1px Solid # 9999999; fill: 20px; border radius: 4px; width: 100%; border top: 10px} C’est tout. Résultats finaux de l’inspection: Cette feuille de cotation est un exemple simplifié de ce que vous pouvez faire en utilisant la Feuille de cotation. Pour la Feuille de devis, vous devrez peut – être ajouter un champ supplémentaire, tel que le numéro de téléphone, afin que vous puissiez appeler le contact. Vous pouvez également utiliser plus de logique conditionnelle pour obtenir des renseignements plus précis sur les besoins des clients. Comme je l’ai dit au début de l’article, il y a d’autres plug – ins avancés. Il existe de nombreuses entreprises spécialisées dans les solutions de formulaires à contact solide pour une raison ou une autre. J’espère que cet article vous aidera à montrer comment les formulaires de contact répondent à la plupart des exigences des formulaires de contact standard.