Comment créer un formulaire de contact sur Click avec Divi

Dans ce tutoriel Divi, nous allons vous montrer comment créer un formulaire de contact qui apparaît après avoir cliqué sur un bouton (en superposition) en n'utilisant rien d'autre que Divi, du code jQuery et du code CSS.

C'est un excellent moyen de garder les visiteurs de votre site concentrés sur l'action à laquelle ils se sont engagés en cliquant sur un bouton. Cela ne les amène pas à une page différente mais les bloque dans cette action jusqu'à ce qu'elle soit terminée.

Ci-dessous, vous pouvez jeter un coup d'œil rapide à ce que nous allons créer, puis passer au didacticiel !

Résultat sur le bureau

Résultat sur téléphone et tablette

Inspiration

L'inspiration pour cet article vient d'une demande de commentaire et se trouve sur B3multimedia. Bien qu'ils utilisent une autre méthode pour que cela fonctionne, ils disposent également d'un moyen étonnant de créer un formulaire de contact en un clic. Regardez le résultat :

Créer une section avec le module de boutons

En règle générale, nous montrons comment faire presque tout dans le constructeur visuel frontend de Divi. Dans le post d'aujourd'hui, j'utiliserai cependant le constructeur de backend. En raison du code que nous utilisons, c'est un peu plus facile. Cela dit, si vous aimez autant que nous l'éditeur de frontend, vous pouvez tout aussi facilement compléter ce didacticiel en utilisant la vue "squelette" du frontend.

Ok, passons à ce tutoriel !

Abonnez-vous à notre chaîne Youtube

La première chose que nous devrons faire est d'ajouter une nouvelle section où nous plaçons le bouton qui permettra au formulaire de contact d'apparaître. Ajoutez simplement une section standard et sélectionnez une ligne à une colonne. Une fois que vous avez fait cela, ajoutez-y un module de bouton.

Vous pouvez styliser le bouton comme vous le souhaitez, mais vous devez vous assurer que l'URL du bouton commence par « # » suivi d'autre chose. Vous ne pouvez pas le laisser vide ou utiliser uniquement le caractère '#'. En ajoutant '#' et du texte, la page ne bougera pas une fois que vous aurez cliqué sur le bouton. Si vous le laissez vide, la page se rafraîchira au clic. Et si vous n'utilisez que '#', vous serez envoyé en haut de la page.

La prochaine chose importante que nous devrons faire est d'affecter une classe CSS au bouton. Nous utiliserons cette classe CSS plus tard dans cet article dans le code jQuery pour nous assurer que le formulaire de contact s'affiche après avoir cliqué. La classe que nous devrons attribuer au bouton est simplement 'button'.

Créer un formulaire de contact de bureau en un clic

La prochaine chose que nous devrons faire est de créer le formulaire de contact de bureau qui apparaîtra une fois que quelqu'un aura cliqué sur le bouton que nous avons créé dans la partie précédente de cet article. Plus tard dans cet article, nous vous montrerons également comment créer la version mobile.

Vous pouvez essentiellement créer n'importe quel design dans une rangée et le faire apparaître comme une fenêtre contextuelle si vous utilisez cette méthode. Nous allons seulement vous donner un avant-goût de ce que vous pouvez réaliser en vous montrant comment créer l'exemple suivant :

Ajouter une nouvelle section standard

Commencez par ajouter une nouvelle section standard à la page sur laquelle vous travaillez. Accédez à l'onglet Avancé de la section que vous venez d'ajouter et ajoutez « popup » au champ Classe CSS. Faites défiler ce même onglet et placez les lignes de code CSS suivantes dans le champ Avant de la sous-catégorie CSS personnalisée :

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

En ajoutant cela, nous nous assurons que la section occupe tout l'onglet. Vous pouvez ajuster la couleur d'arrière-plan dans le code CSS pour créer la superposition d'arrière-plan que vous souhaitez. Dans ce cas, nous utilisons la couleur noire avec une certaine transparence. Dans ce même onglet, ajoutez également la ligne de code CSS suivante à l'élément principal :

display: none;

