Formular Manager  

    coo_quickanfrage
    Erstellung unterschiedlicher Formulare im Front-End

    Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.

    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 = typo3/sysext/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 } } 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. } de { form-upluad-filetypes = Erlaubte Datei-Typen: #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 } } 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" /> </f:then> <f:else> <f:form.textfield name="thanks" style="width: 45px;" type="number" value="{cObj.settings.thanks}" /> </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" style="padding-bottom:20px;"> <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> <input type="checkbox" id="confirmmail" name="tx_bh_page[data][content][settings][confirmmail]" {f:if(condition="{cObj.settings.confirmmail}" , then="checked" )} value="1" /> </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" style="padding-bottom:20px;"> <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(); console.log(tagText); var tagArray = $('#bhe-inquiry-tags').val().split(','); var newTags = ''; console.log(tagArray); $.each(tagArray, function (a, b) { if (b != tagText) { if (newTags != '') { newTags += ',' + b; } else { newTags = b; } } }); $('#bhe-inquiry-tags').val(newTags); $tag.remove(); } $('#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.key == " " || e.code == "Space" || e.keyCode == 32 || e.keyCode == 188 || e.which == 44 || e.key == ',' || 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 ($('#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 () { console.log("Test"); 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; } .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>