[Jak] zmienić kolor tekstu w formularzu kontaktowym 7

Czy wiesz, że Contact Form 7 pozwala zmienić kolor tekstu zastępczego?

Jeśli kiedykolwiek używałeś Contact Form 7, to być może zauważyłeś, że ma domyślny kolor tekstu zastępczego. Możesz dostosować tekst zastępczy, korzystając z wbudowanych opcji Contact Form 7 — lub nawet dostosować go za pomocą CSS!

W tym artykule pokażemy, jak zmienić kolor tekstu zastępczego w Formularzu kontaktowym 7, a także zamieścimy przykłady kodu dla obu metod.

{automatycznie}

We've discovered that a lot of clients in our support forum are having trouble with setting or changing the font color of contact form 7 placeholder text.

Contact form 7 is one of the most popular WordPress plugins today, allowing you to create basic or complex contact forms on your WordPress site. We've written already how to fix errors in sending Contact Form 7 nessages.

We'll show you how to customize text color with custom code: If you're unfamiliar with coding but need a simpler and easier-to-use forms builder plugin, try WPForms.

CSS for CF7 Placeholder Text

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

Use !important tag

The "!important" tag is used to guarantee that other styles are not applied to these CSS selectors. This ensures that the style works. If you want the style to be used only on contact form 7 fields, you may use this:

.wpcf7::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}

If you need to expose one specific contact form on your site without altering other contact forms 7, look for the form identifier as follows:

Right-click the element in question and select Inspect Element. Shortcuts: F11 (Windows) or CMD + SHIFT + C (MAC) Locate the ID and replace ‘wpcf_id' with it in this code:

#wpcf_id::placeholder {
    color: #000 !important;
    opacity: 1;
}

Feel free to leave a remark or ask a question below!