Editing your form with the Wizard Edit

It's unusual for me (or my clients) to get form specifications right the first time. I often need to go back and add something that was forgotten.

In this case we decide that we want to collect the user's name as well as their e-mail address. For this we need to add a new text input.

Getting ready

We'll be using the same form as the previous recipes.

How to do it...

1. 1. From the ChronoForms Forms Manager select the newsletter_signup checkbox and click the Wizard Edit icon in the toolbar, close the warning message, and click Step 1 Design your form.

2. 2. Drag a new TextBox element over from the Toolbox into the workspace and drop it near the top of the workspace. We want it before the e-mail element.

   Note

   If the box drops into the wrong place, you can drag the elements up and down inside the workspace with your mouse. In some browsers you can't grab the whole element — if so, then the right-hand, small icon on the element should work OK (if you look closely it's a pair of green arrows).

3. 3. Click the element to open the Properties box and change the Label field to Name.

4. 4. Apply the changes to the properties, save the form again, and open the form window.

   You should now see that we have two fields in the form:

   

   Just like that we've successfully added a second field to the form.

5. 5. Unfortunately, when we submit it, the Email template has not been updated for us, it only shows the value of the e-mail input.

   We can update this easily enough though. By now the process is familiar. Use Wizard Edit and this time go to Step 3: Design your Email(s).

   

   Here you can see the template that ChronoForms has created for your e-mail. It has similar syntax to the "Thank You" page with {text_0} as a place-holder for the input value.

   We have the same Add Field icon too.

6. 6. Put your cursor in the text editor field and use the Add Field icon to get the place-holder for the name field; it will probably be {text_1}.

   Note

   ChronoForms gives the input elements serial numbers by type. So, the next test input will be text_2, and the first 'select' input will be 'select_0'. If you like, you can change these to something more user-friendly either in the element Properties box, or manually in the Form HTML, as we shall see later.

   Let's make this e-mail a bit more meaningful though and enter the following text:

   Dear Admin,

   Just to let you know that {text_1} whose email address is {text_0} has subscribed to the newsletter.

   Regards

   The Example.com Website team

7. 7. Save the Form again, submit it, and check the e-mail that is sent. Here's what I received:

   

   Beyond this the world is your oyster; you can construct a fully customized e-mail with as much HTML as you like.

   Note

   There's a note in red on the e-mail template workspace that says If you left your Email template empty, a template will be automaticly generated similar to your form layout! [sic]. To make this work you need to delete everything from the Email template including any HTML that does not display, such as <p>&nbsp;</p>. Click the HTML button in the editor toolbar to see the underlying source code and delete everything that is there.

How it works...

ChronoForms keeps a special copy of the form layout in a Joomla! database table. When you use Wizard Edit it fetches this copy and recreates the form workspace for you to edit. Completely separately it also keeps the Form HTML created when you save. Any later changes you make in the Form HTML will be lost if you use Wizard Edit again. Hence the warning message when you start Wizard Edit.

For the Email Template, ChronoForms stores the HTML and before it uses it, it searches for values like {field_name} and substitutes the field values for these placeholders.

Note

You can also include PHP code in there to give even more flexibility but you cannot add this with the Rich Text editor in the Wizard Edit; you have to use the Form Editor instead.