5 façons uniques de styliser le module de formulaire de contact de Divi

Les formulaires de contact sont une partie essentielle de nombreux sites Web. Leur objectif principal est d'être intuitif et d'aider les visiteurs à entrer facilement en contact. Mais cela ne signifie pas que tous les formulaires de contact doivent avoir une apparence définie et prédéfinie. Vous pouvez facilement combiner une expérience intuitive avec un beau design. C'est exactement ce que nous allons faire dans ce post. Nous allons partager 5 conceptions de module de formulaire de contact Divi uniques que vous pouvez créer en utilisant uniquement les options intégrées de Divi.

Allons-y !

Aperçu des conceptions du module de formulaire de contact Divi

Bureau

Commençons par jeter un œil aux conceptions du module de formulaire de contact Divi sur le bureau.

Mobile

Et voici à quoi ressemblent les conceptions du module de formulaire de contact Divi sur des écrans de plus petite taille :

5 façons uniques de styliser le module de formulaire de contact de Divi

Abonnez-vous à notre chaîne Youtube

Création du formulaire de contact #1

Ajouter une nouvelle section

Fond dégradé

Commençons par le premier exemple ! Ajoutez une nouvelle section, accédez aux paramètres d'arrière-plan et ajoutez un arrière-plan dégradé.

• Couleur 1 : #4c00ff
• Couleur 2 : #ffd400
• Type de dégradé : Radial
• Direction radiale : en bas à gauche
• Position de départ : 34 %
• Position finale : 34 %

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 200 px
• Rembourrage inférieur : 200px

Ajouter une nouvelle ligne

Structure des colonnes

Ajoutez une nouvelle ligne à l'aide de la structure de colonnes suivante :

Colonne 1 Couleur d'arrière-plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez un arrière-plan dégradé de la colonne 1.

• Couleur d'arrière-plan de la colonne 1 : rgba(255,255,255,0,55)

Image de fond de la colonne 1

Ajoutez également une image d'arrière-plan à la première colonne.

• Répétition de l'image d'arrière-plan de la colonne 1 : aucune répétition
• Colonne 1 Mélange d'images d'arrière-plan : écran

Couleur d'arrière-plan de la colonne 2

Et une couleur de fond blanc à la deuxième colonne.

• Couleur d'arrière-plan de la colonne 2 : #ffffff

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Égaliser les hauteurs de colonne : Oui

Espacement

Supprimez également tous les rembourrages personnalisés par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Rayon de bordure de colonne

Ajoutez un rayon de bordure aux deux colonnes dans l'onglet avancé.

border-radius: 10px;

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter les différents modules ! Ajoutez un module de texte à la première colonne avec un contenu de votre choix.

Paramètres de texte

Ensuite, allez dans les paramètres de texte et apportez quelques modifications.

• Police du texte : Satisfy
• Couleur du texte : #333333
• Taille du texte : 100 pixels
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 600 px
• Rembourrage inférieur : 100px

Boîte ombre

Pour ajouter de la profondeur à la conception, utilisez une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -16px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter un module d'image à la colonne 2

Télécharger une image PNG

Continuez en ajoutant un module d'image à la deuxième colonne. Téléchargez une image PNG de votre choix.

Dimensionnement

Modifiez les paramètres de dimensionnement de ce module.

• Largeur : 25 % (ordinateur de bureau), 50 % (tablette), 60 % (téléphone)
• Alignement du module : Centre

Espacement

Créez un chevauchement en utilisant une marge supérieure négative.

• Marge supérieure : -60%

Ajouter le module de texte n° 1 à la colonne 2

Ajouter du contenu

Juste en dessous du module image, ajoutez un module texte avec du contenu.

Paramètres de texte

Modifiez les paramètres de texte de ce module.

• Police du texte : Satisfy
• Couleur du texte : #333333
• Taille du texte : 44 px
• Orientation du texte : Centre

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu

Ajoutez ensuite un autre module de texte.

Paramètres de texte

Modifiez également les paramètres de texte de ce module.

• Police du texte : Arial
• Couleur du texte : #ffd400
• Taille du texte : 18px
• Espacement des lettres du texte : 2px
• Orientation du texte : Centre

Espacement

Ajoutez ensuite une marge inférieure.

• Marge inférieure : 100px

Ajouter le module de formulaire de contact à la colonne 2

Activer l'option « Make Fullwidth » sur le champ Nom et e-mail

Le dernier module nécessaire est le module de formulaire de contact. Avant de faire quoi que ce soit d'autre, ouvrez les champs de nom et d'e-mail et modifiez la mise en page.

• Faire pleine largeur : Oui

