[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/E-mail: David@collectiveray.com

David heeft de afgelopen 21 jaar in of rond de online en digitale industrie gewerkt. Hij heeft ruime ervaring in de software- en webontwerpindustrie met behulp van WordPress, Joomla en de niches eromheen. Hij heeft gewerkt met softwareontwikkelingsbureaus, internationale softwarebedrijven, lokale marketingbureaus en is nu hoofd Marketing Operations bij Aphex Media - een SEO-bureau. Als digitale consultant ligt zijn focus op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door gebruik te maken van een combinatie van hun website en digitale platforms die vandaag de dag beschikbaar zijn. Zijn mix van technologische expertise gecombineerd met een sterk zakelijk inzicht geeft zijn geschriften een concurrentievoordeel.