[Comment] Changer la couleur du texte de l'espace réservé du formulaire de contact 7

Saviez-vous que le formulaire de contact 7 vous permet de changer la couleur du texte de l'espace réservé ?

Si vous avez déjà utilisé le formulaire de contact 7, vous avez peut-être remarqué qu'il a une couleur de texte d'espace réservé par défaut. Vous pouvez personnaliser le texte de l'espace réservé à l'aide des options intégrées de Contact Form 7 ou même le personnaliser avec CSS !

Cet article montrera comment modifier la couleur du texte de l'espace réservé du formulaire de contact 7 et fournira des exemples de code pour les deux méthodes.

Contenu[Afficher]

Nous avons découvert que de nombreux clients de notre forum d'assistance rencontrent des problèmes pour définir ou modifier la couleur de la police du texte de l'espace réservé du formulaire de contact 7.

Le formulaire de contact 7 est l'un des plugins WordPress les plus populaires aujourd'hui, vous permettant de créer des formulaires de contact basiques ou complexes sur votre site WordPress. Nous avons déjà écrit comment corriger les erreurs lors de l'envoi des messages du formulaire de contact 7.

Nous allons vous montrer comment personnaliser la couleur du texte avec un code personnalisé : Si vous n'êtes pas familier avec le codage mais que vous avez besoin d'un plugin de création de formulaires plus simple et plus facile à utiliser, essayez WPForms.

CSS pour CF7 Texte d'espace réservé

::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}

Utiliser la balise !important

La balise "!important" est utilisée pour garantir que d'autres styles ne sont pas appliqués à ces sélecteurs CSS. Cela garantit que le style fonctionne. Si vous souhaitez que le style ne soit utilisé que sur les 7 champs du formulaire de contact, vous pouvez utiliser ceci :

.wpcf7::-webkit-input-placeholder { /* Navigateurs WebKit */ color: #000 !important; opacité : 1 ; }

Si vous devez exposer un formulaire de contact spécifique sur votre site sans modifier les autres formulaires de contact 7, recherchez l'identifiant du formulaire comme suit :

changer le texte de l'espace réservé cf7

Cliquez avec le bouton droit sur l'élément en question et sélectionnez Inspecter l'élément. Raccourcis : F11 (Windows) ou CMD + SHIFT + C (MAC) Localisez l'ID et remplacez « wpcf_id » par celui-ci dans ce code :

#wpcf_id::placeholder { color: #000 !important; opacité : 1 ; }

N'hésitez pas à laisser un commentaire ou à poser une question ci-dessous !

A propos de l'auteur
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...