Ajouter un champ d'objet

Pour créer ce design, nous avons ajouté un autre champ pour le sujet.

Éléments

Désactivez ensuite l'option captcha.

• Afficher Captcha : Non

Paramètres de texte de champ de formulaire

Apportez quelques modifications aux paramètres de texte du champ de formulaire de ce module de formulaire de contact.

• Couleur d'arrière-plan du champ de formulaire : rgba(255,255,255,0)
• Police du champ de formulaire : Arial
• Poids de la police du champ de formulaire : léger
• Taille du texte du champ de formulaire : 16px
• Espacement des lettres du champ de formulaire : 2px

Paramètres des boutons

Nous modifions également l'apparence des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Couleur du texte du bouton : #ffd400
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 2px
• Police des boutons : Arial
• Style de police : Souligné
• Couleur de soulignement : #4c00ff

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage inférieur : 100px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Frontière

Et ajoutez une bordure inférieure subtile à chacun des champs.

• Largeur de la bordure inférieure : 2px
• Couleur de la bordure inférieure : #efefef

Espacement individuel des champs

Enfin, ajoutez une marge inférieure à chacun des champs individuels, à l'exception de celui du message.

• Marge inférieure : 20px

Création du formulaire de contact #2

Ajouter une nouvelle section

Fond dégradé

Passons à l'exemple suivant ! Ajoutez une nouvelle section avec un arrière-plan dégradé.

• Couleur 1: #562fef
• Couleur 2 : #ffffff
• Type de dégradé : Linéaire
• Position de départ : 50 %
• Position finale : 50 %

Espacement

Ajoutez des valeurs de remplissage personnalisées aux paramètres d'espacement de cette section.

• Rembourrage supérieur : 200 px
• Rembourrage inférieur : 200px

Ajouter une nouvelle ligne

Structure des colonnes

Ajoutez une nouvelle ligne à l'aide de la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan à la ligne.

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

Colonne 2 Fond dégradé

Ajoutez un arrière-plan dégradé à la deuxième colonne de la ligne suivante.

• Couleur 1 : #9932ff
• Couleur 2: #562fef
• Type de dégradé de la colonne 2 : linéaire
• Direction du gradient de la colonne 2: 160deg

Dimensionnement

Modifiez également les paramètres de dimensionnement de la ligne.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Ensuite, ajoutez des valeurs d'espacement personnalisées.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage supérieur de la colonne 1 : 100px
• Remplissage inférieur de la colonne 1 : 50px
• Remplissage gauche de la colonne 1 : 50px
• Remplissage à droite de la colonne 1 : 50px
• Remplissage supérieur de la colonne 2: 100px
• Remplissage inférieur de la colonne 2 : 100px
• Remplissage gauche de la colonne 2 : 50px
• Remplissage à droite de la colonne 2 : 50px

Frontière

Ajoutez « 20px » à chacune des bordures de la ligne.

Boîte ombre

Enfin, ajoutez une ombre de boîte subtile à la ligne.

• Force du flou d'ombre de la boîte: 45px
• Force de propagation de l'ombre de la boîte : -11px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter les modules ! Commencez avec un module de texte dans la première colonne.

Paramètres de texte

Modifiez les paramètres de texte de ce module.

• Poids de la police de texte : ultra gras
• Style de police de texte : majuscule
• Couleur du texte : 562fef
• Texte Suze : 100 px (ordinateur de bureau), 80 px (tablette), 60 px (téléphone)
• Espacement des lettres du texte : -10px
• Hauteur de la ligne de texte : 1 em

Espacement

Ajoutez également une marge inférieure.

• Marge inférieure : 50px

Ajouter le module de formulaire de contact à la colonne 1

Éléments

Le deuxième module dont nous aurons besoin dans la première colonne est un module de formulaire de contact. Une fois que vous avez ajouté le module, désactivez l'option 'Afficher Captcha'.

• Afficher Captcha : Non

Paramètres de texte de champ de formulaire

Modifiez ensuite la couleur d'arrière-plan du champ de formulaire.

• Couleur d'arrière-plan du champ de formulaire : #ffffff

Paramètres des boutons

Jouez également avec les paramètres des boutons pour créer un bouton d'icône au lieu d'un bouton contenant du texte.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 73 px
• Couleur du texte du bouton : rgba(0,0,0,0)
• Couleur d'arrière-plan du bouton de survol : rgba(255,255,255,0)
• Largeur de la bordure du bouton : 0px
• Couleur de l'icône du bouton : #9932ff
• Afficher uniquement l'icône au survol pour le bouton : non

Boîte ombre

