logo wide 2000x350

9 Design Forms

Welcome to Chapter Nine of our course on creating your own interactive website!

Chapter Nine Design and Use Forms includes the following four sections:
9.1 How to Add Feedback Forms to your Website
9.2 Create a Contact Us Form with Simple Elements
9.3 Add Complex Elements and Form Validation
9.4 How to Create a Custom Joomla Registration Form

Section 9.1 describes how to install and set up a free form generator called Breezin Forms Lite.

Section 9.2 provides step by step instructions for using Breezin Forms to create a Contact Us feedback form.

Section 9.3 reviews how to add several more complex form elements such as drop down selectors.

Section 9.4 outlines how to create a custom Joomla Registration form which allows you to add custom fields and export data.   

00r
Imagine you want to build a Joomla website that will offer a six online courses to hundreds of students. 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 country they are from and provide additional information about which of the six courses they are interested in. This is where the logistical problems begin. The default Joomla Registration form is pretty limiting.

01

Even if you activate the User Profile plugin, there is still not much in the way of additional information. 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.

One option which addresses all of these problems is to use a free Joomla extension called Breezin Forms Free. They offer a free Joomla Registration form XML file which integrates with the Joomla Registration form functions but also allows us to change the appearance and expand the fields in the registration form as much as might be needed. 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. In this article, we will look at how to install and use this extension. First, we need to install Breezin Forms Free on our website. Second, we need to download the Breezin Forms User Registration and 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


Install a Package
Transfer this file to your website Extensions folder. Then extract the folder to see the XML file. 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.


03

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. 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. Note that the form file name is loginform.

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

05


Give the menu item a Title, such as COURSE REGISTRATION. Then click on the Add Form tab and enter loginform as the form name. Then click Save and Close. In order to make sure that everyone uses this new registration form, unpublish the menu item for the default registration form. Then click on the new registration form to view its default fields. Its appearance will vary depending on your template and the Breezin Forms theme you are using.

In order for the form to work, we should go to Users, User Manager, Options and change New User Account Activation to None. We should also disable any other user plugins other than the default Joomla User Plugin. Next, let's look at where the data is stored and how to export it. Go to Components, Breezin forms. Then click on Manage Records.

07

Select the record and click on CSV to download the CSV file. Now go to your Downloads folder and look for a CSV file that starts with the name FFEXPORT.
It exported everything except the password.

Fix the Thank you for registering message
After registering, Breezin Forms displays the following Thank You message.


08

The problem is that we have disabled email validation. So there is nothing for the user to check. Thankfully, Breezin Forms new Joomla registration form comes with its own customizable Thank you for registering form. To change this, go to Components, Breezin Forms, Registration Forms and click on it to open it. Then click on Page 2. Then click on Edit. Add an image at the beginning of the form and then add Thank you for registering at College in the Clouds. We will keep you posted on upcoming courses. In the mean time, if you would like to ask a question, you can post it by clicking on the FORUM menu item.
To save this text, we need to click Save. Then Save Properties, then Save.

Customize our new registration form
The final thing we need to do is customize our new registration form. Select the form, then click COPY to make a copy of the form and make all of our changes on the copy in case things do not work after our changes.


09

Click on the copy to open it. Change its title to New Registration Form and change its name to new_registration_form. Click Save Properties. Then Save. Here is the Initial Structure of this form.

10

We will leave the Register Details section alone. First, we will delete the question about wanting additional information. We will also delete the Terms and Conditions elements in the Rules and Security section. Then change the name of this section to Prove you are human. Next, we will add a couple of things. First, we will add a better Introductory message to our form. We will also add a list of the six certification levels. Also we will add an alphabetical list of countries that folks can sign up for and an alphabetical list of continents. We can add more field elements over time as needed. We will leave the security code section as it is. Finally, we will change the name of the submit button to REGISTER.

Add a Better Introduction
Next, click on Page 1. Then click on Edit. Insert an image and some text on how to fill out the form and why the information is needed. Then click Save, Save Properties and Save. Then select Page 1 again. Then click on New Section. Make the new section type Field Set. Then call the new section Additional Information. Then click Save Properties and Save.

