7.3 Add Customer Feedback Forms

Forms are an essential part of any business website. 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. This and the next article will review how to install Breezin Forms on your business 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 Breezin Forms.

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 check 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 Libre Office spreadsheets. Seventh, it offers the ability to create, copy and move form templates and themes from one website to another.

01

Install Breezin Forms
The Breezin Forms FREE program can be downloaded from the following link: https://crosstec.org/en/joomla-forms-free.html

There are versions for both Joomla 3 and Joomla 4. We will download version 3 for now.

02

Transfer the zipped Breezin Forms folder to your website Extensions folder. Then Click on UNZIP FIRST and extract the Breezin Forms files in this folder:

03

There are seven 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.

04

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.

Install the Breezin Forms Lite component zipped folder
If you are developing your business website on a local server, the Breezin Forms component is too big to install using the simple install process. Instead, copy the zipped component. Then open your website temp folder, click Open as Root. Enter your password and paste the zipped folder here. Then extract the folder and delete the zipped folder. Your temp folder should look like this:

05

Sadly, this folder is owned by root and we need it to be owned by www-data. Open a terminal and copy paste this command:

sudo chown -Rv www-data:www-data /var/www/html/Joomla3/tmp/com_breezingforms

Then enter your password and press Enter again. When done, close the terminal. Then log into your website control panel and go to Extensions, Manage, Install. Click Install from Folder. Then Check and Install.

Install if using a Real Server
Log into your Joomla Administrator Control Panel and go to Extensions > Manage> 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 the zipped com_breezingforms zipped folder. Click on UPLOAD FILE AND INSTALL. The screen should say: Installation successful.

Set Up Breezin Forms
Go to Components, Breezin Forms, Configuration. You will see the Installation Step 2 screen. Because we are doing a new install, click Continue to create the Breezin Forms tables in our database. Then click Continue again. This brings up the Breezing Forms main configuration screen:

06

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.

Then click Save. This takes us to the files screen. But there are no sample forms.

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

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.

Install Sample Forms

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

07

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

08

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.

09

Double Click on the SAMPLE Quickmode Contact Form to open it.

10

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

11


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

12

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 Preview to preview the form and click Close to close this form.

Create a Contact Us Form with Simple Elements
Let’s create a basic Contact Us form using simple elements. Simple elements are form questions which do not require select box drop down configuration. We will create the structure for our form by creating sections – each of which will contain elements or questions for our readers to answer. Go to Components > BreezingForms > Manage Forms. 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:

13

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.

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.

14

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. It is best to create a section inside your page and place any text you want inside of this Section 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:

15

Divide the form page 1 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.

All forms are put inside of pages. Assuming you still have our new Contact Form open, 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.

16

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. 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 the beginning of a form. To add an image before beginning your form, click on EDIT to bring up the text editor:

17

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

18

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

19

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?

Then click on Save Properties and Save:

20

Click on the Section How can we help you? to open it: 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. 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. 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:

21

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:

22

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:

23

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.

24

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

25

The 6 other elements provided by Breezin Forms are not covered as they are rarely used.

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:

26

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.

27

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:

28

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

29

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

30

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.

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.

Set text area Element for a width of 300px. Next, 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.

Improve the Appearance of our Form
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 front end
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. Note that the name of our form is contact_us. 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. Click on Select. For Menu Item Type, click on Breezin Forms. Then scroll down and click Add Form.

33

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

34

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. Check Last Page is thank you page. Also check Mail Notification and put in an email address which is associated with your website.

35

Then click on SAVE properties.
To create the second page, click the name of the form. Then click NEW PAGE. 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.
You can also email us 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.

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:

36

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.

Find Your Record in Manage Records
Go to Breezing Forms Manage Records. Then click on the first record to open it. There you will see the form information.

What’s Next?

You have created you first form with Breezin Forms. In the next article, we will discuss how to add four more complex fields to this form as well as how to add form validation.