Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.
coo_quickanfrage
Erstellung unterschiedlicher Formulare im Front-End
HTML-Template: el-form-manager.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace anfrage=TYPO3\CooQuickanfrage\ViewHelpers}
<bh:variable.typoscript path="plugin.tx_cooquickanfrage.form-manager" as="form-manager">
<anfrage:form enctype="multipart/form-data" class="bh-form-manager">
<f:be.security.ifAuthenticated>
<div class="bh-form-manager__editing-dialog">
</div>
</f:be.security.ifAuthenticated>
<bh:tmpl.content class="bh-form-manager__fieldblock bh-form-manager__content" section="form-manager"
parent="{cObj.uid}" elements-allowed="{form-manager.items}" dropzone="absolute"></bh:tmpl.content>
<div class="bh-form-manager__fieldblock">
<div class="bh-form-manager__item bh-form-manager__item--size-100">
<div class="bh-form-manager__submit">
<bh:property.text tag="span"
class="bh-form-manager__submit__input bh-form-manager__submit__input--property"
property="subtext" />
<f:form.submit class="bh-form-manager__submit__input" id="bh-form-manager-submit-{cObj.uid}"
value="{cObj.subtext}" />
</div>
<div class="formloader"></div>
</div>
</div>
</anfrage:form>
</bh:variable.typoscript>
Typoscript: el-form-manager.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements.el-form-manager < plugin.tx_bh.settings.contentElements.bhAnfrage
plugin.tx_bh.settings.contentElements.el-form-manager {
name = Formular-Manager
formTemplatePath = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager/
settingsForm = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager/el-form-manager-settings.html
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/formular2.svg
bheListgroup = 1
hidden = 1
options.edit = 1
options.translate = 1
options.oncreate = advanced
dummyData.subtext = Senden
formkey = el-form-manager
subject = Anfrage über Website
confirmmail = 0
forms {
el-form-manager < .inquire
el-form-manager {
name = Standard
formTemplatePathAndFile = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager/el-form-manager.html
mailConfirmTemplate = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager/el-form-manager-confirmmail.html
mailTemplate = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager/el-form-manager-sendmail.html
mailSettings {
translationKeys {
confirmmail-headline = el-form-manager-confirmmail-headline
confirmmail-text = el-form-manager-confirmmail-text
sendmail-headline = el-form-manager-sendmail-headline
sendmail-text = el-form-manager-sendmail-text
}
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
}
}
properties {
name >
vorname >
nachname >
mail {
validators {
notempty.errorMessage {
lang.en = Email address not valid
}
mail.errorMessage {
lang.en = Email address not valid
}
}
}
}
}
inquire >
simple >
}
}
plugin.tx_cooquickanfrage.form-manager {
styleOptions {
size {
bh-form-manager__item--size-100 = 100%
bh-form-manager__item--size-75 = 75%
bh-form-manager__item--size-50 = 50%
bh-form-manager__item--size-33 = 33%
bh-form-manager__item--size-25 = 25%
}
}
config {
label = 1
placeholder = 1
}
}
# warum sind in "default" verschiedene Übersetzungen (de und en gemixed)?
plugin.tx_cooquickanfrage._LOCAL_LANG {
default {
el-form-manager-confirmmail-headline = Vielen Dank für Ihre Anfrage
el-form-manager-confirmmail-text = Wir werden uns in Kürze bei Ihnen melden.
el-form-manager-sendmail-headline = Anfrage über Webseite
el-form-manager-sendmail-text = Eine neue Anfrage wurde über die Webseite getätigt.
form-upluad-filetypes = Allowed file-types:
form-upluad-maxsize = Maximum size
#UPLOAD LABELS
label-jpg = .jpg, .jpeg
label-png = .png
label-gif = .gif
label-doc = .doc, .docx
label-pdf = .pdf
label-xls = .xls, .xlsx
label-csv = .csv
label-zip = .zip
}
de {
form-upluad-filetypes = Erlaubte Datei-Typen:
form-upluad-maxsize = Maximale Größe
}
en {
el-form-manager-confirmmail-headline = Thank you for your inquiry
el-form-manager-confirmmail-text = We will contact you shortly.
el-form-manager-sendmail-headline = Inquiry via website
el-form-manager-sendmail-text = A new inquiry was made via the website.
form-upluad-filetypes = Allowed file-types:
form-upluad-maxsize = Maximum size
}
nl {
el-form-manager-confirmmail-headline = Bedankt voor uw aanvraag
el-form-manager-confirmmail-text = We nemen binnenkort contact met je op.
el-form-manager-sendmail-headline = Aanvraag via website
el-form-manager-sendmail-text = Via de website werd een nieuw onderzoek gedaan.
form-upluad-filetypes = Toegestane bestandstypen:
form-upluad-maxsize = Maximale bestandsgrootte
}
fr {
el-form-manager-confirmmail-headline = Merci pour votre demande
el-form-manager-confirmmail-text = Nous vous contacterons dans les plus brefs délais.
el-form-manager-sendmail-headline = Demande de renseignements via le site web
el-form-manager-sendmail-text = Une nouvelle demande a été faite via le site web.
form-upluad-filetypes = Types de fichiers autorisés :
form-upluad-maxsize = Taille maximale du fichier
}
it {
el-form-manager-confirmmail-headline = Grazie per la vostra richiesta
el-form-manager-confirmmail-text = Vi contatteremo a breve.
el-form-manager-sendmail-headline = Richiesta tramite sito web
el-form-manager-sendmail-text = È stata fatta una nuova richiesta tramite il sito web.
form-upluad-filetypes = Tipi di file consentiti:
form-upluad-maxsize = Dimensione massima del file
}
}
bh.page.includeCSSLibs.el-form-manager = typo3conf/ext/coo_quickanfrage/Resources/Public/Elements/el-form-manager/el-form-manager.css
[bh.isMobile]
bhDefaultMobilePage.includeCSSLibs.el-form-manager < bh.page.includeCSSLibs.el-form-manager
[global]
[backend.user.isLoggedIn]
bh.page.includeJS.el-form-manager-backend = typo3conf/ext/coo_quickanfrage/Resources/Public/Elements/el-form-manager/el-form-manager-backend.js
[global]
Settings-HTML: el-form-manager-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<div class="bhe-anfragesettings">
<bh:form.settingsform content="{cObj}">
<div class="bhe-tab-box">
<div class="bhe-tab-toggler-box bhe-tab-toggler-style-icon-text">
<div class="bhe-tab-toggler bhe-tab-active">
<div class="bhe-tab-toggler-icon bhe-font-form"></div>
<div class="bhe-tab-toggler-text">Allgemein</div>
</div>
<div class="bhe-tab-toggler">
<div class="bhe-tab-toggler-icon bhe-font-savehtml"></div>
<div class="bhe-tab-toggler-text">Bestätigungsmail</div>
</div>
</div>
<div class="bhe-tab-content-box">
<div class="bhe-tab-content bhe-tab-content-padding bhe-tab-active">
<f:if condition="{f:count(subject: cObj.settings.forms)} > 1">
<div class="bhe-formsettings-option">
<label>
Formular-Typ und E-Mail-Layout
</label>
<f:form.select name="formkey" value="{cObj.settings.formkey}">
<f:for each="{cObj.settings.forms}" as="form" iteration="i" key="formkey">
<f:form.select.option value="{formkey}">{form.name}</f:form.select.option>
</f:for>
</f:form.select>
</div>
</f:if>
<div class="bhe-formsettings-option">
<label>Tags</label>
<div id="bhe-inquiry-tag-display"></div>
<f:form.hidden name="tags" id="bhe-inquiry-tags" value="{cObj.allSettings.tags}" />
<f:form.textfield id="bhe-inquiry-tagdummy" value="{cObj.allSettings.inputfortags}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Mehrere Empfänger können mit Strichpunkt <em>(;)</em> getrennt werden."
data-tooltip-view="extended">
Empfänger-E-Mail
</label>
<f:form.textfield id="receiver" name="receiver" required="true"
value="{cObj.settings.receiver}" />
</div>
<div class="bhe-formsettings-option">
<label>Betreff</label>
<f:form.textfield name="subject" value="{cObj.settings.subject}" />
</div>
<div class="bhe-formsettings-option">
<label
data-tooltip="Leite den User auf eine bestimmte Unterseite weiter, sobald er das Formular abgeschickt hat. Bleibt das Feld leer, wird nach dem Absenden die aktuelle Seite nochmals aufgerufen."
data-tooltip-view="extended">
Seite nach Absenden <em>(ID)</em>
</label>
<f:if condition="{cObj.allSettings.disabled-thanks-setting} == 1">
<f:then>
<f:form.textfield name="thanks" style="width: 45px;" type="number"
value="{cObj.settings.thanks}" readonly="true" additionalAttributes="{min: '0'}" />
</f:then>
<f:else>
<f:form.textfield name="thanks" style="width: 45px;" type="number"
value="{cObj.settings.thanks}" additionalAttributes="{min: '0'}" />
</f:else>
</f:if>
</div>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]"
value="{cObj.allSettings.style.options}"
options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:if>
<div class="bhe-formsettings-notice">
<div class="bhe-formsettings-notice-headline" style="font-weight:700;">ACHTUNG</div>
<div class="bhe-formsettings-notice-text">
In jedem Formular muss immer das Feld '<b>Haupt-E-Mail</b>' enthalten sein.
</div>
</div>
</div>
<div class="bhe-tab-content bhe-tab-content-padding">
<div class="bhe-formsettings-option">
<label>Bestätigung an Absender schicken</label>
<f:form.checkbox id="confirmmail" name="confirmmail" value="1"
checked="{cObj.settings.confirmmail}" />
</div>
<div class="bhe-formsettings-option">
<label>
Betreff
</label>
<f:form.textfield id="confsubject" name="confsubject" value="{cObj.settings.confsubject}" />
</div>
<div class="bhe-formsettings-option">
<label>Absendername</label>
<f:form.textfield id="receiverName" name="receiverName" value="{cObj.settings.receiverName}" />
</div>
<div class="bhe-formsettings-notice bhe-formsettings-confirm-preview">
<div class="bhe-formsettings-notice-headline" style="font-weight:700;">Bestätigungsmail:</div>
<div class="bhe-formsettings-notice-text">
<div class="bhe-formsettings-mail-preview">
<div class="bhe-formsettings-mail-preview__item">
<span class="bhe-formsettings-mail-preview__item__label">Von:</span>
<span
class="bhe-formsettings-mail-preview__item__text js-confirm-mail-sender"></span>
</div>
<div class="bhe-formsettings-mail-preview__item__item">
<span class="bhe-formsettings-mail-preview__item__label">Betreff:</span>
<span
class="bhe-formsettings-mail-preview__item__text js-confirm-mail-subject"></span>
</div>
<div class="bhe-formsettings-mail-preview__item__item">
<span class="bhe-formsettings-mail-preview__item__label">Reply-To:</span>
<span
class="bhe-formsettings-mail-preview__item__text js-confirm-mail-replay-to"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<f:form.submit value="Speichern" />
<script type="text/javascript">
function displayTags(tags) {
$('#bhe-inquiry-tag-display').empty();
var tagArray = tags.split(',');
$.each(tagArray, function (a, b) {
$('#bhe-inquiry-tag-display').append('<div class="tag-display-tag">' + b + '</div>');
});
}
function removeTag($tag) {
var tagText = $tag.text();
var tagArray = $('#bhe-inquiry-tags').val().split(',');
var newTags = '';
$.each(tagArray, function (a, b) {
if (b != tagText) {
if (newTags != '') {
newTags += ',' + b;
} else {
newTags = b;
}
}
});
$('#bhe-inquiry-tags').val(newTags);
$tag.remove();
$('#bhe-inquiry-tag-display').trigger("change");
}
$('#bhe-inquiry-tagdummy').on('keyup blur', function (e) {
e.stopPropagation();
e.preventDefault();
var val = $(this).val().trim().replace(/[^a-zA-Z0-9\_\-äüöÄÜÖß]/g, "");
if (val != '') {
if (e.code == 'Space' || e.key == ' ' || e.keyCode == 32 || e.code == 'Comma' || e.key == ',' || e.keyCode == 188 || e.code == 'Enter' || e.keyCode == 13 || e.which == 44 || e.type == 'blur') {
var tags = $('#bhe-inquiry-tags').val();
if (tags == '') {
tags = val;
} else {
tags += ',' + val;
}
$('#bhe-inquiry-tags').val(tags);
$('#bhe-inquiry-tagdummy').val('');
displayTags(tags);
if (e.type != 'blur') {
$('#bhe-inquiry-tag-display').trigger("change");
}
}
}
});
if ($('#bhe-inquiry-tags').val() != '') {
displayTags($('#bhe-inquiry-tags').val());
}
$('body').on('click', '.tag-display-tag', function () {
removeTag($(this));
});
$('body').on('input', '.bhe-anfragesettings input#confsubject', function () {
var value = $(this).val();
$('.bhe-anfragesettings .js-confirm-mail-subject').html(value);
});
$('body').on('input', '.bhe-anfragesettings input#receiverName', function () {
var value = $(this).val();
$('.bhe-anfragesettings .js-confirm-mail-sender').html(value);
});
$('body').on('input', '.bhe-anfragesettings input#receiver', function () {
var value = $(this).val();
$('.bhe-anfragesettings .js-confirm-mail-replay-to').html(value);
});
$('body').on('input', '.bhe-anfragesettings input#receiver', function () {
var value = $(this).val();
$('.bhe-anfragesettings .js-confirm-mail-replay-to').html(value);
});
$('body').on('change', '.bhe-anfragesettings input#confirmmail', function () {
if (this.checked) {
$('.bhe-formsettings-confirm-preview').show();
} else {
$('.bhe-formsettings-confirm-preview').hide();
}
});
$('.bhe-anfragesettings .js-confirm-mail-subject').html($('.bhe-anfragesettings input#confsubject').val());
$('.bhe-anfragesettings .js-confirm-mail-sender').html($('.bhe-anfragesettings input#receiverName').val());
$('.bhe-anfragesettings .js-confirm-mail-replay-to').html($('.bhe-anfragesettings input#receiver').val());
if ($('.bhe-anfragesettings input#confirmmail').get(0).checked) {
$('.bhe-formsettings-confirm-preview').show();
} else {
$('.bhe-formsettings-confirm-preview').hide();
}
</script>
<style>
#bhe-inquiry-tag-display {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 4px 0;
}
.tag-display-tag {
position: relative;
padding: 4px 24px 4px 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 30px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 16px;
color: #C8F776;
margin: 3px;
cursor: pointer;
}
.tag-display-tag:after {
content: "\e912";
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
right: 4px;
height: 16px;
width: 16px;
top: 50%;
transform: translateY(-50%);
font-family: 'bakehouse-iconset' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
color: #C8F776;
}
</style>
</bh:form.settingsform>
</div>