logo wide 2000x350
This is a continuation of our article on building a Contact Us form. In the previous article, we used four Basic element types in this Contact Us form – textfield, textarea, checkbox and submit. In this article, we describe how to create a more complex form using more complex questions. Complex questions take more time to make. But they are easier for your viewers 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.


As you recall, our prior Contact Us form looked something like this:

02

In this form, we will add a new Section called ADDITIONAL INFORMATION which will include the following:

03

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 Contact Us 2 and for the file name, rename it contactus2, then click on SAVE properties and SAVE:


04

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.

05

Next click on EDIT to bring up the text editor:

06

Type in the text and 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.

We are now ready to add the Check Box Group to this new Section.

Checkbox Groups
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:

07

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

Where: 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 reader 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 functionality to fail. The 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;Nonprofits;nonprofits
0;Newsletters;newsletters
0;Social Networking;networking
0;Video Production;video
0;Linux and Libre Office;linux
0;Creating Ebooks and Print Books;ebooks

Then click SAVE Properties and SAVE.

08

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 build a Joomla website. For name, enter joomla.

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

Here is what it looks like:

09

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 in the next article) 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:

10

ADD CAPTCHA ELEMENT
Captcha is used on nearly all forms to cut down on spam. The idea is that only humans can fill it out. The Recaptcha element is pretty easy to create. But if you want to add text to the beginning of the Captcha element, then you 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.”


11

Then click on EDIT to open the Text editor and type in:

If you want me 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:

14

The good news is that you are now an expert on adding all 8 common field elements! What were their names again? Below are their names with some important tips on each:

15

Hopefully, some of this is starting to get in to your long term memory cells. Thanks to Breezin Forms and the Joomla Content Management System, this is not terribly difficult, is it? So far, we have not used a single bit of computer coding! On our website version is the list of States for the Select list.
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. Here is our Contact Us form so far.


16

Mailing addresses are generally not used on forms anymore. However, we are going to add one more section called Mailing Information just to help us better understand validation rules.

17

We will also move the CAPTCHA section to after this section.

18

The first step in creating a new more expanded form to practice Validation is to go to Breezin Forms > Manage Forms and make a copy of Contact Us 2. Then double click on the new copy to open it in the Work Space. Change it’s name to Contact Us 3 and change the file name to contactus3. Then click on SAVE properties and SAVE. Let’s begin by clicking on Page 1, then clicking on New Section to add our new section called Mailing Information.

19

A problem with the above screen is that, thanks to our poor planning, the Mailing Information section is AFTER the Captcha section.

We want the Captcha section to be the last section on the first page of the form. We could delete the Captcha section and then add a new section at the end of the page to recreate the captcha section. But then we would have to redo the text that is inside of this section. Thankfully, Breezin Forms offers a very important feature. Just click on the Prove you are a human section and copy it.

20

Click on Copy. Then select Page 1 and click on Paste. Then right click on the original captcha section and delete it.

21

Now that the sections are in the right order, select the Mailing Information section and click on EDIT to add the text: If you would like to receive a written copy of our newsletter, fill out the following information:

Then click on ALL THREE SAVES to save this text.

Now click on Mailing Information section and add a new field text element called Street Address and another called City and another called Zip Code. Then click on SAVE Properties after each and SAVE after you are done with all three.

Our folders now look like the following:

22

Street Address City and Zip Code should have their field lengths adjusted to 200 px and 150px and 50px so let’s do that by clicking on each and entering the values in the SIZE and Max Length properties as discussed in our second article. Be sure to click SAVE properties after entering each set of values and before moving on to the next element. Then click on SAVE when you are done with all three. Finally, we are ready to add validation for required elements. But first this message from our sponsor.

To make Required or not to make Required? That is the question.
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. We will add a couple more just so you can see how it works. But I do not recommend having too many required fields.


What is Validation? That is the other question.
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 frontend. 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.

23

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:

24

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:

25

Repeat for Last Name, and City.
For Zip Code, validation is integer amount.
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 in use)
Checkbox (when only one in use)

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, go to the Main Menu and Click on Contact Us and change the file name to contactus3 and then click on Preview to open up the form. In the next article, we will explain how to create a custom registration form. We will also review how to manage form data including how to upload and download form data. 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