In the previous articles we created a Contact Us form and added some Required Fields. In this article, we will make a copy of our form and review some ways to improve its appearance. So go to Breezin Forms, Manage Forms and select and copy Contact Us version 2 (we will skip the version with Required fields for now as I am not a major fan of required fields). Double click on the copy to open the form. For the Title change the name to Contact Us 4 and for the file name change it to contactus4. Then click on SAVE properties and SAVE.

 

 

The easiest way to improve the appearance of your form is click on the ADVANCED tab –which is just to the Right of the Properties Tab.

 

 

Under Other Options, use the Drop Down arrow to change the theme from default (no formatting) to qmtheme (light blue formatting).

 

In addition, change the rollover color from #ffc –orange to #afa light green.

 

 

Then click on SAVE properties and SAVE. To view this new form theme color, go to MENU > Main Menu and click on Contact Us to open this menu item. Then change the end of the file name to contactus4 and click on SAVE.

 

Next open the Preview and click on the Contact Us menu item to open the page. Suddenly our form is looking much better!

 

 

 

 

There are still some problems with the form. For example, the fields are way far away from the Titles in the first section. Not good. The easy way to fix this is to make this section “ALL IN A ROW” instead of wrapping after every element. If we can get all three fields to fit on one line, it would also shorten the length of the form by two lines.

 

So go back to Breezin Forms Manage Forms and open up Contact Us 4.

 

Click on Section one (Your contact info) and change the display to ALL IN A ROW:

 

 

Then click on SAVE properties and SAVE. Next click on the highest PREVIEW button on the upper right corner of the page.

 

 

Victory is ours. Boy, it is almost like I planned it that way!          

 

What is that you said? You don’t like blue and you want your form to be light green instead?

 

Well that is going to be a little harder. But I like Green too so I’ll show you how to do it.

 

Breezing forms Creating a New Theme

BreezingForms has the ability to copy and then customize themes for forms. This feature is only available in QuickMode. Currently, QuickMode provides 2 themes. Qmtheme, a clean, light-blue theme, and Default, which has no color scheme. Both themes can be easily customized via CSS. Themes can be found on the tab Advanced, under Other Options > Theme.

 

 

Creating a New Themes

Themes are located in components/com_facileforms/themes/quickmode of your BreezingForms installation.

 

Normally, I would use the free Joomla component called Extplorer to copy and manipulate files. But it is not very good for what we are about to do. Therefore you should take a couple of minutes to go to the Joomla Extension Directory and find another free file manager called NinJa Explorer. Download this from Joomla to your lap top and then install it with Extensions > Install.

It pays to have at least two free file managers and only takes a couple of minutes. For example, Extplorer is better at copying and transferring files from one website to another if you have several under your hosting plan.

 

Then click on COMPONENTS > NINJA EXPLORER to open it up.

 

 

Click on COMPONENTS to open it.

 

 

Then click on facileforms

 

 

Then click on themes

 

 

Then click on quickmode

 

 

Normally, there would just be the default theme and qmtheme here. But I have already added one called newtheme. Now we will add another one called greentheme.

 

Let’s make a copy of qmtheme which is the best theme right now.

Click on the check box to select it. Click on the double paper icon to copy it. .

 

 

This is a screen which the other file manager, Extplorer does not have. Which is why we are using Ninja. First change the name of the folder on the right which is the new one being created to qmtheme2. Click on COPY.

 

 

Click on the checkbox to the left of qmtheme2. Then click on the AB icon on the right to bring up the following name change screen:

 

 

Change the name to greentheme and click on change.

 

Next double click on the greentheme folder to open it.

 

 

It is missing the images folder. So go back up one level and double click on the qmtheme folder to open it.

 

 

Then select the images folder and click on the copy icon.

 

 

Type in the file name img2, then click copy. Then click on the copy and click on MOVE.

 

 

Click on the up arrow. Then click on the greentheme folder.

 

 

Then click on MOVE. Then open the greenthemes folder and change the folder name for img2 to img.

 

 

Styling theme color using CSS

 

Each QuickMode theme has an external style sheet called theme.css located in components/com_facileforms/themes/quickmode/theme_name/theme.css. With this file, you can control several aspects of a form design. In this example, a different color scheme will be used for "greentheme".

 

