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 = |
}