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.
- 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.
- 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.
- Click the element to open the Properties box and change the Label field to
Name. - 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.
- 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.
- 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
- 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> </p>. Click the HTML button in the editor toolbar to see the underlying source code and delete everything that is there.
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.