ElementsKit est livré avec le widget Contact Form 7 qui s'ajoute aux fonctionnalités du plugin de création de formulaires. Vous pouvez personnaliser les styles du formulaire de contact 7 avec Elementor en utilisant pleinement les fonctionnalités du générateur de pages.

Lisez cette documentation pour savoir comment créer et personnaliser le formulaire à l'aide du formulaire de contact 7 avec Elementor.

Prérequis: #

Ce widget est un module complémentaire pour Contact Form 7.

Il faut donc avoir Plugin Contact Form 7 installé sur votre site WordPress.

Étape 1 : Créez un formulaire avec le formulaire de contact 7 #

1. Aller à Contact > Ajouter un nouveau.
2. Entrez un nom de formulaire.
3. Configurez les paramètres et les attributs du formulaire.
4. Clique sur le Sauvegarder bouton.

Étape 2 : Obtenez le formulaire de contact 7 dans Elementor #

Pour obtenir le formulaire de contact 7 sur Elementor, activez d’abord le widget ElementsKit Contact Form 7, puis ouvrez l’éditeur Elementor et faites glisser et déposez le widget dans la zone de conception.

Activer le widget Formulaire de contact 7 #

Pour activer le widget Content Ticker :

1. Aller vers ElementsKit > Widgets depuis le tableau de bord WordPress.
2. Trouvez le Formulaire de contact 7 widget de la liste et activer le widget.
3. Clique sur le SAUVEGARDER LES MODIFICATIONS.

Glissez et déposez le widget #

Après cela, faites glisser et déposez ElementsKit Formulaire de contact 7 widget dans l’éditeur Elementor.

Étape 3 : Sélectionnez un formulaire à modifier avec Elementor #

Dans cette étape, vous pouvez sélectionner le formulaire que vous souhaitez modifier. Pour cela, vous pouvez sélectionner le formulaire dans la liste déroulante.

Dans Contenu > Formulaire de contact 7 > Style vous trouverez une liste de formulaires créés avec Contact Form 7. Sélectionnez un formulaire et passez à l'étape suivante.

Étape 4 : Personnalisez le formulaire de contact 7 avec Elementor #

Vous pouvez désormais personnaliser les styles des étiquettes, du champ de saisie et du bouton du formulaire de contact 7 avec Elementor.

Étiquette #

1. Typographie: Définissez la typographie du texte de l'étiquette.
2. Couleur: Choisissez un texte de couleur pour le texte de l'étiquette.
3. Marge: Ajustez la marge pour l’étiquette du champ de formulaire.
4. Indice: Vous pouvez également modifier la typographie et la couleur de l'espace réservé.

Saisir #

1. Rembourrage: Ajustez le remplissage du champ de saisie.
2. Largeur: Vous pouvez ajuster la largeur du champ de saisie.
3. Hauteur: Vous pouvez modifier la hauteur du champ de saisie.
4. Marge inférieure : Modifiez la marge en bas du champ de saisie.

5. Hauteur de la zone de texte : Pour le champ de zone de texte long, vous pouvez modifier sa hauteur.
6. Remplissage de la zone de texte : Vous pouvez également modifier le remplissage de la zone de texte.

7. Type d'arrière-plan : Choisissez un type de couleur d’arrière-plan (couleur classique ou dégradé).
8. Couleur: Choisissez une couleur d'arrière-plan pour le champ de saisie.
9. Rayon de bordure : Définissez le rayon de la bordure du champ de saisie.
10. Type de bordure : Sélectionnez le type de bordure du champ de saisie.
11. Boîte ombre: Vous pouvez définir l'ombre de la boîte pour le champ de saisie.

Vous pouvez définir ces attributs individuellement pour Normale, Flotter, et Modes de mise au point.

12. Typographie: Définissez la typographie du texte saisi.
13. Couleur du texte : Choisissez une couleur pour le texte saisi.
14. Taille de la police de l'espace réservé : Ajustez la taille de la police de l'espace réservé.
15. Couleur de l'espace réservé : Choisissez une couleur pour le texte de l'espace réservé.