How to use Bootstrap and mailform

More and more templates are managed with bootstrap.There is therefore also the need to adjust many default elements with bootstrap classes.

In order to add bootstrap classes in  standard "mailform" you need to add the following lines of code in typoscript setup (TSref).

With the following code then we can manage not only the layout of the form, but also on the confirmation of the data and errors.

plugin.tx_form._CSS_DEFAULT_STYLE >
 tt_content.mailform.20 {
 form {
 layout {
 form (
 <form class="form-horizontal">
 <containerWrap />
 </form>
 )
 containerWrap (
 <div>
 <elements />
 </div>
 )
 elementWrap (
 <div>
 <element />
 </div>
 )
 fieldset (
 <fieldset>
 <legend />
 <containerWrap />
 </fieldset>
 )
 checkbox (
 <div class="checkbox">
 <input />
 <label />
 </div>
 )
 radio (
 <div class="radio">
 <input />
 <label />
 </div>
 )
 radiogroup (
 <div class="form-group">
 <div class="col-sm-3 control-label">
 <legend />
 </div>
 <div class="col-sm-5">
 <elements />
 </div>
 </div>
 )
 checkboxgroup < .radiogroup
 label (
 <label>
 <labelvalue />
 <mandatory />
 <error />
 </label>
 )
 legend (
 <legend>
 <legendvalue />
 <mandatory />
 <error />
 </legend>
 )
 error (
 <span class="help-block text-danger"><errorvalue /></span>
 )
 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>
 )
 fileupload < .textline
 textarea (
 <div class="form-group">
 <div class="col-sm-3 control-label">
 <label />
 </div>
 <div class="col-sm-5">
 <textarea class="form-control" />
 </div>
 </div>
 )
 submit (
 <div class="form-group">
 <div class="col-sm-offset-3 col-sm-9">
 <input class="btn btn-primary" />
 </div>
 </div>
 )
 select (
 <div class="form-group">
 <div class="col-sm-3 control-label">
 <label />
 </div>
 <div class="col-sm-5">
 <select class="form-control">
 <elements />
 </select>
 </div>
 </div>
 )
 }
 }
 confirmation {
 layout {
 confirmation (
 <div class="form-horizontal">
 <containerWrap />
 </div>
 )
 containerWrap (
 <div>
 <elements />
 </div>
 )
 elementWrap (
 <div>
 <element />
 </div>
 )
 fieldset (
 <containerWrap />
 )
 checkbox (
 <label />
 <inputvalue />
 )
 radio (
 <label />
 <inputvalue />
 )
 radiogroup (
 <div class="form-group">
 <div class="col-sm-3">
 <strong><legend /></strong>
 </div>
 <div class="col-sm-5">
 <elements />
 </div>
 </div>
 )
 checkboxgroup < .radiogroup
 label (
 <labelvalue />
 )
 legend (
 <legendvalue />
 )
 textline (
 <div class="form-group">
 <div class="col-sm-3">
 <strong>
 <label />
 </strong>
 </div>
 <div class="col-sm-5">
 <inputvalue />
 </div>
 </div>
 )
 fileupload < .textline
 textarea (
 <div class="form-group">
 <div class="col-sm-3">
 <strong>
 <label />
 </strong>
 </div>
 <div class="col-sm-5">
 <inputvalue />
 </div>
 </div>
 )
 select (
 <div class="form-group">
 <div class="col-sm-3">
 <strong>
 <label />
 </strong>
 </div>
 <div class="col-sm-5">
 <elements />
 </div>
 </div>
 )
 }
 }
 stdWrap.wrap = |
 }