Enfin, ajoutez une ombre de boîte subtile à chacun des champs.

• Force du flou d'ombre de la boîte: 36px
• Force du flou de l'ombre de la boîte: -14px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Le premier module dont nous aurons besoin dans la deuxième colonne est un autre module de texte.

Paramètres de texte

Une fois que vous avez ajouté le contenu, modifiez les paramètres de texte de ce module.

• Poids de la police de texte : ultra gras
• Couleur du texte : #ffffff
• Taille du texte : 23 pixels
• Espacement des lettres du texte : -1px

Ajouter le module Blurb n° 1 à la colonne 2

Ajouter du contenu

Le deuxième module dont nous aurons besoin est un module Blurb. Allez-y et entrez quelques informations de contact.

Sélectionnez l'icône

Ensuite, choisissez une icône correspondante.

Paramètres des icônes

Modifiez les paramètres de cette icône.

• Couleur de l'icône : #ffffff
• Placement de l'icône : à gauche

Paramètres du texte du titre

Continuez en apportant ensuite quelques modifications aux paramètres du texte du titre.

• Taille du texte du titre : 15 px
• Espacement des lettres du titre : -0,5 px

Espacement

Et ajoutez une marge supérieure.

• Marge supérieure : 120px

Cloner le module Blurb deux fois

Une fois que vous avez terminé de modifier le premier module Blurb, vous pouvez continuer et cloner le module deux fois.

Modifier le contenu et l'icône des deux doublons

Modifiez le contenu et les icônes des deux doublons pour partager différents types d'informations de contact avec les visiteurs.

Modifier l'espacement des deux doublons

La marge supérieure des deux doublons doit également être modifiée.

• Marge supérieure : 30px

Création du formulaire de contact #3

Ajouter une nouvelle section

Couleur de l'arrière plan

Passons au troisième exemple ! Ajoutez une nouvelle section avec la couleur d'arrière-plan suivante :

• Couleur d'arrière-plan : #3491CE

Espacement

Continuez en ajoutant des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 200 px
• Rembourrage inférieur : 200px

Ajouter la ligne n° 1

Structure des colonnes

Ensuite, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Ajouter un module de texte

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Le premier module que nous devrons ajouter à la première colonne est un module de texte. Entrez un contenu de votre choix.

Paramètres de texte

Ensuite, modifiez les paramètres de texte.

• Poids de la police de texte : ultra gras
• Couleur du texte : rgba(255,255,255,0.24)
• Taille du texte : 100 px (ordinateur de bureau), 86 px (tablette), 60 px (téléphone)
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Espacement

Ajoutez également une marge inférieure négative.

• Marge inférieure : -100px

Ajouter la ligne n° 2

Structure des colonnes

La deuxième ligne dont nous avons besoin pour compléter cet exemple contient la structure de colonne suivante :

Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez un arrière-plan dégradé.

• Couleur 1 : #11CE84
• Couleur 2: #10C77F
• Type de dégradé : Linéaire
• Direction du gradient : 160 degrés
• Position de départ : 50 %
• Position finale : 50 %

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 150 px
• Rembourrage inférieur : 100px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Frontière

Ensuite, allez dans les paramètres de bordure et ajoutez "20px" à chacun des coins. Utilisez également une bordure inférieure.

• Largeur de la bordure inférieure : 10px
• Couleur de la bordure inférieure : #1ba35a

Boîte ombre

Complétez les paramètres de ligne en ajoutant une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -24px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter le module de formulaire de contact à la colonne 1

Activer l'option « Make Fullwidth » sur le champ Nom et e-mail

Le premier module dont nous avons besoin dans la première colonne de la ligne est un module de formulaire de contact. Ouvrez le champ nom et e-mail et modifiez les paramètres de mise en page.

• Faire pleine largeur : Oui

Éléments

Désactivez ensuite le captcha.

• Afficher Captcha : Non

Paramètres des boutons

Et modifiez les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Couleur du texte du bouton : #ffffff
• Couleur 1 : #3AA0E3
• Couleur 2: #3491CE
• Type de dégradé : Linéaire
• Direction du gradient : 155 deg
• Position de départ : 50 %
• Position finale : 50 %
• Largeur de la bordure du bouton : 0px
• Rayon de bordure de bouton : 10px
• Force de propagation de l'ombre de la boîte : -2px
• Couleur de l'ombre : #0a60af

Frontière

Nous ajoutons également « 5px » de coins arrondis à chacun des champs.

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Dans la deuxième colonne, le premier module dont nous aurons besoin est un module de texte. Allez-y et entrez du contenu.

Couleur de l'arrière plan