Next select the Additional Information section and click New Element.
The first new element will be a Checkbox group. For the Label, type,
I am interested in learning more about the following courses (check as many as apply)
For the element name, type interests.
For the Group, delete the existing choices. Then copy and paste the following:
0;Learn Linux and LibreOffice;linuxcourse
0;Create Your Own Ebook;ebookcourse
0;Build Your Own Business Website;websitecourse

Then click Save Properties and Save. Then click the Additional Information section again and click New Element again.
For the second new element, for type, use Select from list.
For Label use Please select your Continent (required)
For element name, type continent.
For list , delete the existing sample values and copy paste the following.
0;Continent Required;
0;Africa;africa
0;Asia;asia
0;Australia;australia
0;Europe;europe
0;South America;southamerica
0;North America;northamerica

Then click Save Properties and Save. Then click the Additional Information section again and click New Element again.
For the third new element, for type, use Select from list.
For Label, use Please select your Country (required)
For element name, type country
For list, delete the existing sample values and copy paste the following alphabetical list of countries. Here is the link to get the Breezin Forms alphabetical list of countries.
http://crosstec.de/en/forums/15-usage/7396-country-list.html
Scroll down the page to get the list of countries with an initial capital letter. To make one of the countries the default country, just replace the 0 with a 1 for that country. To make the list of countries required, delete the 0 to make the first line:
0;Select from list;

Then click Save Properties and Save. Then click the Additional Information section again and click New Element again.

For the fourth new element, for type, use Select from list.
For Label, use If you live in the United States, please select your State
For element name, type in state.
For list, delete the existing sample values and copy paste an alphabetical list of US states:
0;US State;
0;AK;AK
0;AL;AL
0;AR;AR
0;AZ;AZ
0;CA;CA
etc.

Then click Save Properties and Save. Then click the Additional Information section again and click New Element again.
For the fifth new element, select Checkbox.
For Label, type in Click here to receive our free email newsletter updates!
For element name, type in newsletter.
For value, type yes.
Then click Save Properties and Save. Then click the Additional Information section again and click New Element again.
For the sixth new element, select Textarea.
For the label, type in Use this space for any questions you may have.
For element name, type in question.
Then click Save Properties and Save. Here is our form so far.

11

Move the Captcha to the bottom of Page 1
There is a problem in that the Prove you are human section should be at the end of the first page. The easiest way to get this section at the bottom of page 1 is to right click on Prove you are human and click COPY. Then right click on Page 1 and click PASTE. Then right click on the initial Prove you are human and click Delete. Then click Save.


Make Continent and Country required fields
The only additional fields that will be required are Continent and Country. First, select the Continent element. Then scroll to the bottom of the page and check Validation Required. Then click Library. For Error message, type in:


Please check which Continent you are on.
Change the script to FF;ff_valuenotempty.

Then click Save Properties and Save. Repeat for Country. Once we are done, we will change the name of the form in the menu item from BFRegistration to new_registration_form.

Final Changes
To make the form a little more friendly, we will select the term Security Code and change it to Please type in the hidden word in the box below it. Do not change the name of this element. Click Save Properties and Save. Also we will also change the name of the Submit button label from submit to REGISTER. Then click Save Properties and Save. Be sure to test the form again to make sure it still works. Hopefully it does. Now we have a flexible registration form which we can change in whatever way might be needed over time and we have a form in which we can easily upload data to a spreadsheet to process in whatever way is needed.


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.


12

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.

13

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.

14

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

15

The columns we need to create a CSV file to import into the free Joomla AcyMailing 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 Acymailing to create a new mailing list or add it to an existing email 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 / webhosts 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.

16

This will bring up the Create Package Screen.

17

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

18

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:


19

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

20

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

21

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. This completes our section on forms. Next, we will look at how to add a Downloads section to our website.
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
This section explains how to create a basic form using simple elements – or questions which do not require select box drop down configuration. There are many types of form questions. To introduce you to form making, we begin by showing you how to use the simple questions to make a simple contact us form.

Create Your Form Structure
In this article, we will create the structure for our form by creating sections – each of which will contain elements or questions for our readers to answer. We will review how to create a simple form using QuickMode. It does involve a lot of steps. But knowing these steps is important if you want to be able to create a functional and professional looking form. Log into your Joomla! Website Administrator Control Panel and go to Components > BreezingForms > Manage Forms. This will take you to the Manage Forms screen.


