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 fully customize your form.

You'll find below the code for the most common customization requests. Here's how to use it:

1. Open your form in the Form Builder.
2. Click on your form's name in the outline and open the 'advanced' properties panel.
3. Copy and paste the code in the "Custom Code" field:
4. Save.

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 "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.