Comment créer un formulaire de contact en ligne en utilisant Divi

La section héros de la page d’accueil (ou au – dessus de l’effondrement) est la première propriété. Comme la plupart des promoteurs immobiliers, vous voulez maximiser votre espace. C’est là que le formulaire de contact en ligne est utile. Le module inline est essentiellement un module dans lequel tous les champs ou contrôles sont alignés côte à côte, en ligne et à gauche. Cette mise en page compacte est idéale pour ajouter des transitions sur la page d’accueil ou la page d’atterrissage. Aujourd’hui, je vais vous montrer comment créer un formulaire de contact en ligne pour votre site Web en utilisant Visual Builder de Divi. Le travail nécessaire pour obtenir ce résultat consiste en fait à ajuster la largeur et l’alignement des champs du module. Pour ce faire, nous utiliserons les capacités de conception du formulaire de contact et ajouterons quelques CSS personnalisés à l’onglet avancé.
Si vous ne connaissez pas Divi, ne laissez pas l’onglet avancé vous empêcher de lire ce tutoriel. J’ai fait de mon mieux pour rendre les choses simples. C’est mieux. Voici un exemple de formulaire de contact en ligne Concepts et inspiration si vous avez déjà dû acheter une assurance automobile en ligne ou chercher une nouvelle maison, vous pouvez voir un formulaire en ligne délibérément simplifié avec le moins de champs d’entrée, de sorte que vous (l’utilisateur) êtes plus enclin à tourner la balle sur le nouveau devis. J’aimerais donc créer un formulaire de contact en ligne simple qui offre des fonctionnalités similaires aux utilisateurs de Divi. Bien que ce formulaire de contact ne soit pas en mesure de générer un devis ou de consulter la liste des maisons, il répond aux besoins des entrepreneurs ou des blogueurs qui souhaitent fournir des coordonnées simples à leurs clients ou utilisateurs.
Abonnez – vous à notre canal YouTube avec l’implémentation Divi design pour commencer par ajouter une section régulière avec une structure de ligne simple. Parce que nos autres éléments seront difficiles
Le Service fait partie d’un CSS personnalisé. Dans l’onglet avancé, allez à ce qui suit dans les cases configuration de page et personnalisation CSS:
Média (largeur maximale: 767px)
P. et _ pb contact Field {
Largeur maximale: 100%! Important
}
}
Voici comment le module répond aux différentes tailles d’écran. Créer un formulaire de contact en ligne à trois champs Maintenant que vous avez créé un formulaire en ligne avec quatre champs, vous pouvez facilement le convertir en trois modules en mettant à jour certaines options. Voici les étapes à suivre: Modifier un formulaire en ligne nouvellement créé ou copier un formulaire. Supprimer le champ Cap (vous n’avez maintenant que trois champs) Mettre à jour vos paramètres de champ téléphonique dans l’onglet avancé (ou quel que soit le troisième champ), en utilisant le CSS personnalisé suivant dans la zone de l’élément principal: largeur maximale: 25%;
Flotteur: gauche;
Marge maximale: – 1,5%;
Clair: aucun! Important Mettre à jour les paramètres du champ e – mail (ou du deuxième champ) dans l’onglet avancé en utilisant le CSS personnalisé suivant dans la zone de l’élément principal: largeur maximale: 25%;
Marge maximale: – 1,5%; Dans l’onglet avancé, utilisez le CSS personnalisé suivant pour mettre à jour les paramètres du champ Nom (ou de tout premier champ) dans la zone de l’élément principal: largeur maximale: 25%;
Marge maximale: – 1,5%; Remarque: Notez que l’attribut largeur maximale de chaque champ est maintenant de 25% pour augmenter la largeur du champ.
Créer un formulaire de contact en ligne avec deux champs Vous pouvez également convertir des formulaires en ligne en formulaires à double champ en mettant à jour certaines options. Voici les étapes à suivre: Modifier un formulaire en ligne nouvellement créé ou copier un formulaire. Supprimez le champ cap et le champ téléphone, de sorte que vous n’avez que deux champs (nom et courriel) pour mettre à jour les paramètres du champ Nom (ou de tout contenu du premier champ) sur l’onglet avancé, en utilisant le CSS personnalisé suivant dans la zone de l’élément principal: largeur maximale: 37%;
Marge maximale: – 1,5%; Mettre à jour les paramètres du champ e – mail (ou de tout contenu du deuxième champ), n