Web Development Documentation

Visforms: Creating a Form

Overview

This procedure describes how to set up a simple form using Visforms.  More detailed documentation on using Visforms can be found here.


Getting Started: Creating a new form

  • Log into the Joomla! administrator page for your web site
  • Click on Components > Visforms (see #1 below).

    ComponentsVisform
  • At the Visforms Dashboard click the Forms icon:

    Visforms Dashboard: "Forms" icon

  • Click the New button on the top left:

    NewVisForm
  • For Title, enter a title for your form (see #1 below). 
  • For Name, enter a shortened version of the form title (see #2 below). The form name should not have any spaces or special characters.
  • (Optional) For Description enter any text that should appear at the beginning of the form (see #3 below). 
  • Click Save to the upper left (see #4 below).

    CreateForm

 

Adding form fields

  • Now you need to add fields to your form. Select the Fields button at the top (see #5 above).
  • You will need to create a new field for every field in your form. Select New on the top left to start.
  • Most of the commonly used form field types are shown below.  If you need to add a form field type not shown below, please submit a work order and we will help you.

Text field

Text fields are the most common type of form field.  This field will accept text entered by the form submitter.

  • Enter the field name, as you would like it to appear in the form, next to Label (see #1 below).
  • Enter the field name, but with only lowercase letters and dashes, next to Name (see #2 below). You can shorten the "Name" as long as it is unique (i.e. no other form fields have the same name."
  • Click the dropdown next to Type to select the type of field (see #3 below). Choose Text.

    NewField
  • More options will appear on the right. Most of those can be left to their default settings. Select the box next to Required if you want this field to be a required field on the form (see #1 below).

    RequiredField
  • When you have finished, select the Save & New button at the top to create another field.  If you don't need to create any more fields, go to Creating a Submit Button below.

Creating an email field

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

  • Enter the field name, as you would like it to appear in the form, to the right of Label (e.g: "Email Address") (see #1 below).

    EmailField

  • Enter the field name, but with only lowercase letters and dashes, next to Name (see #2 above). You can shorten the "Name" as long as it is unique (i.e. no other form fields have the same name."
  • Now choose Email from the dropdown menu next to Type (see #3 above).
  • Check the box next to Required to make this field mandatory (see #4 above).
  • You can leave the rest of the settings as they are.
  • When you have finished, select the Save & New button at the top to create another field.  If you don't need to create any more fields, go to Creating a Submit Button below.

Creating a text area field

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.

  • Enter the field name, as you would like it to appear in the form, to the right of Label  (e.g: "Address") (see #1 below).

    TextAreaField

  • Enter the field name, but with only lowercase letters and dashes, next to Name (see #2 above). You can shorten the "Name" as long as it is unique (i.e. no other form fields have the same name).
  • Now choose Textarea from the dropdown menu next to Type (see #3 above).
  • Now, a new set of options should appear on the right side.
  • Check the box next to Required if you want this field to be mandatory (see #4 above).
  • You can also set a minimum and maximum length for the field (see #5 and #6 above). This is optional.
  • The rest of the options can be left as they are.
  • When you have finished, select the Save & New button at the top to create another field.  If you don't need to create any more fields, go to Creating a Submit Button below.

Creating a dropdown menu field

  • Enter the field name, as you would like it to appear in the form, to the right of Label (e.g: "Schedule a Tour") .
  • Enter the field name, but with only lowercase letters and dashes, next to Name. You can shorten the "Name" as long as it is unique (i.e. no other form fields have the same name).
  • Now choose Select from the dropdown menu next to Type (see #1 below).
    Visforms: "Select" form field
  • To create the first option to appear in the dropdown, select the New Option button under "Create Options List" at the bottom (see #1 below).
  • The Create option popup should appear. For Value enter what the form recipient will see when the form has been submitted (see #2 below).
  • For Label enter what the person filling out the form should see (see #3 below). (This can be the same as, or similar to, the corresponding text for "Value").
  • If you would like this option to automatically be selected check the Default box (see #4 below).
  • Click New Option to add another option.

    Visforms: Create options list
  • When you have finished, select the Save & New button at the top to create another field.  If you don't need to create any more fields, go to Creating a Submit Button below.

Creating a checkbox with multiple options

A Checkbox group is good for areas in the form where the person submitting must choose from a group of options and can select more than one choice.

  • Enter the field name, as you would like it to appear in the form, to the right of Label.
  • Enter the field name, but with only lowercase letters and dashes, next to Name. You can shorten the "Name" as long as it is unique (i.e. no other form fields have the same name).
  • Now choose Checkbox group from the dropdown menu on the right of Type (see #1 below).

    CheckboxGroup

  • A new set of options should appear on the right.
  • You can choose how you want the checkbox options to show up on the form by selecting the Display. In line displays the options in a horizontal line. As list displays them on top of one another.
  • Now select the New Option button (see #2 above).
  • A pop up will appear to Create Option. Fill in the Value, Label, and if you would like the option to be selected by default you can select the box next to Default (see dropdown menu field instructions above for clarification on Values and Labels).
  • When you are finished creating an option, click New Option to add another option.
  • When you have finished, select the Save & New button at the top to create another field.  If you don't need to create any more fields, go to Creating a Submit Button below.

Creating a Radio Button field

Radio Buttons are useful when you have a question or set of choices where only one option can be selected; for example, a Yes or No question.

  • Enter the field name, as you would like it to appear in the form, next to Label.
  • Enter the field name, but with only lowercase letters and dashes, next to Name. You can shorten the "Name" as long as it is unique (i.e. no other form fields have the same name).
  • Now choose Radio Button from the dropdown menu on the right of Type (see #1 below).

    TypeRadioButton

  • A new set of options should appear on the right.
  • You can choose how you want the Radio Buttons to show up on the form by selecting the Display (see #2 above). In line displays the options in a horizontal line.  As list displays them on top of one another (this option usually looks cleaner).
  • Now select the New Option button (see #3 above).
  • Fill in the Value, Label, and if you would like the option to be selected by default you can select the box next to Default (see dropdown menu field instructions above for clarification on Values and Labels).
  • When you are finished creating an option click Add & New until you get to the last option which you can just Add.
  • When you have finished, select the Save & New button at the top to create another field.  If you don't need to create any more fields, go to Creating a Submit Button below.

Creating a Submit Button

The last field in your form should be the Submit button.

  • Type "Submit" for both Label and Name (see #1 & 2 below).
  • Select Submit Button in the Type dropdown menu (see #3 below).
  • Now select Save & Close at the top (see #4 below).

    SubmitButton

Creating a success message

You can create a success message to display after the form has been submitted.

  • Click the Back to Form button to the top:

    Visforms: "Back to form" button

  • Click on the Result tab below the title (see #1 below).

    SubmissionResult
  • For "Text Result," type the success message you want the form submitter to see when they have finished submitting the form (see #2 above) - for example, "Thank you for submitting this form!"
  • When you are finished click Save to the upper left.

Adding CAPTCHA to your form

  • Click the Spam Protection tab underneath the form title (see #1 below):

    SpamProtection

  • Scroll down until you see the Captchas section:

    captcha Visforms ReCaptcha screenshot
  • Select ReCaptcha Plugin from the Use Captcha dropdown menu (see #1 above).
  • The other settings can be left as they are.
  • Now Save & Close the form: joomla3 save-and-close button

Link to your form from a Menu Item

You can create a menu item that links to your new form.  We recommend creating links to your forms in the "Forms" menu, although you can add the menu item to any menu.  If your website does not have a "Forms" menu, please submit a work order and we will set it up for you.

  • Select Menus > Forms Menu > Add New Menu Item (or go to Menus > Forms Menu and click the green New button):

    Create Forms Menu item


  • Create a Title for the menu item, this can be the same as your title for the form (see #1 below).

    Visforms: New Menu Item
  • Click the Select button next to Menu Item Type (see #2 above). A popup should appear. Find Visforms on the list. Below that will be two options; select Form to display a single form (see #1 to the right): Visforms: Selecting "Form" as a new menu item
  • Now, click the Select button next to Choose a form (see #3 above). Pick the form you would like to use from the list.
  • (Optional) Choose a parent item for your menu item from the Parent Item dropdown menu (see #4 above). 
  • Now click Save on the upper left (see #5 above).
  • Take note of the form's Menu Item Alias. 
  • Your form should now be accessible at the URL for your main website, with the menu item alias added after a forward slash ("/").
    • For example, if the form alias is "your-form" and the website address is unit.rutgers.edu, the URL for the form would be unit.rutgers.edu/your-form.
    • If you selected a parent item for your menu item, add the alias after the URL of the parent menu item to find the form.
  • Now click Save & Close on the upper left (see #6 above).

What's next?

You are now ready to configure your form to email the data to one or more people.  You can also configure your form to save information to a database