Form Templates

Form templates are used to display the form on a page. 

Generally you would only create one template for a form. But you can create multiple templates if you want to display the form differently on different pages or if you're using a Form Stub.

Template Tags

View the Template Tags page for full details on working with the form tags in the template.

Example template

{#form.tag.open}
{if #form.errors}
    <ul>
    {loop items="#form.errors" value="error"}
       <li>{#error.message}</li>
    {/loop}
    </ul>
{/if}
<table cellspacing="0">
   <tbody>
   {loop items="#form.fields" value="field"}
      <tr>
         <td>{#field.label}{if #field.isRequired} *{/if}</td>
         <td>{if #field.error}<strong>{#field.error}</strong><br />{/if}{#field.tag}</td>
      </tr>
   {/loop}
   </tbody>
</table>
{#form.tag.close}

Building form fields

There are a few ways that form fields can be built. 

  1. If your form has a consistent layout then you can simply loop through all fields and output the label and tag. That is how the above example works.
  2. You can loop through all of the form fields but instead of using the {#field.tag} tag you would build the HTML for the tag and use some of the other {#field} tags for the attribute values.
  3. You can build a custom HTML layout and work with each form field individually.

Working with Individual Form Fields

If you're not going to loop through the form fields and need to access individual fields you can easily do so with the following tag:

{#form.fields.fieldName}

"fieldName" would be the name of the form field.  Note, that if your field name contains any spaces, dashes, square brackets ([]) or underscore characters those characters are removed.  The name is in camelCase format.  On the right side of the Add/Edit Template page under the "This Form's Fields" section you will see a list of all available field names.

Below is an example template. In this example we're showing how you would build each HTML tag with the different {#form} tags.

<form action="{#form.action}" method="post" enctype="{#form.enctype}">
{if #form.errors}
    <ul>
    {loop items="#form.errors" value="error"}
       <li>{#error.message}</li>
    {/loop}
    </ul>
{/if}
<p>* = required</p>
<table cellspacing="0">
   <tbody>
      <tr>
         <td><label for="fn">First Name</label> *</td>
         <td>{if #form.fields.firstName.error}<strong>{#form.fields.firstName.error}</strong><br />{/if}
                <input type="text" name="{#form.fields.firstName.name}" value="{#form.fields.firstName.value}" size="{#form.fields.firstName.size}" id="fn" />
         </td>
      </tr>
      <tr>
         <td><label for="ln">Last Name</label> *</td>
         <td>{if #form.fields.lastName.error}<strong>{#form.fields.lastName.error}</strong><br />{/if}
                <input type="text" name="{#form.fields.lastName.name}" value="{#form.fields.lastName.value}" size="{#form.fields.lastName.size}" id="ln" />
         </td>
      </tr>
     <tr>
         <td><label for="time">What is the best time to call?</label></td>
         <td>{if #form.fields.time.error}<strong>{#form.fields.time.error}</strong><br />{/if}
                {#form.fields.time.tag}<!-- A select menu -->
         </td>
      </tr>
      <tr>
         <td><label for="comments">Comments</label></td>
         <td>{if #form.fields.comments.error}<strong>{#form.fields.comments.error}</strong><br />{/if}
                <textarea name="{#form.fields.comments.name}" rows="{#form.fields.comments.rows}" cols="{#form.fields.comments.cols}">{#form.fields.comments.value}</textarea>
         </td>
      </tr>
   </tbody>
</table>
<p><input type="submit" name="submit" value="Submit My Form" /></p>
</form>

Checkboxes, Radio Buttons and Select Menus

There are 2 ways to build checkboxes, radio buttons and select menus.

  1. Use the {#field.tag} tag or the {#form.fields.fieldName.tag} tag.  This will output the correct HTML tag with the correct value or values selected if necessary. (Recommended technique)
  2. Loop through the {#field.options} tag or the {#form.fields.fieldName.options} tag and output each option individually.

Example form

Below is an example of looping through the options. In this example we have a set of checkboxes with a field name of "color", a set of radio buttons with a field name of "icecream" and a select menu with a field name of "fruit".

Note that with the checkbox example the actual name of each checkbox is "color[]" but we're accessing the field as {#form.fields.color}.  The field name in the {#form.fields} tag will only be letters or numbers.  The "[]" in the name allows multiple values to be submitted. 

<p>What colors do you like?<br />
<!-- Checkbox example -->
{loop items="#form.fields.color.options" key="num" value="option"}
  {if #num > 0}<br />{/if} <!-- This will put the <br /> tag in front of the option only if it's not the first option. Alternately you could style the <label> tag to be a block element. -->
  <label><input name="color[]" type="checkbox" value="{#option.value}"{if #option.isSelected} checked="checked"{/if}/>{#option.label}</label>
{/loop}
</p>

<p>Do you like icecream?<br />
<!-- Radio button example -->
{loop items="#form.fields.icecream.options" key="num" value="option"}
  {if #num > 0}<br />{/if}
  <label><input name="icecream" type="radio" value="{#option.value}"{if #option.isSelected} checked="checked"{/if}/>{#option.label}</label>
{/loop}
</p>

<p>What fruits do you like?<br />
<!-- Select Menu example -->
<select name="{#form.fields.fruit.name}">
   {loop items="#form.fields.fruit.options" value="option"}
    <option value="{#option.value}"{if #option.isSelected} checked="checked"{/if}/>{#option.label}</option>
  {/loop}
</select>
</p>

Displaying a text field next to a checkbox option (or radio button option)

Sometimes you might need to have a set of checkboxes and for the last option you need a text box to display next to the option.  This is done sometimes if you have some choices and then the last choice is "Other" and you want the user to fill in their "Other" value. Below is an example of how to do that. The options for the checkbox are ordered so that "Other" is last.

<p>What colors do you like?<br />
{loop items="#form.fields.color.options" key="num" value="option"}
  {if #num > 0}<br />{/if} <!-- This will put the <br /> tag in front of the option only if it's not the first option. Alternately you could style the <label> tag to be a block element. -->
  <label><input name="color[]" type="checkbox" value="{#option.value}"{if #option.isSelected} checked="checked"{/if}/>{#option.label}</label>
{/loop}
<input name="other-color" type="text"  value="{#form.fields.otherColor.value}"/>
</p>