sasit_banner

Visforms: Form Setup

This procedure describes how to set up a simple form using mostly text fields using VisForms 3.7.2.  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
  • 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.
  • The Description is optional. You may enter a description of your form in the way you would like it to appear at the beginning of the form (see #3 below). 
  • Click Save to the upper left (see #4 below).

    CreateForm

 

Adding form fields for text

  • 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.
  • Enter the field name as you would like it to appear next to Label (see #1 below).
  • Write a shortened version of the label next to Name (see #2 below). This should be a unique name and should not have any spaces.
  • 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 (see #4 above).
  • Repeat the above steps for each new field.
  • When you are finished select Save & New one last time.

Creating a Submit Button

  • Type Submit next to Label and again next to 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.

  • Go to Components > Visforms
  • Select the form you want to edit.
  • Click on the Result tab below the title (see #1 below).

    SubmissionResult
  • Now type the success message you want the form submitter to see when they have finished submitting the form (see #2 above). An example message could be: Thank you for submitting this form!
  • When you are finished click Save and Close on the upper left.

Creating an email field

  • First select New on the top left to create a new field.
  • Enter the text you would like to appear next to the dropdown menu to the right of Label eg: Email Address (see #1 below).

    EmailField

  • To the right of Name shorten the label text and make sure there are no spaces or special characters eg: email (see #2above).
  • Now choose Email from the dropdown menu next to Type (see #3above).
  • 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.
  • Now click Save & Close on the top left.

Creating a text area field

  • First select New on the top left to create a new field.
  • Enter the text you would like to appear next to the dropdown menu to the right of Label eg: Address (see #1 below).

    TextAreaField

  • To the right of Name shorten the label text and make sure there are no spaces or special characters eg: address (see #2 above).
  • 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.
  • Now click Save & Close on the top left.

Creating a dropdown menu field

  • First select New on the top left to create a new field.
  • Enter the text you would like to appear next to the dropdown menu to the right of Label eg: Type of Tour Requested
  • To the right of Name shorten the label text and make sure there are no spaces or special characters eg: type
  • Now choose Select from the dropdown menu next to Type (see #1 below).
    TypeSelect

  • Now, a new set of options should appear on the right side.
  • To create a Value select the New Option button on the right (see #2 above).
  • The Create option popup should appear. Next to Value write what the form creator will see when the form has been submitted eg: guided tour (see #3 above).
  • Next to Label write out what the person filling out the form will see eg: Guided Tour (see #4 above). Both can be the same text, or there can be minor changes like capitlization but it should essentially be the same.
  • If you would like a default value to automatically be selected check the box next to Default (see #5 above).
  • When you're ready to save this value, select Add & New (see #6 above). 
  • When you have created the last value select Add. If you need to make any changes to values you have already made or if you want to delete a value you can choose either Change or Delete in the options list next to the value you want to update.
  • When you are finished select Save & Close on the top left.

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.

  • Follow the first three steps of creating a dropdown menu field.
  • 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 or you can leave it as the default in line which 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 Add & New until you get to the last option which you can just Add.
  • When all of the options are finished being added you can save this field by clicking the Save button on the top left.

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.

  • Follow the first three steps of creating a dropdown menu field.
  • 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 or you can leave it as the default in line which displays the options in a horizontal line (see #2 above). As list displays them on top of one another.
  • Now select the New Option button (see #3 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 Add & New until you get to the last option which you can just Add.
  • When all of the options are finished being added you can save this field by clicking the Save button on the top 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).
  • Add helpful text to the Captcha Tool Tip Text field.
  • The other settings can be left as they are.
  • Now Save & Close the form: joomla3 save-and-close button

Publishing your form as a Menu Item

Form data must be submitted securely.  As a result, there are two steps involved with making your form accessible:

  • Link to the form via a Forms Menu Item
  • Create redirect rules that will take visitors to the secure version of the form.

Link to the form via a Hidden Menu Item

  • Create the "Forms Menu" (if it does not already exist)
    • Go to: Menus > Manage > Add New Menu:

      Create "Forms Menu"

    • For "Title" enter "Forms Menu" (see #1 below).
    • For "Menu Type" enter "forms_menu" (see #2 below).
    • Click Save & Close (see #3 below).
    • Note: this menu should never be assigned to a visible module position on the website.


      Forms Menu settings

  • Select Menus > Forms Menu > Add New Menu Item:

    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). Remember to leave the Alias blank (see #2 below).

    NewMenuItemVisforms
  • Click the Select button next to Menu Item Type (see #3 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): SingleFormVisforms
  • Now, click the Change/Select button next to Choose a form (see #4 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 #5 above).
  • OPTIONAL: If you do not want the title to show on the front-end you can select No next to Show Title after clicking on the Parameters tab (see #6 above).
  • Make sure your Menu Item is Published by double checking the Status below the Parent Item settings.
  • Now click Save & Close on the upper left (see #7 above).
  • Your form should now appear in the menu item you created.
  • Take note of the form's Menu Item Alias

Create redirect rules that will take visitors to the secure version of the form.

  • Look at the form's Menu Item Alias; if the form name is "Tour Request Form," the alias will be something like:
    • tour-request-form
  • Determine a shorter alias - which we will call the "Redirect Alias" - which can usually be created by eliminating dashes from the form's Menu Item Alias.
    • For example, if the Menu Item Alias is tour-request-form, the Redirect Alias should be tourrequestform
    • Make sure the Redirect Alias is not in use by going to a browser and going to:
      • http://yoursite.rutgers.edu/[RedirectAlias]

        For example, if your website is foo.rutgers.edu and your Redirect Alias is tourrequestform, go to:

        http://foo.rutgers.edu/tourrequestform

        You should get an error message indicating the URL is not in use.  You can then set up a redirect for this URL.

    • If the Redirect Alias does not return an error page, that means it's in use.  Try different Redirect Aliases until you get one that directs you to the error page.
  • Go to: Components > Redirects:
    Components : Redirects
  • Click New to the upper left

  • For Source URL (see #1 below) enter: http://yoursite.rutgers.edu/[RedirectAlias]
  • For Destination URL (see #2 below) enter: https://www.sas.rutgers.edu/cms/[site-directory]/[Menu Item Alias]

    where site-directory is the part of the URL directly before "administrator" when you are logged into Joomla! for your website, and Menu Item Alias is the actual alias of the form in the Hidden Menu.

    For example, if you log into Joomla! via https://www.sas.rutgers.edu/cms/foo/administrator/ and the Menu Item Alias is "tour-request-form", your Destination URL would be:

    ttps://www.sas.rutgers.edu/cms/foo/administrator/tour-request-form
  • Click Save & New (see #3 below)
  • For Source URL (see #1 below) enter: http://www.sas.rutgers.edu/cms/[site-directory]/[RedirectAlias]
  • For Destination URL (see #2 below) enter: https://www.sas.rutgers.edu/cms/[site-directory]/[Menu Item Alias]
  • Click Save & New (see #3 below)
  • For Source URL (see #1 below) enter: https://www.sas.rutgers.edu/cms/[site-directory]/[RedirectAlias]
  • For Destination URL (see #2 below) enter: https://www.sas.rutgers.edu/cms/[site-directory]/[Menu Item Alias]
  • Click Save & Close (see #4 below)

Creating redirects for forms

You can then link to the form from within any article or module by linking to the URL:

[RedirectAlias]

The Redirects component will redirect from the [RedirectAlias] to the actual, secure location of the form.

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.  It's also a good idea to set up a ReCaptcha to prevent the form from being used for spam.

Contact Us

scotthall Scott Hall (Main Office)
43 College Avenue
New Brunswick, NJ 08901
(848) 932-2126
This email address is being protected from spambots. You need JavaScript enabled to view it.