Blue Flame Forms (bfForms) for

Joomla 1.5.x
Short installation tutorial

This tutorial will show you how to initially install bfForms on your Joomla enabled web
site and how to create basic form. Later on, it will be explained how to use more
advanced features of Joomla Forms like importing HTML form from external
applications

Author: Igor Mihaljko

Date: April 2009
Table of Contents

Preface ....................................................................................................................................................................4
Introduction ............................................................................................................................................................4
Quick Overview of bfForms Features .....................................................................................................................5
Form Permissions ...............................................................................................................................................5
Force SSL Only Submissions................................................................................................................................5
Data Portability - Export Options........................................................................................................................5
Details on the built in bfForms spam controls .......................................................................................................6
Check IP Address Blacklist Databases .................................................................................................................6
Manual IP Banning ..............................................................................................................................................6
Word Blacklists ...................................................................................................................................................6
Akismet Integration ............................................................................................................................................6
Mollom Integration ............................................................................................................................................7
Our Own Transparent Spam Checks ...................................................................................................................7
Features of the form field elements .......................................................................................................................7
Real Simple Layout - Nothing to be scared of! ...................................................................................................7
Validation Rules ..................................................................................................................................................7
Input Filters.........................................................................................................................................................8
Per Field Access Controls ....................................................................................................................................8
Per Field Default Options....................................................................................................................................8
Form Submission Processing ..................................................................................................................................9
Send Unlimited Emails ........................................................................................................................................9
Save form submissions to a database ................................................................................................................9
Display any HTML (like thanks!) ...................................................................................................................... 10
Need Custom Integration? SugarCRM? Other DB? ......................................................................................... 10
btForms for Joomla 1.5.x installation .................................................................................................................. 11
Creating basic form.............................................................................................................................................. 15
Create new form .............................................................................................................................................. 15
Review and modify the form configuration ................................................................................................ 16
Add form fileds ............................................................................................................................................ 17
Final example form ...................................................................................................................................... 20

2
 Form actions .................................................................................................................................................... 20
Save submission to database....................................................................................................................... 21
Thank you – a simple thank you text ........................................................................................................... 22
Send an email .............................................................................................................................................. 24
Email Header ........................................................................................................................................... 24
Addresing ................................................................................................................................................. 25
Email Content .......................................................................................................................................... 25
Attachments ............................................................................................................................................ 26
Permissions .............................................................................................................................................. 26
Mail server ............................................................................................................................................... 26
GPG Encryption........................................................................................................................................ 27
Joomla Global Configuration – Mail settings................................................................................................... 27
Final result ....................................................................................................................................................... 27
Creating a form by importing the HTML form from external application ........................................................... 29
Create new HTML form ................................................................................................................................... 30
Final notice about custom HTML forms. ......................................................................................................... 35
Conclusion ........................................................................................................................................................... 36

3
Preface

bfForms is a Form generator for Joomla! CMS and is available for Joomla 1.5.x only. It runs in native mode and
does not rely on the legacy plugin - It has been designed to meet all your form needs and provide a whole
load more than just forms! (Submissions Management, Uploaded File Manager, Export Options).

Introduction

Creating forms on websites is hard, real hard - so we have taken the burden for you and created a VERY EASY
TO USE form builder for Joomla 1.5 that anyone can use.

Build on 4 years of experience developing form creators (Phil-A-Form) for CMS's such as Mambo and Joomla -
bfForms has been written from scratch and provides many powerful integrated features such as Spam
Controls, Validation Rules, Filters, Custom elements, Export Options and much more.

The extension hosts a huge number of great features. Let us just highlight some of them:
• Specifically designed for Joomla 1.5.x
• Allows you to create unlimited forms, with unlimited fields and actions
• All forms are xHTML and CSS2 valid
• Joomla Forms is written by a very experienced Joomla/PHP Developer who has been awarded the
Zend PHP 5 Certified Engineer award!
• Once purchased, you get free upgrades for life - with a smooth upgrade path at all times.
• All forms can be enabled/disabled with a single click
• Speedy configuration of forms using a 100% xAJAX admin interface
• SECURE FORMS - you can force forms to only show on SSL Secure pages
• Quick Start Guide To Creating Great Forms included
• Complete Control Over Form Page Titles
• Set a maximum number of submissions allowed on a per form or per user basis
• Complete control over the text on the submit, preview, reset buttons
• Form Preview mode, before submitting the form!
• Complete form layout control using Smarty Templates and simple placeholders
• Built-in, Transparent, spam controls - NO CAPTCHA AT ALL !!! (We do not believe in CAPTCHA)
• 3rd party Spam Plugins (Akisment and Mollom)
• IP Banning
• Blacklist Word Banning
• Spam Idiot Checks!
• Feature to allow you to add custom JavaScript and Custom CSS to the page
• Over 30 different, standard and custom, field types to choose from
• Multiple form actions to apply to submitted data
• Form Fields are 100% CONFIGUABLE
• Over 24 different validation rules can be applied to each individual field
• Or create your own with Regex!

