Cusomize your contact form on any template

Step One

First start out by copying this code below into your Custom CSS section of your website. You can find this by going to DESIGN > ADVANCED > CUSTOM CSS.

.form-wrapper .field-list .field .field-element{
  border:none;
  border-bottom: 3px solid;
  border-color: #000000;
  background: #fff;  
}

Step Two

Now we will make some changes to the form so that it matches your branding. You can change the color of the underline if you change the color of the hex code (#000000) to the color that matches the rest of your brand:

border-color: #000000;


Step Three

Let’s say you are looking for a different size for the line. Maybe you are looking for something a little thiner, you would change the ‘px’ number to something smaller. So in the example below, we have this:

 border-bottom: 3px solid;

If we adjust the pixel number to something like ‘2px’, it could look something like this:

border-bottom: 2px solid;

And if you are looking for something just a little thiner than that, you could change it to:

border-bottom: 1px solid;

With the thiner line, you should end up with this result:

Name *
Name

You can even add a dashed line if that's up your alley. 

border-bottom: 1px dashed;
Name *
Name