Ensuite, changez la couleur d'arrière-plan.

• Couleur d'arrière-plan : rgba (255,255,255,0.13)

Paramètres de texte

Jouez également avec les paramètres de texte.

• Poids de la police de texte : léger
• Couleur du texte : #ffffff
• Taille du texte : 15 pixels
• Espacement des lettres du texte : -0,5 pixels

Espacement

Et ajoutez un rembourrage personnalisé pour donner au module de l'espace pour respirer.

• Rembourrage supérieur : 12px
• Rembourrage inférieur : 12px
• Rembourrage gauche : 10px
• Rembourrage droit : 10px

Frontière

Nous ajoutons également « 20px » dans les coins supérieur gauche et inférieur gauche. En plus de cela, nous allons ajouter une bordure gauche.

• Largeur de la bordure gauche : 34 px
• Couleur de la bordure gauche : #edf000

Visibilité

Pour que cette conception corresponde aux différentes tailles d'écran, nous allons désactiver le module de texte sur le téléphone et la tablette.

Cloner le module de texte deux fois

Une fois que vous avez terminé de modifier le premier module de texte, allez-y et clonez le module deux fois.

Modifier le contenu des deux doublons

Changez le contenu des deux doublons en quelque chose d'autre.

Modifier l'espacement des deux doublons

Et ajoutez une marge supérieure pour créer un espace entre chacun des modules.

• Marge supérieure : 20px

Changer la bordure des deux doublons

Enfin, modifiez individuellement la couleur de la bordure gauche de chacun des doublons.

• Couleur 1 : #00faff
• Couleur 2: #00f76f

Création du formulaire de contact #4

Ajouter une nouvelle section

Couleur de l'arrière plan

Passons au quatrième exemple ! Ajoutez une nouvelle section en utilisant la couleur d'arrière-plan suivante :

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

Espacement

Supprimez le remplissage par défaut de cette section.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

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

Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez un arrière-plan dégradé.

