DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Change the layout for a specific view

Available views

There are 3 views available:

form:
This view displays the form with its form fields which can be filled by the user and submitted.
confirmation:
If activated, this view shows a confirmation page which has to be confirmed by the user.
postProcessor:
The mail postProcessor has its own view for rendering the mail which is sent to the receiver.

It is not recommended to change the layout of a FORM object for all views. For example when customizing the TEXTLINE object the integrator will get strange results based on the following example:

tt_content.mailform.20 {
  layout {
    textline (
      <div class="form-group">
        <div class="col-sm-3 control-label">
          <label />
        </div>
        <div class="col-sm-5">
          <input class="form-control" />
        </div>
      </div>
    )
  }
}

The setup shown above changes the appearance of all TEXTLINE objects for all views. That is, the user will get a confirmation page and a mail with broken/ senseless input fields instead of the user data.

In order to only change the TEXTLINE object specific to all of the 3 views, the following code could be applied.

tt_content.mailform.20 {
  # customize form view
  form {
    layout {
      textline (
        <div class="form-group">
          <div class="col-sm-3 control-label">
            <label />
          </div>
          <div class="col-sm-5">
            <input class="form-control" />
          </div>
        </div>
      )
    }
  }

  # customize confirmation view
  confirmation {
    layout {
      textline (
        <div class="form-group">
          <div class="col-sm-3">
            <strong><label /></strong>
          </div>
          <div class="col-sm-5">
            <inputvalue />
          </div>
        </div>
      )
    }
  }

  # customize postProcessor/ mail
  postProcessor {
    layout {
      textline (
        <td colspan="2">
          <div class="textline"><inputvalue /></div>
        </td>
      )
    }
  }
}

Properties and defaults

If the integrator does not define any .layout setting the default layout defined in the PHP classes will be used.

The following list shows all available elements within all the different views including their corresponding default layouts.

form

Property:
form
Data type:
string
Available in views:
  • form
Description:

Layout of the FORM object/ outer wrap.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout form view:

<form>
  <containerWrap />
</form>

confirmation

Property:
confirmation
Data type:
string
Available in views:
  • confirmation
Description:

Layout of the outer wrap.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout confirmation view:

<containerWrap />

html

Property:
html
Data type:
string
Available in views:
  • postProcessor
Description:

Layout of the outer wrap.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout postProcessor view:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <table cellspacing="0">
      <containerWrap />
    </table>
  </body>
</html>

containerWrap

Property:
containerWrap
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Inner wrap for container objects.

The <elements /> tag will be substituted with all the child elements, including their element wraps.

Default:

Default layout form view:

<ol>
  <elements />
</ol>

Default layout confirmation view:

<ol>
  <elements />
</ol>

Default layout postProcessor view:

<tbody>
  <elements />
</tbody>

elementWrap

Property:
elementWrap
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Outer wrap for regular objects.

The <element /> tag will be substituted with the child element.

Default:

Default layout form view:

<li>
  <element />
</li>

Default layout confirmation view:

<li>
  <element />
</li>

Default layout postProcessor view:

<tr>
  <element />
</tr>

label

Property:
label
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Layout for the labels.

The <labelvalue /> tag will be substituted with the label text.

If available, the <mandatory /> tag will be substituted with the validation rule message, styled by its own layout.

If available, the <error /> tag will be substituted with the error message from the validation rule when the submitted value is not valid.

Default:

Default layout form view:

<label>
  <labelvalue />
  <mandatory />
  <error />
</label>

Default layout confirmation view:

<label>
  <labelvalue />
</label>

Default layout postProcessor view:

<em>
  <labelvalue />
</em>

mandatory

Property:
mandatory
Data type:
string
Available in views:
  • form
Description:

Layout for the validation rule message to describe the rule.

The <mandatoryvalue /> tag will be substituted with the validation rule message.

Default:

Default layout form view:

<em>
  <mandatoryvalue />
</em>

error

Property:
error
Data type:
string
Available in views:
  • form
Description:

Layout for the validation rule error message when the submitted data does not validate.

The <errorvalue /> tag will be substituted with the validation rule error message.

Default:

Default layout form view:

