Not a developer? Go to MovableType.com

MovableType.org
Documentation
Home / Documentation / Developer Applications

Creating HTML Forms

It stands to reason that at some point you will need to create an HTML form that a user will need to fill out and submit. If you look directly as the HTML source for your typical Movable Type form you may notice that it can be difficult to style and the HTML can sometimes be overly verbose. Therefore, Movable Type makes available a special tag called <mtapp:setting> which abbreviates the process of creating all of the necessary markup to make a form look like a native Movable Type component.

Here is an example template that contains a complete form:

<mt:setvarblock name="page_title">This is a page title</mt:setvarblock>
<mt:setvar name="position_actions_bottom" value="1">
<mt:include name="include/header.tmpl">
<form method="post" enctype="multipart/form-data" 
    action="<mt:var name="script_url">">
<input type="hidden" name="__mode" value="a_mode" />
<mt:if name="blog_id">
<input type="hidden" name="blog_id" value="<mt:var name="blog_id">" />
</mt:if>
<input type="hidden" name="magic_token" value="<mt:var name="magic_token">" />
<mtapp:setting
    id="some_id_field"
    label="Enter text here"
    show_label="1"
    hint="Yay, text."
    show_hint="1"
    content_class="field-content-text">
    <input type="text" name="foo" size="30" />
</mtapp:setting>
<mt:setvarblock name="action_buttons">
    <button
        type="submit"
        accesskey="s"
        title="Continue (s)"
        class="primary-button">Continue</button>
</mt:setvarblock>
<mt:include name="include/actions_bar.tmpl" bar_position="bottom" 
    hide_pager="1" settings_bar="1">
</form>
<mt:include name="include/footer.tmpl">

Important Note: If you are adding buttons to a screen inside of Movable Type, and that screen is not a dialog, then you also need to set the variable called position_actions_bottom to “1” as seen in the example above. This instructs Movable Type to make the buttons you define in your “action bar” visible. Note also, that this is not necessary for dialogs.

Input Parameters

  • id - Each application setting tag requires a unique ‘id’ attribute. This id should not be re-used within the template.
  • label - The value for the <label> tag associated with this setting, most often a prompt of some kind for what the user should enter in the field, e.g. “First Name: “.
  • required - Signals if a value is required for the field when it is submitted. If no value is supplied then Movable Type will return the user to the form and display an error message directing them to supply a value. The default value for this parameter is 0.
  • show_label - Toggles whether the supplied label is visible or not.
  • shown - Toggles whether the entire setting or field is visible or not. This can be used in conjunction with another input parameter that controls the progressive reveal of subsidiary input elements.
  • label_class - The CSS class that will be associated with the field’s label.
  • content_class - The CSS class that will be associated with the field’s content.
  • hint - A hint string that will be displayed in small text below the input field to prompt the user with example form input.
  • show_hint - Toggles whether the hint text is visible or not.
  • warning - A warning string that will be displayed to the user as a clear warning regarding the field (e.g. “changing the value of this field can break your site”).
  • show_warning - Toggles whether the warning text is visible or not. The warning text is still rendered to the page in case you want to display the warning text via javascript at runtime or not.
  • help_page - A URL pointing to a help document about this field.
Back