Form Builder

Introduction

The Form Builder is the heart and soul of Wufoo. This is where all forms are created. The form builder provides the tools to add and remove fields, edit forms, configure email receipts and more. The interface for the form builder is divided into two halves—the right half is a preview of your form while the left half is for editing and building your form.

Requirements

To use the form builder, you will need a Wufoo account. If you want to edit a form, you will need a saved form on your account. If you want to create a new form, you will need room for at least one more form on your account.

Interface Overview

The interface for the form builder is divided into two halves—the right half is a preview of your form while the left half is for editing and building your form.

The left half has three tabs. The Add a Field tab shows the field types available in Wufoo. Click a field type button or drag it to your preview pane to add the field type to your field.

The Field Settings tab allows you to edit the settings for each specific field. Click on a field in the preview pane to start editing that field.

The Form Settings tab allows you to change the properties of the overall form. Click that tab, or the title of your form to edit these properties.

At the bottom of the form builder is the button to save your form.

Adding a Field

To add a field to your form, click on the “Add a Field” tab located at the top left of the building pane. This will bring the field menu into the building pane. Likewise, if your form has at least one field, you can click the “Add Field” button located at the bottom of the preview pane.

Once you have the field menu on the building pane, you can click on the name of the field you would like to add. For example, you could click “Single Line Text,” and this will add a single line text field to your form. Each field that you add is placed directly below the previous field. You can also drag the name of the field directly to the location in the preview pane where you would like the field to be located.

See our list of field types to explore the different possibilities.

Editing a Field

After you have added a field, you can then edit the properties of that field. Properties of a field range from title and instructions to randomization and formatting. To bring up the field properties, just left click on the field in the preview pane. This will populate the builder pane with the field property interface.

Descriptions of each type of field including how it is validated can be found in our field type documentation

Each type of field property is full explained in the field settings documentation.

Form Settings

Every form has a set of properties including what you would like to happen when the user hits the submit button, a description for your form and determining what emails get sent out on submission among other features. To access your form properties you can either click on the form name in the preview pane or you can click the “Form Settings” tab in the upper left hand corner of the building pane. Upon clicking, the form properties panel will appear in the building pane.

For an in depth explanation of all form properties, view the form settings documentation.

Reorder, Duplicate and Delete

There are three actions you can perform from the preview pane: reordering, duplicating, and deleting fields.

Reorder - To reorder your fields, left click and hold on the area surrounding the field. Then drag the cursor up or down to the position you would like the field to be in. When you left go of the left mouse button, the field will snap into its new position. Be careful not to click the orange arrow or the field itself as those spots will not drag the field. Only the surrounding area, which turns yellow if you click on it, can be dragged.

Duplicate and Delete - Click on a field to make it the active field. You can recognize this by a yellow box surrounding the field. At the bottom right corner of the yellow box are two icons: a ‘+’ and a ‘-‘. The ‘+’ is duplicate and the ‘-’ is delete. Pressing ‘+’ will create an exact copy of the field directly underneath it. Pressing ‘-‘� will delete the active field. If the field had been previously saved (meaning data may have been submitted to it) then you will be prompted to confirm the deletion. Otherwise, the field will just be deleted.

The Different Field Types

Information about all of the field types in Wufoo can be found in our list of field types.