<strong>
  <errorvalue />
</strong>

legend

Property:
legend
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Layout for the legend.

The <legendvalue /> tag will be substituted with the legend text.

If available, the <mandatory /> tag will be substituted with the validation rule message, styled by its own layout.

If available, the <error /> tag will be substituted with the error message from the validation rule when the submitted value is not valid.

Default:

Default layout form view:

<legend>
  <legendvalue />
  <mandatory />
  <error />
</legend>

Default layout confirmation view:

<legend>
  <legendvalue />
</legend>

Default layout postProcessor view:

<thead>
  <tr>
    <th colspan="2" align="left">
      <legendvalue />
    </th>
  </tr>
</thead>

button

Property:
button
Data type:
string
Available in views:
  • form
Description:
Layout for the BUTTON object.
Default:

Default layout form view:

<label />
<input />

checkbox

Property:
checkbox
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:
Layout for the CHECKBOX object.
Default:

Default layout form view:

<label />
<input />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <inputvalue />
</td>

checkboxgroup

Property:
checkboxgroup
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Layout for the CHECKBOXGROUP object.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout form view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout confirmation view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout postProcessor view:

<td colspan="2">
  <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
    <legend />
    <containerWrap />
  </table>
</td>

fieldset

Property:
fieldset
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Layout for the FIELDSET object.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout form view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout confirmation view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout postProcessor view:

<td colspan="2">
  <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
    <legend />
    <containerWrap />
  </table>
</td>

fileupload

Property:
fileupload
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:
Layout for the FILEUPLOAD object.
Default:

Default layout form view:

<label />
<input />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <inputvalue />
</td>

hidden

Property:
hidden
Data type:
string
Available in views:
  • form
  • postProcessor
Description:
Layout for the HIDDEN object.
Default:

Default layout form view:

<input />

Default layout postProcessor view:

<td style="width: 200px;">
  <em>
    <label />
  </em>
</td>
<td>
  <inputvalue />
</td>

optgroup

Property:
optgroup
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Layout for the OPTGROUP object.

The <elements /> tag will be substituted with all the child elements, which actually can only be OPTION objects.

Default:

Default layout form view:

<optgroup>
  <elements />
</optgroup>

Default layout confirmation view:

<elements />

Default layout postProcessor view:

<elements />

option

Property:
option
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:
Layout for the OPTION object.
Default:

Default layout form view:

<option />

Default layout confirmation view:

<inputvalue />

Default layout postProcessor view:

<div>
  <inputvalue />
</div>

password

Property:
password
Data type:
string
Available in views:
  • form
Description:
Layout for the PASSWORD object.
Default:

Default layout form view:

<label />
<input />

radio

Property:
radio
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:
Layout for the RADIO object.
Default:

Default layout form view:

<label />
<input />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <inputvalue />
</td>

radiogroup

Property:
radiogroup
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Layout for the RADIOGROUP object.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout form view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout confirmation view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout postProcessor view:

<td colspan="2">
  <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
    <legend />
    <containerWrap />
  </table>
</td>

reset

Property:
reset
Data type:
string
Available in views:
  • form
Description:
Layout for the RESET object.
Default:

Default layout form view:

<label />
<input />

select

Property:
select
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:

Layout for the SELECT object.

The <elements /> tag will be substituted with all the child elements, which only can be OPTGROUP or OPTION objects.

Default:

Default layout form view:

<label />
<select>
   <elements />
</select>

Default layout confirmation view:

<label />
<ol>
   <elements />
</ol>

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <elements />
</td>

submit

Property:
submit
Data type:
string
Available in views:
  • form
Description:
Layout for the SUBMIT object.
Default:

Default layout form view:

<label />
<input />

textarea

Property:
textarea
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:
Layout for the TEXTAREA object.
Default:

Default layout form view:

<label />
<textarea />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;" valign="top">
    <label />
</td>
<td>
    <inputvalue />
</td>

textblock

Property:
textblock
Data type:
string
Available in views:
  • form
Description:
Layout for the TEXTBLOCK object.
Default:

Default layout form view:

<textblock />

textline

Property:
textline
Data type:
string
Available in views:
  • form
  • confirmation
  • postProcessor
