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 will discuss 4 of 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. 

 

 

The 6 Elements not covered are used primarily in commercial applications.

 

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:

 

 

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

 

 

 

Creating a Copy of our prior form

Go to the Administration Section of your Joomla Website and click on Components > Breezin Forms > Manage Forms.

 

 

Select the Contact Us form we made in the last article, and then click on COPY in the upper right corner of the screen.

 

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:

 

 

 

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 on SAVE properties.

 

 

Next click on EDIT to bring up the text editor:

 

 

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

 

 

 

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 use ) and 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 special characters except for underscores, hyphens, or spaces. 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;Newsletters;newsletters

0;Social Networking;networking

0;Video Production;video

 

 

Then click on 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.

 

Click on the Section ADDITIONAL INFORMATION, then on NEW ELEMENT.

Use the Drop Down arrow to select Radio Group. For the label, type in

I am interested in learning more about political organizing. For file name, type in interests.

 

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 depending on how much time it takes;maybe

0;Not at this time;no

 

Then click on SAVE properties and SAVE. Here is what it looks like:

 

Select List

One of the most common Elements is a Select 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 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-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 "Choose Type..." then you would set that up like this:

0;Choose Type...;

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:

 

 

ADDING CAPTCHA ELEMENT

The Captcha element is pretty easy. But if you want to add text, then 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.

 

 

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 Parameters Basic add a 2 to the end of the file name and then click on SAVE.

 

 

Then click on Preview and click on the Contact Us Menu Item. Here is the additional section to our Contact Us form:

 

 

We will cover how to test the form later, after we have added a Thank You page. But the next step is adding Form Validation for any required fields. That is the subject of the next article.

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:

 

 

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!

 

Below is the list of States for the Select list:

 

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