Banner

How to create forms in Joomla

joomla-contact-forms-guideHaving a quick, easy point of contact on your website can help increase website enquiries and in turn generate more business. Here we show you how to install and customize an easy to use form generator for Joomla.


pagebreakline

 

Learn how to create forms with this easy to follow guide

pagebreakline

Helping your website visitors get in touch

The best and most professional way to allow your website visitors to get in touch or to make an inquiry is by having an online contact form built directly into your website. You can have contact forms for different departments, staff, or lines of enquiry i.e. sales, support, info and so on. It's also far safer to use a contact form rather than posting your email address on your website, which would make it easy for spambot email harvesters to obtain your email address.  Additionally, by having a quick and easy contact or enquiry form on your website you can increase website conversions - turning visitors into enquiries.

For this guide we will be demonstrating how to setup a contact enquiry form on Joomla, which is our recommended and certainly one of the best Content Management Systems available. If you don't yet have Joomla, then take a look at our free Joomla Website Starter Kit for more info on how you can get up and running quickly and easily with a free website full of features like this, all ready to go.

joomla-website-contact-form

pagebreakline

JForms - Our favourite free forms generator

The great thing about Joomla is that you don't need to know anything about website development, no coding is necessary in order to achieve many of the things that you desire for your website, inclusing generating website forms, as these things can be achieved through the power of Joomla extensions.

Our favorite free form generator extension for Joomla is JForms, which is a WYSIWYG form generator for Joomla. JForms allows you to create forms very easily, simply by using a drag and drop editor built right inside your Joomla website (contained within the Administrator panel) and is by far the simplest, easiest to use way of creating the type of forms you desire, without any technical knowledge or experience required.

Installing the free contact form extension

Start by downloading JForms from Mosmar.com. Once you have downloaded JForms simply log in to your Joomla website admin panel, i.e www.yourdomainname.com/administrator and click on the "Extensions" menu and choose install.

addressbaradmin

websiteloginscreen

extensioninstallscreenmenu

On the install page click to browse your computer for the extension which you just downloaded. Once selected simply click install and your done.

extensionmanagerscreen

pagebreakline

Cofiguring your new website contact form

Now that you have installed JForms (or if you are using the Website Starter Kit from GuidedHelp it is already pre-installed) we now need to configure it to get it to work the way we need. For this example we are going to create an enquiry form with the following fields: Your Name, Your Organization, Your Email, Your Telephone, Message.

These fields will capture the most common details required and should provide you with enough information from your visitor enquiries without being too off putting with too many fields to complete for the visitor.

Within the administration panel, select the Components menu and look for JForms.

joomla-jforms-component-menu

This will open up the main JForms component screen.

joomla-jforms-screenshot

Within the JForms page, start by clicking on "New" from the buttons near the top, which will take you to the new form designer page.

joomla-jforms-new-form

The great thing about JForms is that it breaks form elements down into categories, with "Basic" featuring the most common form elements consisting of "Textbox" which is a simple one-line field used for names, telephone numbers etc (and is probably the most commonest field type you will use), "Textarea" which is a multi-line field, ideal for addresses or message / enquiries. Next there is a "Radiobutton" which is ideal for single selections from pre-set choices, i.e. Yes / No type fields.  Next up is "Checkbox" which is ideal for multiple choice type fields, "File Upload" allows your website visitors to attach a document or file to the form when sending i.e, you may create a Job Application form with a File Upload field for attaching their Resume / CV. "Button" is pretty obvious in that you need a way to submit the form, or print, clear it. Lastly from the Basic section is HTML element which allows you to integrate some custom web elements / pictures etc into your form should you need to.

Other features of JForms are self explanatory (although many do come with a little popup box which gives some details of what the element does).

The greatest thing about JForms is down to its drag and drop editor, which allows you to drag over a form element type, i.e. "Textbox" into the form design area.  JForms uses JQuery for the designer page and in general it works very well, however if you are using any Joomla Administrator extensions that utilize JQuery, you may find either them or JForms not working.  In our case we needed to temnporarily disable Drag and Drop Module editor to allow JForms to function, just long enough to design and test a form we were designing.

joomla-jforms-design-page