La dernière chose que nous devrons faire dans l'onglet Avancé est de désactiver la section sur le téléphone et la tablette dans la sous-catégorie Visibilité.

Ajouter une ligne à deux colonnes

Continuez en ajoutant une ligne à deux colonnes et accédez à l'onglet Conception. Commencez par modifier la largeur de la ligne dans la sous-catégorie Dimensionnement. Dans cet exemple, nous avons utilisé une largeur personnalisée de 1291px.

Faites défiler l'onglet Conception et utilisez « 30px » pour le rembourrage supérieur, gauche et droit des deux colonnes dans la sous-catégorie Espacement.

Terminez en allant dans l'onglet Avancé. Dans l'élément principal, ajoutez les lignes de code CSS suivantes :

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Ajouter le premier module de texte

Une fois que vous avez apporté toutes les modifications à la section et à la ligne, il est temps d'ajouter les différents modules que vous souhaitez afficher. La première chose que nous ajouterons est le titre qui apparaît. Commencez par ajouter un nouveau module de texte à la première colonne de la ligne, en écrivant le texte dans l'onglet Contenu et en passant à l'onglet Conception. Dans l'onglet Conception, nous avons utilisé les paramètres suivants pour la sous-catégorie Texte :

• Orientation du texte : Centre
• Police du texte : Homard
• Style de police : gras
• Taille de la police de texte : 37
• Couleur du texte : #002282
• Hauteur de la ligne de texte : 1,7 em

Ajouter un deuxième module de texte

Continuez en ajoutant un nouveau module de texte et saisissez le texte que vous souhaitez voir apparaître dans l'onglet Contenu. Passez à l'onglet Conception et appliquez les paramètres suivants à la sous-catégorie Texte :

• Orientation du texte : Centre
• Police du texte : Arial
• Taille de la police du texte : 13
• Couleur du texte : #002282
• Hauteur de la ligne de texte : 1,7 em

Ajouter un module de suivi des médias sociaux

Nous allons également ajouter le module de suivi des médias sociaux à la première colonne. Dans ce cas, nous avons choisi trois icônes sociales ; Facebook, Twitter et Instagram. Une fois que vous avez ajouté ces icônes sociales dans l'onglet Contenu, remplacez la forme du lien par « Cercle » dans la sous-catégorie Icône.

La dernière chose que nous devrons faire est d'ajouter un rembourrage gauche à ce module dans l'onglet Avancé. Ajoutez la ligne de code CSS suivante à l'élément principal :

padding-left: 40%;

Ajouter un module de formulaire de contact

Ensuite, nous pouvons passer à la deuxième colonne de la ligne. Dans cette colonne, la première chose que nous allons placer est le module de formulaire de contact. Pour cet exemple, nous n'avons choisi que deux champs ; le nom et l'email. Une fois que vous avez ajouté le module de formulaire de contact, accédez à l'onglet Conception du module de formulaire de contact et apportez les modifications suivantes à la sous-catégorie de texte de champ de formulaire :

• Taille de la police du champ de formulaire : 15
• Couleur du texte du champ de formulaire : #002282
• Hauteur de la ligne du champ de formulaire : 1,7 em

Dans ce même onglet, apportez les modifications suivantes à la sous-catégorie Button :

• Utiliser un style personnalisé pour le bouton : Oui
• Taille du texte du bouton : 20
• Couleur du texte du bouton : #FFFFFF
• Couleur d'arrière-plan du bouton : #0086c4
• Largeur de la bordure du bouton : 2
• Rayon des boutons : 3

Passez à l'onglet Avancé et ajoutez un rembourrage supérieur de 5%.

Ajouter un module de présentation

Une autre chose que nous devrons ajouter à la deuxième colonne est un module Blurb. La seule chose pour laquelle nous avons besoin de ce module est l'icône de sortie en haut à droite de la fenêtre contextuelle. Choisissez l'icône suivante dans la liste des icônes et laissez toutes les autres choses vides.

Continuez, allez dans l'onglet Avancé et tapez "fermer" comme classe CSS. Dans ce même onglet, ajoutez les lignes de code suivantes à l'élément principal de la sous-catégorie CSS personnalisée :

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Appliquer un fond dégradé à la ligne

