Form field tutorial

Dec 16, 2014 2:53 pm

There are three main types of fields that can be added to a form.

  • Custom fields allow you to specify the Unique ID of the field that will be shown in the form submission.
  • Standard fields are fields that collect basic information, such as name, email address, phone, physical address, or company.
  • Static fields are fields that contain static HTML code. They do not collect form information; rather, they are used to display static text on the form. These can be used for section headings, instructions, or other content.

Depending on which modules have been installed, there may be other, module-specific field types available. Use these field types to submit data directly to those modules. The Anti-spam field type is used to add a Re-captcha or other type of field to ensure that the submitter is a human.

The Unique ID must consist of letters, numbers or underscores. If you choose Standard or one of the module-specific field types, the Unique ID will be limited to a list of predefined options based on the information required by that module.

Choose an Input Method appropriate to the kind of information you want to collect.

  • Checkbox: The predefined value will be submitted if the box is checked.
  • Checkgroup: A group of checkboxes, each with its own value.
  • Combobox: A dropdown list of predefined options. The user can select only one.
  • Date: A textbox that can be filled in by clicking a date on an attached popup calendar.
  • File Upload: Allows the user to select a file from their hard drive to upload to the server.
  • Hidden: Automatically submits the predefined value; the user never sees the field or value.
  • Listbox: A list of predefined options. A scrollbar allows the user to scroll through the options.
  • Password: Like a normal textbox except that the text entered is displayed as asterisks.
  • Radio Buttons: A group of buttons, each with its own value. Only one can be selected.
  • Radio Buttons (Decrementing): Like regular radio buttons except that a number is displayed in parentheses after each option which decreases by one each time a form is submitted with that option selected. You can determine the number remaining for each item in the Options List field.
  • Textarea: Allows the user to enter multiple lines of text.
  • Textbox: Allows the user to enter a single line of text.
  • Time: Allows the user to select an hour value and a minutes value.

Enter a Label that will be displayed next to the form field.

The Format option controls where the Label is placed relative to its field.

If a field is Required, the text entered in the Alert Message field will be shown if the user tries to submit the form without entering a value in the field that can be validated by the chosen Input Validator.

Some Input Methods allow you to enter a Default Value which will be entered into the field automatically when the webpage loads.

Some Input Methods have options relating to the size of the field, such as Width, Rows, or Columns. These accept integer values that generally correspond to the size of a letter or line of text in the field.

The Extra Attributes field allows you to enter HTML attributes that will be added to the form field when it is shown on the front end.

Input Methods that require predefined values or options will have a field named Values where you can enter these values. Typically, each value should be entered as a comma separated pair of values on its own line. The first value is what will be submitted with the form. The value after the comma is what will be displayed to the user.

The Overwrite section allows you to replace the HTML code used to generate the form field with your own code. Use this only if you are well versed in HTML code.