7.4 Create Complex Custom Forms

This is a continuation of our article on building forms for our online store. In the previous article, we used four Basic element types to create a Contact Us form – textfield, textarea, checkbox and submit. In this article, we describe how to add more complex questions to this form. Complex questions take more time to make. But they are easier for your customers to answer. You will have a higher response rate for your forms if you learn to make complex forms.

We will discuss 4 types of complex form elements. These are the remaining Common Element types shown in the table below. These are Checkbox Group, Radio Group, Select List (which is also a group) and a security feature called CAPTCHA which should be placed at the bottom of almost any form just before the submit button to reduce spamming. We will then discuss form validation which is the final step in creating our form. Form validation insures that the viewer has filled out the form correctly before submitting it.

ELEMENT TYPES

01

4 Basic Fields:
TEXTBOX - This creates a text field on the form where the user can type in a single line of text, such as name or email address. You can specify length and the type of field with the Properties Panel.
TEXTAREA - Creates a field in which the user can type multiple lines of text. Number of lines is specified in the Property Panel.
CHECKBOX – The user can select one option at a time.
SUBMIT BUTTON – Creates a Submit button which is required with every form.

4 Slightly More Complex but Common Fields
CHECKBOX – The user can select more than one option at a time.
DROPDOWN – Creates a field with a Drop down arrow in which the user can choose one or more values which are hidden on the initial form screen.
RADIOBUTTON – The user must choose a single option between two or more mutually exclusive options.
CAPTCHA – Displays a human read code to reduce spamming.

Our prior Contact Us form had sections called How can we help?, Your contact information, and Information you would like. In our more complex form, we will add a new Section called ADDITIONAL INFORMATION which will include the following:

02

Create a Copy of our prior Contact Us form
Go to the Administration Section of your Joomla Website and click on Components > Breezin Forms > Manage Forms. Then select Contact Us. Then click Copy at the top of the page. Double Click on the Copy of Contact Us to open it.

For the Title, rename the form Ask Us a Question and for the file name, rename it contact_us2, then click on SAVE properties and SAVE:

03

First we will add a new section by clicking on Page 1 and then clicking on New Section. For the Type, select Field Set and for the Display Type, use wrap after each element. For the name, type in ADDITIONAL INFORMATION. Then click SAVE properties. Next click on EDIT to bring up the text editor:

04

Type in the text: In order to better help you, please give us some additional information about yourself.

Then click on SAVE to close the text Editor. Then Click on SAVE properties and SAVE to save the actual changes. Remember when creating text with the Breezin Forms text editor, there are three things you need to do in order to save it:
1. Click on the SAVE icon at the bottom of the text entry / WYSIWIG screen.
2. Click on the SAVE PROPERTIES button to save the form element.
3. Click on the SAVE icon in the upper right-hand corner of the screen to save the text itself.

Checkbox Groups
We are now ready to add the Check Box Group to this new Section. Checkbox groups are best used when you want to display all the options at one time, and allow the user to make multiple choices. Click on the Section ADDITIONAL INFORMATION, then click on New Element. For Type, use the Drop Down arrow to select Checkbox Group. For the label, type in I am most interested in (check as many as apply):
For the file name, type in interests, then click on SAVE properties:

05

For a checkbox group, the format to layout the options is as follows:
0;Title 1;value1
0;Title 2;value2
0;Title 3;value3

Two Options: 0;Label;Dabatase Value
or 1;Label;Database Value

If you put a 0 at the front, then the checkbox will be blank. If you put a 1 at the front, then that option will, by default, be checked. It is generally most polite to leave the check boxes unchecked and let your customer check any they are interested in. Your options will appear in the list in the same order as you enter them in the 'Group' field. If you want to change the order, just move them around within that field. Since we have chosen 'Wrap each element,' each choice will appear on a separate line in our form.

IMPORTANT: The database value (after the second semicolon) must not contain any spaces or special characters except for underscores. Use of special characters may cause the form to fail. Database values should also be short. Note also that there is no space between the semi-colon and the next word. But there can be spaces in whatever you use for your Title.

Here are the choice we will copy and paste into the GROUP section:
0;Website Design;webdesign
0;Ecommerce;ecommerce
0;Newsletters;newsletters
0;Video Production;video
0;Linux and Libre Office;linux
0;Creating and publishing books;books

Then click SAVE Properties and SAVE.

Radio groups
Radio groups are best used when you want to display all the options at one time, and allow the user to select only one of them. To set up a Radio Group element, click on the Section ADDITIONAL INFORMATION, then on NEW ELEMENT. Use the Drop Down arrow to select Radio Group. For the title, type in I am interested in learning more about how to create an online store. For name, enter online_store.

