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

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.