sasit_banner

Chronoforms: Simple Form Setup

This procedure describes how to set up a simple form using mostly text fields using ChronoForms version 5.  More detailed documentation on using ChronoForms 5 can be found here.


 Getting Started: Creating a new form

  • Log into the Joomla! administrator page for your web site
  • Click on Components > ChronoForms5:

    Components: ChronoForms5

  • Ignore the message "Your ChronoForms installation on webdevel.sas.rutgers.edu:443 is NOT validated."  Chronoforms will still work.
  • Click the New Simple button at the top: ChronoForms: New Simple button
  • For Form name, enter a short name for your form (see #1 below).  The form name should not have any spaces or special characters.
  • For Form description, enter a description of your form - spaces and special characters are allowed, but you can use dashes and underscores (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).

 New Form

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

Chronoforms: Simple Form Designer

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


Chronoforms: Edit Element Settings

  • 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):

Chronoforms: Edit Element Settings - Validation

  • After adding each field, click Save to the upper right to save your work on the form: Chronoforms 5: Save button

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

Chronoforms: Checkbox Group

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

Chronoforms: Checkbox Group - Edit element settings

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

Chronoforms: Publish Form

Saving your form

When you are done adding all your fields, click "Save and Close" to the upper right: Chronoforms 5: Save and Close button

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.

Once you configure your form to collect data, you can embed it within an article.

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.