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.

Users ManualΒΆ

  1. Install Extension
  2. Make sure the Static Template of the system extension 'form' is included in your Root Template.
  3. Empty the whole Cache
  4. Create a Form using the Wizard - there is a new Accordion called 'Special' with a new element: Grid Element
  5. Add a Grid Element to your form using doubleclick or drag and drop
  6. Determine a css class for the grid - all child elements will be wrapped in a div container with that css class.
  7. Add child elements to it
  8. Save and close the Wizard

now you can add specific classes for the child elementWraps in the grid. The property is called 'containerClass' and can be added easily int the configuration:

prefix = tx_form
confirmation

10 = GRID    # new Form Element: GRID
10 {
    class = row    # class for the wrapper div
    10 = TEXTLINE
    10 {
       containerClass = col-md-6    # containerClass for child elements
            name = name
            label {
                    value = Name
            }
    }
    20 = TEXTLINE
    20 {
        containerClass = col-md-6    # containerClass for child elements
            name = email
            label {
                    value = Email
            }
    }
}
...

This configuration will output a HTML structure like this:

<div class="row">
    <div class="col-md-6 form-group csc-form-3 csc-form-element csc-form-element-textline">
        <label for="field-3">Name</label>
        <input class="form-control" id="field-3" name="tx_form[name]" type="text">
    </div>
    <div class="col-md-6 form-group csc-form-4 csc-form-element csc-form-element-textline">
        <label for="field-4">Email</label>
        <input class="form-control" id="field-4" name="tx_form[asf]" type="text">
    </div>
</div>

The Extension adds Typoscript Layout pre-configuration for elementWrap of form elements since correct rendering of grid elements will only work with div elements. The layout of the form fields can be configured out of the box for the form system extension with typoscript, e.g:

tt_content.mailform.20.layout {
    form (
                    <form role="form">
                            <containerWrap />
                    </form>
            )
            containerWrap (
                    <div class="csc-mailform-container">
                            <elements />
                    </div>
            )
            elementWrap (
                    <div class="form-group">
                            <element />
                    </div>
            )
            textline (
                    <label />
                    <input class="form-control" />
            )
            textarea (
                    <label />
                    <textarea class="form-control" />
            )
            textblock (
                    <p class="help-block">
                            <textblock />
                    </p>
            )
            submit (
                    <input class="btn btn-primary" />
            )
}

In this example, twitter bootstrap css classes are used to get a nice and beautiful form with support of the grid system of the css framework.