For a radio group, the format to layout the options is as follows:
0;Label;Dabatase Value
or 1;Label;Database Value
If you put a 0 at the front, then the radio button will be blank. If you put a 1 at the front, then that option will, by default, be marked as the choice. Here is the info we can cut and paste into the GROUP area:
0;Yes Sign Me Up!;yes
0;Maybe. I still need more information;maybe
0;Not at this time;no

Then click on SAVE properties and SAVE.

Select From List Groups
One of the most common Elements is a Select From List. In fact, we have been using select list elements to select which elements we will be choosing! Select lists display a field box with a drop down arrow used to select only one of several choices.

Click on the Section ADDITIONAL INFORMATION, then NEW ELEMENT. For type, select Select from list. For label, type in Use the Drop Down arrow to indicate what State you live in.
And for file name, type in “state.”
For a select from list, the format to layout the options is the same as with radio group and checkbox group (which is why we are covering all three together):
0;Label;Dabatase Value
If you want to have the first line of a Select-List be something like "Please Select..." then you would set that up like this:
0;Please Select...;
In this case, you will notice that there is no value entered after the second semicolon. That is because, if you put a value in it and then use validation rules (discussed next) that state the element is required, any text after that second semicolon would make it appear that a choice had been made. If you put no text after the second semicolon, then the validation script will still prompt them to select a choice in the field. There are all kinds of pre-defined lists so you usually do not have to type out the three options for all 50 states. At the end of this article is a list of the 50 states. Most of these lists are available on line and/or can be copied from any webpage which uses the list. So copy the list of States and insert it in to the LIST area. Then click on SAVE properties and SAVE. Here is what it looks like:

06

ADD CAPTCHA SECTION AND ELEMENT
Captcha is used on nearly all forms to cut down on spam. To add text to the beginning of the Captcha element, we need to make a new Section. To make a new section, click on Page 1, then click on New Section. For type choose Field Set, for Display choose “Wrap” and for Title type in “Prove you are human.”

07

Then click on EDIT to open the Text editor and type in: If you want us to help you, you have to prove you are a human by filling in the form with whatever numbers and letters you see in this box:

Then click on all three SAVE buttons. Next click on the Section Prove You are human, and click on NEW ELEMENT. For Element Type, select CAPTCHA. For Label, type in “You can do it!”
Then click on SAVE properties and SAVE.

We are now ready to see what our form looks like on our website. But we do not need to create a new menu item. We merely need to redirect the existing menu item to our new form. Go to MENUS > MAIN MENU and click on the Contact Us Menu item to open it. In the Add Form tab, add a 2 to the end of the form name and then click on SAVE and Close. Then click View Site and click on the Contact Us Menu Item. Here is the additional section to our Contact Us form:

08

The good news is that you are now an expert on adding all 8 common field elements! Thanks to Breezin Forms and the Joomla Content Management System, this is not terribly difficult, is it? Now that we have a finished form, we are ready to add validation to any elements that are required to be filled out.

Form Validation
We will now add some more fields, and then make some of our fields REQUIRED fields. Any time you have required fields, you also need some way to validate that the form was filled out correctly. Validation is also important to insure that data in your database is accurate. Validation tool tips will also provide your users with feedback on whether they have entered their data correctly. So adding form validation helps everyone.

To make Questions Required or not to make Required?
If we make too much stuff required, folks will not want to fill out your form. But if you make nothing required, folks may wonder why you did not respond to them when the problem was that they put in a bad email address. So in general, only make things required if it is information you really need to have. Some typical required fields include first name, last name and email address.

What is Validation?
Validation simply means making sure that your reader has properly filled out the form before it is submitted. This includes making sure that they filled out the required fields (like name and email address) and that the fields included the required information (like an @ in the email address and that the zip code is only numbers and not letters). Now that all of the elements have been entered, we will go back to each element and add any desired modifications.

To define required (versus optional) form elements, simply select the desired element and under Validation, check the option Required and in Validation type, choose Library, then 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 to your readers by a red asterisk * in the front end. For example, select the element First Name by clicking on it. Then scroll down to the Validation Area at the bottom of the Form page. Check Required.

09

Note that merely checking the REQUIRED box will not make an element required. You also have to put in a VALIDATION RULE.

For Validation, there are three options, None, Library and Custom. It is usually easiest to use the Library which comes pre-loaded with various common validation rules for different kinds of fields. So for Validation, select LIBRARY. Notice that when you select Library, additional hidden fields come in to view.

