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 â&#x20AC;&#x153;Send an emailâ&#x20AC;? 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â&#x20AC;&#x2122;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 "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>
1.0
Transitional//EN"
<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 â&#x20AC;&#x153;Form Layoutâ&#x20AC;? 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