[Hvordan] Endre kontaktskjema 7 Plassholdertekstfarge

Visste du at kontaktskjema 7 lar deg endre fargen på plassholdertekst?

Hvis du noen gang har brukt kontaktskjema 7, har du kanskje lagt merke til at den har en standard plassholdertekstfarge. Du kan tilpasse plassholderteksten ved hjelp av kontaktskjema 7s innebygde alternativer-eller til og med tilpasse den med CSS!

Denne artikkelen viser hvordan du endrer kontaktskjema 7s plassholdertekstfarge og gir kodeeksempler for begge metodene.

innhold[Show]

Vi har oppdaget at mange klienter i vårt supportforum har problemer med å angi eller endre skriftfargen på kontaktskjema 7 plassholdertekst.

Kontaktskjema 7 er en av de mest populære WordPress -pluginene i dag, slik at du kan lage grunnleggende eller komplekse kontaktskjemaer på WordPress -nettstedet ditt. Vi har allerede skrevet hvordan du fikser feil ved sending av kontaktskjema 7.

Vi viser deg hvordan du tilpasser tekstfarge med tilpasset kode: Hvis du ikke er kjent med koding, men trenger en enklere og enklere å bruke skjemabygger-plugin, kan du prøve WPForms.

CSS for CF7 plassholdertekst

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

Bruk! Viktig tag

"! Viktig" -taggen brukes til å garantere at andre stiler ikke brukes på disse CSS -velgerne. Dette sikrer at stilen fungerer. Hvis du vil at stilen bare skal brukes på kontaktskjema 7 -felt, kan du bruke denne:

.wpcf7 ::-webkit-input-placeholder { / * WebKit-nettlesere * / farge: #000! ugjennomsiktighet: 1; }

Hvis du trenger å avsløre et bestemt kontaktskjema på nettstedet ditt uten å endre andre kontaktskjemaer 7, ser du etter skjemaidentifikatoren som følger:

Høyreklikk på det aktuelle elementet og velg Inspiser element. Snarveier: F11 (Windows) eller CMD + SHIFT + C (MAC) Finn IDen og erstatt 'wpcf_id' med den i denne koden:

#wpcf_id :: plassholder {farge: #000! viktig; ugjennomsiktighet: 1; }

Legg igjen en kommentar eller still et spørsmål nedenfor!

om forfatteren

Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/

David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.

tilbake til toppen