01

Create a Form with Quick Mode
On the Manage Forms screen, click on the button New in the upper left corner. This will take you to the Quick Mode Form Workspace screen:


3r

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 lots of form and element properties.

QuickMode auto generates a title and name for the form. Those attributes can be changed anytime under Form properties.
For the Title, delete the default Title and type in Contact Us.
For the Name, delete the default name and type in contact_us.

Important: The form name field provides a way to reference the form in a script and in the Joomla! component. It is essential to avoid special characters, as well as blank spaces in the form name field. Then click on SAVE PROPERTIES button which is just under the PROPERTIES TAB. Then click SAVE in the upper left corner.

04

Working with Breezin Forms Two Save Buttons.
Breezin Forms uses two different Save buttons. One of the most challenging parts of building a form with Breezin Forms is remembering to click on both Save buttons. If you fail to click on SAVE PROPERTIES button and merely click on SAVE after making changes, those changes will NOT be saved. So be sure to click on SAVE PROPERTIES frequently as you make changes on your form and always click on SAVE PROPERTIES before you click on SAVE to exit the page. It is also important to periodically click on SAVE after clicking on SAVE PROPERTIES. If you accidentally lose your internet connection, the SAVE PROPERTIES changes will not be saved.


Only the changes made up until the last time you clicked on SAVE will actually be saved. One of the few drawbacks of working with Breezin Forms is the need to continually be clicking on SAVE PROPERTIES and then clicking on SAVE. But once you get used to this habit, the forms produced by this form generator look much nicer than your typical forms. After clicking on SAVE PROPERTIES, a Settings Updated Notice will appear and the LEFT side of the page will show the change in the form Title from the default title to your new title.

05

Definitions of Essential Terms
There are a few essential terms you need to learn to build Breezin Forms. These terms include field, field sets, field elements, form sections and form pages.


Field Sets and Field Elements
Forms are basically a series of boxes inside of other boxes. The boxes used to make forms are called fields. The bigger boxes used to organize groups of forms are called field sets. There are only a couple of TYPES of field sets – all in a row or broken into new lines. Breezin Forms refers to these field sets as Sections. Inside of these big boxes are little boxes called Field Elements. These are the boxes that your readers will be filling out. There are many kinds of field elements and you can have as many field sets and field elements as you want in a given form and on a given web page. We will discuss the most basic field elements in this article and more advanced field elements in the next article.


The basic structure of a form built in QuickMode consists of:
Page → Sections → Elements

Pages are a new web page, just like a Joomla article is typically a new web page. Pages have no box structure around them. While it is possible to put text at the beginning of a Breezin Form Page, it is not recommended because there is a conflict between MS Word and MS Internet Explorer which may cause your page or your form to not display in Internet Explorer. It is therefore better to create a section inside your page and place any text you want inside of this protected box.

Pages are typically labeled and are necessary to hold sections and elements in a form. Multiple pages are only required for really long forms. Each page can have a different title than the title of the form. In fact, every form must begin with at least one new page. Sections are nothing more than large field sets (or boxes) which can be used to hold smaller sections or field sets (or boxes) which in turn hold elements. Sections often come with labels, which can be used to group together elements in a form and help your reader better understand your form. Sections come in TWO TYPES. The NORMAL type does not have a legend at the top. It is just a box. The FIELD SET is a box displayed with a legend at the top. You can have several sections in a page. Elements allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

We will create this basic Contact Us form as an example of Form Structure:

06

Divide the page in to sections
Now we will show you how to create the above form. Just to practice creating new sections, we will divide this form into four sections. In reality, a form this short would likely only need one section. The first three sections will have labels (how can we help, etc). The first section will be only text. The second section will include text and three elements. The third section will be an element with no text. The last section will be a custom SUBMIT button outside of and below the form. Note that the entire form is displayed on a single page. At the end of this article, we will cover how to add a second Thank You Page. To make the above form, go to Components, Breezin Forms, MANAGE FORMS, click on QUICK MODE to create a new form. For the Title, type in Contact Us and for the Name of the file, type in contact_us. Then click Save Properties, then click SAVE.


07

