Azharkamar.com

How to Create a Simple Form Using ChronoForms in Joomla 1.6

Tutorials
29 Apr 2011
16 comments

Not many Joomla developers have made their components, plugins or modules compatible with the new Joomla 1.6. ChronoEngine.com (maker of ChronoForms) is one of the few companies that have made their products fit for J1.6.

Sooner or later, every developer would have to do so as Joomla 1.6 does not allow for Legacy Mode – it can only use extensions native to its version.

I just did a fresh installation of Joomla 1.6 last week and added loads of articles (the client wanted to migrate their current CMS-less website to Joomla), not knowing that Joomla 1.6 doesn’t have Legacy Mode. So I had some difficulty creating a multilingual site as the popular extension JoomFish won’t work in Joomla 1.6. I had to use J1.6’s inbuilt multilingual tools that aren’t as awesome as JoomFish.

Lucky for me, my favorite Joomla extension for creating forms, ChronoForms, had just been made available for Joomla 1.6 on 30 March 2011. I’ve used ChronoForms quite a fair bit in Joomla 1.5 and I find the one for Joomla 1.6 much easier to use.

So in this tutorial, I’ll run through in detail the process of creating a simple contact form using ChronoForms in Joomla 1.6.

1. Install ChronoForms into Joomla 1.6

First, obviously, you would have to install the ChronoForms component, plugin and module. You can download all the 3 files here http://www.chronoengine.com/downloads/chronoforms/141-chronoformsj1.html.

Once downloaded, install them via Extension Manager in this order – the component first, then the plugin, and lastly the module.

Here’s one important thing to note: After I installed all the 3 extensions, I enabled the ChronoForms plugin from the Plug-in Manager. I then found that most of Main Menu links became broken – the links returned a 404 error. So I tried disabling the ChronoForms plugin and then the links got back to normal. It seems that after I enable the plugin, my site URLs get postfixed with additional language code letters. I’ve got no idea why but if this happens to you, disable the ChronoForms plugin.

2. Create a New Form

  1. Go to Components > ChronoForms. Click the New button to create a new form.
  2. Under Form name, enter your unique form name (e.g. contact-us). That’s all for now.
  3. Now open the Code tab and select Wizard under the Form type option. This will allow you to easily use the Wizard’s drag and drop functionality. (I usually create the form using the Wizard first, and then after all form functions are tested, then I’ll proceed to customizing the form in the HTML code area).
  4. Click Save & Close and you’ll see your new form in the Forms Manager page.
  5. Now click Wizard edit under the Wizard column to proceed on to creating your form.

3. Using the Form Wizard

For a simple contact form, you can just edit in easy mode to save time and headache. Click the (Edit in Easy Mode) link on the top left beside your form name to activate it.

It’s now time to make your form a bit juicier by adding some elements.

  1. Drag elements from the Elements tab on the left and drop them in the Preview box on the right. As shown in the screenshot above, I created 2 textfields, 1 textarea and a submit button.
  2. To customize each element, click the Settings button (the second button) on the right of the element. You can then define stuff like the field name, the label to go with the textfield, the field size, class and more.
  3. Next, click the Emails tab to define which email address the form would go to, and how data would look like in the email.
  4. Click on Email – #1 and then select Enable under the General tab to enable this Email function.
  5. Under the Template tab, here’s where you specify how the email will appear. Use the curly brackets formula to get fields data, e.g: {field_name}. To find out the field name, see Step 2 above.
  6. email-template-chronoforms

  7. Now go to the Static tab and fill in all the required information.
  8. Click Apply and close the modal box.
  9. Now on the Form Wizard main page, open the Thanks Message tab. Click Show Thanks Message and simply enter a simple ‘Thank you message’ and Apply it.
  10. Done! Now you should test whether the form works.
  11. Assign your form to a menu item and view the page in the frontend. It should look plain and simple but you can style it later.
  12. Check your form validation, submission and check your email to see whether you receive the submitted form. Once everything is ok, let’s go on to styling the form to make it look prettier.

