[Sådan] Skift kontaktformular 7 Farve på pladsholdertekst

Vidste du, at kontaktformular 7 giver dig mulighed for at ændre farven på pladsholdertekst?

Hvis du nogensinde har brugt kontaktformular 7, har du muligvis bemærket, at den har en standardfarve til pladsholdertekst. Du kan tilpasse pladsholderteksten ved hjælp af kontaktformular 7's indbyggede muligheder-eller endda tilpasse den med CSS!

Denne artikel viser, hvordan du ændrer kontaktformular 7's pladsholdertekstfarve og giver kodeeksempler til begge metoder.

Vi har opdaget, at mange klienter i vores supportforum har problemer med at angive eller ændre skrifttypefarven på kontaktformular 7 pladsholdertekst.

Kontaktformular 7 er et af de mest populære WordPress -plugins i dag, så du kan oprette grundlæggende eller komplekse kontaktformularer på dit WordPress -websted. Vi har allerede skrevet hvordan du retter fejl ved afsendelse af kontaktformular 7.

Vi viser dig, hvordan du tilpasser tekstfarve med brugerdefineret kode: Hvis du ikke kender kodning, men har brug for et enklere og lettere at bruge formularbygger-plugin, kan du prøve WPForms.

CSS til CF7 pladsholdertekst

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

Brug! Vigtigt mærke

"! Vigtigt" -tagget bruges til at garantere, at andre stilarter ikke anvendes på disse CSS -vælgere. Dette sikrer, at stilen fungerer. Hvis du ønsker, at stilen kun skal bruges på kontaktformular 7 -felter, kan du bruge denne:

.wpcf7 ::-webkit-input-placeholder { / * WebKit-browsere * / farve: #000! vigtigt; uigennemsigtighed: 1; }

Hvis du har brug for at afsløre en bestemt kontaktformular på dit websted uden at ændre andre kontaktformularer 7, skal du kigge efter formularidentifikatoren som følger:

Højreklik på det pågældende element, og vælg Inspicer element. Genveje: F11 (Windows) eller CMD + SHIFT + C (MAC) Find ID'et, og erstat 'wpcf_id' med det i denne kode:

#wpcf_id :: pladsholder {farve: #000! vigtigt; uigennemsigtighed: 1; }

Efterlad en bemærkning eller stil et spørgsmål herunder!

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/E-mail: david@collectiveray.com

David har arbejdet i eller omkring online- og digitalindustrien i de sidste 21 år. Han har stor erfaring i software- og webdesignindustrien ved at bruge WordPress, Joomla og nicher omkring dem. Han har arbejdet med softwareudviklingsbureauer, internationale softwarevirksomheder, lokale marketingbureauer og er nu Head of Marketing Operations hos Aphex Media - et SEO-bureau. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencefordel ved at bruge en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag. Hans blanding af teknologisk ekspertise kombineret med et stærkt forretningssans giver hans forfatterskab en konkurrencefordel.