All forms are put inside of pages. To create a new page, click on the button New Page located at the top left corner of the QuickMode workspace. The page can have a name or be left blank. We will leave it blank. By default, it is named Page 1. Click on Save Properties, then click on SAVE. Then click Page 1 to open it.

08


Add an Image to the beginning of the form
By default, the new page is called Page 1. It is generally not a good idea to add text at the beginning of the form because it may create problems for Internet Explorer. If you have any text you would like at the beginning of your form, you should put it inside of a section as is described below. However, you can add an image. To add an image before beginning your form, click on EDIT to bring up the text editor:


09

Adding images is another way to build a relationship with your readers. If you have placed an image in the images folder of your website’s media manager, you can insert it here by clicking on the images icon in the JCE text editor.

(Note: The JCE Editor Image Manager function may not work in the Chrome or Firefox browser. If the image fails to load, download the free open source Chromium web browser and make your Breezin Forms with that browser.)

10

Click Insert.

11

After you are done inserting your image, click on SAVE which is at the very bottom or top of the page. Then you also have to click on SAVE Properties and SAVE to actually save these changes! In other words, you must click three different SAVES in order to save this image.

12

When you click on the final save, it will take you back to the form start page. Click on Page 1 to select it again. Then create a section in page 1 by clicking on the button New Section.

13

For each new section, there are a few boxes that need to be filled out. The first box is the Type box. There are only two options for Types: Normal and Field Set. Field Set places a box around the elements and helps with organization and appearance by placing the Title of the Section at the top of the box. With Normal, the Title is not displayed. We will therefore almost always click on the Drop Down arrow and select Field Set.

For Display Type, there are also only two Display Types. These are All in a Row and Wrap after each element. The difference between All in a Row and Wrap after each element is that if the field lengths are short enough, all in a row can put more than one element on the same line whereas Wrap after each element puts each new element field box on a separate row. If you have a bunch of information you want to display in a small space, All in a Row is useful so you can include more than one element on each line. However, for this form, we want to use a new line for each element, We will therefore select WRAP AFTER EACH ELEMENT. For the Title, type in How can we help you?

14

Then click on Save Properties and Save:

15

Click on the Section How can we help you? to open it:

16

Then click on EDIT to bring up the text editor to insert the following text:

We are here to help you. Please fill out the following form to clarify what you need. Remember to click on ALL THREE SAVES to save this text. There are no field elements in this first section. So click on Page One again and then click on NEW SECTION to add your second section.

17

For type, we want Field Set. For Display type, we want wrap.

For the Title, type in Your Contact Information. This will be displayed in the Section Border which will appear around this section. If you want a section without a title, just leave it as untitled section. For section name, because every section file name on every form must be unique, we will generally let Breezin forms name the file for us. Click on SAVE Properties and SAVE. Click on Your Contact Information to return to this section. Below is what our new section looks like so far:

18

Text can also be placed at the beginning of a Section. In fact, anywhere you want text and/or images to appear in your form, you can place it there simply by adding a new section and then clicking on the EDIT link that will appear in the right-hand element properties. This is the Section we are working on now:

19

For Description in this section, We respect your privacy. Your name and contact information will not be shared with anyone, click on EDIT and insert the text into the text editor. Then click on all THREE SAVES.

Let’s add the third section called Information you would like, before we start adding elements:

20

Click on Page 1. Then click on the New Section tab. Again we want Field Set and Wrap after each element. For Title, call this section Information You Would Like. There is no text and we will add the element later. So click on Save Properties and Save. Here is what the left column now looks like:

21

Because the Submit button is after the form and will be added later, we are now done creating the Structure of our form. We can always add more sections later if we want by clicking on the Orange New Section button.

Add Basic Elements
Now that we have our three sections created, we are ready to add elements to them.



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 there are more than a dozen element types as are shown below. We will discuss 4 of the remaining types in the next article.


22

The 6 other elements provided by Breezin Forms are not covered as they are used primarily in commercial applications. We will provide better extensions for these 6 elements later in our courses.

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
Elements are a fancy name for “different types of questions.” 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 Contact Us form sample and their respective sections:


23

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.

24

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.

25

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:

26

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

27

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 Click here to receive our free monthly newsletter! and for the file Name, type in newsletter. Then click on Save Properties and SAVE. Here is what our form currently looks like:

