forms
forms
-
Chronoforms: Adding a CAPTCHA to a Form
This procedure describes how to add a security CAPTCHA to a form using ChronoForms version 5.
Getting Started: Select the form
- Log into the Joomla! administrator page for your web site
- Click on Components > ChronoForms5:
- Ignore the message "Your ChronoForms installation on webdevel.sas.rutgers.edu is NOT validated." Chronoforms will still work.
- In Forms Manager, click on the name of the form you want to add a CAPTCHA to.
- Click on the Designer tab (see #1 below).
Add the CAPTCHA
- Drag the Captcha button under Basic (see #2 below) to the light blue designer area under Widgets (see #3 below):
- Click and hold the Drag button for the Captcha element so that it appears above the "Submit" button element (see #1 below):
- Click the Edit button for the Captcha element (see #2 above).
- Click the Validationtab (see #1 below)
- Change Required to "Yes" (see #2 below)
- Click Save and Close to the lower right (see #3 below):
- Click on the Setuptab (see #1 below).
- Click Captcha (see #2 below).
- Change Enabled to "Yes" (see #3 below).
- (Optional) Modify the message in the Error field (see #4 below).
- Click Save and Close to the upper right (see #5 below):
- Click Captcha (see #2 below).
What's next?
If you haven't already, you can configure your form to email the data to one or more people.
You can also configure your form to save information to a database.
Once you configure your form to collect data, you can embed it within an article.
-
Chronoforms: Configuring a form to send email
This procedure describes how to set up a simple form using mostly text fields using ChronoForms version 5.
Getting Started: Select a form
- Log into the Joomla! administrator page for your web site
- Click on Components > ChronoForms5:
- Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated." Chronoforms will still work.
- In the Forms Manager, click the name of the form you would like to enable email for:
- Click on the Designer tab (see #1 below).
- Take note of the Field Names of the form fields that are used to collect the submitter's name and email address. The Field Name is shown in the upper left corner of the field in a blue box (see #2 below). You may have separate fields collecting "First Name" and "Last Name" - if so, take note of both field names.
- Click on the Setup tab (see #3 below).
- Click the Email (0) option on the green action selector bar (see #1 below).
- Under Basic options, enter "email" for Action Label (see #2 below).
- Change the Enabled dropdown selection to "Yes" (see #3 below).
- For To enter a list of email address (separated by commas) that will receive the data entered into the form (see #4 below).
- For Subject enter a subject for the email that will be sent when the form is complete (see #5 below).
- Change Template Generationto "Auto" (otherwise, you will need to manually configure the template for outgoing emails every time you edit the form).
- Click the Advanced tab above the list of Basic options (see #6 below).
- Under the Advanced options, enter the field name containing the submitter's email address in the Dynamic Tofield (see #1 below). This will send a copy of the email to the person submitting to the form.
- Enter the field name or names containing the submitter's name in the Dynamic from name field (see #2 below). For example, if the form asks the submitter to enter their full name in a field called "name", enter "name" here. If the form asks the submitter to enter the first name and last name in separate fields called "firstname" and "lastname", enter "firstname lastname" here.
- Enter the field name containing the submitter's email address in the Dynamic from email field (see #3 below):
- Click the Thanks Message (4) option on the green action selector bar (see #1 below).
- Enter a message in the Message Content text box (see #2 below). This message will be displayed when someone submits the form.
Publishing your form
If you haven't already published your form, please do the following:
- Click the General button to the upper left of the form (see #1 below).
- Change the Enabled dropdown selection to "Yes" (see #2 below):
Saving your form
Click "Save and Close" to the upper right:
What's next?
If needed, you can configure your form to save information to a database.
-
Chronoforms: Create a new table for an existing form
This procedure describes how to save the data from a form you have updated to a new database table, using ChronoForms version 5. This step is necessary if you add new fields to a form that saves its data to a table. A new table needs to be created in order to capture data entered into the new fields.
Backup the old data table
- Log into the Joomla! administrator page for your web site.
- Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated." Chronoforms will still work.
- In Forms Manager, find the form and select the existing table from the dropdown menu for Connected Tables
- Click Backup tableto export the entire form to a CSV file.
- Save that file and open it to verify that all the data has been saved.
- Click Cancel to return to Forms Manager.
Creating a new data table
- Back in the Forms Manager, check the box to the left of the form that you would like to configure to save data.
- Click the Create table button at the top.
- At the Create table page, replace the "#__" portion of the Table Name with the actual database table prefix for your web site (e.g. j17_ or j25_).
- (Optional) Clear the check boxes for any fields that you do not need to save into the database (for example, "captcha"). Do not unselect the "cf_id" field since it is the primary key!
- Click Save to the upper right.
Modify the form to save data to the new table
- In Forms Manager, click on the name of the form with the new table.
- Click the Setup tab.
- Click Data Save (11).
- Verify that "Enabled" = "Yes"
- For "Table name" select the newly created table.
- Click Save.
- (Optional) Click the DB Viewer tab at the top and enter field names. They will be added as columns to the table's list view for this form. Without doing this, the table list preview will only show an ID number and the "Created Date/Time". Doing this makes the list show useful information.
- The format to use here is (one entry per line): field_name=whatever column heading you want. The field name comes from the field settings. It should not contain any spaces or special characters. The column heading can be different.
- Click Save and Close.
-
Chronoforms: Embedding a Form within an Article
This procedure describes how to embed a form within a Joomla! article using ChronoForms version 5.
The Chronoforms5 plugin must be installed and enabled on the website in order for this functionality to work.
Also, "Force HTTPS?" must be set to "Entire Site" in the Global Configuration for the website. Do not collect data if HTTPS is not being enforced for the entire website.
Getting Started: Get the form name
- Log into the Joomla! administrator page for your web site
- Click on Components > ChronoForms5:
- Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated." Chronoforms will still work.
- In the Forms Manager, take note of the exact name of the form as it appears in the Form Name column. The Form Name will appear above any Form description that may exist for the form. The Form Name will appear as a link and will not have any spaces or special characters other than dashes or underscores. In the below example, the Form Name is "new-form-cf5" while the Form description is "New Chronoforms V5 Form."
- Select an article to edit following steps 1-3 of Editing Articles or create a new article.
- Enter the following code within your article in the place where the forms should appear:
{ chronoforms5 }[form-name]{ /chronoforms5 }
Do not type the spaces before or after the braces. Replace [form-name] with the actual Form Name. Your text box should then look like this: - If you are editing the article from the front end of the web site, click the Save button to the upper left to save your changes and close the article.
- If you are working in the Joomla! Administrator, to save your changes and continue editing the article, click the Save button to the upper left:
- If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left:
- Your form will now appear within your article.
-
Chronoforms: Saving Data from a Form to a Data Table
This procedure describes how to save data from a form to a database table, using ChronoForms version 5.
Creating the data table
- Log into the Joomla! administrator page for your web site
- First, look up the Database Tables Prefix for your web site. This can be found in "System > Global Configuration" on the Server tab.
- Click on Components > ChronoForms5:
- Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated." Chronoforms will still work.
- In Forms Manager, check the box to the left of the form that you would like to configure to save data (see #1 below).
- Click the Create table button at the top (see #2 below).
- At the Create table page, replace the "#__" portion of the Table Name with the actual database table prefix for your web site (e.g. j17_ or j25_) See #1 below.
- (Optional) Clear the check boxes for any fields that you do not need to save into the database (for example, the "captcha" and Submit "button" fields). Do not unselect the "cf_id" field since it is the primary key! See #2 below.
- Click Save to the upper right (see #3 below).
Modify the form to save data to the new table
- In Forms Manager, click on the name of the form with the new table.
- Click the Setup button (see #1 below).
- Click the Data Save (11) link (see #2 below).
- Change Enabled to "Yes" (see #3 below).
- Select the newly created table name from the Table name dropdown menu (see #4 below).
- Click Save and Close (see #5 below).
Viewing the data
One the table contains some data from one or more form submissions, you can view it as follows:
- In Forms Manager, click the dropdown arrow in the Connected Tables column corresponding to the form with the new table (see #1 below).
- Select the new table from the dropdown menu (see #2 below).
- At the Data listing page, click the check box for any data record you would like to view (see #1 below).
- Click the View Recordbutton to view the data in Joomla! (see #2 below).
- Click Backup table to export the entire form to a CSV file (see #3 below).
- Click Backup records to export only the selected records to a CSV file (see #4 below).
- Click Cancel when done viewing or backing up records (see #5 below).
-
Chronoforms: Simple Form Setup
This procedure describes how to set up a simple form using mostly text fields using ChronoForms version 5.
Getting Started: Creating a new form
- Log into the Joomla! administrator page for your web site
- Click on Components > ChronoForms5:
- Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated." Chronoforms will still work.
- Click the New Simple button at the top:
- For Form name, enter a short name for your form (see #1 below). The form name should not have any spaces or special characters (other than dashes and underscores).
- For Form description, enter a description of your form. Spaces and special characters are allowed (see #2 below). Important: although this field looks optional, it is necessary to complete it; otherwise, the form may not work.
- Change Published to "No"; it will be published later (see #3 below).
- Click Save to the upper right (see #4 below).
Adding form fields for text
- Click on the Designer tab (see #5 above).
- For each field in your form, drag one of the long blue buttons under Basic (see #1 below) to the light blue designer area under Widgets (see #2 below).
- Drag the Text Box button for a short text field (such as First Name, Last Name, Phone Number, or Email Address) - see #3 below.
- Drag the TextArea Box for a longer field, such as a personal statement or comments field (see #4 below).
- After you drag the buttons to the blue area, click the blue Edit button (see #5 above) for each field and modify the values as follows:
- Field Name = This should be unique and have no spaces (see #1 below).
- Label = Enter the name of the field as it should appear on the form itself. For example, "Last Name" for last name (see #2 below).
- Sub Label = This is optional. You can add instructions here, or just leave it blank (see #3 below).
- If you want the form field to be required, or to follow a special format, click the Validationtab (see #4 above). Some of the commonly used options are:
- Required = change to "Yes" if the field is required (see #1 below).
- Email = change to "Yes" for an email field (see #2 below).
- Phone = change to "Yes" for a phone field.
- Int. phone = change to "Yes" for an international phone field.
- When done editing the field, click Save and Close to the lower right (see #3 below):
- After adding each field, click Save to the upper right to save your work on the form:
Creating a checkbox with multiple options
- Drag Checkbox Group from the Basic area to the light blue designer area below Widgets(see #1 below).
- Click Edit for the new Checkbox Group field (see #2 below):
- Modify the options in the Edit element settings popup window as needed:
- Field Name = This should be unique and have no spaces (see #1 below).
- Options: This is where the checkbox options are set (see #2 below).
- The value before the "=" should be short; for example, just the course number of a course
- The value after the "=" can be longer; for example, the full name of the course
- You can create a many options for the checkbox as needed; start each option on a new line
- Label: Enter the name of the field as it should appear on the form itself.
- When done editing the field, click Save and Close to the lower right (see #3 below).
Manipulating your form fields
You can copy, move, or delete form fields as follows:
- To copy an existing field to create a new field, click the Copy button for that field (see #1 below), then click the Paste button above and to the right of the list of fields (see #2 below).
- To move a field, click and hold the Drag button for that field, move the field to the location in the light blue designer area where it should appear, and release the mouse button (see #3 below).
- To delete a field, click the field's Delete button (see #4 below):
Adding a "Submit" button
The last field in your form should be a Submit button:
- Click and drag the Submit Button blue bar (see #1 below) from the Basic area to the light blue designer area under Widgets.
- The Submit button should appear as the last field in the designer area (see #2 below):
Publishing your form
If you are ready to publish your form, please do the following:
- Click the General button to the upper left of the form (see #1 below).
- Change the Enabled dropdown selection to "Yes" (see #2 below):
Saving your form
When you are done adding all your fields, click "Save and Close" to the upper right:
What's next?
To prevent your form from being used by spambots, you should add a CAPTCHA to the form.
Then, you can configure your form to email the data to one or more people.
You can also configure your form to save information to a database.
Once you configure your form to email and/or save data, you can embed it within an article.
-
Visforms: Configuring a form to send email
Overview
This procedure describes how to configure a form to send submitted data via email using Visforms. More detailed documentation on using Visforms can be found here.
Getting Started: Select a form
- Log into the Joomla! administrator page for your web site
- Click on Components > Visforms(see #1below):
- Select the Forms icon:
- Select the name of the form you would like to enable email for:
Configure options for result mail
The "result email" is the message that will be sent when the form is submitted. The result email should be sent to the person responsible for handling the form submission.
- Click on the Mail Options tab (see #1 below).
- Make sure Yes is selected next to Email Result (see #1 below)
- For Mail From Address (see #2below), enter the email address that the result email should be sent from. You can use your own email address or a departmental email address for this. You can also use "" if nobody should reply to the email.
- For Mail From Name (see #3below), insert the name that should appear in the result email's "From" field. This could be an actual person's name, or the name of the form.
- For Mail To (see #4below), enter the email address where the form results should be sent.
- For Mail Subject (see #5below) enter the text to appear in the subject line of the result mail.
- Optional: If text should appear before the results in the email, enter the text in the text area for Result Mail Text.
- Click Saveat the top to save your changes:
Configure options for recipient mail
The recipient email is the message that will be sent to the person who submitted the form.
- Scroll down to the "Options for recipient mail" section of the "Mail options" tab.
- Make sure Yes is selected next to Email Receipt (see #1 below).
- For Email Receipt Subject (see #2below), enter the subject line for the recipient email (e.g.: "Thank You For Submitting").
- For Mail From Address (see #3below), enter the email address that the recipient email will be sent from. This could be the same email address used for the result mail.
- For Mail From Name (see #4below), enter the name that should appear in the recipient email's "From" field. This could be the name of an actual person, or your unit's name.
- For Email Receipt Text (see #5below), enter the text to appear in the body of the recipient email. This can be a short thank you message, or other text confirming that the form was submitted.
- Click Saveat the top to save your changes:
Set up result page (submission confirmation)
The result page is what will appear when the form has been submitted.
- Click the Result tab (see #1 below).
- Under Text Result, enter a message to be displayed on the website after the form is submitted (for example, "Thank you for your submission!") (see #2 below).
- When done, select "Save & Close:"
What's next?
If needed, you can configure your form to save information within the website.
It is also a good idea to set up a ReCaptcha to prevent the form from being used for spam. See the section "Adding CAPTCHA to your form" in the "Visforms: Form Setup" page.
-
Visforms: Configuring a form to send email (Joomla! 4/5)
Overview
This procedure describes how to configure a form to send submitted data via email using Visforms.
Getting Started: Select a form
- Log into the Joomla! administrator page for your web site
- Click on Components > Visforms > Forms (see below):
- Click into the name of the form you would like to enable email for:
Configure options for result mail
The "result email" is the message that will be sent when the form is submitted. The result email should be sent to the person responsible for handling the form submission.
- Click on the Mail Options tab (see #1 below).
- Make sure Yes is selected next to Email Result (see #1 below)
- For Mail From Address (see #2below), enter the email address: (this email address has been configured to send mail from our cloud hosting servers).
- For Mail From Name (see #3below), insert the name that should appear in the result email's "From" field. This could be an actual person's name, or the name of the form.
- For Mail To (see #4below), enter the email address where the form results should be sent.
- For Mail Subject (see #5below) enter the text to appear in the subject line of the result mail.
- Optional: If text should appear before the results in the email, enter the text in the text area for Result Mail Text (below Mail Subject tab).
- Click Saveat the top to save your changes:
Configure options for recipient mail
The recipient email is the message that will be sent to the person who submitted the form.
- Scroll down to the "Options for recipient mail" section of the "Mail options" tab.
- Make sure Yes is selected next to Email Receipt (see #1 below).
- For Email Receipt Subject (see #2below), enter the subject line for the recipient email (e.g.: "Thank You For Submitting").
- For Mail From Address (see #3below), enter the email address:
- For Mail From Name (see #4below), enter the name that should appear in the recipient email's "From" field. This could be the name of an actual person, or your unit's name.
- For Email Receipt Text (see #5below), enter the text to appear in the body of the recipient email. This can be a short thank you message, or other text confirming that the form was submitted.
- Click Saveat the top to save your changes:
Set up result page (submission confirmation)
The result page is what will appear when the form has been submitted.
- Click the Result tab (see #1 below).
- Below Text Result, enter a message to be displayed on the website after the form is submitted (for example, "Thank you for your submission!") (see #2 below).
- When done, select "Save & Close:"
What's next?
Joomla 4: It is also a good idea to set up a ReCaptcha to prevent the form from being used for spam. See the section "Adding CAPTCHA to your form" in the "Visforms: Form Setup" page.
-
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).
- At the Visforms Dashboard click the Forms icon:
- Click the New button on the top left:
- 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 Descriptionenter any text that should appear at the beginning of the form (see #3 below).
- Click Save to the upper left (see #4 below).
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 REQUEST 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.
- 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).
- 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. or ).
- 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).
- 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 #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.
- 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).
- 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).
- To create the first option to appear in the dropdown, select the New Optionbutton 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 #2below).
- For Label enter what the person filling out the form should see (see #3below). (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 #4below).
- 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 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).
- 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 Optionbutton (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).
- 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 Submitbutton.
- 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).
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:
- Click on the Result tab below the title (see #1 below).
- 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 Saveto the upper left.
Adding CAPTCHA to your form
- Click the Spam Protectiontab underneath the form title (see #1 below):
- Scroll down until you see the Captchassection:
- Select ReCaptcha Pluginfrom the Use Captcha dropdown menu (see #1 above).
- The other settings can be left as they are.
- Now Save & Close the form:
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 REQUEST 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 a Title for the menu item, this can be the same as your title for the form (see #1 below).
- 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):
- 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 Saveon 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 & Closeon 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.
-
Visforms: Creating a Form (Joomla! 4/5)
Overview
This procedure describes how to set up a simple form using Visforms.
Getting Started: Creating a new form
- Log into the Joomla! administrator page for your web site
- Click on Components > Visforms > Forms (see below).
-
- Click the New button on the top left:
- 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 Descriptionenter any text that should appear at the beginning of the form (see #3 below).
- Click Save to the upper left (see #4 below).
Adding form fields
- Now you need to add fields to your form. You should be able to see fields after clicking save. If you still do not see it, make sure you added a title and name and then press save. (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 REQUEST 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.
- 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 #4 below).
- When you have finished, select the Save & Close button at the top to save your field; then repeat the process. If you don't need to create any more fields, go to Creating a Submit Button near the bottom.
Creating an email field
An email field will only accept a properly formatted email address (e.g. or ).
- 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).
- 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 #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.
- When you have finished, select the Save & Close button at the top; then, click New 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).
- 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 & Close button at the top; then, click New 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).
- To create the first option to appear in the dropdown, scroll down on your page to select the New Optionbutton under "Create Options List" at the bottom (see #1 below).
- For Value enter what the form recipient will see when the form has been submitted (see #2below).
- For Label enter what the person filling out the form should see (see #3below). (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 #4below).
- Click New Option again to add another option.
- When you have finished, select the Save & Close button at the top; then click New 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 below).
- 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 Optionbutton by scrolling down your page (see 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 New Option to add another option.
- When you have finished, select the Save & Close button at the top to create another field. If you don't need to create any more fields, go to Creating a Submit Button near the bottom.
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).
- 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 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 New Option to add another option.
- When you have finished, select the Save & Close button at the top, then click New to create another field. If you don't need to create any more fields, go to Creating a Submit Button near the bottom.
Creating a Submit Button
The last field in your form should be the Submitbutton.
- 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).
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:
- Click on the Result tab below the title (see #1 below).
- 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 Saveto the upper left.
Adding CAPTCHA to your form
- Click the Spam Protectiontab underneath the name field (see #1 below):
- Scroll down until you see the Captchassection:
- Select ReCaptcha Pluginfrom the Use Captcha dropdown menu (see above).
- The other settings can be left as they are.
- Now Save & Close the form:
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 REQUEST and we will set it up for you.
- Select Menus> Forms (Hover over + button) > c (or go to Menus (all the way to the left sidebar) > Forms Menu and click the green New button):
- Create a Title for the menu item, this can be the same as your title for the form (see #1 below).
- Click the blue 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):
- Now, click the blue 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 Saveon 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 & Closeon 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.
-
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
- Login to the back end of the website.
- Go to: Components > Visforms
- Click the "Forms" icon
- Click the title of the form to be edited
- Click the Fields button at the top:
- To modify an existing field, click the field label (see #1 below).
- 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 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.
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.
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.
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
- Click the "Advanced" tab
- Scroll to the bottom and find the Fileuploadssettings:
- 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
- bmp,gif,ico,jpg,jpeg,odg,png,tiff,xcf,BMP,GIF,ICO,JPG,
- Resume file upload:
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."
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 & Closeto save the form.
-
Visforms: Form Fields (Joomla! 4/5)
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
- Login to the back end of the website.
- Go to: Components > Visforms > Forms
- Click the title of the form to be edited
- Click the Fields button at the top:
- To modify an existing field, click the field label (see #1 below).
- 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 Fileuploadssettings:
- 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
- bmp,gif,ico,jpg,jpeg,odg,png,tiff,xcf,BMP,GIF,ICO,JPG,
- Resume file upload:
- 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 & Closeto save the form.
-
Visforms: Managing Data
If you have the Visforms component installed on your website and you have forms that are configured to save the results, you should have a plan for managing that data. Often times the data is sensitive and should not remain in the website database indefinitely.
To check if you have data:
- If you will be accessing the data from a network outside of Rutgers, first log into a VPN connection or to a computer located on campus using remote access.
- Login to the administrator interface.
- select Visforms from the Components menu.
- Click Forms. Then see if you have a number in the Data column for each form. That's the number of data submissions there are for that form. If you do have data it's easy to export it to Excel and then delete it from the database.
- Start by clicking on the number in the Data column for the associated form.
- At the top of the Form Data screen the default the number of records displayed is set to 20. In order to display all of the submitted records, select a number higher than the total number of records.
- Select all the Unpublished records and click Publish.
- Then select all the records and click the Export button.
- Click OK and the export will open in Excel.
- Verify that the records you selected to export are found in the Excel.
- Choose File|Save As, select a folder destination, make the File Name more descriptive, change Save As Type to Excel Workbook, click Save.
- Finally, select all the records you exported and click Delete.
For more on Visforms, see the Forms section of our How To Guides.
-
Visforms: Managing Data (Joomla! 4/5)
If you have the Visforms component installed on your website and you have forms that are configured to save the results, you should have a plan for managing that data. Often times the data is sensitive and should not remain in the website database indefinitely.
To check if you have data:
- If you will be accessing the data from a network outside of Rutgers, first log into a VPN connection or to a computer located on campus using remote access.
- Login to the administrator interface.
- Select Components > Visforms > Forms:
- Then see if you have a number in the "Data" column for each form. That's the number of data submissions there are for that form:
If you do have data it's easy to export it to Excel and then delete it from the database.
Exporting and deleting form data:
- Start by clicking on the number in the "Data" column for the associated form.
- The default the number of records displayed is set to 20. In order to display all of the submitted records, select a number higher than the total number of records:
- Click the check boxes for all the Unpublished records and click Actions > Publish.
- Then select all the records and click the Export button.
- The data export file will be downloaded to your computer (most likely to the "Downloads" folder).
- Open the data export file and verify that the records you selected to export are found in the Excel file.
- Choose "File > Save As," select a folder destination, make the File Name more descriptive, change "Save As Type" to "Excel Workbook", and click "Save."
- In Visforms, select all the records you exported and click Actions > Delete.
- Click Yes when asked "Do you really want to delete the dataset(s)?"
For more on Visforms, see the Forms section of our How To Guides.
-
Visforms: Overview
Visforms is a form tool in Joomla! that can collect data. This information can be saved in a table and exported easily to a .csv file, which can be opened in Excel. The data can also be displayed on a website if needed.
The forms are 100% customizable; different fields can be created, depending on what information you need to collect.
-
Visforms: Overview (Joomla! 4/5)
Visforms is a form tool in Joomla! that can collect data. This information can be saved in a table and exported easily to a .csv file, which can be opened in Excel. The data can also be displayed on a website if needed.
The forms are 100% customizable; different fields can be created, depending on what information you need to collect.
-
Visforms: Saving and viewing data
Overview
This procedure describes how to save data from a form using Visforms. More detailed documentation on using Visforms can be found here.
Configuring a form to save data
- Log into the Joomla! administrator page for your web site
- Click on Components > Visforms(see #1 below):
- Select the Forms icon:
- Select the name of the form that should be configured to save data:
- Click the Result tab (see #1 below).
- Make sure Yes is selected next to Save Result (see #2below).
- Click the Advanced tab.
- Under the Data Export options, make sure "Separator" is set to "Comma."
- Select Save & Close to the upper left:
Reviewing your form data
- Log into the Joomla! administrator page for your web site
- Click on Components > Visforms
- Select Forms
- Find the row corresponding to your form, and click on the number in the "Data" column (see below). If the number is "0," no data has been collected yet.
- You will see all the data collected by the form, with the column names indicating the form fields:
Exporting data to an Excel spreadsheet
- Follow the steps under "Reviewing your form data" above to view the form data. Take note of the number in the "Data" column for your form.
- Display all the data on the same page by finding the display select dropdown to the upper right (see #1 below), and increasing the number so that it exceeds the number shown in the "Data" column for your form.
- Select all the data by clicking the top checkbox above the column of checkboxes. This will check all the checkboxes (see #2 below).
- Select the Publish button (see #3 below). (Note: The data must be published before it is exported).
- Select all the data by clicking the top checkbox above the column of checkboxes (see #2 below).
- Click the Exportbutton (see #4below).
- A popup window will ask you if you want to open the form. Make sure "Open with Microsoft Excel" is selected, then select the OKbutton (see #1 below):
- The form data will open in a Microsoft Excel spreadsheet. You can then save the file to your computer.
Unpublishing form data
After exporting your form data, make sure you unpublish it to protect it from unauthorized access:
- Select all the data again by clicking the top checkbox above the column of checkboxes (see #1 below).
- Click the Unpublish button (see #2 below).
What's next?
Set up a ReCaptcha to prevent the form from being used for spam. See "Adding CAPTCHA to your form" in the "Visforms: Form Setup" page.
-
Visforms: Saving and viewing data (Joomla! 4/5)
Overview
This procedure describes how to save data from a form using Visforms. More detailed documentation on using Visforms can be found here.
Configuring a form to save data
- Log into the Joomla! administrator page for your web site
- Click on Components > Visforms > Forms (see below):
- Select the name of the form that should be configured to save data.
- Click the Result tab (see #1 below).
- Make sure Yes is selected next to Save Result (see #2below).
- Click the Advanced tab.
- Under the Data Export options, make sure "Separator" is set to "Comma."
- Select Save & Close to the upper left:
Reviewing your form data
- Log into the Joomla! administrator page for your web site
- Click on Components > Visforms > Forms
- Find the row corresponding to your form, and click on the number in the "Data" column (see below). If the number is "0," no data has been collected yet.
- You will see all the data collected by the form, with the column names indicating the form fields:
Exporting data to an Excel spreadsheet
- Follow the steps under "Reviewing your form data" above to view the form data. Take note of the number in the "Data" column for your form.
- Display all the data on the same page by finding the display select dropdown to the upper right (see #1 below), and increasing the number so that it exceeds the number shown in the "Data" column for your form.
- Select all the data by clicking the top checkbox above the column of checkboxes. This will check all the checkboxes (see #2 below).
- Select the Publish option from the Actions button's dropdown menu (see #3 below). (Note: The data must be published before it is exported).
- Select all the data by clicking the top checkbox above the column of checkboxes (see #2 below).
- Click the Exportbutton (see #4below).
- A popup window will ask you if you want to open the form. Make sure "Open with Microsoft Excel" is selected, then select the OKbutton (see #1 below):
- The form data will open in a Microsoft Excel spreadsheet. You can then save the file to your computer.
Unpublishing form data
After exporting your form data, make sure you unpublish it to protect it from unauthorized access:
- Select all the data again by clicking the top checkbox above the column of checkboxes (see #1 below).
- Click the Unpublish option from the Actions button's dropdown menu (see #2 below). (The icon highlighted in black is another way to publish/unpublish form data).
What's next?
Set up a ReCaptcha to prevent the form from being used for spam. See "Adding CAPTCHA to your form" in the "Visforms: Form Setup" page.