9.2 Create a Contact Us Form with Simple Elements

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

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:

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.

Definitions of Essential TermsThere 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 ElementsForms 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:

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.

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.

Add an Image to the beginning of the formBy 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:

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

Click Insert.

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.

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:

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

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:

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:

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:

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 ElementsNow that we have our three sections created, we are ready to add elements to them.

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

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

Note that the file name should have no spaces and should be short and descriptive as this is what will be used to head columns in your data base.

It is generally a good idea to keep the first and last names in separate fields if you want to use this data later to send out personal emails or customized newsletters. We are now ready to add our first field ELEMENT. To do this, first click on the Section you want to add the element to (Your Contact Information), then click on the NEW ELEMENT tab.

For type, leave it as text field, for Label, type in First Name and for file Name, type in firstname. Then click on Save Properties.

Then click on the Your Contact information section again and click on new element again. For type, leave it as text field, for Label, type in Last Name and for file Name, type in lastname. Then click on Save Properties. Then click on the Your Contact information section again and click on new element again. For type, leave it as text field, for Label, type in Email Address and for file Name, type in email. Then click on Save Properties and SAVE. Here is how our form currently looks:

Since you are now an expert at adding text fields, we will move on to the second element type. This time we are in a new section, so select the section Information You Would Like, then click on new element. For type, use the Drop Down arrow to select 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.

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:

ADD THE MANDATORY SUBMIT BUTTONThe 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 REQUEST

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

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

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.

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:

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.

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

Then scroll down and click Add Form.

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

Add a Thank you pageBefore 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. 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.

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 Springdavidspring (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:

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