28

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


29

In the Form Properties Column, the line Include Submit Button has already been selected for YES. Also there is a default label for the button called Submit. To make a custom Submit button, type in CLICK HERE TO SEND REQUEST

30

Then click on Save Properties and SAVE. Then click the Site Preview button at the top of the form edit page to see what our form looks like so far. Don’t worry if it looks kind of bad. We will fix up the appearance in just a minute.

Modify 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

31

In the Your Contact Information section, begin with the first name. Select this element.

32

Note that there are 7 basic element properties. We have already filled out the Type, Label and Name of this element. We will skip the value and placeholder 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.

33

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 (Click here to receive our newsletter) will not return a value unless one is specified. Therefore check on the Check Box Element and set 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 Properties and SAVE.

Next click on the Advanced Tab. Choose theme engine by default is set for Bootstrap. We do not want this as it does not work well with our Free version. So change the setting to Breezin Forms. Then click Save Properties. Then click Save. Then click on the Advanced tab again. Change the theme from default to qmtheme. Then click Save Properties and Save. Then click Preview Site. Now our Contact Us form looks much better. Click Close to close the form edit screen.

Publish and view your completed form in the frontend

We are now ready to see what our completed form looks like on our website. You can click PREVIEW at any time to see what your form looks like. But to view it on your website front end, we first need to create a menu item. Before we create a menu item, we should click on Manage Forms to see our completed form:

34

Note that the name of our form is contactus. 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.

35

Click on Select. For Menu Item Type, click on Breezin Forms.

Then scroll down and click Add Form.

36

Choose BreezingForms. Add Form. This will return us to the New Menu Item screen where there will be a new tab called Add Form. Click on this tab.

37

For Add Form, enter the 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). For Menu Item Details, give the form a title which will appear in the main menu so keep it short. Call it Contact Us . If this name was already taken by a previous menu item, call the menu item ASK US A QUESTION. You can use the drop down arrow to select the menu and choose a parent item below that. Click on Link type and type in the color lightgreen. The Contact Us Menu Item is typically on the far right in a horizontal menu. Then click SAVE and Close, then VIEW SITE. This will take you to your HOME Page. Click on CONTACT US. Below is what our form now looks like.

38r

Add a Thank you page
Before we test this form to see if it actually works, we should also create a Thank You page. To create a Thank You page, go to COMPONENTS > Breezin Forms > Manage Forms and open the Contact Us form.


42

Check Last Page is thank you page. Also check Mail Notification and put in an email address which is associated with your website. Paging included should also be set to Yes and next page to next. Then click on SAVE properties.
To create the second page, click the name of the form. Then click NEW PAGE.

43

Under Page Properties, click on Edit to open up the text editor and add an image and a message. First, add an image to this page if you have one in images folder. Then add a sample message:

Thank you for contacting us. We will get back to you shortly.
Feel free to email me if you have any questions.
To go back to our HOME page, just click on HOME in the top menu.
Regards, David Spring
davidspring (at) protonmail (dot)ch


Click on Save and Save properties and SAVE. respectively.

WARNING: Internet Explorer may not display INTRO text unless it is preceded by an image. If you do not have an image to put in front of your text, then select the page and click on NEW SECTION. Call the section Thank You and make it a field set. Then click on EDIT in the section and add any text you have here.

Test Your Form
Click VIEW SITE and go to the form page and fill out the form to verify that the user receives the Thank You page:


44r

Also verify that you receive an email with the information submitted by the user. It is a good idea to try a couple of different browsers and a couple of different email addresses. This will also load data from your form into your data base. This is useful because in our last article on forms, we will discuss downloading and managing form data. I should however warn 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 may 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 discuss how to add four more complex fields to this form. validation
Forms are an essential part of any interactive website. Without forms, your options for interacting with a large number of viewers are very limited. It is important for any successful online business owner to be able to create a variety of forms that interact not only with your customers but also with the database for your website. We will show you how to install and use the most versatile free Joomla form making tool on your website. This tool is called Breezin Forms.

