Designer Guide

Designers can register their own contact form template for rendering forms according to their template set's own unique structure and style. To do so a design will need to do two things:

1. Register their template in their theme's config.yaml as a system template

2. Construct their template using the template tags supported by the Contact Form plugin

Registering Your Contact Form

To register your contact form you will need to make the following addition to your template set/theme plugin's config.yaml:

name: My Theme
description: This is a theme to install for Movable Type
version: 1.1
template_sets:
  my_theme:
    base_path: templates
    label: 'My Theme (Blue)'
    templates:
      system:
        contact_form:
          label: Contact Form

The operative component being:

templates:
  system:
    contact_form:
      label: Contact Form

You will then need to create a file called contact_form.mtml and place it among your theme's other templates. Inside this file you would place the contents used to render the form as you see fit.

This template will then be used whenever the <mt:ContactFormHTML> template tag is invoked. If your theme does not install this template, then the plugin will fall back and use the global system template called "Contact Form."

This method allows you to provide a custom design for your contact form as you choose to do so. If not, you can always rely on the default HTML produced by the plugin and style your form with CSS accordinginly.

Building Your Contact Form Template

The best way to customize your Contact Form template for a blog using a template set without a contact form template already defined, do the following:

1. Go to Preferences > Plugin
2. Expand the "Contact Forms" plugin on the plugin listing page
3. Click the "Settings" tab
4. Click "Install Contact Form System Template"
5. Navigate to Design > Templates
6. Scroll down to the Contact Form template listed under "System Templates."

Done.

Sample Template

<mt:IfContactFormOpen>
<script type="text/javascript" src="<mt:StaticWebPath>plugins/ContactForms/js/blog.js"></script>
<div id="contactform">
  <div id="comment-greeting"></div>
  <form method="post" action="<mt:CGIPath><mt:AdminScript>" id="contact-form" name="contact_form">
    <input type="hidden" name="__mode" value="cf.submit_reply" />
    <input type="hidden" name="blog_id" value="<mt:BlogID>" />
    <input type="hidden" name="form_id" value="<mt:ContactFormID>" />
    <fieldset id="from">
      <div id="field-from-name">  
        <label for="name">Name</label>  
        <input id="name" name="name" size="30" value="" />  
      </div> 
      <div id="field-from-email">  
        <label for="email">Email</label>  
        <input id="email" name="email" size="30" value="" />  
      </div> 
    </fieldset>
    <fieldset id="fields">
<mt:ContactFormFields>
<mt:if tag="ContactFormFieldType" eq="text">
    <div id="field-<mt:ContactFormFieldLabel dirify="1">">
      <label for="<mt:ContactFormFieldLabel dirify="1">"><mt:ContactFormFieldLabel></label>
      <input id="<mt:ContactFormFieldLabel dirify="1">" name="<mt:ContactFormFieldLabel dirify="1">" size="30" value="" />
    </div>
<mt:else tag="ContactFormFieldType" eq="textarea">
    <div id="field-<mt:ContactFormFieldLabel dirify="1">">
      <label for="<mt:ContactFormFieldLabel dirify="1">"><mt:ContactFormFieldLabel></label>
      <textarea id="<mt:ContactFormFieldLabel dirify="1">" name="<mt:ContactFormFieldLabel dirify="1">" rows="15" cols="50"></textarea>
    </div>
<mt:else tag="ContactFormFieldType" eq="checkbox">
    <div id="field-<mt:ContactFormFieldLabel dirify="1">">
      <input type="checkbox" id="<mt:ContactFormFieldLabel dirify="1">" name="<mt:ContactFormFieldLabel dirify="1">" value="1" />
      <label for="<mt:ContactFormFieldLabel dirify="1">"><mt:ContactFormFieldLabel></label>
    </div>
<mt:else tag="ContactFormFieldType" eq="select">
    <div id="field-<mt:ContactFormFieldLabel dirify="1">">
      <label for="<mt:ContactFormFieldLabel dirify="1">"><mt:ContactFormFieldLabel></label>
      <select id="<mt:ContactFormFieldLabel dirify="1">" name="<mt:ContactFormFieldLabel dirify="1">">
<mt:ContactFormFieldValueLoop>
        <option><mt:ContactFormFieldValue></option>
</mt:ContactFormFieldValueLoop>
      </select>
    </div>
<mt:else tag="ContactFormFieldType" eq="radio">
    <div id="field-<mt:ContactFormFieldLabel dirify="1">">
      <label><mt:ContactFormFieldLabel></label>
<mt:ContactFormFieldValueLoop>
      <label><input type="radio" name="<mt:ContactFormFieldValue dirify="1">" value="<mt:ContactFormFieldValue dirify="1">" /> <mt:ContactFormFieldValue></label>
</mt:ContactFormFieldValueLoop>
</mt:if>
    </fieldset>
</mt:ContactFormFields>
    <div id="comments-open-captcha"></div>
    <div id="contactform-footer">
      <input type="submit" accesskey="s" name="post" id="contactform-submit" value="Submit" />
    </div>
  </form>
</div>
<script type="text/javascript">
cfContactFormOnLoad();
</script>
<mt:else>
Out apologies, but this contact form is no longer active or available.
</mt:IfContactFormOpen>