In Part 1 of this article, we created the structure for our form by creating sections – each of which will contain elements or questions for our readers to answer. In Part 2 of this article, we will now add Basic Elements to each of our Sections.

 

ELEMENT TYPES

We will only use four element types in this Contact Us form – textfield, textarea, checkbox and submit. However, when you click on the Element Type drop down arrow, you will see that there are more than a dozen element types as are shown in the following table. We will discuss 4 of the remaining types in the next article.

 

 

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

 

Adding Elements

When an element is added, it will automatically have a Label attached to it. The attribute (file) 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:

 

 

Note that the file name should have no spaces and should be short and descriptive as this is what will be used to head columns in your data base. It is generally a good idea to keep the first and last names in separate fields if you want to use this data later to send out personal emails or customized newsletters.

 

We are now ready to add our first field ELEMENT.  To do this, first click on the Section you want to add the element to (Your Contact Information), then click on the NEW ELEMENT tab.

 

 

For type, leave it as text field, for Label, type in First Name and for file Name, type in firstname.

Then click on Save Properties.

 

 

Then click on the Your Contact information section again and click on new element again.

For type, leave it as text field, for Label, type in Last Name and for file Name, type in lastname.

Then click on Save Properties.

 

Then click on the Your Contact information section again and click on new element again.

For type, leave it as text field, for Label, type in Email Address and for file Name, type in email.

 

Then click on Save Properties and SAVE. Here is how our form currently looks:

 

 

Since you are now an expert at adding text fields, we will move on to the second element type.

This time we are in a new section, so select the section Information You Would Like, then click on new element. For type, use the Drop Down arrow to select Field Area. For the Label, type in Briefly describe your question or problem. And for the file Name, type in question. Then click on Save Properties.

 

 

Again select the section Information You Would Like, then click on new element. For type, use the Drop Down arrow to select checkbox. For the Title, type in Check here to receive our free monthly newsletter and for the file Name, type in question. Then click on Save Properties and SAVE. Here is what our form currently looks like:

 

 

ADDING THE MANDATORY SUBMIT BUTTON

The final section is the Submit button which is outside of and below the form. While there is a submit button element which you can place inside of any Section, it is best to not use this option. Instead, click on Contact Us form itself to select the entire form.

 

 

Note that in the Properties Column, the line Include Submit Button has already been selected for YES. Also there is a default label for the button called Submit. Since we want a custom Submit button, type in CLICK HERE TO SEND YOUR REQUEST

 

 

Then click on Save Properties and SAVE.

 

Modifying Element Field Lengths

One of the biggest benefits of Breezin Forms is that there are many options for controlling the appearance of your forms. We will begin with one of the most important aspects of appearance which is controlling the length of each field box so there is enough room for your readers to supply needed information, but not so much room that the field box runs all the way across the page.

 

Common Form Field Lengths

 

 

In the Your Contact Information section, let’s begin with the first name by selecting this element.

 

 

Note that there are 6 basic element properties. We have already filled out the Type, Label and Name of this element. We will skip the value property for now and fill out the SIZE and MAX LENGTH element properties. To simplify things, we will use the lengths listed on the table above. 

So for the First Name element, type in 150px for Size and 15 for Max Length. Do not add a space between 150 and px. Also do not add anything after the number 15. Then click on Save Properties.

 

 

Click on each of the remaining 2 elements in the table above that require field length adjustment and specify the Size and Max Length for each of these elements. Be sure to click on Save Properties after each element! Next let’s click on SAVE at the top right corner of the page.

 

The text area Element does not need any modification of properties as there are preset default properties.

 

But the Check box element will not return a value unless one is specified. Therefore check on the Check Box Element and yes for the value – meaning that if the person checks the box, they want to be added to the newsletter list.

 

Then click on Save Properies and SAVE.

 

Publishing and viewing your completed form in the frontend

We are now ready to see what our completed form looks like on our website. To view it, we first need to create a menu item. To create a Joomla menu item so your form will be available to users on your website, go to Menus > Main Menu and click on the button New.

 

 

In Select Menu Item Type, choose BreezingForms.

 

This brings up the Menu Item finishing screen:

 

 

For Menu Item Details, give the form a title which will appear in the main menu so keep it short. Call it Contact Us You can use the drop down arrow to select the menu and you can choose a parent item below that. The Contact Us typically is on the far right in a horizontal menu or at the bottom of a vertical menu.

 

For Parameters (Basic), enter the form name in Form Name. Note that this is not the Title of your form, but the file name which has no spaces. Hopefully you remember what that is (contactus). Then click on SAVE.

 

Then click on Preview. This will take you to your Website’s Front Page. Click on the Menu Item you just created to go to your Contact Form:

 

 

We will discuss how to test your Contact Us form in a later article after we have added some more complex fields and a Thank You Page. But for now, the Contact Us form is looking pretty good.

I should however want you that when you go back to your Breezin Forms Manage Forms page, if this is your very first form, it may look like our form has disappeared.

 

Finding Your Form in Manage Forms

When you click on SAVE or go back to Manage Forms for the first time, Breezin Forms will take you back to the Manage Forms screen where it will appear as if your form is not listed and has disappeared. Do not panic!  Instead, when you are on your Manage Forms page, just above the form list, you should see the word "Packages" with a dropdown list beside it:

Click on that PACKAGE dropdown list and you should see the option to select QuickMode Forms or EasyMode Forms or Samples. Click on the mode that you created your forms in (Quick Mode) and the forms *should* now appear.

 

 

Well done! You have created you first form with Breezin Forms QuickMode.

 

In the next article, we will add four slightly more complex but still very common elements to this form.