Building Form Applications in Joomla! using CK Forms

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 athttp://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. InUploaded 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 Add, edit, and manage content, from articles and text to images, audio, and video Quickly master the administration area of your new web site and make yourself familiar with the navigation and how the content is organized Get to grips with managing users, slaying spam, and other activities that will help you maintain a content-rich site In-depth caoverage for content administrators and end users of a Joomla! site with plenty of practical, working examples and clear explanations

(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 upCK 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.

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

   

2. Create another field, name it as 'dob' and title as 'Date of Birth'. From Type drop down list, selectText, 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.
   

   

3. Now add a field with name 'sex' and title 'Sex'. Select Radio Button from Type drop down list. InDisplay 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.
   
   
4. 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.
   

   

5. 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.
   
   
6. 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 Addbutton in the toolbar.
   

   

7. 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, selectVirtual. Save the field by clicking on Save button in the toolbar.
   

   

8. 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.
   
   
9. 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 Savebutton in the toolbar.
   

   

10. 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   Simple but incredibly useful solutions to real world Joomla! 1.5 development problems Rapidly extend the Joomla! core functionality to create new and exciting extension Hands-on solutions that takes a practical approach to recipes - providing code samples that can easily be extracted

(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 onNew 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.
   

   

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.
   

   

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.

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 Formsscreen 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 onDelete 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 Newbutton on this screen. That shows Menu Item:[new] screen. On this screen, click on CK Formslink, 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.

 

Ref : Suhreed Sarkar | January 2010 | Joomla! Content Management Open Source, http://www.packtpub.com/article/building-form-applications-in-joomla-using-ck-forms