ChronoForms v3.0 Tutorials
#2 Create a simple form in ChronoForms
CHRONO
E
N
G
I
N
E
www.chronoengine.com
Create a simple form in ChronoForms
In this lesson we'll complete a first form using the ChronoForms wizard.
Start the wizard
Open the ChronoForms Administrator and click on the Components | ChronoForms | Form Wizard item
Create a simple form in ChronoForms - 1
Tutorial by GreyHead ~ www.greyhead.net
The Form Wizard
This is the ChronoForms Form Wizard where we will be creating our form.
The three icons are 'Preview', 'View HTML' and 'Save Form' and the toolbox at the right allows us to drag elements into our form.
Before doing anything more though we need to have an idea of what our form will look like
Create a simple form in ChronoForms - 2
Tutorial by GreyHead ~ www.greyhead.net
A sketch of our form
Here's a simple sketch of the form we want to create. A title, two labelled text fields and a submit button.
Create a simple form in ChronoForms - 3
Tutorial by GreyHead ~ www.greyhead.net
Add a heading
Back in the Form Wizard we can drag and drop a Heading onto the Form canvas.
You'll notice that the Properties window opens up below the Toolbox;
and three new Wizard steps appear . . . though we won't need these until we've completed our form layout.
Create a simple form in ChronoForms - 4
Tutorial by GreyHead ~ www.greyhead.net
Edit the Form Heading
Clicking the Form element - our new heading in this case - shows it's properties in the Properties window.
Click in the Text box there and we can edit the form title. (You can also use the Size drop-down to select the Header tag, we'll leave it as H1.)
When we've finished editing the element properties click 'Apply' to set them.
Create a simple form in ChronoForms - 5
Tutorial by GreyHead ~ www.greyhead.net
Adding Input boxes
We can drag and drop our two text boxes onto the Form canvas in exactly the same way.
And edit the box labels in the Properties | Text field.
Lastly we can drag and drop a 'Button' to create a submit button for our form.
Create a simple form in ChronoForms - 6
Tutorial by GreyHead ~ www.greyhead.net
Our form
Click the preview icon to see how the form is looking.
It's close enough to our design sketch for the moment.
Create a simple form in ChronoForms - 7
Tutorial by GreyHead ~ www.greyhead.net
Save the form layout
Click the 'Save' icon to save the form.
Note that once you do this you can't use the Layout Wizard any more, if any changes or additions are needed they have to be made in the HTML.
Create a simple form in ChronoForms - 8
Tutorial by GreyHead ~ www.greyhead.net
Give your form a name
Before saving we are asked to give our form a unique name.
This will be used in the form url so it can have no spaces or special characters (+ _ - are OK).
Publish the form
Create a simple form in ChronoForms - 9
Tutorial by GreyHead ~ www.greyhead.net
Back in the Forms Manager - click the 'Publish' button at the right to make the form visible on the site.
Then click the form Link to open the form in a new window or tab.
My New Form
And here it is in a Joomla page.
There are other things that need to be done to make this form useful - to email and/or save the results - we will cover those in future tutorials.
Create a simple form in ChronoForms - 10
Tutorial by GreyHead ~ www.greyhead.net