[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[Zichtbaar]

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

IMH

Wil je een snelle website?

Wie ben ik voor de gek aan het houden? Doen we dat niet allemaal?

Dus waarom worstelen zovelen van ons?

De grootste uitdaging is meestal het vinden van een snel, betrouwbaar hostingbedrijf.

We hebben allemaal de nachtmerries meegemaakt - ondersteuning duurt een eeuwigheid of lost ons probleem niet op, altijd iets aan jouw kant de schuld geven... 

Maar het grootste minpunt is dat de website altijd traag aanvoelt.

At CollectiveRay we hosten met InMotion-hosting en onze website is stom snel. We draaien op een custom stack van LightSpeed ​​server setup op MariaDB met een PHP7.4 engine en via Cloudflare. 

Gecombineerd met onze front-end optimalisaties bedienen we elke dag betrouwbaar 6000 gebruikers, met pieken van 50+ gelijktijdige gebruikers. 

Wil je een snelle installatie zoals de onze? Breng uw site gratis over naar InMotion-hosting en ontvang onze 50% KORTING op de huidige prijzen.

Probeer InMotion Hosting met 50% KORTING voor CollectiveRay bezoekers ALLEEN in maart 2024!

InMotion-hosting 50% KORTING voor CollectiveRay bezoekers

Laat hieronder gerust een opmerking achter of stel een vraag!

Over de auteur
David Attard
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.

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