Start by dragging over a "Textbox" to the designer area.  Once dragged over the element properties window is displayed on the left, which allows you to fine tune your new form element.  In this case we will leave ID at its default and are really only interested in the Label field which for this example we are going to call "Your Name". Maximum length we are going to set to 50 characters as that is more than enough for a name. We will also set it to "Required" as it's important to know who made contact.

joomla-jforms-field-properties

Next up is adding another "Textbox" to the designer area. This time we are going to call it "Your Organization" which we type into the Label field.  We will set this one to 50 Characters also as to keep it in line with the Your Name field to keep things looking neat and tidy. This field is not important so we set the required type to "No".

joomla-jforms-field-properties-2

Another great thing about JForms is that you can quickly click on any form element in the designer window to quickly access its element properties window for quick and easy adjusting.

Next we need to add an email field in order to capture the visitors email address.  So again we choose "Textbox" and this time we label it as "Your Email" with characters being set to 50 again for neatness. This field is important so we need to set the required type to "Yes" and the "User Email" choice needs to be set to "Yes" as this is used as the sent from and reply address. Validation type can be set to "Email" as this is how the field knows that it is an email field (and will look for the required @ and . in order to know that it has been filled in properly) although validation is not important, it does help reduce mistyped errors.

For the "Your Telephone" field we will use yet another Textbox, using a label of "Your Telephone", 50 characters again, withValidation set to Numeric (all numbers - no letters).

Next up we need to drag over a Textarea form element, which we will label as "Message" as this will form the main message / enquiry box which your visitor will use to input their actual enquiry information.  This one should also be set to Required, and set to 10 columns, 10 rows with a minimum length of 10 and maximum length of 500 (although, you can set the maximum character length more if you wish depending on your own specific needs).

Lastly we need to drag over a "Button" with this one labelled as "Submit" and its type set to "Submit" also, as this will obviously be our form submit button.

joomla-jforms-field-properties-3

Once done, click the "Save" button at the top and view and test your new form from the front end of your website.

Before we can see the newly designed form on the front end of our website, we need to add it to a page and make sure that page has a menu link (or a link on a page) to it.

joomla-article-manager-menu

So we next need to create a new Article. You can call this article anything you want, but for our example we are going to call it "Contact Form". We also need to set it to published for front end viewers to be able to see it (unless this form will only be used by those registered on your website).  In the description box we now need to add the JForms call, which is {jform=1} which is used to call JForms, with the =1 being the number ID of the form you wish to call, in our case as it is the only form designed at the moment, it would be =1. However if you have created several forms using JForms, check the ID number of the form you wish to call and substitute 1 for the ID number of your form, i.e. {jform=4} for a form with ID 4. 

joomla-jform-code

Publish this new article, then create a new menu link to this newly created article. For this example we will add a menu link to the contact form page on our main menu. So on the top administrator menu, click "Menu" then click "Main Menu".  We next click "New" from the buttons at the top and choose "Articles" and "Articles Layout".  Note: I should point out here that you can actually create a direct menu link to your newly designed form, by choosing "JForms" from the menu items page, however this will only allow you to link directly to the form, and will not allow you to integrate the form wherever you desire on the page (but its still a handy option none the less, especially since JForms does have an HTML elements feature built in).

Within the "Article Layout" we need to give the new menu item a name, i.e. Contact Us and select an article to link to, in this case our newly created "Contact Form" article. Lastly we set it to published which will instantly make this new page available on the front end of our website.

Should you need to do any fine tuning, you can do so by going back into the JForms designer and adding/removing any form elements, or fine tuning any elements using their "Element Properties" window.

Conclusion

Well that's it. You will now have a professional looking contact form for your website and should now hopefully start receiving more inquiries and less spam! 

pagebreakline

Get a website, complete with contact and enquiry forms built in, for free right now

We have already added many great features to our Website Starter Kit  including slide shows, interactive maps, social networking and much more to enable you to have a complete professional website, all for free. If you are looking to make your own professional looking website then why not start the easiest way possible and download our free Website Starter Kit today.

pagebreakline

websitestarterkitboxWebsite Starter Kit - Free Website

This single download will allow you to have a full featured professional looking website up and running in minutes. If you are looking for a new professional website thats easy to update and maintain. Get started now - Free

Free website downloadFree Web Site

pagebreakline