This week we’ll be exploring one aspect of the Joomla platform that provides some of the most important functionality for developers and end users alike. Form fields are normally used to provide options to end users for customizing extensions. In The Basics, we mentioned the fact that Joomla templates use something called parameters to control settings normally updated in the back end, and in Joomla 1.6 and beyond form fields have replaced and enhanced the usage of parameters. If you understand the basic concepts of parameters in Joomla, you will also understand the basic concepts of form fields.

As this topic can get very involved from a programming standpoint, we’ll just introduce the basic concepts and show why you would want to use this feature in your own designs as you begin to develop more complex templates. You really do need to know a bit of PHP programming to use form fields well, but the value it adds to the administration of your template and your website overall is huge.

First off, whether you know it or not, you have used form fields ... or at least parameters if you’re still using version 1.5. Each time you configure a setting of an extension in the administration panel of your website, you are using form fields. Joomla applies the usage of form fields to “extensions,” which actually includes components, modules, plugins and templates. So any settings that you tweak to customize your site are taking advantage of form fields.

One of the most useful ways you can implement the use of form fields in your template development is to provide different CSS styles and make them available in a drop down box that the website admin can then simply set to change the look and feel of the front end with a click of a mouse. By referencing a different CSS file, you can very quickly provide your users a way to customize the colors and basic images of their site.

Here’s an example, called Template Hilites, from the Administrator panel:

This option will set a specific CSS file for use in the display of the front end.

The possibilities of what you could do with this feature are only limited by your creativity. You could have a theme designed for each holiday, or if you’re an ecommerce shop you could change your theme for each shopping season. Making changes this way to elements that sit outside of default Joomla content, such as hard coded text and background images, also means that you’re keeping your base code cleaner and safer. And it provides a way to keep your updates from being overwritten when your Joomla core code is upgraded.

You aren’t limited to only accent colors and header images either. You can change structural elements and layout options as well, such as column widths and horizontal regions of your website.

This article includes source code which is hard to display on a web page. So wherever code is quoted, I have added a space after the opening tag which you would need to remove.

As mentioned, the details of this process are outside of the scope of this post, but here are the basics of how it works:

If you want to provide a form field called “colorOption” in the Administration panel to control the basic color scheme for the front end, you would define that option in the < config> element of your XML manifest file for your template. This would give the administrator the colorOption selections in the back end.

You would then use this code:

< link rel="stylesheet" href="/< ?php echo $this->baseurl ?>/templates/< ?php echo $this->template ?>/css/< ?php echo $this->params>get('colorOption'); ?>.css" type="text/css" />

to generate this output and tell Joomla to use the intended CSS file:

< link rel="stylesheet" href="/templates/myTestTemplate/css/blue.css" type="text/css" />

Each CSS file can present an entirely different color scheme, look and feel or layout.

This is a great tool to extend the functionality of Joomla. It makes your life easier and keeps your code cleaner. If you plan on selling your creations, it also adds huge value for your customers. The more options you can give them the better. If you can make it easy for web designers to customize your templates to their needs, you’re in business.

The information from these template tutorials, including form fields, will be expanded upon in our upcoming tutorial course that will be featured on our website.