Personal tools
You are here: Home Documentation Tutorials Working with Forms in Grok Customising the default Form templates

Customising the default Form templates

Learn how to tweaking the template used to render a form. Useful for integrating a form into your applications custom layout.
A walkthrough of the basics of automatically generating HTML forms using Grok, as well as a discussion of a few more advanced Form manipulations.
Page 5 of 9.

Grok provides default templates that are used to render a form. While they are functional, they are also very plain. Furthermore, they have no way of hooking into headers, footers, sidebars and other layout elements of your application.

It's intended that you override the default templates by providing your own templates. You can tell a form to use a custom template by providing a template attribute in the form:

class Form(grok.Form):
    template = grok.PageTemplateFile('custom_edit_form.pt')

It's helpful to start by making a copy of the default templates in your application, and then add your customizations as needed.

The default edit form is (part of the grokcore.formlib package):

<html>
<head>
</head>

<body>
<form action="." tal:attributes="action request/URL" method="post"
      class="edit-form" enctype="multipart/form-data">

  <h1 i18n:translate=""
    tal:condition="view/label"
    tal:content="view/label">Label</h1>

  <div class="form-status"
    tal:define="status view/status"
    tal:condition="status">

    <div i18n:translate="" tal:content="view/status">
      Form status summary
    </div>

    <ul class="errors" tal:condition="view/errors">
      <li tal:repeat="error view/error_views">
         <span tal:replace="structure error">Error Type</span>
      </li>
    </ul>
  </div>

  <table class="form-fields">
    <tbody>
      <tal:block repeat="widget view/widgets">
        <tr>
          <td class="label" tal:define="hint widget/hint">
            <label tal:condition="python:hint"
                   tal:attributes="for widget/name">
              <span class="required" tal:condition="widget/required"
              >*</span><span i18n:translate=""
                             tal:content="widget/label">label</span>
            </label>
            <label tal:condition="python:not hint"
                   tal:attributes="for widget/name">
              <span class="required" tal:condition="widget/required"
              >*</span><span i18n:translate=""
                             tal:content="widget/label">label</span>
            </label>
          </td>
          <td class="field">
            <div class="widget" tal:content="structure widget">
              <input type="text" />
            </div>
            <div class="error" tal:condition="widget/error">
              <span tal:replace="structure widget/error">error</span>
            </div>
          </td>
        </tr>
      </tal:block>
    </tbody>
  </table>

  <div id="actionsView">
    <span class="actionButtons" tal:condition="view/availableActions">
      <input tal:repeat="action view/actions"
             tal:replace="structure action/render"
             />
    </span>
  </div>
</form>

</body>
</html>

The default display form is (part of the grokcore.component package):

<html>
<head>
</head>

<body>
  <table class="listing">
    <thead>
      <tr>
        <th class="label-column">&nbsp;</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tal:block repeat="widget view/widgets">
        <tr tal:define="odd repeat/widget/odd"
          tal:attributes="class python: odd and 'odd' or 'even'">
          <td class="fieldname">
            <tal:block content="widget/label"/>
          </td>
          <td>
            <input tal:replace="structure widget" />
          </td>
        </tr>
      </tal:block>
    </tbody>
    <tfoot>
      <tr class="controls">
        <td colspan="2" class="align-right">
          <input tal:repeat="action view/actions"
            tal:replace="structure action/render" />
        </td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

For this example we'll just put a snippet of CSS into our customised edit form right below that body tag that looks like:

<style type="text/css">
    body {
        background: #f1f1f1;
    }
    form {
        background: #ffffff;
        border: 1px solid #999999;
        padding: 2em;
    }
    form h1 {
        font-family: sans-serif;
        font-weight: bold;
        color: #555555;
        margin-top: 0;
    }
    form .label {
        vertical-align: top;
        padding: 0.5em;
        background: #f9f9f9;
    }
    form .required {
        color: red;
    }
    form textarea {
        border: 1px solid #777777;
        color: #555555;
        font-size: 1.2em;
        line-height: 1.2em;
        padding: 0.5em;
    }
    form input {
        border: 1px solid #777777;
        color: #555555;
        font-size: 1.1em;
        line-height: 1.2em;
        padding: 0.5em;
    }
</style>

Now our MammothForm has a shiny new look and feel:

shinyform.jpg