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

La section héros (ou au-dessus du pli) de la page d'accueil est un bien immobilier de premier ordre. Et comme la plupart des promoteurs immobiliers, vous souhaitez maximiser votre espace. C'est là qu'un formulaire de contact en ligne est utile. Un formulaire en ligne est essentiellement un formulaire dans lequel tous ses champs ou contrôles restent côte à côte, en ligne et alignés à gauche. Cette mise en page compacte est idéale pour augmenter les conversions sur une page d'accueil ou une page de destination.

Aujourd'hui, je vais vous montrer comment créer un formulaire de contact en ligne pour votre site Web à l'aide de Visual Builder de Divi. Le travail nécessaire pour y parvenir consiste vraiment à ajuster à la fois la largeur et l'alignement des champs de formulaire. Pour ce faire, nous tirerons parti des fonctionnalités de conception du module de contact et ajouterons du CSS personnalisé dans l'onglet Avancé.

Si vous débutez sur Divi, ne laissez pas l'onglet Avancé vous dissuader de vous attaquer à ce tutoriel. J'ai fait de mon mieux pour que les choses restent simples et claires.

Prendre plaisir.

Voici un exemple de ce à quoi ressemblera le formulaire de contact en ligne

Le concept et l'inspiration

Si vous avez déjà dû acheter une assurance automobile ou rechercher une nouvelle maison en ligne, vous avez probablement vu un formulaire en ligne qui est volontairement compact avec un minimum de champs de saisie afin que vous (l'utilisateur) soyez plus enclin à lancer le bal sur un nouvelle citation. Je voulais donc créer un formulaire de contact en ligne simple qui ferait quelque chose de similaire pour les utilisateurs de Divi. Bien que ce formulaire de contact ne puisse pas faire des choses comme générer un devis ou extraire une liste de maisons, il répond aux besoins des propriétaires d'entreprise ou des blogueurs qui souhaitent fournir un moyen facile aux clients ou aux utilisateurs de contacter.

Mettre en œuvre le design avec Divi

Abonnez-vous à notre chaîne Youtube

Nous commençons par ajouter une section régulière avec une seule ligne de structure de colonne.

Étant donné que le reste de nos éléments sera difficile à voir sur un fond blanc, allons de l'avant et ajoutons la couleur d'arrière-plan à notre section en allant dans Paramètres de la section et en mettant à jour les éléments suivants :

Options de contenu

Couleur d'arrière-plan : #006ea5

Enregistrer les paramètres

Nous pouvons maintenant ajouter notre module de formulaire de contact à la ligne.

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

Options de contenu

Texte du bouton Soumettre : « Obtenir un devis »
E-mail : [Entrez l'adresse e-mail où les messages doivent être envoyés]
Afficher le Captcha : NON
Couleur d'arrière-plan du formulaire : rgba(255,255,255,0)

Options de conception

Police du champ de formulaire : Lato
Taille de la police du champ de formulaire : 24 px
Couleur du texte du champ de formulaire : #ffffff
Rayon de bordure d'entrée : 3px
Utiliser la bordure : OUI
Couleur de la bordure : #ffffff
Largeur de la bordure : 1px
Taille du texte du bouton : bureau 24 pixels, tablette 20 pixels, smartphone 20 pixels
Couleur du texte du bouton : #0c71c3
Couleur d'arrière-plan du bouton : #f4f11f
Largeur de la bordure du bouton : 3px
Rayon de bordure de bouton : 3

Enregistrer les paramètres

Revenez à l'onglet Contenu et supprimez le champ du message en cliquant sur l'icône de la corbeille à droite de la barre de champ. Ensuite, ajoutez un nouveau champ en cliquant sur le bouton cercle gris avec le signe plus blanc situé sous les barres de champ individuelles. Ce sera le champ Téléphone.

Mettez à jour les paramètres de champ comme suit :

Options de contenu

Identifiant du champ : « Téléphone »
Titre : Téléphone

Options de conception

Faire pleine largeur : NON
Symboles autorisés : chiffres uniquement (0-9)

Options avancées

Saisissez le CSS personnalisé suivant dans la zone Élément principal :

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

Enregistrer les paramètres

Revenez maintenant à l'onglet Contenu de vos paramètres de formulaire de contact et dupliquez le champ Téléphone que vous venez de créer et transformez-le en un champ Code postal.

Mettez à jour les paramètres de champ comme suit :

Options de contenu

Identifiant du champ : « Zip »
Titre : Code postal

Options avancées

Saisissez le CSS personnalisé suivant dans la zone Élément principal :

Max-width: 17%;
Margin-top: -1.5%;

Enregistrer les paramètres

Jusqu'à présent, nous avons ajusté la largeur et l'alignement de nos champs Téléphone et Code postal. Maintenant, nous devons faire la même chose pour les champs Nom et E-mail.

Accédez aux paramètres du champ Nom et mettez à jour les options avancées avec le CSS personnalisé suivant dans la zone Élément principal :

Max-width: 20%;
Margin-top: -1.5%;

Enregistrer les paramètres

Ensuite, allez dans les paramètres du champ E - mail et mettez à jour les options avancées avec le CSS personnalisé suivant dans la zone Élément principal :

Max-width: 20%;
Margin-top: -1.5%;

Enregistrer les paramètres

Remarque importante : Notez que le CSS personnalisé utilisé pour chacun des champs a une propriété max-width définie sur un certain pourcentage. Ce pourcentage dicte la largeur de vos champs par rapport à la largeur de votre zone de contenu. Par exemple, la zone de contenu par défaut de Divi est de 1080px donc le champ de nom est de 20% de 1080px. Ceci est important à savoir si vous souhaitez créer plus d'espace pour votre formulaire en ligne. Tout ce que vous avez à faire est d'ajuster la valeur en pourcentage de la propriété max-width selon vos besoins.

Presque fini. Maintenant, tout ce que nous avons à faire est de nettoyer l'espacement de la section et de la ligne qui contient le formulaire. Accédez aux Paramètres de la section , sous l' onglet Conception , et mettez à jour les éléments suivants :

Rembourrage personnalisé : 12 pixels en haut, 14 pixels en bas

Enregistrer les paramètres

Accédez maintenant aux paramètres de ligne , sous l' onglet Conception , et mettez à jour les éléments suivants :

Rembourrage personnalisé : 48 pixels en haut, 0 pixels à droite, 0 pixels en bas, 0 pixels à gauche

Enregistrer les paramètres

Le rendre réactif

Comme il s'agit d'un formulaire horizontal, les champs du formulaire devront être ajustés sur les appareils mobiles. Pour résoudre ce problème, il suffit d'un petit extrait de CSS personnalisé. Accédez à Paramètres de la page , sous l' onglet Avancé , et les éléments suivants dans la zone CSS personnalisée :

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

Voici comment le formulaire répond aux différentes tailles d'écran.

Création d'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 un champ de trois formulaires en mettant à jour quelques options. Voici les étapes :

1. Modifiez le formulaire en ligne que vous venez de créer ou dupliquez le formulaire.
2. Supprimer le champ de code postal (vous n'avez maintenant que trois champs)
3. Mettez à jour les paramètres du champ de téléphone (ou quel que soit le troisième champ), sous l'onglet Avancé, avec le CSS personnalisé suivant dans le

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. Mettez à jour les paramètres du champ de courrier électronique (ou quel que soit le deuxième champ), sous l'onglet Avancé, avec le CSS personnalisé suivant dans la zone Élément principal :

   max-width: 25%;
   margin-top: -1.5%;

5. Mettez à jour les paramètres du champ de nom (ou quel que soit le premier champ), sous l'onglet Avancé, avec le CSS personnalisé suivant dans la zone Élément principal :

   max-width: 25%;
   margin-top: -1.5%;

Remarque : Notez que la propriété max-width pour chacun des champs est désormais de 25 % afin d'augmenter la largeur des champs.

Création d'un formulaire de contact en ligne à deux champs

Vous pouvez également convertir votre formulaire en ligne en un formulaire à deux champs en mettant à jour quelques options. Voici les étapes :

1. Modifiez le formulaire en ligne que vous venez de créer ou dupliquez le formulaire.
2. Supprimez le champ de code postal et le champ de téléphone afin que vous n'ayez que deux champs (nom et e-mail)
3. Mettez à jour les paramètres du champ de nom (ou quel que soit le premier champ), sous l'onglet Avancé, avec le CSS personnalisé suivant dans la zone Élément principal :

   max-width: 37%;
   margin-top: -1.5%;

4. Mettez à jour les paramètres du champ de courrier électronique (ou quel que soit le deuxième champ), sous l'onglet Avancé, avec le CSS personnalisé suivant dans la zone Élément principal :

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

Ajout d'autres types de champs

Ce didacticiel est principalement destiné aux types de champs de saisie normaux, mais vous pouvez facilement le remplacer par un type de champ différent. Par exemple, si vous souhaitez utiliser un type de champ déroulant de sélection, vous pouvez appliquer le même style que pour les autres champs. Cependant, vous devrez ajouter une couleur d'arrière-plan (#006ea5) à ce champ particulier afin que vous puissiez voir les options.

Voici à quoi ressemblerait un champ déroulant…

Dernières pensées

D'après mon expérience, les formulaires de contact en ligne peuvent être un outil puissant pour votre entreprise. Il existe des plugins plus avancés avec des options plus robustes prêtes à l'emploi, mais si un autre plugin n'est pas votre tasse de thé et qu'une solution plus simple a du sens, essayez-le. J'espère que vous aimez.

Au plaisir de vous entendre dans les commentaires.