Why you should add feedback forms to your website
Forms are not difficult to master. But creating them will take some time to learn because forms have a language all their own. So the question is why should you go through the hassle of learning this language? One of the key aspects of a modern interactive website is being able to interact with the viewer of your website. Feedback forms which are easy for your viewers to fill out and send back to you play an important role in this process. But to be truly useful, these forms should also be capable of being tied to a data base where the responses can be processed and reports produced. In the past, attaching a database to a website was very difficult to set up. One of the key benefits of Joomla websites is that they are all database driven. All Joomla websites therefore already come equipped with a (hidden) database. So all you need to do is tie a form to this data base to join the modern online interactive website revolution.


In the past, forms were also quite difficult to create because each field in the form had to be coded manually. Thankfully, there is a free Joomla extension that makes writing forms not much more difficult than writing Joomla articles. The extension is called Breezin Forms. This and the next three articles will review how to install Breezin Forms on your website and use it to create a detailed Contact Us form and a custom registration form and post them on your website.

Why Breezin Forms?
There are more than a dozen Form Extension options for Joomla. They range from easy but limited form generators to very complex options that are well beyond the ability of most non-computer programmers. There is one free option which is not difficult to learn and has unlimited design potential. If you want professional looking forms, then it is worth the time to learn how to use a Joomla extension called Breezin Forms. Their paid commercial option is also very popular. But for now, we will start with their FREE version which will do almost anything most business owners would want.


This free form generator includes several important features:
First, Breezin Forms gives you the ability to divide your form into as many sections and pages as you need. This is particularly important for complex forms. You can also add descriptive images and text to every section of your form.
Second, Breezin Forms offers 14 types of form elements to choose from. We will review these form elements in the next section. But it is essential to have a wide range of elements to build a useful form.

Third, Breezin Forms offer a fully integrated Recaptcha system for cutting down on spam. Fourth, it offers many free themes to customize the appearance of the form. Fifth, it offers a form validation system to insure that users submit fully completed forms. Sixth, user data gathered with Breezin Forms is automatically transmitted in email notifications and/or in a downloadable data base exportable into CSV for processing with Excel or Libre Office spreadsheets. Seventh, it offers the ability to create, copy and move form templates and themes from one website to another. Last and most important, this component provides detailed documentation on how to use complex form functions and solve common problems. Thankfully, Breezin Forms makes this process easy to learn.

01

What about Google Forms?
Google also offers an easy form builder that stores forms and form data in Google Drive – which comes free with any Gmail account. The problem with this approach is that Google controls your data rather than you. At any moment, your data could be gone. Second, Google mines data from your users to direct ads at them. It is how Google makes money. Using Google Forms means you are sharing user data with Google. The only honest way to assure your customers that “You do not share their data with anyone” is if you keep that data on your own securely encrypted database associated with your own website. As more folks become aware of the drawbacks of handing over all of their data to Google and Facebook, folks will learn to avoid Google Forms.


Install Breezin Forms
The Breezin Forms FREE program can be downloaded from the Joomla Extension Directory (JED).https://extensions.joomla.org/extensions/extension/contacts-and-feedback/forms/breezing-forms


02

Click on DEMO. Then scroll down the page and click on the All Elements Example (with default theme). This is an example of all available elements in BreezingForms. The text you see here is a page intro text, every page may have an intro text where you are free to use HTML The awesome thing about BreezingForm's QuickMode is, that you don't need to handle complicated layouts, you just create them while doing your form. BreezingForms makes sure that everything looks good. There are a dozen free themes that come with Breezin Forms. Click on the right menu to see them. If you need a different look, choose from the available themes or just create your own theme!

This form shows you the power and flexibility of Breezin Forms. We will create a similar form as shown below.

04
Now go back to the JED and download Breezin Forms by clicking on Download. Next, click on Download Breezin Forms Free Now. Transfer the zipped Breezin Forms folder to your website Extensions folder. Then Click on UNZIP FIRST and extract the BreezinForms Lie files in this folder:

05

There are seven extra free themes in the additional themes folder. There are also several free themes preinstalled with the Breezin forms component. There are also some sample forms we will be adding later. Click on extensions to open this folder.

06

Inside of the addons folder are a Joomla Module extension and a Joomla Plugin extension which you can use to put Breezin Forms inside of a module or an article with just the click of a button. We will not be using these because we will be creating a separate Breezin Forms page with the component. Click on the READ ME, and you will see the following.

