Le Formulaire de contact 7 Element par Master Addons est un widget spécialisé utilisé pour intégrer et styliser les formulaires créés à l'aide du plugin populaire Contact Form 7 au sein de votre Conceptions d'éléments. Cela vous permet d'exploiter la fonctionnalité robuste de CF7 tout en obtenant une personnalisation visuelle puissante via Elementor.
À l'aide de l'élément Formulaire de contact 7, vous pouvez :
- Sélectionner tout formulaire de formulaire de contact 7 existant à partir d'une liste déroulante.
- Choisissez parmi plusieurs Variations de conception (Style Un à travers Style onze).
- Contrôler la visibilité de Messages d'erreur et Erreurs de validation.
- Personnalisez entièrement le Conteneur de formulaire, Champs d'entrée et de zone de texte, Étiquettes& le Soumettre le bouton pour Normal et Survole états.
- Style l'affichage de Messages d'erreur et de validation.
Alors, voyons comment ajouter et personnaliser cet élément.
Qu'est-ce que le widget Contact Form 7 dans Elementor ? #
Le widget Contact Form 7 Elementor est un élément Master Addons qui affiche n'importe quel formulaire Contact Form 7 existant à l'intérieur d'Elementor et vous donne un contrôle visuel complet sur sa conception Il maintient CF7 gérant la logique du formulaire et la livraison des e-mails, pendant que vous stylisez le conteneur, les champs de saisie, les étiquettes, le bouton de soumission et les messages d'erreur de l'onglet Style d'Elementor. Master Addons expédie onze préréglages de conception prêts à l'emploi (Style One à Style Eleven), afin que vous puissiez restyle un formulaire CF7 simple pour correspondre à votre site sans écrire de CSS. Il fait partie du libre Widgets et extensions Master Addons bibliothèque.
Ajout et configuration de l'élément Formulaire de contact 7 #
Pour ajouter un formulaire de formulaire de contact 7 stylisé dans Elementor : modifiez votre page avec Elementor, faites glisser le Formulaire de contact 7 widget sur le canevas, sélectionnez votre formulaire dans le dépôt, choisissez l'une des onze variantes de conception, puis affinez le conteneur, les champs, les étiquettes et soumettez le bouton dans le Style onglet. Les étapes ci-dessous parcourent chaque partie en détail.
Suivez ces étapes pour ajouter et configurer l'élément Formulaire de contact 7 sur n'importe quelle page de votre site Web.
Étape 1 : Créer ou modifier une page #
- Depuis votre tableau de bord WordPress, rendez-vous sur Pages → Ajouter Nouveau pour créer une nouvelle page Vous pouvez également sélectionner une page existante et cliquer Modifier.
- Ensuite, cliquez sur les “Modifier avec Elementorbouton”.
Étape 2 : Recherchez l'élément Formulaire de contact 7 #
- Dans le panneau Elementor de gauche, utilisez la barre de recherche pour trouver “Formulaire de contact 7.”
- Faites glisser et déposez l'addon sur la section souhaitée de la page.
Étape 3 : Personnalisez les paramètres du formulaire de contact 7 #
Après avoir placé l'addon, vous trouverez les sections de personnalisation dans le panneau de gauche, principalement sous le Contenu et Style onglets.
Onglet Contenu #
C'est ici que vous sélectionnez le formulaire et définissez la visibilité des erreurs.
Formulaire de contact 7 : #
- Sélectionnez le formulaire de contact : Choisissez le formulaire spécifique Formulaire de contact 7 que vous souhaitez afficher dans la liste déroulante.
- Style d'erreurs (messages d'erreur/erreurs de validation) : Choisissez s'il faut Afficher ou Cacher les messages globaux de réussite/échec de la soumission et les erreurs de validation spécifiques au champ.
Disposition de conception : #
- Variations de conception : Sélectionnez un style pré-conçu pour le formulaire (Style Un à travers Style onze).
Onglet Style #
C'est là que vous contrôlez l'aspect visuel du formulaire et de ses éléments.
Conteneur de formulaire : #
- Type d'arrière-plan : Définissez le style d'arrière-plan pour l'ensemble du conteneur de formulaire : Classique ou Dégradé.
- Couleur supérieure de la bordure : Définissez une couleur pour la bordure supérieure du conteneur.
- Largeur du formulaire ( %) /Rempaquetage du formulaire : Contrôlez la taille et l’espacement interne du conteneur de formulaire.
Titre: #
- Couleur/Alignement/Typographie : Stylez le titre du formulaire (si celui-ci est présent dans la structure CF7).
Entrée et zone de texte : #
- Couleur d'arrière-plan/Couleur du texte : Définissez la couleur d'arrière-plan et de texte pour tous les champs de saisie et de zone de texte.
- Rembourrage: Ajuster l'espacement intérieur des champs.
- Largeur du champ (%) : Définissez la taille horizontale des champs.
- Type de frontière/rayon de frontière : Définissez le style de bordure et les coins arrondis pour les champs de saisie.
Étiquettes : #
- Couleur/Typographie : Stylez les paramètres de couleur du texte et de police pour les étiquettes de champ.
Soumettre le bouton : #
- Typographie des boutons : Contrôlez les paramètres de police pour le texte du bouton.
- Normal /Volez : Définissez ce qui suit pour le bouton dans les deux états :
- Type d'arrière-plan
- Couleur du texte
- Couleur de la bordure
- Rayon de bordure/rembourrage : Réglez les coins arrondis et l'espacement intérieur du bouton.
Erreurs: #
- Messages d'erreur (généraux) : Stylez les principaux messages d'erreur de soumission (souvent des messages d'erreur/succès globaux).
- Couleur du texte/Couleur d'arrière-plan/Type de bordure.
- Erreurs de validation (spécifiques au champ) : Style les messages d'erreur qui apparaissent sous des champs individuels (par exemple, “Ce champ est requis”).
- Couleur d'arrière-plan/Couleur de texte/Type de bordure.
Étape 4 : Enregistrez et publiez votre page #
Une fois que vous avez tout personnalisé à votre goût :
- Cliquez sur les “Publierbouton” (s'il s'agit d'une nouvelle page) ou “Mise à jour” (si modification d'une page existante).
- Testez les messages de soumission de formulaire et d'erreur sur le frontend pour vous assurer que tous les styles sont appliqués correctement.
Foire aux questions #
Comment styliser le formulaire de contact 7 dans Elementor ?
Ajoutez le widget Master Addons Contact Form 7 à votre page Elementor, sélectionnez votre formulaire dans le dépôt, puis ouvrez l'onglet Style De là, vous pouvez restylez le conteneur de formulaire, les champs de saisie et de zone de texte, les étiquettes, le bouton de soumission et les messages d'erreur Vous pouvez également choisir l'un des onze préréglages de conception prêts à l'emploi pour ignorer le style manuel.
Le widget Contact Form 7 est-il gratuit dans Master Addons ?
Oui. Le widget Contact Form 7 fait partie du gratuit Widgets et extensions Master Addons bibliothèque Vous n'avez besoin que du plugin gratuit Contact Form 7 et des modules complémentaires Master installés et actifs ; aucun Elementor Pro ou mise à niveau payante n'est requis pour styliser vos formulaires.
Combien de styles de conception Contact Form 7 Master Addons inclut-il ?
Master Addons comprend onze variantes de conception prédéfinies, étiquetées Style One à Style Eleven. Choisissez-en un dans la section Mise en page de conception pour appliquer instantanément un look complet, puis ajustez les couleurs, les bordures et la typographie dans l'onglet Style pour qu'elles correspondent à votre marque.
Puis-je ajouter une icône Font Awesome au bouton de soumission du formulaire de contact 7 ?
Oui. Au-delà du style de bouton intégré dans ce widget, vous pouvez ajouter une icône au bouton d'envoi en suivant notre guide sur la façon de le faire appliquez une icône Génial de police à l'intérieur du bouton Soumettre le formulaire de contact 7. Il se marie bien avec les styles de boutons Normal et Hover que vous définissez ici.
Pourquoi mon style Contact Form 7 n'apparaît-il pas dans Elementor ?
Il s'agit presque toujours d'une mise en cache ou d'un conflit de plugin. Confirmez que le formulaire de contact 7 et les modules complémentaires principaux sont actifs, assurez-vous d'utiliser le widget Master Addons Contact Form 7 (et non le shortcode CF7 simple), puis purgez le cache de votre page et le rechargement de vos ressources. Garder les actifs maigres aide également ; consultez nos conseils pour accélérez votre site Web Elementor.
