In Part 1 of this article, we created our Petition’s Form Structure and Elements. In Part 2 of this article, we will now add form validation to indicate the required fields, adjust our form’s appearance and post our form on our website. .

 

Validation of Required Form Elements

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, 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 front end.

 

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

 

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.

 

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: 

 

 

Repeat for Last Name, and City.

 

For Zip Code, validation is integer amount.

 

 

No validation is required for company name, occupation and phone number as these are not required fields.

 

For email, check required and for validation of email, select valid email.

 

 

Interests can also be skipped as this is not a required field. This completes form validation.

 

Click on SAVE Properties, and then click on SAVE to save all of your changes to this point.

 

Elements Modifying Appearance

Now that all the fields are entered and the validation is done, the next issue is modifying the appearance of the form so that it appears the way you want on your web page. This is one of the biggest benefits of Breezin Forms in that there are many options for controlling the appearance of your forms.

 

Modifying Element Field Lengths

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.

 

For example, in the Personal Info section, it would be good if the First and Last Name appeared on the same line. Let’s begin with the first name by selecting this element.

 

 

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

 

 

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 4 elements in the table above 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 to see how our form is looking so far.

 

Finding Your Form in Manage Forms

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

Click on that 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.

 

 

To best view what your form will look like to your readers, you should make a menu item for your form and publish it in the front end. Before you leave this screen, be sure to write down the name of your form as you will need it to create a Menu Item. This form is called petitionToSuspend.

 

Publishing and viewing your completed form in the frontend

To create a Joomla menu item so your form will be available to users on your website, go to Menus > Main Menu and click on the button New.

 

 

In Select Menu Item Type, choose BreezingForms.

 

This brings up the Menu Item finishing screen:

 

 

For Menu Item Details, give the form a short title which will appear in the main menu so keep it short. You can use the drop down arrow to select the menu and you can choose a parent item below that.

 

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

 

For Parameters (System), you can also give the form name a Title. Let’s call it Join Our Cause!

You can also add an image to the form with the image drop down arrow (provided you have already placed the image into the images/stories folder in your website’s media manager.

 

 

 

Then click on SAVE. 

 

Then click on Preview. This will take you to your Website’s Front Page. Click on the Menu Item you just created to go to your Petition Form. This is how the form looks below the actual text:

 

 

It does not look very colorful. So let’s go back and fix it up some more.

 

Click on the Title of the whole form, then click on ADVANCED

 

 

You can see it is set for Theme = Default. Click on the Drop Down arrow and let’s try a different theme called qmtheme, then click on SAVE Properties and Save, then preview it again.

Here are the first two sections of the Petition Form:

 

 

And here is the last section with the Submit Button:

 

 

Note that the Submit Button appears outside of and below the form. Note also how the colors help divide up the various form sections and elements and thus help your reader understand how to fill out the form.

 

Creating a Thank you page

Once you are happy with your petition form, we are ready to create a Thank You page. To create a Thank You page, select your form in the tree, click on the button New Page.

 

 

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.

 

Under Page Properties: , click on Edit to add a message. This brings up the text editor:

 

 

Sample message:

Thank you for signing our petition! Feel free to email me with questions or comments.

To return to the Home Page for realwashingtonstatebudget.info, click here.

David Spring This e-mail address is being protected from spambots. You need JavaScript enabled to view it

 

If you have an image you want to use in the images/stories folder, you can click on IMAGE to insert it.

To add the link, select the words click here and then click on the link icon in the text editor.

 

 

Fill in the LINK URL with the URL for your website. Then click INSERT.

 

Click on Save and Save properties and SAVE to save your change.

 

Next click on the name of the form itself, go to Form Properties and check the option Last page is thank you page.

 

 

Then click on Save Properties and SAVE.

 

VERIFY THAT THE FORM AND THANK YOU PAGE BOTH FUNCTION PROPERLY

Click on Preview to bring up your webpage and go to your petition form.

 

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 to both the data base and via email.

 

The info was sent to the data base, but for some reason, the email did not come through. But there is a way to add it directly to the form. Click on the form to open it. Then check the box marked Mail

 

Notification. Below that type in the email address you want the form submittal data sent to.  Then click on

Save properties and save.

 

 

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