In this tutorial you'll learn how to create a simple multiple-page form using QuickMode.

 

Content:

1 – LOG IN INTO YOUR JOOMLA! ACCOUNT

2 – QUICKMODE WORKSPACE

3 – ASSIGNING FIELD NAMES

4 – CREATING THE FORM STRUCTURE

5 – ADDING ELEMENTS

6 – DEFINING REQUIRED FORM ELEMENTS

7 – THANK YOU PAGE

8 – PUBLISHING THE FORM IN THE FRONTEND

 

1 – LOG IN INTO YOUR Joomla! ACCOUNT

Log into your Joomla! Account and go to Components > BreezingForms > Manage Forms.

 

2 – QUICKMODE WORKSPACE

On the Manage Forms screen, click on the button QuickMode.

The QuickMode workspace is composed of two areas:
On the left side, you can add new pages, sections and elements.
On the right side you have access to numerous form and element properties.

3 – ASSIGNING FIELD NAMES

QuickMode auto generates a title and name for the form. Those attributes can be changed anytime under Form properties. In this example, the form title is “My Form” and the form name “myForm”.

Important: The form name field provides a way to reference the form in a script and in the Joomla! component. It's recommended to avoid special characters, as well as blank spaces.

4 – Creating the form structure

4.1 – The basic structure of a form built in QuickMode consists of:

Page ? Sections ? Elements

Pages are necessary in order to hold sections and elements in a form and also make pagination possible.

Sections, while optional, are used to logically group together elements in a form. Sections can be displayed as Fieldsets with legends or plain (no legends and borders).

Elements allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. Additionally, elements provide special integration with PayPal (PayPal button), Joomla! Calendar, etc.

4.2 – Create a page by clicking on the button New Page located at the top left corner of the QuickMode workspace.

4.3 – Create a section on the recently added page by clicking on the button New Section.

In the example, the type of section chosen is Fieldset, the Display type All in a row and for the Title “General Info”.

Click on the button Save Properties.

4.4 – Create two new sections inside “General Info”. To do so, select “General Info” in the tree on the left side and click on the button New Section.

For both sections, choose Fieldset for the section type and Wrap after each element for the Display type.

The new sections received the titles “Personal Info” and “Business info” respectively.

Click on the button Save Properties.

4.5 – Create another section, this time, outside “General Info” by selecting Page 1 and clicking on the button New Section. Set the section properties to Type Fieldset, Display type Wrap after each element and for the title enter “Interests”, then click on Save Properties.

4.6 – Page 1 structure complete, let's now add a second page to the form. Select “My Form” in the tree and click on the button New Page.

4.7 – With Page 2 selected, add a Section called “Feedback”, and choose Fieldset for Type and Wrap after each element for Display type. Click on Save Properties.

Form structure complete, click on the button Save located at the top right corner.

5 – Adding elements

Adding elements in QuickMode is very easy. To add an element simply select the desired page or section and click on the button New Element.

When an element is added, it will automatically have a Label attached to it. The attribute Name will also be assigned on the fly. You can change an element's properties by selecting it and under Element Properties make the necessary changes.

The table below shows a list of elements that will be added to the form sample and their respective sections and pages:

Page Section Element Type Label Name
Page 1 Personal Info Textfield Name: name
Textfield Last Name: last_name
Radio Group Gender: gender
Calendar Birth Date: birth_date
Textfield Address: personal_address
Textfield E-mail: personal_email
Business Info Textfield Company Name: company_name
Textfield Address: company_address
Textfield Phone/Fax: company_phone
Textfield Contact name: contact_name
Textfield Contact's e-mail: contact_email
Textfield Website: website
Interests Checkbox Group Please select the subjects you are interested in: interests
Page 2 Feedback Textarea Tell us what you think of our products: feedback

 

Complete Form structure with elements:

6 – Defining required form elements

To define required form elements, simply select the desired element and under Validation, check the option Required and in Validation type, choose Library, select the appropriate validation script and enter an Error Message.

Each validation script has a description of its function displayed below the select box Script.

Required form elements are indicated by a red asterisk * in the frontend.

7 – Thank you page

To create a Thank You page, select your form in the tree, click on the button New Page. Select the added page in the tree and under Page Properties, click on Edit to add a message.

Sample message:

Thank you for contacting us. We will get back to you shortly.

Click on Save and Save properties respectively.

Message added, go to Form Properties and check the option Last page is thank you page. Click on Save properties and then Save, to save all changes.

8 – Publishing the form in the frontend

The last step is to make your form available to users on your website.

In Joomla!, go to Menus > (Name of your Menu) and click on the button New.

In Select Menu Type, choose BreezingForms and under Parameters (Basic), enter the form name in Form Name.

Give a title for the new menu item and click on Save.

The overall appearance of a form can be changed with themes. QuickMode provides a clean, customizable theme called "qmtheme" that can be found on the tab Advanced, under Other Options > Theme.

Well done! You have created you first multiple-page form in QuickMode.

Special Offer

Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!