TypoScript-Konfiguration
Folgende Einstellungen können im TypoScript getroffen werden:
Typoscript
# Generelle Formular Manager Einstellungen
plugin.tx_cooquickanfrage.form-manager.config {
# Ob Label bzw. Placeholder angezeigt werden
label = 1
placeholder = 1
}
# Formular Manager Element Einstellungen
plugin.tx_bh.settings.contentElements.el-form-manager {
# Deaktiviert die Danke-Seite-Einstellung
disabled-thanks-setting = 0
# Voreinstellung für Danke-Seite
thanks = 123
}
CSS-Konfiguartion
Um Einfluss auf das Design der Anfrage zu nehmen, können folgende Variablen angepasst werden:
Basis-Variablen (Input und Submit):
CSS
:root {
/* Input - Basic */
--bh-form-manager-highlight-color: #808080;
--bh-form-manager-input-text: #000000;
--bh-form-manager-input-border: 1px solid #D9D9D9;
--bh-form-manager-input-border-radius: 2px;
--bh-form-manager-input-bg: #EEEEEE;
--bh-form-manager-input-font-size: 15px;
--bh-form-manager-input-padding: 12px 15px;
--bh-form-manager-textarea-height: 100px;
--bh-form-manager-placeholder-text: #B2B2B2;
/* Submit */
--bh-form-manager-submit-border: none;
--bh-form-manager-submit-padding: 12px 15px;
--bh-form-manager-submit-bg: var(--bh-form-manager-highlight-color);
--bh-form-manager-submit-font-family: inherit;
--bh-form-manager-submit-font-weight: 700;
--bh-form-manager-submit-text: #FFFFFF;
--bh-form-manager-submit-font-size: 16px;
--bh-form-manager-submit-border-radius: 2px;
}
Erweiterte-Variablen:
CSS
:root {
/* Label */
--bh-form-manager-input-label-font-family: inherit;
--bh-form-manager-input-label-font-size: 14px;
--bh-form-manager-input-label-color: inherit;
--bh-form-manager-input-label-font-weight: inherit;
/* Checkbox */
--bh-form-manager-checkbox-border: 2px solid var(--bh-form-manager-highlight-color);
--bh-form-manager-checkbox-bg: transparent;
--bh-form-manager-checkbox-bg-checked: var(--bh-form-manager-highlight-color);
/* Input - Fehler */
--bh-form-manager-input-border-invalid: 1px solid #E34242;
--bh-form-manager-input-bg-invalid: #E34242;
--bh-form-manager-placeholder-text-invalid: #FFFFFF;
--bh-form-manager-input-text-invalid: #FFFFFF;
/* Form-Manager-Layout */
--bh-form-manager-column-gap: 1rem;
--bh-form-manager-row-gap: 1.5rem;
--bh-form-manager-fieldblock-margin: 3rem;
--bh-form-manager-input-icon-size: 24px;
--bh-form-manager-warningbox-backend: #FDC357;
/* Submit - Advanced */
--bh-form-manager-submit-hover-transition: ease-in-out all 0.3s;
--bh-form-manager-submit-hover-border: var(--bh-form-manager-submit-border);
--bh-form-manager-submit-hover-padding: var(--bh-form-manager-submit-padding);
--bh-form-manager-submit-hover-bg: var(--bh-form-manager-submit-bg);
--bh-form-manager-submit-hover-font-family: var(--bh-form-manager-submit-font-family);
--bh-form-manager-submit-hover-text: var(--bh-form-manager-submit-text);
--bh-form-manager-submit-hover-font-size: var(--bh-form-manager-submit-font-size);
--bh-form-manager-submit-hover-border-radius: var(--bh-form-manager-submit-border-radius);
/* Input - Advanced */
--bh-form-manager-input-font-family: inherit;
--bh-form-manager-input-border-focused: var(--bh-form-manager-input-border);
--bh-form-manager-input-bg-focused: var(--bh-form-manager-input-bg);
--bh-form-manager-input-text-focused: var(--bh-form-manager-input-text);
--bh-form-manager-input-outline: none;
--bh-form-manager-input-outline-invalid: none;
--bh-form-manager-input-outline-focused: none;
--bh-form-manager-input-placeholder-font-size: var(--bh-form-manager-input-font-size);
--bh-form-manager-input-icon-color: var(--bh-form-manager-highlight-color);
--bh-form-manager-input-icon-color-invalid: var(--bh-form-manager-input-text-invalid);
}
Mail-Templates
Optik
In den Mail-Templates lassen sich das Logo, die Überschrift, der Text und die Farben im TypoScript konfigurieren:
Typoscript
plugin.tx_bh.settings.contentElements.el-form-manager {
forms.el-form-manager.mailSettings.styles {
headlineSize = 24px
headlineWeight = 700
headlineAlign = center
headlineColor = 808080
textSize = 16px
textWeight = 400
textAlign = center
textColor = 000000
highlight = 808080
logo = /fileadmin/images/logo.png
logoWidth = 200
}
}
Text
Die Mail-Templates verwenden Translation-Keys für die Texte. Diese können im TypoScript überschrieben und angepasst werden:
Typoscript
plugin.tx_cooquickanfrage._LOCAL_LANG {
default {
## Benachrichtungsmail
# Überschrift
el-form-manager-sendmail-headline = Anfrage über Webseite
# Text
el-form-manager-sendmail-text = Eine neue Anfrage wurde über die Webseite getätigt.
## Bestätigungsmail
# Überschrift
el-form-manager-confirmmail-headline = Vielen Dank für Ihre Anfrage
# Text
el-form-manager-confirmmail-text = Wir werden uns in Kürze bei Ihnen melden.
}
}
Zusätzliche Mail-Layouts
Der Formular Manager unterstützt zusätzliche Mail-Layouts. Dabei können beim Standard-Template die Translation-Keys geändert oder das komplette Mail-Template überschrieben werden.
Beispiel für Standard Mail-Template, das für ein Bewerbungsformular angepasst ist:
Typoscript
plugin.tx_bh.settings.contentElements.el-form-manager{
forms {
el-form-manager-bewerbung < .el-form-manager
el-form-manager-bewerbung {
name = Bewerbung
mailSettings.translationKeys {
confirmmail-headline = el-form-manager-bewerbung-confirmmail-headline
confirmmail-text = el-form-manager-bewerbung-confirmmail-text
sendmail-headline = el-form-manager-bewerbung-sendmail-headline
sendmail-text = el-form-manager-bewerbung-sendmail-text
}
}
}
}
plugin.tx_cooquickanfrage._LOCAL_LANG {
default {
el-form-manager-bewerbung-confirmmail-headline = Vielen Dank für Ihre Bewerbung
el-form-manager-bewerbung-confirmmail-text = Wir werden uns in Kürze bei Ihnen melden.
el-form-manager-bewerbung-sendmail-headline = Bewerbung über Webseite
el-form-manager-bewerbung-sendmail-text = Eine neue Anfrage wurde über die Webseite getätigt.
}
}
Beispiel für individuelles Mail-Template:
Typoscript
plugin.tx_bh.settings.contentElements.el-form-manager{
forms {
el-form-manager-bewerbung < .el-form-manager
el-form-manager-bewerbung {
name = Bewerbung
mailConfirmTemplate = fileadmin/templates/elements/el-form-manager/el-form-manager-confirmmail-bewerbung.html
mailTemplate = fileadmin/templates/elements/el-form-manager/el-form-manager-sendmail-bewerbung.html
}
}
}
Eigene Elemente hinzufügen
Der Formular Manager ermöglicht es, eigene Elemente zu ergänzen. Damit die vorhandenen Styles und Funktionen übernommen werden, müssen jedoch bestimmte Strukturen und Konfigurationen vorhanden sein.
Achtung
Eigene Elemente für Updatebarkeit vermeiden
Das Einfügen von zusätzlichen Elementen wird nicht empfohlen. Durch zukünftige Updates könnten zusätzliche Elemente Fehler produzieren oder ihre Funktion verlieren.
TypoScript-Einstellungen
Typoscript
plugin.tx_bh.settings.contentElements.el-form-manager-example-field < abstract.bhElement
plugin.tx_bh.settings.contentElements.el-form-manager-example-field {
# Formular Manager Icons
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/input.svg
# el-form-manager als Parent-Element setzen
bheParentElement = el-form-manager
styleOptions {
# Für Element-Einstellungen
disableName = 0 # Deaktiviert Feld für Name
disableRequired = 0 # Deaktiviert Required-Checkbox
# Element-Größen
size < plugin.tx_cooquickanfrage.form-manager.styleOptions.size
}
dummyData.text = Label # Label oder Text bei Checkbox
dummyData.subtext = Placeholder
userClass = bh-form-manager__item
# Zusätzlich ...
# bei Checkbox -> bh-form-manager__item--checkbox
# bei Select -> bh-form-manager__item--select
# bei Textarea -> bh-form-manager__item--textarea
}
# Um neues Element zu elements-allowed hinzuzufügen
plugin.tx_cooquickanfrage.form-manager.items := addToList(el-form-manager-example-field)
Einstellungen
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace anfrage=TYPO3\CooQuickanfrage\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<!-- ViewHelper für Name, Pflichtfeld und Größe -->
<anfrage:manager.item.settings item="{cObj}" />
<!--
Eigene Einstellungen
-->
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Achtung
anfrage:manager.item.settings-ViewHelper
Damit die Grundeinstellungen eines Form-Manager-Elements updatebar bleiben, muss der anfrage:manager.item.settings-ViewHelper verwendet werden.
Template-Struktur
Damit die vorhandenen CSS-Styles sich auch auf individuelle Elemente auswirken, können folgende Template-Strukturen verwendet werden:
Input
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace anfrage=TYPO3\CooQuickanfrage\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<!-- Form-Manager-TypoScript-Variablen-->
<bh:variable.typoscript path="plugin.tx_cooquickanfrage.form-manager" as="form-manager">
<!-- Label -->
<f:if condition="{form-manager.config.label}">
<bh:property.text tag="label" class="bh-form-manager__item__label bh-form-manager__label" property="text" additionalAttributes="{for: '{cObj.allSettings.inputname}-{cObj.uid}'}"/>
</f:if>
<!-- Input-Container -->
<div class="bh-form-manager__field {f:if(condition: '{cObj.allSettings.style.bh-form-manager__item--required}', then: 'bh-form-manager__field--required')}" data-bh-form-manager-name-label="{cObj.allSettings.inputname}">
<!-- ACHTUNG - Reihenfolge von Icon und Property-Text muss beibehalten werden -->
<!-- Icon (optional) -->
<div class="bh-form-manager__field__icon bh-font-lucky-smiley"></div>
<!-- Property-Text für Placeholder (wird im Bearbeitungsmodus statt Input eingeblendet) -->
<f:if condition="{form-manager.config.placeholder}">
<bh:property.text tag="span" class="bh-form-manager__field__input bh-form-manager__field__input--property" property="subtext"/>
</f:if>
<!-- Input -->
<f:form.textfield class="bh-form-manager__field__input" id="{cObj.allSettings.inputname}-{cObj.uid}" name="{cObj.allSettings.inputname}" required="{cObj.allSettings.style.bh-form-manager__item--required}" placeholder="{f:if(condition: '{form-manager.config.placeholder}', then: '{cObj.subtext}{f:if(condition: \'{cObj.allSettings.style.bh-form-manager__item--required}\', then: \'*\')}')}" />
</div>
</bh:variable.typoscript>
</bh:tmpl.element>
Checkbox
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace anfrage=TYPO3\CooQuickanfrage\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<!-- Form-Manager-TypoScript-Variablen-->
<bh:variable.typoscript path="plugin.tx_cooquickanfrage.form-manager" as="form-manager">
<!-- Label -->
<f:if condition="{form-manager.config.label}">
<div class="bh-form-manager__item__label bh-form-manager__item__label--spacer"></div>
</f:if>
<!-- Checkbox-Container -->
<div class="bh-form-manager__checkbox {f:if(condition: '{cObj.allSettings.style.bh-form-manager__item--required}', then: 'bh-form-manager__checkbox--required')}" data-bh-form-manager-name-label="{cObj.allSettings.inputname}">
<!-- Checkbox-Input (nicht sichtbar) -->
<f:form.checkbox class="bh-form-manager__checkbox__input" id="{cObj.allSettings.inputname}-{cObj.uid}" name="{cObj.allSettings.inputname}" value="1" additionalAttributes="{f:if(condition: cObj.allSettings.style.bh-form-manager__item--required ,then:'{required: 1}')}" />
<!-- Custom-Checkbox-Container -->
<label for="{cObj.allSettings.inputname}-{cObj.uid}" class="bh-form-manager__checkbox__checkitem">
<!-- Custom-Checkbox -->
<span class="bh-form-manager__checkbox__icon"></span>
<!-- Custom-Checkbox-Text -->
<bh:property.text tag="span" class="bh-form-manager__checkbox__label bh-form-manager__label" property="text"/>
</label>
</div>
</bh:variable.typoscript>
</bh:tmpl.element>
Formular-Manager Erweiterungen
Der Formular-Manager kann von anderen Modulen erweitert werden. Eine genauere Dokumentation der Erweiterungen findest du hier.