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. In the Form Builder, click Properties, then Custom Code
3. Paste the code in the “Custom Code” field.
4. Save and test with the address found in the publish tab of your form’s options.

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>

See also: List of fonts suitable for the web.

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.