• Couleur 1 : #ffffff
• Couleur 2: rgba(41,196,169,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 38 %
• Position finale : 38 %

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Et ajoutez un rembourrage personnalisé.

• Rembourrage supérieur : 160px
• Rembourrage inférieur : 160px

Ajouter un module de texte

Ajouter du contenu

Le premier module dont nous avons besoin est un module de texte. Allez-y et entrez du contenu.

Paramètres de texte

Modifiez les paramètres de texte en conséquence :

• Police du texte : Abril Fatface
• Couleur du texte : #640076
• Taille du texte : 45 px (ordinateur de bureau), 34 px (tablette), 20 px (téléphone)
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Marge supérieure : 300px
• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px

Ajouter un module de formulaire de contact

Activer l'option « Make Fullwidth » sur le champ Nom et e-mail

Le deuxième et dernier module dont nous avons besoin est un module de formulaire de contact. Ouvrez les champs de nom et d'e-mail et modifiez les paramètres de mise en page.

• Faire pleine largeur : Oui

Éléments

Ensuite, désactivez l'option captcha dans les paramètres des éléments.

• Afficher Captcha : Non

Paramètres de texte de champ de formulaire

Apportez également quelques modifications aux paramètres de texte du champ de formulaire.

• Couleur d'arrière-plan du champ de formulaire : #fff6f6
• Couleur du texte du champ de formulaire : #ff7c7c

Paramètres des boutons

Transformez le bouton en bouton d'icône en utilisant les paramètres suivants :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 88 px
• Couleur du texte du bouton : rgba(255,255,255,0)
• Couleur d'arrière-plan du bouton de survol : rgba(255,255,255,0)
• Largeur de la bordure du bouton : 0px
• Couleur de l'icône du bouton : #e60085
• Afficher uniquement l'icône au survol pour le bouton : Oui

Dimensionnement

Et jouez avec les valeurs de dimensionnement pour que le design corresponde à toutes les tailles d'écran.

• Largeur : 42 % (ordinateur de bureau), 50 % (tablette), 77 % (téléphone)
• Alignement du module : Centre

Espacement

Continuez en ajoutant des valeurs d'espacement personnalisées au module.

• Marge inférieure : 200px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Frontière

Et ajoutez « 10px » à chacun des coins.

Marge du bouton

Enfin, appuyez sur le bouton icône vers la droite en utilisant la ligne de code CSS suivante dans l'onglet avancé :

margin-right: -100px;

Création du formulaire de contact #5

Ajouter une nouvelle section

Fond dégradé

Passons au dernier exemple ! Ajoutez une nouvelle section avec l'arrière-plan dégradé suivant :

• Couleur 1 : #4bf2d0
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Gauche
• Position de départ : 36 %
• Position finale : 36 %

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez un rembourrage personnalisé.

• Rembourrage supérieur : 250 px
• Rembourrage inférieur : 250px

Ajouter une nouvelle ligne

Structure des colonnes

Une fois que vous avez terminé de modifier les paramètres de la section, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan.

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

Colonne 1 Couleur d'arrière-plan

Ajoutez une autre couleur d'arrière-plan à la première colonne.

• Couleur d'arrière-plan de la colonne 1 : #f9f9f9

Dimensionnement

Ensuite, modifiez les paramètres de dimensionnement de la ligne.

• Utiliser la largeur personnalisée : Oui
• Unité : PX
• Largeur personnalisée : 1730px
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Et ajoutez des valeurs d'espacement personnalisées pour correspondre à toutes les tailles d'écran.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage supérieur de la colonne 1 : 200 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage inférieur de la colonne 1 : 150 px (ordinateur de bureau), 0 px (tablette et téléphone)
• Remplissage gauche de la colonne 1 : 50px
• Remplissage à droite de la colonne 1 : 50px
• Remplissage supérieur de la colonne 2 : 200 pixels (ordinateur de bureau), 100 pixels (tablette et téléphone)
• Remplissage inférieur de la colonne 2 : 150 px, 100 px (tablette et téléphone)

Boîte ombre

La dernière chose que vous devrez faire dans les paramètres de ligne est d'ajouter une ombre de boîte subtile.

• Force du flou de l'ombre de la boîte : 56px
• Force de propagation de l'ombre de la boîte: -17px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un module de texte à la première colonne.

Paramètres de texte

Une fois que vous avez ajouté le contenu, accédez aux paramètres de texte et apportez quelques modifications.

• Police du texte : Cambay
• Couleur du texte : #000000
• Taille du texte : 26 px
• Espacement des lettres du texte : -0,5 pixels
• Orientation du texte : à droite

Espacement

Ajoutez également une marge supérieure.

• Marge supérieure : 60px

Visibilité

Et masquez le module sur le téléphone et la tablette.

Cloner le module de texte deux fois

Modifier le contenu des deux doublons

Une fois que vous avez terminé de modifier le premier module de texte, allez-y et clonez le module deux fois. Modifiez le contenu des deux doublons.

Modifier l'espacement des deux doublons

Modifiez également la marge supérieure des deux doublons.

• Marge supérieure : 80px

Ajouter le module de formulaire de contact à la colonne 2

Activer l'option « Make Fullwidth » sur le champ Nom et e-mail

Le seul module dont nous avons besoin dans la deuxième colonne est un module de formulaire de contact. Ouvrez les champs nom et e-mail et modifiez les paramètres de mise en page.

• Faire pleine largeur : Oui

Éléments

Désactivez ensuite l'option captcha.

• Afficher Captcha : Oui

Paramètres de texte de champ de formulaire

Ensuite, allez dans les paramètres de texte du champ de formulaire et apportez quelques modifications.

• Couleur d'arrière-plan du champ de formulaire : rgba(255,255,255,0)
• Police du champ de formulaire : Cambay

Paramètres des boutons

Et créez un bouton unique à l'aide des paramètres de bouton suivants :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 64 px (ordinateur de bureau), 50 px (tablette), 40 px (téléphone)
• Couleur du texte du bouton : #000000
• Couleur 1 : #4bf2d0
• Couleur 2: rgba(41,196,169,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 25 %
• Position finale : 25 %
• Largeur de la bordure du bouton : 0px
• Afficher uniquement le bouton au survol pour le bouton : non

Espacement

Ajoutez également une marge supérieure à ce module.

• Marge supérieure : 50px

Frontière

Et utilisez une bordure inférieure subtile pour chacun des champs.

• Largeur de la bordure inférieure : 0,5 pixels
• Couleur de la bordure inférieure : #000000

Espacement individuel des champs

Enfin, ajoutez la marge inférieure suivante à chacun des champs individuellement et le tour est joué !

• Marge inférieure : 50px

Aperçu

Bureau

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil aux conceptions du module de formulaire de contact Divi sur le bureau.

Mobile

Et voici ce que vous pouvez attendre des conceptions du module de formulaire de contact Divi sur des écrans de plus petite taille :

Dernières pensées

Dans cet article, nous avons partagé 5 magnifiques conceptions de modules de formulaire de contact Divi que vous pouvez facilement utiliser et modifier pour tout site Web que vous créez. Les formulaires de contact sont un élément essentiel de nombreux sites Web, il est donc important de vous assurer que votre conception convainc vos visiteurs de vous contacter. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!