4
 • 7 Different filters can be applied to change the submitted value
• You can specify a default value for each field - or allow it to be overridden by a string in the URL
• Fields can be set as disabled
• You have complete control over the class and style of each individual form element
• Each field has its own access level and can be enabled for only Public, Registered or special users
• On a per field basis you can restrict the allowing of the value to be sent by email or not.
• All submissions can be saved to a built in database - or not! depending on your wishes
• All submissions can be emailed to unlimited people - including the submitter
• You can configure unlimited types of emails, each having their own content
• You can set files that will always be attached to the emails sent (Like distributing terms.pdf)
• You can allow uploaded files to be attached to the emails
• You can encrypt any of these emails using GPG Encryption just by providing the public key
• You can use any submitted value in the subject or body of any email with the use of simple
placeholders

Quick Overview of bfForms Features

Form Permissions
Joomla Forms allows you fine control over the form, and the
permissions required to view and submit entries.

You can specify which Joomla Groups can view the form,
how many submissions each user can submit a single form,
and how many submissions a form will allow in total.

All these options can be set up really easy in the Form

Permissions screen

Force SSL Only Submissions

For maximum security you can specify that a form can ONLY
be viewed over a SSL (https://) connection. This will encrypt
the submission and allow you to accept secure information
from your site visitors. Depending on your SSL security
certificate, this is strong enough to accept credit card
numbers and complies with PCI DSS Standards

Data Portability - Export Options

The ability to digest form data in 3rd party applications is a
must nowadays. Most companies have their own databases or
spreadsheet for tracking form submissions and so Joomla
Forms makes it really easy to extract the submitted data into
CSV and XML formats.

5
Details on the built in bfForms spam controls
Check IP Address Blacklist Databases
Joomla Forms has integrated real time black list database
checking of the submitters IP Address against the
"bl.spamcop.net", "list.dsbl.org", "sbl.spamhaus.org"
servers - this cuts out the majority of well known spammers

This option can be enabled / disabled and does not require

any additional subscription

Manual IP Banning
In addition to the IP databases, you can also specify
manually IP Addresses to block. These users will not be able
to submit forms on your site through Joomla Forms

Word Blacklists
The ability to reject submissions that contain admin
configurable words is also a great feature. Add in as many
words as you like (drugs | sex | rock | roll) for example and
then all form submissions that contain those words will be
rejected

Akismet Integration
Akismet is a 3rd party service that provides spam checking of
form and comment posts. Akisment is probably the leader in
their field at the moment, and you will need a valid
wordpress key to use this service.

We have fully integrated the Akismet API and all you need to
do is provide Joomla Forms with your API Key

6
Mollom Integration
Just like Akismet, Mollom is a 3rd party service that
provides spam and quality checking of form and comment
posts. Mollom is in beta at the moment but we have
integrated part of their API and you can activate this 3rd
Party service easily within Joomla Forms, then Mollom will
check form submissions for spamminess and quality.

Our Own Transparent Spam Checks

Joomla Forms also contains hidden fields, and other spam
controls. We are not going to shout about them here, but
there over 5 other "things" we do to ensure that spam
form submissions are kept to a minimum without any
disturbance to the valid and real submitters.

Features of the form field elements

Real Simple Layout - Nothing to be scared of!

The main edit field screens are tabulated into groups of
options which allow you to concentrate on the
configuration.

With the number of options you have complete granular

control over the form field, what it looks like, who can
access it, what values it will accept and other great options...

Validation Rules
Each form element has a huge number of options you can
toggle to apply validation rules to the submitted value.

The validation rules are triggered on form submit and do not

use complex JavaScript (unlike the first Phil-a-form
extension) and cannot be overcome by spoof form
submissions!

These 24 validation rules include:

• Required

7
 • Joomla Specific Fields
• UK postcode, NI Number, VAT Number, Phone Number
• USA SSN, Zip Code
• Email Address, Web Address
• Valid Credit card number
• And Many Many more validation type, including regex, integer, inarray!!!

Input Filters
In order to ensure complete security, and to validate the
input provided in the form, Joomla Forms provides several
filters that can be applied to the submitted values. These
are configurable on each form field and include such
features as:

• Make input all uppercase

• Make input all lowercase
• Strip HTML Tags from input
• trim the input of whitespace
• Filter all chars that are not digits
• Filter all chars that are not Alpha numeric chars
• Filter input to A-Z chars only

Per Field Access Controls

Each form field is configurable to have its own access
control. This means you can use the same form for logged
in members and non-logged in visitors and more form
fields will show when logged in.

These access permissions also allow you to prevent

submitted values being transmitted by plain text emails
(useful for sensitive information like credit card numbers!),
the value can still be used by other processors like the
"save to database" action

Per Field Default Options

To make life really simple we always preconfigured the form
fields to most sensible defaults. You can still override these
and do magic such as pre fill the field with a default value,
allow the value to be set in the URL, set the field as disabled
or trigger some JavaScript after completion of the field - we
make it simple, yet give you the ability to make it very
powerful - on a per field basis!

8
Form Submission Processing
bfForms has built in submission post processing, with simple actions such as emailing and saving to database
right through to advanced processing like adding to a ListMessenger mailing list, posting to another URL/API
or running custom PHP code!

But dont be afraid - all this can be done through the simple interface with no PHP Knowledge at all - ok, apart
from the Custom PHP Processor which needs PHP knowledgebase obviously - apart form that ALL the
processing plugins can be configured with no programming experience at all!

Send Unlimited Emails

Joomla Forms allows you to send unlimited emails on a
form submission.

The emails are fully customisable, you can:

• Specify the senders details

• Specify unlimited recipients
• Allow uploaded files to be sent as attachments
• Add additional files from your server as
attachments
• Encrypt the email using GPG Encryption
• Customise fully the layout of the email
• Send in plain text, HTML formats - or both!
• Send by different mail servers, PHP Mail, SMTP
• Use submitted data in the email with the use of template placeholders
o And you can do this as many times as you need to
o each email has its own configuration/layout/options

All these options can be set up really easy in the Email Action Screen

Save form submissions to a database

Joomla Forms automatically creates a database based on
your form fields and populates this with submitted data
(If the action is enabled - can be disabled so that nothing
is stored on the server for security)

This database table is a standard MySQL table and can

be manipulated using any tool, or by using the build in
submission manager in Joomla Forms Admin Console

9
Display any HTML (like thanks!)
Once the form has been submitted, you might want to
give further instructions - or say a thank you - you can
do this with the HTML Action that allows you to specify
any HTML to display once the form has passed
validation and has been processed.

Need Custom Integration? SugarCRM? Other DB?

Because Joomla Forms is modular, if you need your form
submission data to be pushed into another system, using
SOAP, REST, Other API or direct database push then
please contact us, depending on the time required to
integrate your solution we will make a small charge to
cover our time - and we will integrate with anything that
is possible!

If you require a special form action then please contact us

10
btForms for Joomla 1.5.x installation
Now that we said a few words about btForms it is a time to install this extension to your Joomla enabled web
site.
btForms has slightly different installation procedure than regular Joomla extension so basically this is why this
tutorial is actually needed.
Let’s begin!
Click “Extensions” -> “Install/Uninstall” from Joomla main menu in Joomla backend

Picture 1: Install new extension

Click the “Browse” button and choose the Joomla Forms For Joomla 1.5.x archive on disk to install.

Picture 2: Click the “Upload File & Install” button

Click on the “Upload File & Install” button to install Joomla Forms For Joomla 1.5.x.
After few moments (this depends on your network and internet speed) the screen with message that
installation was successful should appear.

11
 Picture 3: Install Component Successful message

For any other regular Joomla extension this would conclude extension installation and you could start using it
immediately. The btForms extension requires few steps more to be done before you could use it.
Here are those steps described.

Click “Components” -> “.Install Joomla Forms” menu item. This will start procedure that will finish installation
of btForms extension.

Picture 4: Start module configuration screen

New page will load with the message that there are some additional plugins that needs to be installed before
you can use Joomla Forms. The first required plugin is btFramework. Just continue installation by clicking on
“Install the btFramework” link

Picture 5: Install the btFramework plugin link

12
When the btFramework plugin is successfully installed you will receive the following message

Picture 6: Successful installation of btFramework plugin

Click on “Click here to continue” link. Joomla Forms installation procedure will continue and few moments
later new message will appear. This message will inform you that another plugin is required to be installed
before Joomla forms installation can be finished.

Just continue installation by clicking on “Install the xAjax Plugin (Required)” link

Picture 7: Install the xAjax plugin link

When the xAjax plugin is successfully installed you will receive the following message

Picture 8: Successful installation of xAjax plugin

Click on “Click here to continue” link. Joomla Forms installation procedure will continue and again, few
moments later new page will appear with new message on the top. This message will inform you if you have
the latest version of btForms or not. You can dismiss this message by clicking on “Dismiss” button.

Picture 9: Successful installation of btForms

13
Now, for this tutorial there are just two things to do yet. The first one is to show how to return to normal
Joomla backend interface. You can do that by clicking on “Exit to Joomla” link which can be found in top left
side of the Joomla Forms page interface.

Picture 10: Exit to Joomla backend interface

You can access again Joomla Forms interface by clicking on “Components” -> “Joomla Forms for Joomla
1.5.x” link

Picture 11: Exit to Joomla backend interface

14
Creating basic form
Basic form that I will show you in this tutorial will consist of three simple text fields:

 Name field name of this field will be fullName

 Email field name of this field will be emailAddress
 Message field name of this field will be message
I will show you how to create such form, how to attach an email action to this form and how to configure
Joomla to send data filled in form’s elements to your email address.

Create new form

Let’s start by choosing “Joomla Forms for Joomla” from Components menu:

Picture 12: Start “Joomla Forms for Joomla” interface

When the new screen shows up, click on “Create New Form” link on the left side menu:

Picture 13: Create New Form link

15
Enter the name of this form filed “Form Title”, the name which will represent the best this form and its
content. After that, click on a button “CREATE NOW!” to create new form.

Picture 14: Set form title and create the form

Now that the form is created, select it by clicking on a check box next to its name and click on Edit button or
just click on its name in form list.

Picture 15: Select created form

Review and modify the form configuration

The next screen will show up with further steps explained. Our first step is to review and modify the form
configuration so we can be sure that everything is set up as we wanted.

Picture 16: Review and modify the form configuration

New screen will load up with just two options. Friendly name is the name that will distinguish this particular
form from the rest of the forms you might have on your website. Second option is the place where you can

16
setup page title on frontend of your web site. This page title will be shown in browser when your visitors
choose to fill in this form fields.

Picture 17: Setup general settings for selected form

When you are finished with setting up those basic options, press Save button in top right side of the page.

Picture 18: Save form’s basic options

Add form fileds

Now that we saved this form’s basic setting, it is time to add some form fields to this form. Click on the
following link to add new form field:

Picture 19: Add form fields

First you have to give some title for this field. This title will be presented to your visitors so choose the title
that will show your visitors what you expect from them to put in this field or how to react on the options that
this field might have. For our example form, we will ask our visitor to put full name in the first field of this
form so we will put the text “Your full name:” here

17
 Picture 20: Name properly your form field

Next thing that we must do is to select what kind of form field this filed will be. For our example, we will
choose this field to be Textbox:

Picture 21: Choose field type

When you are finished with those two options, press “CREATE NOW!” button:

Picture 22: Finish creating form field

New page will show up with multiple tabs. Those tabs contain large amount of options, which we can use to
further customize our field. There are many options, validation rules, filters, permissions and style rules that
can be set and configured for every field in the form. For this basic example, we will just set up few options.
The rest of those options and rules will be explained in advanced tutorial.

Picture 23: Options and rules for specific form field

18
First, we will set up friendly, internal field title. This title will help us to distinguish this form field in the list of
other form fields for particular form.

Picture 24: Set friendly form field title

Public field title is title that will appear to your visitor. This is the place where you can adjust this field title
again, if you made some mistake during initial field creation.

Picture 25: Set public form field title

Next thing that you should do is to setup this form field internal name. This name is used to create HTML
template for email confirmation, thank you email that can be sent after your visitors complete the form
submission etc.

This must be unique in this form; this means you cannot have two elements with the same system name!!!
You should also keep this quite short, for example: "lastname"

Picture 26: Set form field name

Finally, enter description of this particular form field. This description will be placed beneath form filed title
on your live form. That description is used to convey instructions to the visitor.

Picture 27: Set form field description

19
For this example, we will leave all other options on their default values. There is only one thing that is needed
to be done and that is to save this form field by pressing on Save button.

Picture 28: Save form field

Final example form

Here is how this example form should look like after few more form fields placed on it:

Picture 29: Finished example form

Form actions
Our form would be just nice add on to our site and nothing more if there wouldn’t be something else that
would actually bring life to this form. That something is called “Form actions”.

Form actions are a way to communicate with our visitors when they fill in our form. You can use form actions
to save submissions to database, say “Thank you” to your visitors, and send them an email confirmation that
their submission if saved and that it is being processed or just redirect them to some other web page after
submission.

Let’s add some form actions. We will start by clicking on “Submit Actions” link on left side menu.

20
 Picture 30: Start defining form action

Save submission to database

We will define form action that will save data entered in form to a database table so we can browse those
data afterwards. First we have to give some title to this form action. This is our internal title so we can
manage multiple form actions with ease.

Picture 31: Form action title

Set the type of this first form action to “Set submission to database”

Picture 32: Select proper form action type

Now, all we have to do is to click on “CREATE NOW!” button to confirm our selection.

Picture 33: Create form action

21
This is very basic form action so we will leave the options on their default values by clicking on Save button.

Picture 34: Save form action options

Thank you – a simple thank you text

Let’s define another type of form action. This time we will define a simple “Thank you” page that will be
shown to our submitter after successful submission. Since we are already on “Submit actions” page we just
have to click on “New” button to create new form action. So, click on “New” button:

Picture 35: New form action

Again, give some title to this form action.

Picture 36: Form action title

Set the type of this first form action to “Thankyou – A simple thank you text”

22
 Picture 37: Select proper form action type

Click on “CREATE NOW!” button to confirm our selection.

We will see the following screen. On that screen, you can type short message and thank you text that you
would like to present to your form submitters.

Picture 38: Thank you text

When you are satisfied with the thank you text layout and message itself, click on Save button

Picture 39: Save form action options

23
Send an email
Finally, we will define yet another form action that will allow us to send submitted data to an email or group
of emails.

Picture 40: Form action title

Set the type of this first form action to “Send an email”

Picture 41: Select proper form action type

Click on “CREATE NOW!” button to confirm our selection.

Since this form action is the most advanced one, we will have many options that we can set up for this action.
Those options are separated in tabs as you can see on the following picture:

Picture 42: “Send an email” form action options

I will list all the options for “Send an email” form action.

Email Header
This group of options consists of the following options:

This Actions Friendly Name

This is an internal title and is never shown on the site or email

Email From Name

This is your real name (not an email address) and is used in forming the email's From: header.
You can also enter the name of a form field where the submitter will put their name. For example, if your
form element was called "myname" then you should enter #MYNAME# and Joomla Forms will replace this
with the submitted value

24
Email From Email Address
This is your real email address and is used in forming the email's From: header
You can also enter the name of a form field where the submitter will put their email address. For example, if
your form element was called "myemail" then you should enter #MYEMAIL# and Joomla Forms will replace
this with the submitted value

Addresing
This group of options consists of the following options:

How to send emails to the form submitter

You might want to send an email to an email address the form submitter has entered. To do this simply go
back to your form elements, and write down the "Name" (HTML Field Name) of the element, then enter it in
one of these boxes, in uppercase, and surrounded by # signs
Example:
#EMAILADDRESS#
or
#ENTERYOUREMAILHERE#

To: A List of Email Addresses

These are the email addesses this email will be sent to, using the To: part of the email. Note that if you enter
more than one email in this box they must be one per line, and also each person will see the other persons
email addresses. To Avoid this use BCC instead.
Example:
phil@phil-taylor.com
bill@microsoft.com
testing@dev.com

CC: A List of Email Addresses

These are the email addesses this email will be sent to, using the CC: part of the email. Note that if you enter
more than one email in this box they must be one per line, and also each person will see the other persons
email addresses. To Avoid this use BCC instead.
Example:
phil@phil-taylor.com
bill@microsoft.com
testing@dev.com

BCC: A List of Email Addresses

These are the email addesses this email will be sent to, using the BCC: part of the email.
Example:
phil@phil-taylor.com
bill@microsoft.com
testing@dev.com

Email Content
The body of the emails will be parsed by the action to replace placeholders with the values the visitor has just
submitted.

These placeholders are the HTML Field Name (Name) of the element, in uppercase, surrounded by #'s

25
 Example: Dear #NAME#, Thanks for sending me your address, you
entered #ADDRESS1#, #ADDRESS2#

Plain Text Email Body

If you would like to send a plain text portion of the email please add it here.

HTML Email Body

If you would like to send a HTML text portion of the email please add it here.(Remember this should include
any HTML Markup!!)

Example:

<h1>Thankyou!</h1><p>Your details have been received</p>

Attachments
This group of options consists of the following options:

Send submitted files, which have been uploaded, as attachements to this email
This relies on the file upload field having the permission to "send by email" set to yes

Attach these files always

Specify in this box a list of files you wish to attach every time. They should be with the full path and file name.
E.g. /home/phil/public_html/myreport.pdf.

Enter ONE filename per line.

Permissions
This group of options consists of the following options:

Joomla Access Level

A visitor needs to be this level or below to trigger this action

Publish this action

Toggle this action published/unpublished

Mail server

Configuration for outgoing mail

In Joomla, all outgoing email is controlled by the configuration options set in your Joomla Global
Configuration.

If the configuration you have set in Joomla Global Configuration is not compatible with your server then we
will never be able to send form submissions, Please check with your web host for the correct settings

We highly recommend SMTP with Authentication, as the most reliable and secure email transport - ask your
web host if this is available to you...

26
GPG Encryption
GnuPG is the GNU project's complete and free implementation of the OpenPGP standard as defined by
RFC4880 . GnuPG allows to encrypt and sign your data and communication, features a versatile key
managment system with public key directories. GnuPG is also known as GPG. If you want your emails to be
encrypted - and very secure - then you might want to learn more about GPG

Public Key To Encrypt To

If you specify a public key here, and leave the html message blank, opting instead for a plain text message,
Joomla Forms will encrypt mail sent with this action to the supplied public key before sending

Joomla Global Configuration – Mail settings

As I mentioned before, Joomla Forms for Joomla depends on your Joomla mail settings. Be sure to set up mail
settings in Joomla global configuration and test sending emails from Joomla. If you are able to send emails
from Joomla than your email form actions will work for sure also.

Picture 43: Joomla global configuration – Mail settings

Final result
When everything is finished and your form tested here is how the result of form actions looks like (for our
example form):

Picture 44: “Thank you” simple text

27
If you click on Submissions link in left side menu, you will see all saved submissions that your visitors
submitted by filling out and submitting your form details:

Picture 45: Submissions link on left side menu

Picture 46: List of submitted data saved in database

Email sent by “Send an email” form action.

Picture 47: Email example

28
Creating a form by importing the HTML form from external application
Now that I explained how to create basic form using Joomla Forms interface, it is a time to move on to
something more advanced. This feature will show you real strength of Joomla Forms.

I will create some HTML form in external application (Dreamweaver in my case) and after that I will use that
HTML source code to create form in Joomla Forms in a very easy and intuitive way.

Let’s start with creating HTML form in Dreamweaver. This form will be also basic form but it will show you
that you can actually create more advanced forms quickly and easily.

HTML source of my form is presented here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<form id="form1" name="form1" method="post" action="">

<table width="546" border="0" align="center">
<tr>
<td width="93" align="right" >Name:</td>
<td width="257"><input name="name" type="text" class="text" size="30" /></td>
</tr>
<tr>
<td align="right">Email address:</td>
<td><input name="email" type="text" class="text" size="30" /></td>
</tr>
<tr>
<td align="right">Subject:</td>
<td><label>
<input name="subject" type="text" class="text" size="30" />
</label></td>
</tr>
<tr>
<td align="right">Message:</td>
<td><textarea name="textarea" cols="45" rows="8" class="text"
id="textarea"></textarea></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input name="button" type="submit" class="button" id="button" value="Send message" />
<input name="button2" type="reset" class="button" id="button2" value="Clear form" /></td>
</tr>
</table>
<label>:</label>
</form>

</body>
</html>

29
As you can see, I will use the raw HTML source code that external application produces without stripping
anything out of it. This source code will be given to Joomla Forms. Joomla Forms will process it and generate
correct template and everything else needed for this form to work properly. I will also show you how you can
use CSS styles together with your form so you will be able to customize it to the full.

Create new HTML form

Let’s start by choosing “Joomla Forms for Joomla” from Components menu:

Picture 48: Start “Joomla Forms for Joomla” interface

When the new screen shows up, click on “Create New Form” link on the left side menu:

Picture 49: Create New Form link

Enter the name of this form filed “Form Title”, the name which will represent the best this form and its
content. After that, click on a button “CREATE NOW!” to create new form.

30
 Picture 50: Set form title and create the form

Now that the form is created, select it by clicking on a check box next to its name and click on Edit button or
just click on its name in form list.

Picture 51: Select created form

When a new page loads click on “Form Layout” link to open Layout options for this particular form.

Picture 52: Create new layout

You will be presented with few tabbed panels through which you can change layout options.

Picture 53: Layout and CSS panels

31
To be able to use HTML source code from external application to build your custom form, you will have to
enable “Use Custom Form Layout” option on first tabbed panel (“Layout options”).

Picture 54: Enable custom form layout

When you enable previous option, new panel will show up. This new panel is titled “Custom Smarty
Template”.

Picture 55: New layout panels and options

This new panel will allow you to paste your custom HTML source code from external application. Click on
“Custom Smarty Template” tab to open new panel and see new options.

Picture 56: Start importing HTML form

You have to paste your custom HTML source code in a text area beloe “Parse Form” and “Create Basic Layout”
buttons.

Picture 57: Parse HTML source code

32
When you press “Parse Form” button, Joomla Forms will parse your HTML source code and prepare it for later
usage. Every occurrence of HTML form elements will be replaced internal element name and in the same
time, Joomla Forms will create element fields that you will be able to edit later.

Picture 58: Parsed HTML source code

Big strength of Joomla Forms is also ability to use CSS styles in your custom form. That way, you can adjust
form to best fit your needs and likings. Click on “Custom CSS” tab to open “Custom CSS” panel.

Picture 59: Create some styling for HTML form

You can use normal CSS style definitions here. Just paste your CSS file content here and your custom HTML
form will use defined styles.

Picture 60: CSS styling

33
We can save our new custom form by pressing “Save” button now.

Picture 61: Save new form

We can now check how did Joomla Forms create our fields elements automatically when we pressed “Parse
Form” button before.

Picture 62: Check generated form fields

If you followed this tutorial step by step, you should get result similar to this one. You can see that every form
element was correctly parsed and saved in the list of form fields. You can also check every field’s property by
clicking on field’s name. Since this procedure was already explained before, I won’t show that here again.

Picture 63: Generated form fields

By now, we have a fully working form that we created from a source code that we prepared in external
application. All we have to do now is to add some email actions as I explained in previous part of this tutorial.

34
Now, all that is left to do is to see how our form looks like in a real life. Press “Preview Form” on top of the
screen to load fully working form in a frontend template. You can check how this form looks a like and test
content submission.

Picture 64: Preview generated HTML form

You can see that our CSS styles are also loaded. We defined that our text fields will have yellow background
and you can see that CSS styling works as supposed.

Picture 65: Frontend HTML form presented with Joomla Forms

Final notice about custom HTML forms.

• You can go to form fields listing and add validation rules just as simple as you would do if you were
creating form using Joomla Forms field manager.
• You can add Submit actions to the form in the same way as you would do for Joomla Forms regular
form

Both of those processes were explained in previous chapters so I won’t explain them again here. It is
important to stress those possibilities because this shows real strength of Joomla Forms.

35
Conclusion

This concludes my tutorial about installation of Joomla Forms for Joomla 1.5.x extension. Later I explained
how to create basic form using Joomla Forms form editor. Finally I explained how to use Joomla Forms to
build advanced HTML form which was created with some external editor, like Dreamweaver.
I hope that this tutorial will be useful to some of you.
If you have any questions regarding this extension, please, check our FAQ section or contact us by using
Contact link on our web site.

Author is working for Blue Flame IT company as freelancer in charge of writing extension documentation. You
can reach him through contact form on his web site http://www.mihha-vision.com or by writing him to email
mihha@inet.hr.

36