Building Form Applications in Joomla! using CK Forms

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Content Administration

Joomla! 1.5 Content Administration — Save 50%

Keep your web site up-to-date and maintain content and users with ease

$23.99    $12.00
by Suhreed Sarkar | January 2010 | Joomla! Content Management Open Source

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:

  1. Download CK Forms extension from http://ckforms.cookex.eu/download/download.php and install it from Extensions | Install/Uninstall screen in Joomla! Administration area.
  2. Once installed successfully, you see the component CK Forms in Components menu.
  3. Select Components | CK Forms and you get CK Forms screen as shown below:
  4. For creating a new form, click on New icon in the toolbar. That opens up CK Forms: [New] screen.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
Joomla! 1.5 Content Administration Keep your web site up-to-date and maintain content and users with ease
Published: October 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

(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:

  1. For doing so, click on pencil icon in the Fields column against the form name. That opens up CK Forms – Fields screen.
  2. For adding a new field to the form, click on New button in the toolbar. That opens up CK Forms – Fields: [New] screen.
  3. 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.

    Type

    Description

    Text

    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.

    Hidden

    This creates a hidden field where some information can be embedded with the form. It is equivalent to <input type=hidden ... /> markup.

    Textarea

    This creates a field where users can type multiple lines of text. This is equivalent to <textarea></textarea> markup.

    Checkbox

    Checkboxes are for selecting one or more options at a time. This is equivalent to <input type="checkbox" name="..." value="..." /> markup.

    Radio button

    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.

    Select

    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:

    <select>
    <option value="opt1">Option 1</option>
    <option value="opt2">Option 2</option>
    <option value="opt3">Option 3</option>
    </select>

    File Upload

    This creates a form control that allows uploading a file to web server. It is equivalent to <input type=”file” name=”file1” /> markup.

    Button

    This creates buttons, such as Submit or Reset. This is equivalent to <input type=”button” name=”...” /> markup.

    Field separator

    This creates a separator between two fields. It is simply a space or horizontal line.

  4. 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.

    Building Form Applications in Joomla! using CK Forms

  5. 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.

    Building Form Applications in Joomla! using CK Forms

  6. 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.
  7. 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.

    Building Form Applications in Joomla! using CK Forms

  8. 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.
  9. 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.

    Building Form Applications in Joomla! using CK Forms

  10. 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.

    Building Form Applications in Joomla! using CK Forms

  11. 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.
  12. 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.

    Building Form Applications in Joomla! using CK Forms

  13. 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.

Joomla! 1.5 Development Cookbook Solve real world Joomla! 1.5 development problems with over 130 simple but incredibly useful recipes
Published: September 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

(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:

  1. 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.

    Building Form Applications in Joomla! using CK Forms

  2. 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.

    Building Form Applications in Joomla! using CK Forms

  3. 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.

Building Form Applications in Joomla! using CK Forms

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:

  1. Login to administration area and select Components | CK Forms. That shows CK Forms screen listing available forms.
  2. 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.
  3. 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:

  1. 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.
  2. 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.
  3. 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.

Summary

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.


Further resources on this subject:

About the Author :


Suhreed Sarkar

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

Contact Suhreed Sarkar

Books From Packt

Joomla! 1.5 SEO
Joomla! 1.5 SEO

Joomla! with Flash
Joomla! with Flash

Joomla! Web Security
Joomla! Web Security

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs

Your rating: None Average: 4.7 (9 votes)
karen millen outlet by
Good article! Thank you so much for sharing this post.Your views truly open my mind.
karen millen outlet by
I really like this website , and hope you will write more ,thanks a lot for your information.
karen millen outlet by
Nice work,i am glad to see this page,it gives me the information what I need,thanks!
Multiple checkboxes by
Do you maybe know how to add multiple checkboxes? Like this: SELECT YOUR OPTIONS [] option 1 [x] option 2 [x] option 3
How to build a form with the fixed width of column in frontend by
Very usefull component... How to fix the width of field in the front-end form.. AV,
How do we get to align the form by
Please help?
superb by
Great nice i love it.
How to give colors,borders and some designing issues to form by
How to give colors,borders and some designing issues to form
can ck forms be used to replace login form?? by
login form comes in built in joomla is there a way where we can use ckforms to create login form how can we edit the data in these forms. regards
how can we edit the ckforms data already submitted by
i used ck forms and it all went well. users are making mistake in filling in the form and i need to redo or ask the user to redo the form. we are unable to ask user to correct his form. how to change or edit the data in ck forms please help us onit. Regards

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Y
a
k
h
W
L
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software