Création de plusieurs formulaires de contact ciblés au survol en un seul design avec Divi

La façon dont vous affichez les formulaires de contact sur votre site Web peut certainement aider à augmenter les taux de conversion. En plus de créer des formulaires de contact beaux et conviviaux, vous pouvez également l'aborder de manière plus ciblée. Dans cet article, nous allons vous montrer comment créer un design avec plusieurs formulaires de contact qui apparaissent en fonction du service qui intéresse vos visiteurs. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page des formulaires de contact ciblés

Pour mettre la main sur la mise en page des formulaires de contact ciblés gratuits, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Une fois que vous avez téléchargé la mise en page sur votre page, vous devrez toujours ajouter le code CSS à la page sur laquelle vous travaillez. Vous pouvez trouver le code CSS à la fin de ce tutoriel.

Abonnez-vous à notre chaîne Youtube

Commençons à recréer !

Ajouter la section #1

Ouvrez une page nouvelle ou existante et ajoutez une nouvelle section régulière.

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Ajouter un module de texte

Ajouter du contenu H2

Ajoutez un module de texte à la colonne avec du contenu H2 de votre choix.

Paramètres de texte H2

Passez à l'onglet Conception et modifiez les paramètres de texte H2 en conséquence :

• Titre 2 Poids de la police : Ultra gras
• Titre 2 Style de police : majuscule
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 6vw
• Espacement des lettres de l'en-tête 2 : -0.4vw
• En-tête 2 Hauteur de ligne : 0,8 em

Espacement

Ajoutez également des marges haut et bas personnalisées.

• Marge supérieure : 2vw
• Marge inférieure : 2vw

Ajouter la section #2

Fond dégradé

Ajoutez une autre section juste en dessous de la précédente et appliquez le fond dégradé suivant (ou tout autre fond dégradé de votre choix) :

• Couleur 1 : #30fff1
• Couleur 2: #4635ff
• Direction du gradient: 110deg
• Position finale : 85 %

Diviseur supérieur

Passez à l'onglet Conception et ajoutez un séparateur supérieur.

• Style de séparation : rechercher dans la liste
• Disposition des diviseurs : sous le contenu de la section

Diviseur inférieur

Ajoutez également un séparateur inférieur.

• Style de séparation : rechercher dans la liste
• Disposition des diviseurs : sous le contenu de la section

Dimensionnement

Modifiez ensuite la hauteur dans les paramètres de dimensionnement.

• Hauteur : 200px

Espacement

Ajoutez ensuite des paramètres d'espacement personnalisés.

• Marge inférieure : 30 vw (ordinateur de bureau), 45 vw (tablette), 200 vw (téléphone)
• Rembourrage supérieur : 0vw
• Rembourrage inférieur : 0vw

Classe CSS

Plus tard dans l'article, nous allons ajouter du code CSS pour que l'effet fonctionne. En prévision de cela, nous allons ajouter une classe CSS à la section.

• Classe CSS : section contact

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Débordement

Ouvrez les paramètres de ligne et masquez les débordements.

• Débordement horizontal : masqué
• Débordement vertical : caché

Transitions

Supprimez également la durée de transition.

• Durée de transition : 0 ms

Ajouter un module de présentation

Ajouter un titre à la zone de contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un module Blurb et entrez un titre de votre choix qui représente l'un de vos services.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Couleur d'arrière-plan par défaut

Continuez en ajoutant une couleur d'arrière-plan par défaut.

• Couleur d'arrière-plan : #ffffff

Couleur d'arrière-plan du survol

Changez la couleur d'arrière-plan en survol.

• Couleur d'arrière-plan : #000000

Paramètres d'icône par défaut

Passez à l'onglet Conception et modifiez les paramètres de l'icône en conséquence :

• Couleur de l'icône : #000000
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 2.5vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

Paramètres de l'icône de survol

Modifiez la couleur de l'icône au survol.

• Couleur de l'icône : #ffffff

Paramètres du texte du titre par défaut

Ouvrez ensuite les paramètres du texte du titre et appliquez les modifications suivantes :

• Poids de la police du titre : ultra gras
• Style de police du titre : majuscule
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #000000
• Taille du texte du titre : 0.9vw (ordinateur de bureau), 1.8vw (tablette), 3vw (téléphone)

Paramètres du texte du titre de survol