SAMPLE FORM: If you would like to install the sample forms, then please go to

BreezingForms => Configuration => Package Installer and upload one of the XML files. Each XML file contains multiple forms that you can use right away.

THEMES: To install themes for the quickmode, simply login to your site and upload each desired folder to /media/breezingforms/themes/

The theme(s) will then be accessible in the QuickMode editor.

The Sample Forms include some Quickmode Samples which we will eventually download. And the Additional Themes also have some themes we will eventually upload. But first we will upload the Breeezin forms component using the Extension Manager.

Install the Breezin Forms Lite component zipped folder
Log into your Joomla Administrator Control Panel and go to Extensions > Install.

In the Upload Package File section, click on the Browse button and navigate to the unzipped Breezing Forms folder. Inside this folder, select “extensions”. Then select com_breezingforms zipped folder. Click on UPLOAD FILE AND INSTALL. The screen should say: Installation successful. Next find BreezingForms in the Components menu, and finish the installation process.

Then go to Components, Breezin Forms. Joomla components are like small Content Management Systems. The Breezin Forms component divides their files into 8 separate sections. We will only use three of these sections. In this article, we will cover Configuration. In the next two articles, we will use Manage Forms. And in the last article, we will use the Manage Records folder to review how to download data from your forms. We will not cover the other four folders as they are not needed for 99% of what we will use forms for.

Configuration of Breezin Forms Component
When you first open the component, you will see the Installation Step 2 screen.

Because we are doing a new install, click Continue to create the Breezon Forms tables in our database. Then click Continue again. This brings up the Breezing Forms main configuration screen:

07

The only thing you really need to do here is enter your website email address which will be used to send you form notifications. Note that while you can put in the email addresses you want sent to you, this does not mean your host will actually forward the emails that it gets from Breezin Forms. Often your host will want an email address which is run through your website. For example, This email address is being protected from spambots. You need JavaScript enabled to view it.This email address is being protected from spambots. You need JavaScript enabled to view it.

08

Website hosts will usually allow you to set up these email addresses for free. You can also arrange to have any mail sent to them or by them to be forwarded to your normal email address. The account is created in Cpanel. Then click on More, Access Webmail. Then in the upper right corner, next to your email address, click on Forwarders. Then click Add Forwarder and forward your website email to your secure Proton Mail account. Then click Add Forwarder. Then log out of cpanel and add your website connected email address to Breezin Forms configuration. Then click Save. This takes us to the files screen. But there are no sample forms.

Install Sample Forms

To get these sample forms, click on Configuration in the side menu to return to the Configuration screen. Then click Package Installer.

09

There is already one package installed to control the basic functions of Breezin Forms. But we also want to install the Sample Forms. Click Choose File and go to the Breezin Forms folder in your website Extensions folder.

10

Then click on the Sample Forms folder to open it. There are two completely different kinds of forms in this folder. Click on Quick Mode Samples to select this XML file. Then click Open. Then click Install Package. Then click Close. Then click on Manage Forms in the side menu. Then click Package, Select from list and select Quick Mode forms. Now we have a table of 4 sample forms we can copy to create our own forms.

11

Before we start building forms, we also need to put our website email address into Joomla Configurations. Even when you have this email address, you have to tell your Joomla Website that this is the email address you want the emails from the Breezin Forms program to be sent from. To do this, in the Joomla Administrator panel, go to SITE> GLOBAL CONFIGURATIONS > SERVER and look for Mail Settings and enter the needed information into Mail From and From Name. Then click Save and Close. To go back to Breezin Forms, click Components, Breezin Forms, Manage Forms. Double Click on the SAMPLE Quickmode Contact Form to open it.

12

Click on Page 1, Name, Email and Message to see what these screens look like. Here is Page 1:

13


It allows us to edit the text and images at the very beginning of our form. Click on Name.

14

This screen sets the properties for the first form element which is called Name. The Email field and Message field look very similar but use different types of form elements. Click Close to close this form. In the next article, we will review how to create a new simple Contact Us form using the Quick Mode which is in the Manage Forms section of Breezin Forms. This finishes the configuration of Breezin forms. We are now ready to create our first form.