[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.

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 :

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 !

À propos de l’auteur

Auteur : David AttarSite Web : https://www.linkedin.com/in/dattard/E-mail: David@collectiveray.com

David travaille dans ou autour de l'industrie en ligne et numérique depuis 21 ans. Il possède une vaste expérience dans les secteurs des logiciels et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. Il a travaillé avec des agences de développement de logiciels, des éditeurs de logiciels internationaux, des agences de marketing locales et est désormais responsable des opérations marketing chez Aphex Media, une agence de référencement. 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 plateformes numériques disponibles aujourd'hui. Son mélange d'expertise technologique combiné à un fort sens des affaires confère un avantage concurrentiel à ses écrits.