103 Form Builder: The Form Settings Tab

WebStore
1

Form Index

The Add a Form Field Tab

###Overview

9db9bd044aabf23a.png1014×789 50.3 KB

At the heart of all forms are the fields that you want the user to fill out. This tab allows you to add these fields to your form.

You can add the field types that you are interested in to your form by clicking on the buttons on the left. The selected field type will appear with some placeholder text in the preview panel to the right.

Don’t worry about the order you place the fields, you can always drag and drop the fields in the preview panel to re-organize the order they appear in the final form.

Field Types

The easiest way to see what a field does is simply to add one and fiddle! you can always remove a field later. The following is a list of the fields that can be added with explanations where the field type is not obvious.

  1. Add a text field : the basic text input;
  2. Add submit field : this is the button that the user presses to signal that they have entered the required information and would like the information dealt with;
  3. Add select field : a select field is the HTML code for a drop down menu, useful where you want to limit the users choice to a limited range of options;
  4. Add checkbox field : The checkbox is unusual in that the label is always displayed to the right of the checkbox regardless of whether you asked for the label to be above or to the left;
  5. Add textarea : a text area, useful for when you want a user to enter a block of text;
  6. Add radio field : radio fields;
  7. Add number field : number field. Note that you can set all sorts of limitations on the number entered using min, max and step;
  8. Add email field : a version of the textfield that is checked to see if the value entered is a valid email address;
  9. Add hidden field : useful for when you need data returned without the user knowing that the data is there;
  10. Add paragraph field : not strictly an input field but useful in forms. Allows you to add a paragraph of text any where in your form. This can be useful when directing the user in how to fill out your form;

Next: 104 The Edit Field Tab

2

James,
I’ve created a form for one of our static pages, but there are a few formatting issues that I haven’t been able to resolve. No matter what number I put in “Field Maximum Length”, the field shows up on the website (beta responsive design) as the length of the entire page. The other issue is how to implement the styling from our css to the fonts on the form. I’m not experienced w/css, but I’d like to edit this form so it matches the styling on the rest of our website. Thanks!

3

Lauren

Field Maximum Length is an attribute that limits the number of characters that can be entered into an input field. What the field looks like is governed by CSS. If you’re not happy with the default form layout then you’re better of employing a designer (or asking our wonderful design team to help you out :slight_smile: )

Design issue - matching form styling in website - @michael_rosa

Wish I lived closer to Seattle, chocolate tasting session sounds amazing!

James