Web Development Documentation

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 > Forms
3. Click the title of the form to be edited
4. Click the Fields button at the top:
   
    
5. To modify an existing field, click the field label (see #1 below).
6. To create a new field, click New (see #2 below).
   
   

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.  
  
  
• The other parameters will vary based on the type of field you are editing or creating, as shown in the following screenshots.

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. 

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.

When creating a Check Box Group field, click the New Option button for each check box that should appear in the group.  Each check box needs a "Value" (what will be stored in the database) and a "Label" (what the person filling out the form sees).

Email

An email field will only accept a properly formatted email address (e.g. or ).  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.  For #4 below - Required checkbox is optional. 

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.

Radio Button

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

File Upload

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

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 (Make sure to hit save and close above to exit out of the form field you are working on, if you do not see this option)
• Click the "Advanced" tab
• Scroll to the bottom and find the Fileuploads settings:
  
  
• Change "Uploaded Files Directory" from "/tmp" to another valid folder within the website.  Recommended: create a new folder in Media that will only be used to store file uploads from a specific form.
• 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
•  When done, click Save & Close. 

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).

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.

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."
• When done, click Save & Close. 

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.