Changez la couleur du texte du titre au survol.

• Couleur du texte du titre : #ffffff

Dimensionnement

Modifiez ensuite la largeur sur différentes tailles d'écran.

• Largeur : 10 vw (ordinateur de bureau), 17 vw (tablette), 30 vw (téléphone)
• Alignement du module : Centre

Espacement

Et ajoutez des valeurs de marge et de remplissage personnalisées aux paramètres d'espacement.

• Marge supérieure : 4vw
• Marge inférieure : 4vw
• Rembourrage supérieur : 2vw (ordinateur de bureau), 3vw (tablette), 6vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 3vw (tablette), 6vw (téléphone)

Frontière

Nous transformons également le module en cercle en ajoutant « 50vw » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Ajoutez également une ombre de boîte.

Échelle de transformation par défaut

Passez aux paramètres de transformation et assurez-vous que les valeurs d'échelle de transformation par défaut restent à « 100 % ».

Échelle de transformation de survol

Modifiez ces valeurs au survol.

• Bas : 120%
• À droite : 120 %

Ajouter un formulaire de contact

Faire des champs de nom et d'e-mail en pleine largeur

Le deuxième module dont nous avons besoin dans cette rangée est un module de formulaire de contact. Une fois que vous avez ajouté le formulaire de contact, ouvrez les champs de nom et d'e-mail et faites-les en pleine largeur.

• Faire pleine largeur : Oui

Supprimer le champ de message et insérer trois champs de saisie pour les questions spécifiques au service

Ajoutez ensuite trois questions qui s'appliquent à ce service spécifique.

Désactiver Captcha

Désactivez également l'option captcha.

• Afficher le Captcha : Non

Paramètres des champs

Passez à l'onglet Conception et modifiez les paramètres des champs en conséquence :

• Remplissage supérieur des champs : 0.6vw (ordinateur de bureau), 0.9vw (tablette), 1.5vw (téléphone)
• Remplissage inférieur des champs : 0.6vw (ordinateur de bureau), 0.9vw (tablette), 1.5vw (téléphone)
• Taille du texte des champs : 0.8vw (ordinateur de bureau), 1.6vw (tablette), 2.3vw (téléphone)

Paramètres des boutons

Modifiez ensuite l'apparence du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px
• Poids de la police du bouton : ultra gras
• Style de police des boutons : majuscule

Espacement

Ajoutez également des valeurs de remplissage.

• Rembourrage supérieur : 2vw
• Rembourrage inférieur : 2vw
• Rembourrage gauche : 2vw
• Rembourrage droit : 2vw

Paramètres de bordure

Enfin, accédez aux paramètres de bordure et ajoutez « 10px » à chacun des coins.

Cloner la ligne trois fois

Une fois que vous avez terminé la première ligne, vous pouvez continuer et la cloner trois fois.

Modifier le contenu et l'icône du Blurb pour chaque ligne en double

Assurez-vous de modifier le titre et l'icône du texte de présentation pour chaque doublon.

Modifier les questions spécifiques au service pour chaque ligne en double

Modifiez également les questions spécifiques du formulaire de contact.

Paramètres de ligne supplémentaires

Hauteur par défaut

Ouvrez à nouveau les paramètres de la première ligne, accédez aux paramètres de dimensionnement et modifiez la hauteur sur différentes tailles d'écran.

• Hauteur : 18vw (ordinateur de bureau), 27vw (tablette), 38vw (téléphone)

Hauteur de survol

Ramenez la hauteur au survol automatique.

• Hauteur: automatique

Étendre les paramètres de dimensionnement des lignes à toutes les lignes de la section

Une fois que vous avez modifié les paramètres de dimensionnement de la première ligne, vous pouvez étendre les paramètres à toutes les lignes de la section.

Placer les lignes les unes à côté des autres sur le bureau et la tablette

Ouvrir les paramètres de la page

Enfin, nous allons placer les quatre rangées les unes à côté des autres sur la tablette et le bureau. Pour ce faire, ouvrez les paramètres de la page.

Insérer un CSS personnalisé

Passez à la boîte CSS personnalisée et ajoutez les lignes de code CSS suivantes :

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer plusieurs formulaires de contact ciblés en un seul design. C'est un excellent moyen d'en savoir plus sur vos visiteurs et sur le service particulier qui les intéresse. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous !

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.