Widget Élémenteur Formulaire de Contact 7 : Style CF7 Sans CSS
Le widget Contact Form 7 du plugin gratuit Master Addons place n'importe quel formulaire que vous avez intégré Formulaire de contact 7 sur une page Elementor et vous permet de la styliser à partir du panneau Choisissez le formulaire, choisissez une variante de conception, puis définissez le conteneur, le titre, les champs, les étiquettes, le bouton de soumission et les messages d'erreur Le formulaire de contact 7 gère toujours les champs et envoie l'e-mail Quatre variantes de conception sont gratuites et sept autres sont livrées avec Master Addons Pro. Vous avez besoin du plugin gratuit Contact Form 7 installé et d'au moins un formulaire créé.
Comment ajouter le formulaire de contact 7 à Elementor
Il vous faut Elementor, le gratuit Formulaire de contact 7 plugin et le plugin gratuit Master Addons.
- Installez le formulaire de contact 7 et créez votre formulaire sous Contact, Ajouter Nouveau: avec les champs et les paramètres de messagerie dont vous avez besoin.
- Installer et activer Modules complémentaires principaux de WordPress.org.
- Modifiez votre page avec Elementor et recherchez dans le panneau widgets Formulaire de contact 7. Choisissez celui avec le badge Master Addons.
- Dans Sélectionnez Formulaire de contact: choisissez votre formulaire.
- Dans Style, choisissez une variante de désignation (les styles un à quatre sont gratuits).
- Ajustez le conteneur, les champs, les étiquettes, le bouton et les erreurs, puis soumettez un message de test sur la page en direct.
Chaque paramètre est couvert dans le Paramètres du widget Form 7 de contact guide.
Variations de conception : 4 gratuites, 7 pro
En style, Disposition de conception, choisissez un Variation de conception. Style Un à Style Quatre sont dans le plugin gratuit Style Cinq à Style Onze besoin Maître Addons Pro. Chaque variante stylise les champs et le bouton ensemble, et vous pouvez modifier n'importe quelle partie par la suite dans les sections ci-dessous.
- Chaque widget de la page peut utiliser sa propre variante, de sorte qu'un formulaire de pied de page et un formulaire de page de contact peuvent être différents.
- Choisissez le formulaire dans l'onglet Contenu sous Sélectionnez Formulaire de contact. La liste montre les formulaires que vous avez créés dans le formulaire de contact 7.
- Si le formulaire de contact 7 n'est pas actif, le widget affiche un avis au lieu d'un formulaire.
Formulaire de contact de style 7 : Widget vs CSS vs Elementor Pro Form
Il existe trois façons courantes d'obtenir un beau formulaire sur un site Elementor Voici comment ils se comparent.
| Widget Master Addons CF7 | CSS personnalisé sur CF7 | Widget Elementor Pro Form | |
|---|---|---|---|
| Constructeur de formulaires | Formulaire de contact 7 | Formulaire de contact 7 | Intégré à Elementor Pro |
| Style | Commandes de panneau et 11 variantes (4 gratuites) | Écrire et maintenir CSS | Contrôles du panneau |
| Coût | Gratuit (7 variantes ont besoin de Pro) | Gratuit | Besoins d'Elementor Pro |
| Meilleur pour | Sites utilisant déjà CF7 | Développeurs qui veulent un contrôle total | Sites sur Elementor Pro qui veulent des formulaires et des actions en un seul endroit |
Si vous avez déjà des formulaires Contact Form 7, le widget est le moyen le plus rapide de les faire correspondre à votre conception Si vous utilisez un plugin de formulaire différent, consultez le Formes Ninja ou Formes Gravitaires widgets, ou le Mailchimp widget pour les inscriptions.
Conteneur de formulaire et titre
Conteneur de formulaire définit une couleur, un dégradé ou un fond d'image, a Couleur supérieure de la bordure, Largeur du formulaire et Rembourrage de formulaire. Le Titre section définit la couleur, l'alignement et la typographie d'un en-tête à l'intérieur de votre balisage de formulaire, si votre formulaire en comporte un.
- Définissez la largeur de la forme en dessous de 100 % pour centrer une forme étroite dans une colonne large.
- La couleur de la bordure supérieure fonctionne comme un simple accent au-dessus de la forme.
- Le rembourrage donne la place du formulaire à l'intérieur d'une carte colorée.
Champs et étiquettes
Entrée et zone de texte définit la couleur d'arrière-plan, la couleur du texte, le remplissage, Largeur du champ(en), rayon de bordure et de bordure pour les champs de texte, les zones de texte et les menus sélectionnés. Étiquettes a sa propre couleur et typographie, les noms de champs peuvent donc se démarquer de ce que les visiteurs tapent.
- La largeur du champ fonctionne en pourcentage, pratique pour les mises en page à deux colonnes intégrées dans votre balisage de formulaire CF7.
- Les cases à cocher, les boutons radio et les entrées de fichiers conservent votre thème ou votre style CF7.
- Gardez suffisamment de contraste entre le fond du champ et le texte pour l'accessibilité.
Soumettre des messages de bouton et d'erreur
Soumettre le bouton a la typographie plus les onglets Normal et Hover : arrière-plan, couleur du texte et couleur de la bordure pour Normal, et couleur de fond et de texte pour Hover La largeur de la bordure, la couleur de la bordure, le rayon et le remplissage sont définis sous les onglets Erreurs styles de section Messages d'erreur sous champs et Erreurs de validation pour l'ensemble du formulaire, et dans l'onglet Contenu, vous pouvez afficher ou masquer chacun d'eux.
- Le bouton par défaut est violet (#6e00e9) avec du texte blanc, définissez donc les couleurs de votre marque.
- Cacher les erreurs de champ rend le formulaire plus rangé, mais les visiteurs s'appuient ensuite sur le message au niveau du formulaire.
- Il n'y a pas de contrôle d'icônes pour le bouton Pour en ajouter un, voir comment ajouter une icône Font Awesome au bouton de soumission du formulaire de contact 7.
Foire aux questions pour le formulaire de contact 7
Comment puis-je connecter cela à mes formulaires de formulaire de contact 7 existants ?
Dans l'onglet Contenu, ouvrez Sélectionnez Formulaire de contact. Il répertorie chaque formulaire que vous avez créé dans le formulaire de contact 7. choisissez-en un et le widget l'affiche avec le design que vous avez choisi.
Mon formulaire enverra-t-il toujours des e-mails et fonctionnera-t-il comme configuré dans le formulaire de contact 7 ?
Oui. Le widget ne change que l'apparence du formulaire. Les champs, les paramètres de messagerie, les messages et la protection anti-spam restent dans le formulaire de contact 7 et fonctionnent au fur et à mesure que vous les installez là-bas.
Le widget Formulaire de contact 7 est-il gratuit ?
Oui, le widget fait partie du plugin gratuit Master Addons, et Style One to Style Four sont gratuits Style Five to Style Eleven besoin Maître Addons Pro. Le formulaire de contact 7 lui-même est également gratuit.
Ai-je besoin du plugin Contact Form 7 ?
Oui. Ce widget style Formulaires Contact Form 7, donc le plugin gratuit Contact Form 7 doit être installé et actif Sans lui, le widget affiche une note “Contact Form 7 is Not Activated”.
Que se passe-t-il si j'ajoute un nouveau champ dans le plugin Contact Form 7 ?
Modifiez le formulaire dans le formulaire de contact 7 et enregistrez Le widget affiche le formulaire mis à jour, et vos styles de champs et d'étiquettes s'appliquent au nouveau champ car ils ciblent tous les champs de texte et les étiquettes Actualisez l'éditeur Elementor si l'aperçu ne se met pas à jour.
Ai-je besoin de connaître CSS pour styliser mes formulaires ?
Non pour les couleurs, les bordures, l'espacement et la typographie, qui sont tous des contrôles de panneau La disposition à l'intérieur du formulaire, comme mettre deux champs côte à côte, provient de votre balisage de formulaire Formulaire de contact 7.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