Click on the dropdown arrow to choose a script to invoke a validation rule. The scripts / validation rules that are installed with BreezingForms include:

10

The script to use will depend on the element type.

For Error Message, type in Please enter your First Name and for Script, use the drop down arrow to select valuenotempty. Then click Save Properties:

11

Repeat for Last Name.
For Email, check required and for validation of email, select valid email.
No validation is required any other fields as they are not required fields. This completes form validation. Click on SAVE Properties, and then click on SAVE to save all of your changes to this point.

Here is a partial list of which validation rules apply to which elements:

FF::ff_anychecked
Validates that a radio button in selected in a radio group, or that a checkbox has been checked in a checkbox group.
Can be used with the following elements:
Radio Group, Checkbox Group

FF::ff_checked
Validates that a radio button or checkbox is checked.
Can be used with the following elements:
Radio Button (when only one used), Checkbox (when only one used)

FF::ff_integer
Validates that an integer value is entered.
Can be used with the following elements: Textfield

FF::ff_integer_or_empty
Validates that either an integer value or nothing is entered.
Can be used with the following elements: Textfield

FF::ff_integeramount
Validates that a positive integer value is entered.
Can be used with the following elements: Textfield

FF::ff_real
Validates that a real number is entered.
Can be used with the following elements: Textfield

FF::ff_realamount
Validates that a positive real number is entered.
Can be used with the following elements: Textfield

FF::ff_unchecked
Validates that a radio button or checkbox is unchecked.
Can be used with the following elements:
Radio Button (when only one in use)
Checkbox (when only one in use)

FF::ff_validemail
Validates that the syntax for an email address is correct (not the email address itself).
Can be used with the following elements:
Any Textfield that is used to capture an Email address

FF::ff_validemail_repeat
Checks that the field value is a valid email address (syntax only) and has a second counterpart with an equal value.
Can be used with the following elements:
Any Textfield that is used to capture an Email address

FF::ff_valuenotempty
Validates that the field value is not empty.
Can be used with the following elements:
Textfield, Textarea, Select-List, Hidden Input, Calendar

To see how all of this looks and works, click on Preview to open up the form. Below is our list of states.

STATE SELECT LIST

0;State;
0;AK;AK
0;AL;AL
0;AR;AR
0;AZ;AZ
0;CA;CA
0;CO;CO
0;CT;CT
0;DC;DC
0;DE;DE
0;FL;FL
0;GA;GA
0;HI;HI
0;IA;IA
0;ID;ID
0;IL;IL
0;IN;IN
0;KS;KS
0;KY;KY
0;LA;LA
0;MA;MA
0;MD;MD
0;ME;ME
0;MI;MI
0;MN;MN
0;MO;MO
0;MS;MS
0;MT;MT
0;NC;NC
0;ND;ND
0;NE;NE
0;NH;NH
0;NJ;NJ
0;NM;NM
0;NV;NV
0;NY;NY
0;OH;OH
0;OK;OK
0;OR;OR
0;PA;PA
0;RI;RI
0;SC;SC
0;SD;SD
0;TN;TN
0;TX;TX
0;UT;UT
0;VA;VA
0;VT;VT
0;WA;WA
0;WI;WI
0;WV;WV
0;WY;WY

For our final exercise, we will create a custom registration form. We will also review how to manage form data including how to upload and download form data.

Create a Custom Joomla Registration Form
Imagine you want to build a Joomla website that will offer several online courses. The first step in this process is that these students will have to register at the College in the Clouds website. Each of these students will need to indicate what state or country they are from and provide additional information about which of the courses they are interested in. This is where the problems begin. The default Joomla Registration form is very limiting.

12

It is very difficult to add additional fields to this registration form. It is also difficult to change the appearance of the form or add additional images or instructions and information to help users fill out the form. It is also difficult to export information from the form without actually going into the Joomla database – something which presents its own series of risks and problems.

