Spring Forward Web Design
Build your own Site... Control your own Future!
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 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.
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.
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.
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:
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.
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.