CSS for form input fields and text fields

Today a reader told me that the input fields in my contact form are barely legible because the writing is not. I took a quick look at it and could only agree with her: The font size was well below that of the body text in my blog. To adapt this, you can insert a custom CSS in the theme settings, which you can use to visually change the input fields and text fields in the form.

CSS class for forms as a starting point

The best way to change a form is to give it a class, which you then define in the CSS. In the HTML source code of the form tag it looks like this:

In the CSS itself you can then make the definition with changes to the font size and other attributes:

.wpcf7-form input [type = "text"], .wpcf7-form input [type = "email"], .wpcf7-form textarea {font-size: 120%; color: # 333333;}

In this example, the name “wpcf7-form” is the class that the plugin specifies for the contact form. You can of course name them whatever you want.

You can also be creative with the attributes. For example, you can use images as backgrounds for text area elements or play with the font colors and fonts. To list all possibilities here would go beyond the scope.

Select and Option elements

I didn't need these two groups for my minimalist form, but if you also want to redesign option fields and select boxes, you can do this with the following CSS entries:

.wpcf7-form optgroup {font-size: 15pt; color: # ff0000;} .wpcf7-form select {width: 250px; font-size: 1.2em;}

I hope I was able to help you with your CSS tinkering with HTML forms with this little guide. If you have any additions or questions, please add them as a comment.

Jen Kleinholz( Founder & Sir Apfelot )

Jens has been running the blog since 2012. He acts as Sir Apfelot for his readers and helps them with technical problems. In his spare time he rides electric unicycles, takes photos (preferably with the iPhone, of course), climbs around in the Hessian mountains or hikes with the family. His articles deal with Apple products, news from the world of drones or solutions to current bugs.