Another problem is that the default Joomla Registration and Log In process required creating and remembering a unique username. It is extremely common for folks to forget their username! Thankfully, there is a way to create a custom Registration form and Log In Form that allows us to control the questions and fields and appearance of these forms while at the same time allowing users to log in with their email address OR with a username (which is typically much shorter than an email address but much harder for users to remember.

We can add images, text, and a variety of field types. Best of all, data from this form can be downloaded directly to a spreadsheet for export to an Enewsletter email list or for other purposes without touching the Joomla database. This form also integrates with other important extensions such as Kunena forum. Let’s look at how to install and set up this custom Registration form and Login form.

First, we need to install Breezin Forms Free on our website. We then need to download a custom Joomla Login form. It is an XML file available at this link. https://crosstec.de/en/downloads/free/form-apps-for-breezingforms/details/6/34/free-form-apps-for-breezingforms-joomla-login-form.html

Next, we need a custom Joomla World Registration form which you can download from this link: https://createyourownonlinestore.org/free-downloads

Next, we need a custom Joomla authentication plugin which you can download at this link: https://extensions.joomla.org/extension/access-a-security/site-access/authentication-email/

Place all three files in your website extensions folder.

Install the Authentication Plugin

Install the plugin with Extensions, Manager, Install. You may get a warning that the plugin is missing a file:

Warning: JInstaller: :Install: File does not exist /var/www/html/Joomla3/tmp/install_60612477f28eb/packages/install_6061247807191/en-GB/en-GB.plg_system_email.ini

JInstaller: :Install: File does not exist /var/www/html/Joomla3/tmp/install_60612477f28eb/packages/install_606124780dad7/en-GB/en-GB.plg_authentication_email.ini

However, you will also get a message that the plugin was installed: Installation of the package was successful.

Go to Extensions, Plugins and enable the new email authentication plugin.

13

Do not unpublish the Joomla Authentication plugin. Open it and you will see this warning: You must have at least one authentication plugin enabled or you will lose all access to your site.

Also scroll down the list of plugins to the System Plugins and enable the Authentication Email System Plugin. This system plugin makes it so lost-password requests can accept an email address as well as a username.

Next go to Users, Manage and click on Options. Then change Allow User Registration to Yes and change User Account Activation to None. Then click Save and Close.

Install 2 Breezing Forms XML Packages
Transfer the custom Login file to your website Extensions folder. Then extract the folder to see the Login_Form XML file. To install this Breezin Forms XML package, open the Administrator of your website and go to Components > Breezin Forms > Configuration. Scroll to the Bottom and Click on Package Installer. This will bring up the Package installer screen. Choose Upload Package from client. Then browse to the Login XML file on your laptop. Then click on the Install Package icon locate at the top left side of the page. If the transfer was successful, you will see a success report.

Click on the Package Installer button again and use the same process to install the World Registration form. Then go to Components, Breezin Forms, Manage Forms. Click on the Login form to open it and view it. Then click Save to activate the package. Then close this form. Note that the form file name is loginform.

Create a Menu Item for the Custom Log In Form
To create a menu item for this form, go to Menus, Main Menu, New Menu Item. Then click SELECT. For menu item type, select Breezin Forms, Add Form. Give the menu item a Title, such as Log In Here. Then click on the Add Form tab and enter loginform as the form name. Then click Save and Close.

Create a Menu Item for the Custom Registration Form

Go to Manage Forms and use the Package Dropdown to choose Registration. Note that the World Registration form has the form name world_reg_form. Go to Menus, Main Menu, New Menu Item. Then click SELECT. For menu item type, select Breezin Forms, Add Form. Give the menu item a Title, such as Register Here. Then click on the Add Form tab and enter world_reg_form as the form name. Then click Save and Close.

Then in the front end, use a different email address to create a new registration. Click Create an Account. When completed, the new person will appear on your list of Joomla Users. Use the new log in form to have this new person log in with their email address instead of their username.

In order to make sure that everyone uses this new login form and registration form, unpublish the module for the default login form. Then click on the new login menu item to view its default fields. Its appearance will vary depending on your template and the Breezin Forms theme you are using.

Fix the Create a New Account Link on the Custom Login form

Make a copy of the custom log in form. Then open the copy. Change the title of the copy to Custom Login Form and change the name to custom_loginform. Then click on the element called Reginfo. Then click Edit.

14

Select the words Create an account. Then click on the Link Icon and change the URL from

http://localhost/Joomla3/index.php?option=com_users&view=registration

to:

http://localhost/Joomla3/index.php/register-here

Then click Update to update the link. Then click Save to close the edit screen. Then click Save Properties and Save.

Then right click on the element called Want to leave a message and delete it. Then right click on the element What will you do after login? and delete it. Then right click on the Section called Additional Questions and delete it. Then click Save and Save and Preview and Close.

Then go to Menus, Main Menu and click Log in here to edit this menu item. Change the name of the form to loginform2. Then click Save and Close and view site. Click on Log In Here and log in your test user using their email address to see if the revised log in form works.

Create Language Overrides

Even though users can now use either their username or email address to log in, the new log in form 2 just says Username.

15

We can fix this by editing the Log In Form 2 Username element and changing the Label to Username or Email Address.

Also the Administrator log in screen still just says Username.

16

We can fix this by going to Extensions, Languages, Overrides. Select English- Administrator. Then click New. Then type Username into the Search box. Scroll down to JGLOBAL_USERNAME and click on it. Then change the text from Username to Username or Email Address. Then click Save and Close.

Here are some more language overrides you may want to add for the Password Reset form:

COM_USERS_FIELD_RESET_CONFIRM_USERNAME_DESC="Enter your username."

COM_USERS_FIELD_RESET_CONFIRM_USERNAME_LABEL="Username"

Manage Form Data
Now that we have our custom registration form we will explain how to extract data from Breezin Forms responses and records in order to use the information with other tools such as your Enewsletter. One of the primary reasons to create forms on your websites is to get feedback and build a relationship with your readers. But data does not do you much good if it cannot be downloaded to a spreadsheet where you can manage it and migrate it to other applications such as your E Newsletter. Thankfully, Breezin Forms data is very easy to download and work with. Just go to Components > Breezin Forms > Manage Records.

17

The records are ordered in the table by the date they were submitted. To view any given record, click on it to open it.

The Records table can be filtered in several ways. You can select All Forms or just records from any given form. You can select only Viewed records. You can check off the records you want to export. Once you have selected the records you want to export, you can export them in three different ways, PDF, CSV or XML.

18

To export to a database, select CSV (which stands for Comma Separated Value) file. This will save the file to your Downloads folder. You can open and work with a CSV file with any Spreadsheet application. Here we will show how to use a free spreadsheet application called LibreOffice 4 Calc. This program is available for Windows, Apple or Linux by going to https://www.libreoffice.org/

Install and then open LibreOffice. Then open a new LibreCalc document. Then click on File Open and use Libre Calc to open the CSV file. The following Import Data Window will appear.

19

Click OK. Then delete any columns that you do not need.

20

The columns we need to create a CSV file to import into a Newsletter component are firstname and email address. Then click Save As and save it as a CSV file. You can then import this CSV file to your newsletter component to create a new mailing list.

Moving a Breezin Forms Package from one website to another
Next, we will review how to migrate a Breezin Forms Package from one website to another. This will save you a lot of work if you have multiple websites and you want to use similar forms on each website. Packages are a way of moving a Breezin Form you have created, or one of the default Breezin forms, from one website to another. Packages are created AFTER you have created some forms.

What is a package?
There may be times when you want to copy one of your forms to another domain. Using BreezingForm's 'Package' option, copying forms from one domain to another is a BREEZE, as long as the other domain is running Joomla! with the SAME OR A NEWER VERSION of the BreezingForms extension. When you create a package, you are actually creating an XML file which can then be shared with others. To send it via Email though, you might have to zip the file first, as not all Email applications / web hosts will accept XML files. To create a package for installation on another domain, go to Breezin Forms Configurations Page. At the bottom of this page, click on Create a Package. This will bring up the Create Package Screen.

21

Fill out the form using the following values.
ID: Leave the ID section blank.
Package Name: Give your package a file name (no spaces).
Version: Assign a version number to your form.
Package Title: Enter the title of your package (spaces are allowed).
Author Name: Enter your name.
Author Email: Enter your Email address.
Author URL: Enter your website URL, if applicable.
Description: Enter a brief description of your package and/or form. Form Selection: Select the form that you wish to include in the package.
Then click on the Continue button. You will be prompted to save an XML file. (Be aware that your browser might block, or attempt to block it. Check for any warnings in that regard.)

22

Click on Save File, then OK. This will put the file in your Downloads folder.

Then move this file to the same folder as your other Breezin Form files and folders. Now go to the back end of the website you want to install the new form package to. It must also have Breezin forms component already installed. Go to Breezin Forms Configuration page and click on Package Installer.

Install a Package
To install a Breezin Forms XML package, open the Administrator of your website and go to components > Breezin Forms > Configuration. Scroll to the Bottom and Click on Package Installer:

This will bring up the Package installer screen. Choose Upload Package from client. Then browse to the XML file on your laptop.

23

Then click on the Install Package icon locate at the top left side of the page. If the transfer was successful, you will see the following report:.

24

Click Close. Your form should now be accessible through the 'Manage Forms' link. So once you create a form for any one of your websites, you will be able to migrate it to any other website.

What’s Next?

This completes our section on creating business forms. In our next chapter, we will review how to add and use several tools to help promote your online store.