In this lesson we’ll learn how to add fields to your form, and how each type of field works. To begin, click the edit button on a form that you have already created. To learn how to create a new form, take a read through FormBuilding 101.

Each field that you create in this interface will corrospond to a field that will appear on the finished form. To create your first field on the new form, click the “Add New Field” button now. This will add the first field to your form, giving you a number of options that you can use to specify how the field will function.

Once the field has finished loading, you will see a number of buttons along the top line beside the field number label. These buttons function in the following way:

  1. Add another
    Add another field to your form, pushing this one down.
  2. Delete
    Remove this field.
  3. Move Up
    Move this field up in the list of fields until it reaches the top.
  4. Move Down
    Move this field down on the list of fields until it reaches the bottom.

Once you are familiar with how the field control buttons work, we can move on to discussing how to create fields for your form.

FIELD TYPES:

The first item in the controls for your field is the FIELD TYPE. Using this dropdown you can select what type of field you want to create. There are a number of options here which we will discuss here. If you’d like to see an example of any of these click here for our sample page.

  1. Single Line Text Box
    Displays a standard single line text box on your form.
  2. Small Text Area
    A small text entry area, with vertical and horizontal scroll bars if needed.
  3. Large Text Area
    A large text entry area, with vertical and horizontal scroll bars if needed.
  4. Password Box
    A standard form password box. Data entered in this box will be hidden.
  5. DateStamp
    You can specifically request a datestamp to be entered here, along with showing the visitor an easy-to-use calendar.
  6. Checkbox
    A simple checkbox. Can be either checked or unchecked.
  7. Radio Buttons
    Multiple radio buttons with a single label. Each radio button option must be specified on a new line in the FIELD VALUE.
  8. Selection Dropdown
    A dropdown box with selectable options. Each selection option must be specified on a new line in the FIELD VALUE.
  9. Hidden Field
    If you wish to have additional data sent when the form is completed, you can put it into a Hidden Field. The field will not show on the form, but the data you put on the FIELD VALUE will be sent in the email.
  10. Comments Area
    Data that you put in the FIELD VALUE of a Comments Area will appear as a comment in your form. The display of these comments can be customized by modifying the FormBuilder CSS.
  11. Followup Page
    A special field just for indicating a followup url once the form has been submitted.  Put the url you want people to be redirected to in the field value and once they have successfully filled out the form they will be sent to this new page.
  12. Recipient Selection
    A special selection dropdown allowing the visitor to specify an alternate form recipient.  Enter values in the form of email@domain.com|Destination Name.  Read more here…
  13. Captcha Field
    Special field on the form for displaying CAPTCHAs.  Field name is used for identifying the field.  Field label is used to give the visitor further instruction on what to fill out.
  14. Spam Blocker
    Special field on the form to help prevent spam. Only needs a FIELD NAME.  Read more here.
  15. Page Break:
    Allows you to break your form into multiple pages.  Needs field name and field label.  There will be a “next page” button at the spot where you place this form field.
  16. Submit Button:
    Allows you to put a customized submit button anywhere on the form.  Needs field name and field label.  You only need to include a submit button on your form if you want to customize it in some way.
  17. Submit Image:
    Allows you to put a customized submit image anywhere on the form.  Needs field name and field label.  Field label must be the PATH TO THE IMAGE to be used for the submit button.

FIELD NAME:

The FIELD NAME is the name that you would like to give to this field. When the form data is submitted, it will be converted into an email and this name will be used as a label in the email for the data in this field.

FIELD VALUE:

In some cases, you may wish to have a predefined value for your form field. For example, if you have a text box and want to start with some text in it, you can put that text in here. The field value is also used for the Radio Button and Selection Dropdown field types. Each radio button or selection item can be placed on a new line here in the field value, and will appear appropriately on the form. If your field type is a Comments Area, the information you put in the field value will be used as the comments on the form.

FIELD LABEL:

This is the label that will appear in front of this field when the form is displayed. In some field types such as the Hidden Field, Comments Area and Spam Blocker, the field label is not used.

REQUIRED DATA:

You may use this dropdown list to select what type of data, if any, should be required in this field, for the form to submit successfully. Obviously, you would want to be careful that your data requirements match the type of field you are creating. For example, if you have a checkbox field type, you would not want to require that an email address be entered in that spot.

  1. Any Text
    Requires that the user put some text in the field, before the form will submit successfully.
  2. Email Address
    Requires a properly formed email address.
  3. Confirm Email
    Will attempt to compare it’s data against the most recently entered email address field.
  4. Phone Number
    Requires a number that follows the general pattern of a phone number.
  5. Any Number
    Requires a number to be entered.
  6. Valid URL
    Requires the entered information to look like a link. (ie. http://www.domain.com/path/file.html)  It will NOT check whether the link actually exists.
  7. Single Word
    Make the visitor enter a single word with no spaces in this field.
  8. DateStamp
    Works in conjunction with the datestamp field type to require data in the form of DD/MM/YYYY

ERROR MESSAGE:

This message is shown in the event that the data entered in the field does not match the Required Data format. It is also shown in the title tag of the form field.