Home | Forms | Styling a Form Body Using CSS

Styling a Form Body Using CSS

ClickDimensions forms can be either embedded onto another page directly as an iframe or widget, or can be accessed via a link. By default, when a form is accessed via a link, it opens a new page where the only content on the page is the form. This is functional, but can look a little bland since there is nothing that specifically defines where the form ends and the page begins. Thankfully, we can spice things up a bit by adding some CSS for the form tag in the form code editor.

The following CSS examples present ways that you can style the body of a form in order to differentiate it from the page and better align it to your company branding.

To begin, this is what our form looks like before we add any styling:

First, we will set the background color for the form. This will allow us to differentiate between what is actually the form and what is the surrounding page. The background color is set using the background-color attribute, and I chose #ededed for the color, which is a hexadecimal value for a light shade of gray.

form{

background-color: #ededed;

}

We now have a background color, but we have a lot of extra space on the right since we are only using two columns of the form. To fix that, we will decrease the form width. The width is controlled using the width attribute, and the "!important" at the end is a modifier that says this width should take precedence over the preexisting width in the form's HTML.

form{

width: 500px !important;

background-color: #ededed;

}

Now that we have reduced the width, we can address the issue of the form content being too close to the edge of the form. We can do this using the padding attribute. I have added 20px of padding to the top of the form and 10px of padding to the left side of the form to move the content further away from the top and left edges.

form{

width: 500px !important;

background-color: #ededed;

padding-top: 20px;

padding-left: 10px;

}

Now that the form is more cleanly laid out, we can add some aesthetic flourishes. First, we will add a border to the form and round the corners. The border is defined using the border attribute, which includes three parameters. The first parameter defines how thick the border is, the second parameter defines the color of the border and the third parameter defines the visual style of the border. In this example, the border is 1 px thick, dark gray and a solid line.

The rounded corners are defined by the border-radius attribute, where the pixel value indicates the intensity of the corner rounding (the larger the value, the rounder the corners).

form{

width: 500px !important;

background-color: #ededed;

padding-top: 20px;

padding-left: 10px;

border-radius: 20px;

border: 1px #b0b0b0 solid;

}

Finally, we add a drop shadow to the form. The drop shadow is defined using the box-shadow attribute. There are four parameters included in the box shadow attribute. The first controls how many pixels the shadow is shifted left or right from the form, the second parameter controls how many pixels the shadow is shifted above or below the form, the third parameter adjusts the intensity of the shadow's blur and the last parameter defines the color of the shadow.

form{

width: 500px !important;

background-color: #ededed;

padding-top: 20px;

padding-left: 10px;

border-radius: 20px;

border: 1px #b0b0b0 solid;

box-shadow: 8px 8px 15px #b0b0b0;

margin-bottom: 20px;

}

These are only a few of the form styling options that you can use; try experimenting and see what works best for you!

Written by Rhys Saraceni, ClickDimensions Marketing Success Manager Team Lead

2017-05-11T18:03:58+00:00 By |Forms|1 Comment

About the Author:

mm
Rhys Saraceni is a Training Developer at ClickDimensions.

One Comment

  1. Jorge July 19, 2017 at 1:30 pm - Reply

    Thank you very much!
    very useful and well explained
    best regards

Leave A Comment