Home | Forms | Styling Forms Using CSS: Input Fields and Buttons

Styling Forms Using CSS: Input Fields and Buttons

When it comes to brand standards, no detail should be overlooked. After all, cohesive branding helps build brand awareness and ultimately trust. Fortunately, ClickDimensions can help you address many different details of your branding – including your web forms. The web content code editor allows you to customize your ClickDimensions forms to easily adhere to your company’s brand standards. Often, this can be particularly useful if you’re embedding your form as an iframe on your company’s site and want a cohesive visual experience. If you’re well-versed in CSS, read on for some quick instructions about adding custom fonts and colors to the form’s input fields and submit button. If you’re new to CSS, start by reviewing this blog post, which describes in detail some of the why and how behind this code.

As a first step, import your company’s font – for example, Roboto.

Next, apply the font to the body of the form:

Then, style the input fields:

This code will instruct the form to present any inputted text as Roboto at a size of 14. The “!important” ensures this style is respected throughout the form and isn’t overwritten by anything else in the stylesheet.

The first line of code regarding the border removes all border styling. The second line then applies a navy, solid 2px line at the bottom of the input field.

To complete styling the input fields, the labels will also need styling.

Finally, style the Submit button. It’s easiest to add the color from the button properties. You can paste your hex color code in directly.

Then, add your font, remove the border, and adjust the height and width:

So now, the form has gone from this:

To this:

Happy Marketing!

2018-08-07T13:28:36+00:00 By |Forms|0 Comments

About the Author:

mm
Emma D'Arcy is a ClickDimensions Product Consultant.

Leave A Comment