How To Create A Custom Web Form In Joomla
Although Joomla’s built in contact forms might be enough for most users there are some that need a more customized solution. perForms, a custom forms component, comes to our rescue!
First you’ll have to download the component and then install it (in case you are not familiar with the procedure, read the tutorial on installing Joomla extensions).
1. After the component is installed, a menu item called “perForms” will appear in the Components menu. Click it and after the page loads click the “New” icon in the top right part to create a new form.
2. The form details editor is now loaded and you have to fill out a few fields. The form details block on the left is pretty much self explanatory, but pay attention to the “After submit” part: you can choose “Redirect to Url” (the page you want to send the visitor to after he/she submits the form) or “Show thanks text”.
On the right side of the page there are 5 tabs, one of them named “Emails”. There you can select the yes or no option for “Email form” - this is very important! Select yes if you want to send the results to an email address. Leave the other options as they are unless you know exactly what you are doing.
Now save the form.
3. Click the check-box next to the form you just saved and then click the “Items” icon on the top right.
It’s time to decide what fields we’ll have in the form. We need to have a name field, email, a question with a couple of check boxes, a question with radio buttons, a file upload dialog and a text area.
When you create a field there are 3 absolutely required details: caption, access key and name. Explanation of what they are:
- the caption is the description of the field and what the user will see,
- the access key allows the user to jump directly to this field with a key combo,
- the name is the value of the field - the way the form recognizes what values are entered in the form.
In the caption field you can fill almost anything, but the name should be short and descriptive and shouldn’t contain any non-alpha character. Also, pick an access key that is easy to remember (usually the first letter of the name field).
For the fields you want to be required you have to select this option from the “Display” tab from the right part of the Form Items Details.
4. Creating the name field: click the “New” icon and start filling the fields. Fill the caption and name with “Name” (lowercase for the name field) and the access key field with “n”. Select “Text” from the type drop down.
5. Do the same for the email field but also select “Email” from the Check drop down. This will ensure that what the user writes here is an actual email address.
6. Now let’s create the field with the radio buttons. After filling the caption, access key and name as usual select “Radio” as the type of the field.
To enter the values for this field click the “Values” tab on the right and after you write the values click the “Insert” button (enter only one value at a time). After you have all the values in the list select one of them and click the “Set as Selected” button. Save the whole thing.
7. Creating the field with check-boxes is exactly the same as for the one above but with 2 differences:
- as the type you must select “Check-boxes”
- don’t have any values in the “Selected Value”
8. The file upload dialog is created by selecting “File” from the type drop down and then inputting the maximum upload size defined in bytes. For my field I used 51200 which means 50 kilobytes. If you do set a small upload limit then tell your visitors this in the “Help text” text area.
9. Creating a text area should be pretty easy for you about now: just select textarea from the “Type” drop down and then give a width and height value from the “Display” tab on the right.
10. You have to take one more step, necessary if you actually want to see the data your users submit. Go back to the perForms manager, click the check-box next to your form and then click the “Data” icon in the top right.
After the page loads click the “Binding” icon and then select a name for the table in which to hold the data. Now, each time you want to check the data click the check-box next to the form and hit the “Data” icon.
