Web Development Documentation

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 on webdevel.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 Validation tab (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.