[Hoe] Contactformulier 7 Tijdelijke tekstkleur wijzigen

Wist u dat u met Contact Form 7 de kleur van plaatsaanduidingstekst kunt wijzigen?

Als je ooit Contact Form 7 hebt gebruikt, is het je misschien opgevallen dat het een standaard tijdelijke tekstkleur heeft. U kunt de tekst van de tijdelijke aanduiding aanpassen met behulp van de ingebouwde opties van Contact Form 7, of zelfs aanpassen met CSS!

Dit artikel laat zien hoe u de Placeholder-tekstkleur van Contactformulier 7 kunt wijzigen en geeft codevoorbeelden voor beide methoden.

We hebben ontdekt dat veel klanten op ons ondersteuningsforum problemen hebben met het instellen of wijzigen van de letterkleur van de plaatsaanduidingstekst voor contactformulier 7.

Contactformulier 7 is een van de meest populaire WordPress-plug-ins van vandaag, waarmee u eenvoudige of complexe contactformulieren op uw WordPress-site kunt maken. We hebben al geschreven hoe fouten op te lossen bij het verzenden van Contactformulier 7-berichten.

We laten u zien hoe u de tekstkleur kunt aanpassen met aangepaste code: als u niet bekend bent met coderen, maar een eenvoudigere en gebruiksvriendelijkere plug-in voor het maken van formulieren nodig heeft, probeer dan WPForms.

CSS voor CF7 tijdelijke aanduiding tekst

::-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;
}

Gebruik !belangrijk label

De tag "!important" wordt gebruikt om te garanderen dat andere stijlen niet worden toegepast op deze CSS-selectors. Dit zorgt ervoor dat de stijl werkt. Als u wilt dat de stijl alleen wordt gebruikt in 7 velden van het contactformulier, kunt u dit gebruiken:

.wpcf7::-webkit-input-placeholder { /* WebKit-browsers */ kleur: #000 !belangrijk; dekking: 1; }

Als u één specifiek contactformulier op uw site wilt weergeven zonder andere contactformulieren 7 te wijzigen, zoekt u als volgt naar de formulier-ID:

Klik met de rechtermuisknop op het betreffende element en selecteer Inspect Element. Snelkoppelingen: F11 (Windows) of CMD + SHIFT + C (MAC) Zoek de ID en vervang 'wpcf_id' ermee in deze code:

#wpcf_id::placeholder { kleur: #000 !belangrijk; dekking: 1; }

Laat hieronder gerust een opmerking achter of stel een vraag!

Over de auteur

Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/

David heeft de afgelopen 18 jaar in of rond de online / digitale industrie gewerkt. Hij heeft uitgebreide ervaring in de software- en webdesign-industrie met WordPress, Joomla en niches eromheen. Als digitale consultant richt hij zich op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door een combinatie van hun website en digitale platforms die vandaag beschikbaar zijn.