Petition forms are one of the best ways to build a closer relationship with your readers and to build a political coalition for needed change. In this article, we will build a petition form using breezing forms and the skills we have learned in previous articles.

 

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

 

Creating our Petition Form Structure

Petitions generally come with three or four sections. The first section explains the background and purpose of the petition including why help is needed and how signing the form would help the cause served by the petition.

 

The second section includes the actual action which will be taken – such as passing a Resolution or changing a law.

 

The third section of an on line petition is some identifying information about the signer.

 

The final section includes a CAPTCHA and a SIGN PETITION button to submit the petition.

 

We will cover all four of these sections.

 

Below is an example of what the beginning sections of the final petition might look like:

 

 

 

 

And here is what the rest of the Petition might look like:

 

 

 

CREATING THE PETITION FORM

From Breezin Forms Manager, Select Quick Mode. Give the form a Title and a file name. Then click on Save Properties, then Save.

 

 

 

Next click on NEW PAGE.

 

 

If you want to put an image at the top of your petition, click on EDIT to add the image. But any text should go inside of an actual SECTION.

 

THE BACKGROUND SECTION

It is generally not a good idea to place text at the beginning of a Breezin Forms form because it ma prevent the form from loading in Internet Explorer.

 

Instead, click on Page 1 to select it, then click on NEW SECTION to create a new section which will begin the form part of the petition, make it a field set and give it a Title like Why Your Help is Needed.

 

 

Click on SAVE properties and SAVE.

How to Switch Between Text Editors when using Breezin Forms

 

As explained in earlier articles, the best text editor to use for Joomla articles is the Joomla FCK Editor. This is because it does the best job of eliminating harmful Microsoft Word coding so that your articles will open in Internet Explorer. However, the Joomla FCK Editor itself creates problems for the Breezin Forms text editor – as in it will prevent it from working!

 

Therefore when using Breezin Forms, you should switch back to the default text editor which comes with Joomla called Tiny MCE. This takes four simple but important steps.

 

First, go to Extensions > Plugs Ins and make sure that BOTH the Joomla FCK and Tiny MCE Editors are enabled. Remember to click APPLY.

 

Second, go to SITE > User Manager and click on the Super Administrator and switch the preferred editor to Tiny MCE when using Breezin Forms. Remember to click APPLY.

 

 

Third, go to SITE > Global Configurations and also switch the preferred editor here to Tiny MCE. Remember to click APPLY.

 

When you are done using Breezin Forms, go back to SITE > Global Configurations and switch the preferred editor back to Joomla FCK. Also go to SITE > User Manager and switch the editor back to Joomla FCK. Otherwise, if you accidentally build Joomla articles using Tiny MCE, they may not open in Internet Explorer!

 

Only if you are using the Tiny MCE Editor… Then click on EDIT to open up that section’s text editor and place your beginning text there.

 

This will open up the Breezin Forms Text Editor where you can add text, html coding and or images in any order you want, just like a normal Joomla webpage:

 

 

 

After you are done inserting your text, click on SAVE which is at the very bottom of the page.

Then you also have to click on SAVE Properties and SAVE to actually save these changes!

 

THE RESOLUTION SECTION

To create another section for a RESOLUTION, select Page 1 again and then click on NEW SECTION again. This time name the Section RESOLUTION TO SUSPEND TAX EXEMPTIONS.

 

 

Click on EDIT to bring up the text editor where you can add the text of the petition. Click on SAVE THREE Times to save this text.

 

THE PETITION SECTION

 

Click on Page 1 again and click on NEW SECTION again to bring up another field set.

 

 

Put the Petition text here.

 

THE SIGN HERE SECTION

 

The final section of the form is going to be very short with only a minimal amount of information:

 

 

So click on Page 1, then click on New Section to create the first box:

Use the drop down arrow to change the TYPE from NORMAL to Fieldset. The difference between Normal and Field Set is that Field Set is used as an outer box in which to place a bunch of form elements.

Then change the DISPLAY TYPE from Wrap after each element to All in a row. 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.

For the Title of this section, type in “Please Sign Petition Here”. Then click on SAVE PROPERTIES.

 

 

We are now ready to add some elements. They will all go in the Sign Petition Here Section.

 

Click on New Element:

 

 

Leave the Type as Text Field. For the label, type First Name. For the file Name type in firstname (with no spaces). Then click on SAVE properties.

 

 

Filling in the Rest of the Form Elements

  

on the Section Name again, and then New Element to add another element and type in Last Name.

 

Then click on the Section Name again, and then New Element to add another element and type in Your Email.

 

 Then click on the Section Name again, and then New Element to add another element and type in City.

 

Then click on the Section Name again, and then New Element to add another element and type in Zip Code.

 

Then click on the Section Name again, and then New Element to add another element and type in School District.

 

Your form should now look like the following:

 

 

Click on SAVE to save your changes to this point.

We still need a few more elements:

 

 

Let’s create another section for this Additional Info.

 

Click on Page 1 again and then click on New Section. Select Field Set and Wrap after each element and for the title, type in Additional Info. Then click on Save Properties.

 

 

Note that any time you add a new section, an EDIT button appears where you can add additional text. Also you can put sections inside of sections.

 

But instead, let’s click on New Element. This time, for Type, use the Drop Down arrow to select Text Area. For Label, type in Share Your Comments Here. Then Click on Save Properties.

 

Next click on Additional Info again, then click on another new element:

For type, select Checkbox and for label type, Sign Me Up for your free Newsletter

Then click on Save Properties.

 

Next click on Additional Info again, then click on another new element:

For type, select Checkbox and for label type, Add Me to your list of Community Organizers!

Then click on Save Properties.

 

There are some things you need to do for the database to pick up the checkbox information.

 

 

First, change the file name to something you will recognize. For example, use newsletter and organizer.

 

Second, you must insert something in to the value box. Checked or Yes are usually good choices. This Value Box field MUST have some value in order for the Checkbox to return a result.

 

 

CAPTCHA SECTION

 

We will add one last section for the CAPTCHA Button

 

Click on Page one again and then New Section. Select Field Set and  Wrap after each element.

 

For the Title of the Section call it Proof that I am a Human. Then click on EDIT.

 

Type in “Only humans are allowed to sign this petition. No corporations or corporate lobbyists allowed.

 

 

 

Then click on SAVE, Save Properties and SAVE.

 

Next is the CAPTCHA ELEMENT. Select the Proof that I am human section. And click on New element.

 

For type, use the drop down arrow to select CAPTCHA. For the Title chose Please type in whatever appears in this box.

 

Then click on Save Properties.

 

Then click SAVE properties, and SAVE to save the changes you have made to this point.

Here is what the form structure looks like so far:

 

 

 

The last field we need is a SUBMIT BUTTON. Although this can be put inside the last section, it is best to put it outside of and below the entire form. To do this, click on the name of the form itself.

 

Then under Include Submit Button, select YES and below this for the Submit Button Label, type in Click Here to Sign Petition. Then click on SAVE Properties and SAVE.

 

 

To go back to Page 1, click on New Page.

 

To delete Page 2, click on it, then Right Click, then select Delete Page.

Right clicking is also how you can delete sections and elements that you do not want.

 

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