Now we are ready to adjust the color codes in the greenthemes/theme.css file from a light blue to a light green. Click on the theme.css file to open it.

 

 

If you do not know hexadecimal color coding, you may want to study up on it. Because colors are one of the easiest ways to change the appearance of a web page. But even if you do not know color coding, it is pretty easy to guess. Colors are preceded by a # sign like the border color shown above. If there are only three digits, then the first digit is RED, the second is GREEN and the third is BLUE. If the value is 0 then there is no color and if it is 9 then there is a medium amount of color and because the color scale after 9 goes a, b, c, d, e, and f, then if the digit is f, that is the most color you can have. So the color #ccc shown above is a lot of Red, Green and Blue. Since they are all equal, the border will show up as a very light gray.

 

In addition to three digit color codes, there are 6 digit color codes. The first two digits are Red, the second 2 are green and the third two are blue. But because the second digit in each case does not do much, the simplest thing to do is convert 6 digit codes back to 3 digit codes.

 

For example, in line 27 below, the legend color is shown as #92c1ff.

The three digit code for the same color is #9cf (just drop the second digits).

This color is read as medium red, a lot of green and a maximum amount of blue. This is the light blue color that makes up the qtheme template. The text color is #fff which is white.

 

 

In line 38 is a background color #eff5fa. The three digit code is #eff which is also very light blue.

 

These same colors are repeated throughout the qmtheme css sheet. All we need to do is come up with similar colors that are light green to very light green to replace these blue colors.

 

One way to do that is simply to reverse the blue and green values. I will let you try that at home. What we will do now is create a little darker form with a little more green and a little less blue and red. Where ever there is #92c1ff, we will put #77ffaa.

 

Where ever there is #eff5fa, we will put #aaffbb.

 

Other gmtheme color is 07b which is very dark blue. We will replace this with 0b7 which is very dark green.

 

Below is a table of the Line Numbers the changes occur on with the old color and the new color.

 

This Table is useful  because you can copy it and put in whatever colors you like. There are many color wheels you can use to pick your own colors.

 

 

Now start with line 27 and make the changes as you scroll down the page. It will only take a couple of minutes and when you are done you will have another theme option you can export to any website. Make sure you do NOT DELETE ANY SEMI COLONS. Change only the colors!

 

When you are done, click on SAVE at the top of the page. Then click on CLOSE.

 

Then go back to COMPONENT > Breezin Forms > Manage Forms. Select Contact Us 4 and make a copy. Open it and name it Contact Us 5. Click on SAVE properties and SAVE.

Then click on the ADVANCED Tab.

 

Use the drop down arrow to select greentheme.

 

Also change the rollover color from light green (afa) to light blue (#aaf). Then click on SAVE properties and SAVE.

 

Next go to MENU MANAGER > Main Men  and click on Contact Us to open it. Change the Form Name number from 4 to 5. Then click on SAVE. Next click on PREVIEW And open the form page.

 

 

We definitely now have a green form theme. One thing that would help is to change the White Section Field Set text color (#FFF) with a dark green text color to match the submit button. (#083).

 

Below are a couple of pointers for dealing with spacing issues. But for now, we will move on to the next important topic which is Adding a Thank You page. This is the topic of the next article.

 

 

Reduce Spacing Between Label and Field

How do I change the amount of space there is between the form label and the field?

Go to your theme.css file. It should be located in:

/components/com_facileforms/themes/quickmode/*THEME_NAME*/theme.css

Look for:

.bfQuickMode .bfInline .bfLabelLeft .bfElementGroupNoWrap input[type='text'] {
  width: 48%;
}

You can change that percentage to whatever you want. (I changed the width in my forms to 22% which seemed to layout fairly nicely.)

 

Adjust Label and Input Position

How do I adjust the position of the label vs. the input field in QuickMode? It appears that the standard configuration splits the columns 50/50. Is there a simple way to adjust this ratio throughout?Yes, there is. Just add this code to your template.css* file:

 

You can adjust the width percentages there to whatever you prefer.

 

* It is recommended that you add this code to your template.css file instead of the BreezingForms system.css file because otherwise you will lose the changes the next time you upgrade the extension.