Your message has been sent.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
There is no doubt that Joomla! is one of the best content management system (CMS) in the world. It has a large set of extensions to meet almost any type of application need ranging from content management, photo gallery, multimedia streaming to e-commerce and social networking. It has great flexibility in changing designs and customizing the code. With Joomla, you can build any kind of website and dynamic web application. For example, this step-by-step tutorial by Suhreed Sarcar describes how to build custom form applications in Joomla! using CK Forms component without delving into any PHP code.
(For more resources on Joomla!, see here.)
Add a quick survey form to your Joomla site
Dynamic web application often means database at the back-end. It not only takes data from the database and shows, but also collects data from the visitors. For example, you want to add a quick survey into your Joomla! Site. Instead of searching for different extensions for survey forms, you can quickly build one survey form using an extension named CK Forms. This extensions is freely available for download at http://ckforms.cookex.eu/download/download.php.
For building a quick survey, follow the steps below:
- Download CK Forms extension from http://ckforms.cookex.eu/download/download.php and install it from Extensions | Install/Uninstall screen in Joomla! Administration area.
- Once installed successfully, you see the component CK Forms in Components menu.
- Select Components | CK Forms and you get CK Forms screen as shown below:
- For creating a new form, click on New icon in the toolbar. That opens up CK Forms: [New] screen.
- In the General tab, type the name and title of the form. The name should be without space, but title can be fairly long and with spaces. Then select Yes in Published field if you want to show the form now. In Description field, type a brief description of the form which will be displayed before the form.
- In Results tab, select Yes in Save result field. This will store the data submitted by the form into database and allow you to see the data later. In Text result field, type the text that you want to display just after submission of the form. In Redirect URL field, type the URL of a page where the user will be redirected after submitting the form.
- In E-mail tab, select Yes in Email result field, if you want the results of the forms to be e-mailed to you. If you select Yes in this field, provide mail-to, mail cc, and Mail BCC address. Also specify subject of the mail in Mail subject field. Select Yes in Include fileupload file field if you want the uploaded file to be mailed too. If an e-mail field is present in the form and the visitor submits his/her e-mail address, you can send an acknowledgement on receiving his/her data through e-mail. For sending such receipt messages, select Yes in E-mail receipt field. Then specify e-mail receipt subject and e-mail receipt text. You can also include the data and file submitted via the form with this receipt e-mail. For doing so, select Yes in both Include data and Include fileupload file fields.
- In Advanced tab, you can specify whether you want to use Captcha or not. Select Yes in Use Captcha field. Then type some tips text in Captcha tips text, for example, 'Please type the text shown in the image'. You can also specify error texts in Captcha custom error text field. In Uploaded files path field, you can specify where the files uploaded by the users will be stored. The directory mentioned here must be writable. You can also specify the maximum size of uploaded file in File uploaded maximum size field. To display Powered by CK Forms text below the form, select Yes in Display "Powered by" text field.
- In Front-end display tab, you can choose to display IP address of the visitor. You can view help on working with CK Forms by clicking on Help tab.
- After filling up all the fields, click on Save icon in the toolbar. That will save the form and take you to CK Forms screen. Now you will see the newly created form listed in this screen.
eBook Price: $23.99
Book Price: $39.99
(For more resources on Joomla!, see here.)
Adding fields to the form
Now it's time to add fields to the form. For adding the fields to a form, follow the steps below:
- For doing so, click on pencil icon in the Fields column against the form name. That opens up CK Forms – Fields screen.
- For adding a new field to the form, click on New button in the toolbar. That opens up CK Forms – Fields: [New] screen.
- In General tab, type the name of the field. The name can be alpha-numeric without any space. However, Label field can contain spaces and will be displayed on the form. In Published field, select Yes to display the field on the form. Then select a field type from Type drop-down list. You can select one of the following types from this list.
This creates a text field on the form where single line texts can be typed by the users. You can specify length of the field. This creates <input type=text ... /> HTML markup.
Text field types in CK Forms can be any of the following sub-types:
Text – this is plain text field where users can type texts. For example, user's name or title of an article.
E-mail – this sub-type is used to validate e-mail addresses provided by the users.
Password – this type of field is used for typing passwords. The texts typed in these fields are masked with *** so that others in front of the screen cannot see typed passwords.
Date – selecting this sub-type will display a date selector in that field. You can also specify date formats allowed in this field.
Number – This sub-type allow only inputting numbers in the field.
This creates a hidden field where some information can be embedded with the form. It is equivalent to <input type=hidden ... /> markup.
This creates a field where users can type multiple lines of text. This is equivalent to <textarea></textarea> markup.
Checkboxes are for selecting one or more options at a time. This is equivalent to <input type="checkbox" name="..." value="..." /> markup.
Radio button are for presenting options those are mutually exclusive. For example, sex of a person can either be Male or Female. In that case, you should use radio buttons. This is equivalent to <input type="radio" name="..." value="..." /> markup.
This type of fields creates drop down list or select list from where users can select one or more than one options. This is similar to following code block:
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
This creates a form control that allows uploading a file to web server. It is equivalent to <input type=”file” name=”file1” /> markup.
This creates buttons, such as Submit or Reset. This is equivalent to <input type=”button” name=”...” /> markup.
This creates a separator between two fields. It is simply a space or horizontal line.
- Let us start a field for typing Name of the visitor. After clicking on New button, in General tab, type 'name' in Name and 'Name' in Title field. Then select Text from Type drop-down list. That changes the list of fields below this. Now fill the fields as shown in the following screen shot. Please remember to select 'Text' in Text type drop down list. Then click on Save button in the toolbar.
- Create another field, name it as 'dob' and title as 'Date of Birth'. From Type drop down list, select Text, and in Text type drop down list select Date. The configuration for this field will look like the following screen shot. When done entering these information, click Save button in the toolbar to save the changes.
- Now add a field with name 'sex' and title 'Sex'. Select Radio Button from Type drop down list. In Display field, select 'In line'. In Value and Label fields, type value and labels for options to be displayed and click on Add button. The value and label pairs will be listed in Checkbox list field. When done adding options, click Add button in the toolbar.
- Add a maritalstatus field of type Radio button. Then create a field name email of type Text. Select Text type as E-mail. The configuration for the field will look like the following screen shot.
- Now add a new field, name it as country and give a title 'Country'. Select 'Select' from Type drop down list. In Value and Label fields types value and labels of the options you want to display, and click Add button to add the value-label pairs in Checkbox list field. You can delete any value-pair list from this box by selecting the pair and clicking del button. When finished adding options, click on Add button in the toolbar.
- Now add another field. Name it as subscribe, and type 'Do you want to subscribe our newsletter?' in Title field. Select 'Checkbox' from Type drop down list. In Value field, type 'subscribe'. For making this checked default, check Checked field. When done, click on Add button in the toolbar.
- Now we will be adding a textarea field. Name the field as 'resume' and Title as 'Describe yourself briefly'. From the Type drop down list, select Textarea. For allowing use of HTML text and visual editor in this text area, check HTML Editor checkbox. In Wrap drop down list, select Virtual. Save the field by clicking on Save button in the toolbar.
- Now we will be adding a field through which users will be able to upload their curriculum vitae in Microsoft Word (.doc), PDF (.pdf) or OpenOffice Document (.odt) format. Add a new field, name it cvitae and title as 'Upload your curriculum vitae'. Select File upload in Type drop down list. Save the filed by clicking on Save button in the toolbar.
- Now it's time to create some action for the form. Add a new field by naming it 'submit' with title 'Submit'. Then select Button from Type drop down list. Selecting Button in this field shows another Type drop down list just below it. Select Submit from this drop down list. Click on Save button in the toolbar.
- Similarly create a Reset button by selecting Button and then Reset in Type drop down list.
Now we have finished adding the buttons to the form. It's time to add this form in front-end menu so that users can click on that, fill in and submit the form.
eBook Price: $23.99
Book Price: $39.99
(For more resources on Joomla!, see here.)
Adding menu item for the form
For adding a menu item linking to the form we have created, follow the steps below:
- Click on Menus | Main Menu. That shows Menu Item Manager: [mainmenu] screen. Click on New button in the toolbar on this screen. That shows Menu Item:[new] screen. Click on CK Forms and you get sub-items under it, as shown in the following screen shot.
- Click on Standard CKForms CSS Layout link. That shows Menu Item:[new] screen, on which you have to type the name of the menu, its alias and some other information as shown in the following screen shot.
- In Title field type the title of the menu, and its short name in Alias field. On the right side of this screen, select the form name you have created (for our case it is 'quicksurvey') in Select CK forms drop down list. When done, click on Save button in the toolbar. Now the menu is added to main menu.
Previewing the Form
From the administration panel, click on Preview button on the upper right-hand side. That previews your site. You see Quick Survey menu item in Main Menu. Click on this menu item and you see your newly created form Quick Survey. It looks like the following screen shot.
As you see, the date of birth field shows a calender icon besides it, taking your mouse pointer to this field you display a date selector. Sex and Marital Status fields are showing radio buttons. For the first, options are displayed in line, whereas for Marital Status, options are shown as list. E-mail address field looks like a simple text field, but when you type something in this field and move away from the field, the contents will be instantly validated. It will validate whether you have given an e-mail address or not, and show error message.
Country field displays a drop down list with the names of countries we have added. Similarly, you also see a newsletter subscription checkbox. The textarea field we created is displayed with HTML Editor. If you like you can turn off this Visual HTML editor by clicking on Toggle editor button. Then we see, file upload field. Clicking on Browse button opens up file opening dialog from where users can select a file for uploading to Joomla! site.
During form definition we have indicated that we want Captcha. You see the Captcha image and a box to type the image text. You can also refresh the Captcha code.
Viewing data submitted by the form
As an administrator of a Joomla! Site you can easily see the data submitted through the form. For viewing the data submitted follow the steps below:
- Login to administration area and select Components | CK Forms. That shows CK Forms screen listing available forms.
- For viewing data submitted by a form, click on Display Data link on the right side on the form name (in Data column). That opens up CK Forms – Data screen. This screen lists the data submitted by the form.
- You can view these data and export as CSV file. For exporting as CSV file, select data sets and click on Export button. You can also delete the data by selecting data sets and clicking on Delete button.
For showing data in the front-end, follow the steps below:
- Select Menus | Main Menu. That shows Menu Item Manager:[mainmenu] screen. Click on New button on this screen. That shows Menu Item:[new] screen. On this screen, click on CK Forms link, and you see sub-items under it. From the sub-items of CK Forms, click on Standard data CKForms CSS Layout link. That opens up Menu Item:[new] screen.
- In Menu Item:[new] screen, type the title of menu link, and from Parameters (Basic) section, select the form from Select data display profile drop down list. You can also define whether you want to show column headers and table borders or not. When done, click on Save button in the toolbar.
- Preview the site and click on the menu item created. You will see the data submitted by the form as shown in the following screen.
Users can now see all submitted data as a table. At this moment, you cannot selectively publish submitted data.
More things to do with CK Forms
With CK Forms component, you can create simple form applications that do not need multiple tables and complex relationships. As seen in this tutorial, you can easily add one page simple form on your Joomla! site without any coding. Besides the features covered in this tutorial, you can also do the following with CK Forms:
- You can duplicate an existing Form alongwith its associated fields.
- You can backup a form with its data as .sql file. When needed, you can also restore the form definition and data associated with it.
- Form's data can be exported as CSV file that can e used for other applications.
- For each field, you can define the layout by editing CSS in the Layout tab.
- For overall layout of forms created by CK Forms, you can edit the CK Form CSS from within the CK Form control panel.
There are many extensions available for Joomla! through which functionalities of a Joomla! Site can be enhanced. For building form applications, there are several extensions and CK Form is one of them for building simple forms in Joomla!. Using CK Forms extension you can easily add a custom form into Joomla! By which users can submit data to you. For doing this, you don't need any coding except using some wizards in the component.
- Building a Calender Application in Joomla! using Fabrik
- Managing Your Joomla! Media Files with Media Manager
- Media File management in Joomla with FTP and Third-party Extensions
- Adding Image Content in Joomla!
- Managing Image Content in Joomla!
- Managing Menus in Joomla! 1.5: Part 1
- Managing Menus in Joomla! 1.5: Part 2
- Making the most of Ubuntu through Windows Proxies
- Jailbreaking the iPad - in Ubuntu
About the Author :
Suhreed Sarkar is an IT consultant, trainer and technical writer. He studied Marine engineering, served on board the ship for two years, and then started journey in to IT world with MCSE in Windows NT 4.0 track. Later he studied business administration and earned MBA from University of Dhaka. He has a bunch of BrainBench certifications on various topics including PHP4, Project Management, RDBMS Concepts, E-commerce, Web Server Administration, Internet Security, Training Development, Training Delivery and Evaluation, and Technical Writing.
He taught courses on system administration, web development, e-commerce and MIS. He has consulted several national and international organizations including United Nations, and helped clients building and adopting their web portals, large scale databases and management information systems. At present he is working on building a framework for education sector MIS, and promoting use of ICTs in education.
Suhreed is renowned technical author in Bengali – having a dozen of books published on subjects covering web development, LAMP, networking, and system administration. He authored Zen Cart: E-commerce Application Development, Joomla! E-commerce with Virtuemart, and Joomla! with Flash, published by Packt Publishing.
While not busy with hacking some apps, blogging on his blog (http://www.suhreedsarkar.com), reading philosophy of Bertrand Russell or management thought of Peter F Drucker – he likes to spend some special moments with his family. Suhreed lives in Dhaka, Bangladesh