Using ‘placeholder’ labels

The default styling in ChronoForms places input labels to the left of the input boxes. It can be useful, and look better to put the labels ‘inside’ the input boxes by setting default value attributes. But then these need to be removed again when the form is validated or submitted.

Here's how to do this in ChronoForms v3 or v4.

See the demo of the CFv3 version of this form here. 

The download package includes pdf How-To documents for both ChronoForms v3 and v4, including the full code, and form backups that you can restore to your site.

Level: moderate, requires HTML, and some JavaScript knowledge.

This How-to Document links to Chapter 3 ‘Styling your form’ and Chapter 5 ‘Form validation and security’ of the “ChronoForms 3.1 for Joomla! sites cookbook”.

Important: This document has been updated for ChronoForms v4 and both versions are included. 

Using Ajax : two examples ‘Email checker’ & ‘Double drop-down’

Ajax is the JavaScript technique that is used to make forms behave interactively without having to be submitted. A messages is sent between the browser and the server and the page updated using the results sent back from the server. It’s a very flexible and useful approach.

There are two Ajax examples set out here. The first is a simple Email checker that looks to see if the value entered is already in the User database table. The second is a more complex example of a ‘double drop-down’. That is a pair of linked ‘select’ inputs set up so that the options in the second drop-down change depending on the selection in the first drop-down: for example to select a country in the first drop-down and have the corresponding list of States/Regions show in the second drop-down.

Level: moderate to advanced, requires PHP, MySQL, JavaScript and Joomla! knowledge.

29 pages

This How-to Document is based on Chapter 12 ‘Adding advanced features’ of the “ChronoForms 3.1 for Joomla! sites cookbook” updated and adapted to ChronoForms v4

Important: This document was written for ChronoForms v4 on Joomla! 1.6.

One of the most frequent problems we see in the ChronoForms forums is that the form validation “doesn't work”. By far the most common cause is that the site template or some other component is using the jQuery library.

jQuery is a very good JavaScript library that enables some amazing effects. But, out of the box it is incompatible with the MooTools JavaScript library that is standard in Joomla! and use by ChronoForms. Here we'll look at resolving these problems with one typical template.

Level: moderate, requires HTML, and some JavaScript and Joomla! knowledge.

This tutorial looks at one template but there are techniques that can be applied to many problems with jQuery breaking ChronoForms validation. 

NB: this document was written for Joomla! 1.6-2.5 templates but most of it also applies directly to Joomla! 1.5 templates and ChronoForms v3

Often ChronoForms can handle everything we need; and at other times  some or all of the data needs to be passed on to another page in the same site or to an external site somewhere else.
There are many ways to do this; ChronoForms can handle many of them.
Here we'll see several different ways to create a ChronoForm that will sign your user up to the MailChimp newsletter service. Newsletter signups are a frequent application and are simple to understand. The same methods can be applied to much more complex applications.

Level: easy to moderate;some JavaScript in the later examples.

NB: this document was written for Joomla! 1.6-2.5 templates but most of it also applies directly to Joomla! 1.5 templates and ChronoForms v3
 

ChronoForms v4 Basics 1

This document is based on a tutorial written by Jon Wilkin.

This is a first introductory tutorial for ChronoForms v4 describing how to build a simple contact form.

It also includes a description of all the basic form elements supported
by ChronoForms and an introduction to sending an email.

There is a series of videos on the greyheadnet channel at YouTube that
cover similar topics.

Level: beginner.

26 pages

Important: This document was written for ChronoForms v4 RC3.3 on Joomla! 2.5.

ChronoForms v4 Basics 2

This is an introductory tutorial for ChronoForms v4 describing how to
work with Events and Actions. It includes a description of all the basic form actions supported by ChronoForms

If you are new to ChronoForms v4 please look at Basics 1 first.

There is a series of videos on the greyheadnet channel at YouTube that
cover similar topics.

Level: beginner.

36 pages

Important: This document was written for ChronoForms v4 RC3.3 on Joomla! 2.5.