How to Customize the Look of Your Forms with CSS

The online form builder allows you to easily change the layout and colors of your forms when these are embedded into your website. This article discusses how to further customize the look of your online forms by providing your own CSS stylesheet. You can create one (or more) CSS stylesheet for each form.


The feature discussed in this article is UNOFFICIAL. It is NOT PART OF ANY FORMSMARTS COMMERCIAL OFFERS and we do not provide direct support for it. Feel free to post questions at the bottom of this page. Changing the layout of a form may prevent it to display consistently across browsers.

Verify Your Site & Upload a Logo

To be able to use your own CSS stylesheet, your first need to verify your site and upload a site logo. Uploading a logo creates a website profile on FormSmarts and will allow you to provide your own CSS stylesheet. The logo will be shown on the standalone version of your forms and also on PayPal if you’re using Advanced Payment Integration.

Create a CSS Stylesheet

The CSS code in your stylesheet will be loaded after the default FormSmarts CSS, so any instructions specified in it will override the default. We give a few examples of customizations in the Example section below. More will follow.

Update the Embed Code on Your Site

In the HTML snippet given in the Form Publishing Info screen of the form creator, change the query string portion of the URL from mode=embed&lay=1 to mode=embed&lay=1&style=form.css, where form.css is the path to the CSS file relative to the root of your website. For example, if your website’s URL is, the CSS file should be at

CSS Styling Examples

Changing the Font and Color of Headings


Changing the Layout of a Form to Multiple Columns

Logical sections defined by headings can be made into separate columns using the following CSS code and changing the iframe width accordingly.


Online form with multiple columns

19 Responses to “How to Customize the Look of Your Forms with CSS”

body {

Note that you can also change the font color in the Form Details screen of the online form builder.

FormSmarts Posted by: FormSmarts | Nov 29th, 2011 5:27 am

How do I change the size, font and color of text?

FormSmarts Posted by: Paul | Nov 29th, 2011 5:23 am

How do I make the space where people type their response larger?

FormSmarts Posted by: Paul | Dec 3rd, 2011 5:30 am

To increase the the height of text area fields, you can use:

.textarea {

FormSmarts Posted by: FormSmarts | Dec 3rd, 2011 5:34 am

UPDATE: You no longer need to upload a logo for the system to pick up your CSS stylesheet.

FormSmarts Posted by: FormSmarts | Dec 20th, 2011 3:07 am

How can I put a series of checkboxes, but only the checkboxes on one row, like this (the underscores are the boxes):

_ 1 _ 2 _ 3 _ 4 _ 5

The rest of the form will be in a single column, with only the checkboxes sharing a single line. I don’t see how to do that using the Headings (and I can’t seem to make “invisible” headings, which would probably be useful).

Posted by: David | Feb 16th, 2012 8:38 am

Hi David,
Headings define sections in the form’s HTML. You’ll need this to define CSS rules that only apply to checkboxes in that section and not to other input fields. Hiding the heading’s text is only a CSS-rule away:

#section_1 .fld:first-child, #section_2 .fld:first-child{display:none;}

Display all checkboxes in section_1 on one line:

#section_1 .fld {width:40px;}
#section_1 .fld .lbl{width:10px;}
#section_1 .fld .inp{width:15px;}

Here is a demo and the CSS. You can view the original form here. For “Please select up to five numbers” I used a Text Block.

Online form put all checkboxes on one row

FormSmarts Posted by: FormSmarts | Feb 16th, 2012 12:06 pm

I’m trying to put the two Drop-Down Lists on the forms I built with FormSmarts on one line. Can you help me to build this.
Thanks in advance.

Posted by: Isaac Levy | Feb 19th, 2012 8:01 am

Hi Isaac,
First you need to add three headings to each of your forms like on this form. On FormSmarts, each heading defines a logical section within a form. We will need this to be able to provide different CSS rules for each section.

Move the first drop-down to the first section and the second one to the second section.

Here is the CSS:

(Headings are only used to define sections, hide the text. )

#section_1 .fld:first-child, #section_2 .fld:first-child, #section_3 .fld:first-child{display:none;}

Reduce the width of the 2 fields so they fit on one line:

#section_1, #section_2{width:200px; float:left;}

Left margin:


Here is a demo and the CSS code.

Online form with drop-down lists aligned horizontally on one row

Note 1: CSS styling won’t work unless you have verified your website. See instruction above.
Note 2: For your form in Hebrew, change “left” and “margin-left” in the CSS code to “right” and “margin-right” respectively.

FormSmarts Posted by: FormSmarts | Feb 19th, 2012 10:19 am

Dear Support,

Before all I am really satisfied with your quick response to my inquiry and sorry to return again about my problem, but I made the changes according to your explanations and this doesn’t work in my site. I really welcome your remarks about this issue.
Thanks in advance

Posted by: Isaac Levy | Feb 20th, 2012 12:56 am

Hi Isaac,
You first need to verify your site in the Settings tab of the online form builder, under Websites.

Once done, save the CSS code into a file on your site, for example
Then change the URL in the HTML code snippet for your form in Portuguese to:

For your form in Hebrew, save the CSS code into another file on your site, say and modify it as explained under Note 2 in my previous reply. Then update the URL in the HTML code for you form to:

FormSmarts Posted by: FormSmarts | Feb 20th, 2012 5:12 am

What can I say after your patient help for me.

Your profissional support don’t me enough words to express my thanks.

Posted by: Isaac Levy | Feb 20th, 2012 9:01 am

Is it possible to change the look and feel of “continue” and “modify” buttons in order to be aligned with those used in my website?

Posted by: Veronica | Mar 12th, 2012 10:05 pm

You can change the look and feel of the buttons with CSS rule like:

input[type="submit"] {

FormSmarts Posted by: FormSmarts | Mar 13th, 2012 7:54 am


I have followed the above example for two fields on one line. However the question marks are below each field instead of to the (right hand) side. Can I amend this?

Also, is it possible to reduce the height of a text area field?

Finally, is it possible to reduce the vertical height between each section/field?


Posted by: Matthew | Nov 15th, 2012 11:18 am

You need to reduce the size of the ‘inp’ div around the input field so the Help icon fits on the same line:

#section_1 .fld .inp, #section_2 .fld .inp {

To resize the text area, you can use:

#section_3 .fld .inp textarea {
height: 200px;

Each field (including the label) is enclosed in a div with the class fld. To reduce the vertical space between fields, change the bottom margin & padding of the div:

.fld {
margin-bottom: .2em;
padding-bottom: .2em;

See the demo form and the full CSS code.

Customize Form CSS - Online Form Builder

FormSmarts Posted by: FormSmarts | Nov 15th, 2012 4:40 pm

Does anyone know how to make the boxes rounded?

Posted by: Cora Collins | Jul 6th, 2013 11:31 pm

This will make rounded text boxes:

input[type="text"], textarea {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Input field rounded corners CSS

FormSmarts Posted by: FormSmarts | Jul 7th, 2013 3:00 am

Can you change the “continue” buttons wording?

Posted by: Liz Earle | Apr 27th, 2015 9:50 am

Leave a Reply

About the Form Builder Blog

The Online Form Builder Blog is published by FormSmarts, a web form service providing all you need to create a form and publish it online in minutes. FormSmarts makes it easy to build a form and embed it on your site. You can then get form submissions by email or store them on FormSmarts and download an Excel report. Learn more about the many other benefits of FormSmarts.