Form Customization Options

How to customize the look and feel of your Form

The Form Builder contains a "Custom Code" field where you can enter CSS and Javascript code to further customize your form.

If you don't know how to write CSS or Javascript code, look at the code samples below. They cover the most common customization requests. If you find what you need, just copy & paste the code. If you need something not documented here, please open a support request. We will be happy to help.

Here's how it works:

1. First, find the code sample you need in the list below.
2. Then go to the 'Forms' tab, select the form and click the "Modify" link to open it in the Form Builder.
3. Click on your form's name in the outline and open the 'advanced' properties panel.
4. Copy and paste the code in the "Custom Code" field.
5. Save and test.

Change the distance between the label and the input (for left aligned labels)

<style type="text/css">
 .wForm .preField {
 	min-width: 9em !important;
 }
 * html .preField {
    width: 9em !important;
 }
</style>

Change the numeric value for a shorter (6em) or larger (15em) space.

Changing the form's font:

<style type="text/css">
 .wFormTitle, .wForm {
 	font-family: 'Lucida Sans Unicode', Lucida Grande, sans-serif;
 }
</style>

Removing the background from your form's theme:

<style type="text/css">
 .wForm form, .wForm fieldset {
    background-image: none !important;
    background-color: transparent !important;
 }
</style>

Removing the default background on forms hosted directly on FormAssembly.com:

<style type="text/css">
.default { background: transparent;}
.default .wFormContainer { width:auto; }
</style>

Removing the "assistance" link below the form

<style type="text/css">
 .supportInfo {
    display: none;
 }
</style>

Note: Before removing this link, please make sure that your form contains sufficient information to contact you if your visitors need help.