Web Development Documentation

Visforms: Form Fields

Overview

Once a form has been created in Visforms, you can add or edit the form fields as needed.

Procedure

Modifying existing fields or adding new fields

  1. Login to the back end of the website.
  2. Go to: Components > Visforms
  3. Click the "Forms" icon
  4. Click the title of the form to be edited
  5. Click the Fields button at the top:"Fields" button in Visforms
  6. To modify an existing field, click the field label (see #1 below).
  7. To create a new field, click New (see #2 below).

    Vvisforms: Editing or creating fields

 

Identifying or selecting field type

  • When editing an existing field, take note of the "Type" selection (see below example).  This will let you know what type of field you are editing. 
  • When creating a new field, select the type of field to add from the "Type" selection.  

    Visforms: Field type selection

  • The other parameters will vary based on the type of field you are editing or creating, as shown in the following screen shots.

Commonly used field types

Text Field

Text fields are the most common type of form field.  This field will accept text entered by the form submitter.  You can check the "Required" checkbox to make a text field - or any field - required (meaning that the form cannot be submitted unless the required field is completed).  Some examples of text fields are first name, last name, title, department, and organization. 

Visforms: Text field

Check Box Group

A check box group field displays a list of options with a check box for each option.  The user of the form can select one or more options.

Visforms: "Check Box Group" field

Email

An email field will only accept a properly formatted email address (e.g. This email address is being protected from spambots. You need JavaScript enabled to view it. or This email address is being protected from spambots. You need JavaScript enabled to view it.).  If you make the email field required, and the website visitor does not enter a valid email address, the form will display an error when the visitor tries to submit the form.

visforms: Email field type

Text Area

A text area field is similar to a text field, but allows multiple rows of text to be entered (default: 3 rows).  Some examples of text area fields are questions, comments, or any kind of message that spans multiple lines.

Note: while you can enable the "HTML Editor" setting for this field type, we have noticed that HTML-formatted text can cause problems if the form data is being saved, so avoid enabling this option.

Visforms: "Text Area" field

Radio Button

A radio button field is similar to a check box group field, but only one option can be selected.

Visforms: "Radio Button" field

File Upload

A File Upload field allows the form user to upload a file.

Visforms: "File Upload" field

Since uploaded files to website can present a security risk, you should modify the form settings as follows:

  • Click the Back to form button at the top
  • Click the "Advanced" tab
  • Scroll to the bottom and find the Fileuploads settings:

    Visforms: Form File Upload Settings

  • Change "Security Level for File Uploads" to "High" (see #1 above)
  • Remove any inappropriate file extensions from the "Allowed File Extensions" list (see #2 above and examples below).
  • Add any appropriate file extensions to the "Allowed File Extensions" list, separated by commas (see examples below). 
  • Examples:
    • Resume file upload:
      • remove any non-document file extensions from the list - for example, image file extensions such as bmp, gif, ico, jpg, jpeg, odg, png, and xcf.  Make sure you also remove the corresponding UPPERCASE extensions (for example, BMP, GIF, ICO, JPG, JPEG, etc).
      • add any needed document file extensions such as .docx and .DOCX
      • Your modified list might look something like this:
        • doc,docx,odt,pdf,txt,DOC,DOCX,ODT,PDF,TXT
    • Photo file upload
      • remove any non-image file extensions from the list - for example, document file extensions such as doc, odp, ods, odt, pdf, ppt, swf, txt, and xls.  Make sure you also remove the corresponding UPPERCASE extensions (for example, DOC, ODP, ODS, ODT, PDF, etc).
      • add any needed image file extensions such as .tiff and .TIFF
      • Your modified list might look something like this:
        • bmp,gif,ico,jpg,jpeg,odg,png,tiff,xcf,BMP,GIF,ICO,JPG,
          JPEG,ODG,PNG,TIFF,XCF

Select

A select field shows options in a dropdown menu.  By default, only one option can be selected.  You can check the "Allow multiple selection" box to allow form users to select multiple options from the dropdown menu by holding the [Ctrl] key (Windows) or [Cmd] key (Mac).

Visforms: "Select" field

Submit Button

The submit button field is necessary to allow form users to submit the form.  It should be the last field in your form.

Visforms: "Submit Button" field

Advanced Tab (on all Fields)

While editing any field, you can add text to appear above the form label, above the form input, or below the form input.

  • Click the "Advanced" tab while editing the field
  • Scroll down to "Custom Text Position"
  • Select the desired location of the custom text (above the form label, above the form input, or below the form input)
  • For "Custom Text," Enter the text to be displayed in the selected location
  • Example: If you have enabled multiple selections for a select field, you can enter instructions in the "Custom Text" field:
    • "Hold the [Ctrl] key (Windows) or [Cmd] key (Mac) to select multiple options."

Visforms: Advanced Tab (on all Fields)

Finishing up

  • After editing each field, click Save & Close to return to the list of fields.
  • When done editing fields, click the Back to form button at the top, then click Save & Close to save the form.