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

Inhoud[Producten per pagina]

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:

verander cf7 tijdelijke aanduiding tekst

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
David Attard
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.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...