Description:
Layout for the TEXTLINE object.
Default:

Default layout form view:

<label />
<input />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <inputvalue />
</td>

Example showing all .layout properties and defaults

The code snippets below shows all available settings across all views including their default layout.

tt_content.mailform.20 {
  # ###
  # form view
  # ####

  form {
    layout {
      form (
        <form>
          <containerWrap />
        </form>
      )

      containerWrap (
        <ol>
          <elements />
        </ol>
      )

      elementWrap (
        <li>
          <element />
        </li>
      )

      label (
        <label>
          <labelvalue />
          <mandatory />
          <error />
        </label>
      )

      mandatory (
        <em>
          <mandatoryvalue />
        </em>
      )

      error (
        <strong>
          <errorvalue />
        </strong>
      )

      legend (
        <legend>
          <legendvalue />
          <mandatory />
          <error />
        </legend>
      )

      button (
        <label />
        <input />
      )

      checkbox (
        <label />
        <input />
      )

      checkboxgroup (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )
      fieldset (
          <fieldset>
              <legend />
              <containerWrap />
          </fieldset>
      )

      fileupload (
        <label />
        <input />
      )

      hidden (
        <input />
      )

      optgroup (
        <optgroup>
          <elements />
        </optgroup>
      )

      option (
        <option />
      )

      password (
        <label />
        <input />
      )

      radio (
        <label />
        <input />
      )

      radiogroup (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )

      reset (
        <label />
        <input />
      )

      select (
        <label />
        <select>
          <elements />
        </select>
      )

      submit (
        <label />
        <input />
      )

      textarea (
        <label />
        <textarea />
      )

      textblock (
        <textblock />
      )

      textline (
        <label />
        <input />
      )
    }
  }

  # ###
  # confirmation view
  # ###

  confirmation {
    layout {
      confirmation (
        <containerWrap />
      )

      containerWrap (
        <ol>
          <elements />
        </ol>
      )

      elementWrap (
        <li>
          <element />
        </li>
      )

      label (
        <label>
          <labelvalue />
        </label>
      )

      legend (
        <legend>
          <legendvalue />
        </legend>
      )

      checkbox (
        <label />
        <inputvalue />
      )

      checkboxgroup (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )

      fieldset (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )

      fileupload (
        <label />
        <inputvalue />
      )

      optgroup (
        <elements />
      )

      option (
        <inputvalue />
      )

      radio (
        <label />
        <inputvalue />
      )

      radiogroup (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )

      select (
        <label />
        <ol>
          <elements />
        </ol>
      )

      textarea (
        <label />
        <inputvalue />
      )

      textline (
        <label />
        <inputvalue />
      )
    }
  }

  # ###
  # postProcesso view
  # ###

  postProcessor {
    layout {
      html (
        <html>
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          </head>
          <body>
            <table cellspacing="0">
              <containerWrap />
            </table>
          </body>
        </html>
      )

      containerWrap (
        <tbody>
          <elements />
        </tbody>
      )

      elementWrap (
        <tr>
          <element />
        </tr>
      )

      label (
        <em>
          <labelvalue />
        </em>
      )

      legend (
        <thead>
          <tr>
            <th colspan="2" align="left">
              <legendvalue />
            </th>
          </tr>
        </thead>
      )

      checkbox (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )

      checkboxgroup (
        <td colspan="2">
          <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
            <legend />
            <containerWrap />
          </table>
        </td>
      )

      fieldset (
        <td colspan="2">
          <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
            <legend />
            <containerWrap />
          </table>
        </td>
      )

      fileupload (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )

      hidden (
        <td style="width: 200px;">
          <em>
            <label />
          </em>
        </td>
        <td>
          <inputvalue />
        </td>
      )

      optgroup (
        <elements />
      )

      option (
        <div>
          <inputvalue />
        </div>
      )

      radio (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )

      radiogroup (
        <td colspan="2">
          <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
            <legend />
            <containerWrap />
          </table>
        </td>
      )

      select (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <elements />
        </td>
      )

      textarea (
        <td style="width: 200px;" valign="top">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )

      textline (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )
    }
  }
}