4. Styling the Form

  1. Go back to Components > ChronoForms and click your form name in the list.
  2. Under the Code tab, change the Form type to Custom so that whatever you edit in the HTML code text area will take effect.
  3. Important: Once you change the Form type option to Custom, if you ever use the Form Wizard again and then save it, all your editing done in the HTML code text area will be gone forever (the Wizard will overwrite it). Hence it is very important to backup your codes in the HTML code text area.
  4. Alright, for form styling, you can add any HTML code you want in that HTML code text area. Just be careful not to modify any of the form element codes if you’re unsure. You can put the elements into tables, change stuff like labels, add classes to the form elements, and more.

So that’s all! May this article help you in your form-making quests.

Good luck and have fun with ChronoForms!

Author - Azhar Kamar
16 Comments Revolving around this Article
  1. marivel ariola

    heyy:)

  2. mhadipour

    Hi, I am using joomla 2.5.7 and latest version of chronoforms.

    I can not drag and drop emlements in chrono form wizard. I also enable Mootools Plug in.

    I’ll appreciate any help or suggestion.

  3. Evelyne

    Hi everybody, here every one is sharing such knowledge, therefore it’s good to read this website, and I used to visit this weblog every day.

  4. Kate

    Hi thiѕ is somеwhat of off topіc but I waѕ wanting to κnow if
    blogѕ uѕe WYSIWYG editorѕ οr if you have
    to manually code with ΗTML. I’m starting a blog soon but have no coding expertise so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

  5. kota kinabalu

    Meanwhile, at Pulau Sapі, diveгs cаn enϳoу ѕіght of oсtοpus,
    cuttlеfіsh, and cruѕtacеans likе shrimps аnԁ crabѕ.
    Yоu dont have to bе іn supеr phуsical
    ѕhape tо dο іt. Ηowever,
    the оtheг рeаks are nοt thаt “friendly”; equipment anԁ sоme аbilities,
    οr at least a greater effort, are needeԁ to climb thеm.

  6. Fire Pits

    It’s actually very complex in this active life to listen news on Television, therefore I simply use world wide web for that reason, and obtain the most recent news.

  7. fire Pit plans

    I knoω this if οff topic but ӏ’m looking into starting my own weblog and was curious what all is required to get set up? I’m asѕumіng having a blοg likе yourѕ woulԁ cost a pretty pеnny?
    I’m not very web savvy so I’m nοt 100% positive. Any suggestions or advice would be greatly appreciated. Cheers

  8. Rajasekar

    I follow your steps to create new chronoform & apply in my website, its just displating the content & the validation is not working

    My joomla version is 1.7 & chronoform v4

  9. ????????? ???????????

    Thank you Azhar Nice article!

  10. Aziha

    how could I display the input that user put in the form after he/she click the submit button using this chronoforms?

  11. Jez James

    Hi
    I would like to use a custom code that takes the article page title or be able to pass a value to the form to identify from which article page the form has been filled from and places it in the form before sending the email.

  12. Karam

    I cannot see the form in the front end after publishing it in joomla 1.7.

    in the file chronoforms.html.php , when in print_r $form variable ..
    $form->form_output is blank….

    Any Idea why this is happening?



    Azhar Kamar replied:

    @Karam, I didn’t test this in Joomla 1.7. This guide is tested only in J1.6. So I don’t really know what’s the issue, sorry.



    vuki replied:

    @Karam,

    u have to enable it go to Menu Manager > click new > fill in the required fields> now heres the tricky bit which we all kinda miss out click on “Module assignment for this Menu Item”..this is located on the right side of the options (last one from the right) look for chronoforms module > click it> make sure it published, and on the menu assignment you have to select where u want this form to appear, positioning is not required. let me know what you get ill be glad to assist you or anyone in this room for that matter in joomla 1.7.

    Have a good one.



    Azhar Kamar replied:

    @vuki, thanks for your explanation.

Write a Comment! NOW! :)

Current ye@r *