Blog

Eric Tompkins
Nov 1, 2014

New Form Default Templates and Streamlined Add form

A few weeks ago we pushed out an update that makes it a little easier to create new forms. Now when you create a new form a default template, admin notification email templates and autoresponder email templates are automatically created. This will help a lot if you don't feel comfortable with code as you won't have to worry about creating templates any more. You can just create your fields and then drop the form API tag onto a page. 

You can, of course, fully edit the form templates after the form is created. 

We plan to expand this functionality by allowing developers to create their own default templates. 

Streamlined Add Form

We also streamlined the process of adding a new form to just one page to make it faster and easier to create a new form. 

Add form

Example Templates

Here is an example of the default form template.

{** #form.success only used if you don't redirect to another page after a successful submission **}
{if #form.success}
    <p class="success">Success!</p>
{/if}

{#form.tag.open}
    {** Show form errors if there are any **}
    {if #form.errors}
        <div class="errors">
            <p>There was a problem with your submission. Please correct the issues below</p>
            <ul class="errors">
            {loop items="#form.errors" value="error"}
                <li>{#error.message}</li>
            {/loop}
            </ul>
        </div>
    {/if}

    {** Loop through and show each form field **}
    {loop items="#form.fields" value="field"}
        <p>
            <label for="{#field.id}">{#field.label}{if #field.isRequired} <em>*</em>{/if}:</label>
            {if #field.type = "textarea"}<br>{/if}
            {#field.tag}
        </p>
    {/loop}

    {** Show the CAPTCHA field if necessary **}
    {if #form.captcha.tag}
        <p>{#form.captcha.image.tag}<br>
          <label for="ap-form-captcha-input">Captcha Text<em>*</em>:</label>{#form.captcha.tag}</p>
    {/if}

    <p><input type="submit" name="s" value="Submit"></p>
{#form.tag.close}

Here is an example of the default admin notification HTML template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
    </head>
    <body>
        <p>New form on {ap:date format="F d, Y \a\t g:i A T"}</p>
        {loop items="#form.fields" value="field"}
            <p><strong>{#field.label}</strong> : {#field.value}</p>
        {/loop}
    </body>
</html>

And here is the default admin notification text email.

{ap:date format="F d, Y \a\t g:i A T"}

{loop items="#form.fields" value="field"}
    {#field.label} : {#field.value}
{/loop}

There are also default autoresponder emails, but they are pretty simple and are there just for reference. We recommend updating them. 

We hope that this new feature helps to make it easier to create new forms. At the very least you will have some examples of how to code your own templates.

Sign up for our newsletter to receive invaluable information about BranchCMS, web design & development.