The Online Form Builder Blog

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.

Disclaimer

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=css/form.css, where css/form.css is the path to the CSS file relative to the root of your website. For example, if your website’s URL is http://www.example.com, the CSS file should be at http://www.example.com/css/form.css.

CSS Styling Examples

Changing the Font and Color of Headings

h2{
font-family:serif;
font-size:14px;
color:orange;
}

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.

#section_1{
width:350px;
float:left;
}
#section_2{
width:350px;
float:right;
}

Online form with multiple columns

Posted by FormSmarts on Monday, November 21, 2011 at 3:16 pm in form builder.
Permalink | Comment
Tags: , , , ,

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

body {
font-family:verdana;
font-size:14px;
color:green;
}

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

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

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

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

.textarea {
height:250px;
}

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

Posted by: FormSmarts | December 20th, 2011 at 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 | February 16th, 2012 at 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

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.

http://formsmarts.com/form/wu9
http://formsmarts.com/form/wuy

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:

#section_1{margin-left:50px;}

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.

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

Hi Isaac,
You first need to verify your site http://www.integrazia.com 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 http://www.integrazia.com/css/formsmarts-pt-br.css
Then change the URL in the HTML code snippet for your form in Portuguese to: http://formsmarts.com/form/wuy?mode=embed&lay=1&lang=pt-br&style=/css/formsmarts-pt-br.css

For your form in Hebrew, save the CSS code into another file on your site, say http://www.integrazia.com/css/formsmarts-he.css and modify it as explained under Note 2 in my previous reply. Then update the URL in the HTML code for you form to: http://formsmarts.com/form/wu9?mode=embed&lay=1&lang=he&style=/css/formsmarts-he.css

What can I say after your patient help for me.

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

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 | March 12th, 2012 at 10:05 pm

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

input[type="submit"] {
color:blue;
}

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

Hi,

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?

Thanks!

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

Matthew,
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 {
width:100px;
}

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

Does anyone know how to make the boxes rounded?

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

Cora,
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

Leave a Reply

Email will not be published.

Connect with FormSmarts


Get updates by email (~1 email/month):

Got a Question?

Got a question about FormSmarts?
Ask FormSmarts Sales!

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.
Your AccountHelpFormSmarts