Skip to main content Skip to page footer

Configure Powermail 8 to use with Bootstrap 5 within TYPO3 10

Short manual on how to configure Powermail 8 to use with Bootstrap 5 within TYPO3 10.4 and how to configure a multicolumn layout for the fields.

[Translate to English:]

I wanted to have the option to use Powermail 8 with Bootstrap 5 within TYPO3 10 using bootstrap_package extension as basic site package. Fields should be configured to use 12 columns or 4/3 columns beginning with medium devices.

Additionally I added a new field which outputs a blank line to add line breaks between fields if wanted to have it.

Configuration in Page TSConfig:

TCEFORM {
  # Powermail
  tx_powermail_domain_model_form {
    css {
      removeItems = layout1, layout2, layout3
      addItems {
        col-12 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_12col
        col-md-4 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_4col
        col-md-3 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_3col
      }
    }
  }

  tx_powermail_domain_model_page < .tx_powermail_domain_model_form
  tx_powermail_domain_model_field < .tx_powermail_domain_model_form
}

# Powermail new fields
tx_powermail.flexForm.type.addFieldOptions.blankline = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_blankline

Needed translations:

<trans-unit id="powermail_blankline">
	<source>Blank line</source>
</trans-unit>
<trans-unit id="powermail_12col">
	<source>12 cols (full width)</source>
</trans-unit>
<trans-unit id="powermail_4col">
	<source>4 cols</source>
</trans-unit>
<trans-unit id="powermail_3col">
	<source>3 cols</source>
</trans-unit>

Constants:

plugin.tx_powermail {
  settings {
    styles {
      bootstrap {
        numberOfColumns = 2
        rowClasses = row
        formClasses = form-horizontal
        fieldAndLabelWrappingClasses = mb-4
        fieldWrappingClasses = col-12
        labelClasses = control-label col-12 mb-2
        fieldClasses =
        offsetClasses = col-sm-offset-2
        radioClasses = form-check
        checkClasses = form-check
        submitClasses = btn btn-primary
        createClasses = powermail_create
        important = 1
      }

      framework {
        formClasses = container
      }
    }
  }
}

Add a new field template in your site package in the configured Powermail partial path: /your-partial-path/Powermail/Form/Field/Blankline.html with the following content:

<div class="col-12"></div>

With this configuration it's possible to configure each fields behaviour in an easy way to view it over 12, 4 or 3 columns and add breaks before or after fields.