Enfin, nous allons ajouter un joli arrière-plan dégradé à la ligne. Ouvrez les paramètres et appliquez les modifications suivantes à l'option d'arrière-plan dégradé :

• Premier dégradé de couleur : #FFFFFF
• Deuxième couleur du dégradé : #0c71c3
• Type de dégradé : Linéaire
• Direction du gradient : 124 deg
• Position de départ : 50 %
• Position finale : 50 %

Créer un formulaire de contact pour tablette et téléphone en un clic

Maintenant que nous avons créé la version de bureau, la version pour tablette et téléphone ira beaucoup plus vite. La plupart des modules que nous avons utilisés pour la version Desktop sont les mêmes pour la version mobile. Le résultat final sur mobile ressemble à ceci :

Ajouter une nouvelle section standard

Commencez par ajouter une autre section standard. Cette section devra avoir les mêmes paramètres que la section que nous avons créée auparavant. Ajoutez « popup » à la classe CSS et ajoutez les lignes de code CSS suivantes au champ Avant :

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Ajoutez également la ligne de code CSS suivante à l'élément principal :

display: none;

Au lieu de le désactiver pour le téléphone et la tablette, comme nous l'avons fait pour la version de bureau, nous allons le désactiver sur le bureau dans la sous-catégorie Visibilité :

Ajouter une ligne à une colonne

Pour la fenêtre contextuelle du téléphone et de la tablette, nous n'aurons besoin que d'une colonne. Pour cette ligne, nous n'allons pas utiliser de largeur personnalisée. Cependant, nous allons appliquer le rembourrage personnalisé comme nous l'avons fait pour la version de bureau ; 30px pour le rembourrage en haut, à gauche et à droite de la colonne.

Nous devrons également nous assurer que les lignes de code CSS suivantes sont ajoutées à l'élément principal dans la sous-catégorie CSS personnalisée :

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Cloner le texte, suivre les médias sociaux et module de formulaire de contact

La prochaine chose que nous devrons faire est de cloner le premier module de texte que nous avons utilisé pour la version de bureau avec le module de suivi des médias sociaux et de formulaire de contact. Après les avoir clonés, placez-les dans la rangée à une colonne de la nouvelle section que vous venez de créer.

Cloner le module Blurb et modifier le code CSS dans l'onglet Avancé

Vous pouvez également cloner le module Blurb qui a été utilisé pour la version de bureau, mais il doit y avoir un petit changement dans le code CSS. Au lieu d'utiliser le code pour le bureau, utilisez plutôt ce qui suit :

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Assurez-vous que la classe CSS 'close' est également utilisée pour le module Blurb.

Appliquer un fond dégradé à la ligne

Pour la version mobile, nous utilisons différents paramètres pour le fond dégradé de la ligne :

• Premier dégradé de couleur : #FFFFFF
• Deuxième couleur du dégradé : #0c71c3
• Type de dégradé : Linéaire
• Direction du gradient : 180 deg
• Position de départ : 40 %
• Position finale : 40 %

Ajouter du code jQuery aux options du thème

La dernière chose que nous aurons besoin de faire pour ce tutoriel est d'ajouter le code jQuery. Vous pouvez ajouter le code via les options du thème ou via un module de code que vous placez dans la page sur laquelle vous travaillez. Pour cet exemple, nous allons simplement le mettre dans les options du thème.

Pour ce faire, accédez à votre tableau de bord WordPress > Divi > Options du thème > Intégration > Et collez les lignes de code jQuery suivantes dans l'en-tête de votre site Web :

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Résultat

Si vous suivez le post, étape par étape, vous devriez pouvoir obtenir le résultat suivant sur le bureau :

Et le résultat suivant sur tablettes et téléphones :

Dernières pensées

Dans cet article, nous vous avons montré comment créer un formulaire de contact en un clic. L'utilisation de cette méthode pour entrer en contact avec vos visiteurs est subtile mais efficace. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section des commentaires ci-dessous.

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par La1n / shutterstock.com