WIP Migrate form styles to tailwind
This commit is contained in:
Björn Fromme
@@ -1,20 +1,16 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<formvh:renderRenderable renderable="{element}">
|
||||
<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
|
||||
<div class="checkbox">
|
||||
<label class="{element.properties.elementClassAttribute} form-check-label" for="{element.uniqueIdentifier}">
|
||||
<label class="inline-flex items-center">
|
||||
<f:form.checkbox
|
||||
property="{element.identifier}"
|
||||
id="{element.uniqueIdentifier}"
|
||||
value="{element.properties.value}"
|
||||
class="form-checkbox h-6 w-6"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
/>
|
||||
<span class="cr">
|
||||
<i class="cr-icon glyphicon glyphicon-ok"></i>
|
||||
</span>
|
||||
{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if>
|
||||
<span class="ml-2">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
|
||||
</label>
|
||||
</div>
|
||||
</f:render>
|
||||
</formvh:renderRenderable>
|
||||
</html>
|
||||
|
||||
@@ -1,23 +1,10 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<f:form.validationResults for="{element.rootForm.identifier}.{element.identifier}">
|
||||
<div class="form-group{f:if(condition: '{validationResults.errors.0}', then: ' has-error')}">
|
||||
<label class="block mb-4">
|
||||
<f:if condition="{doNotShowLabel} != 1">
|
||||
<label class="control-label" for="{element.uniqueIdentifier}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></label>
|
||||
<span class="{f:if(condition: '{validationResults.errors.0}', then: 'text-red-500', else: 'text-gray-700')}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
|
||||
</f:if>
|
||||
<f:format.raw>
|
||||
{elementContent}
|
||||
<f:if condition="{validationResults.flattenedErrors}">
|
||||
<span class="error help-block" role="alert">
|
||||
<f:for each="{validationResults.errors}" as="error">
|
||||
{formvh:translateElementError(element: element, error: error)}
|
||||
<br />
|
||||
</f:for>
|
||||
</span>
|
||||
</f:if>
|
||||
</f:format.raw>
|
||||
<f:if condition="{element.properties.elementDescription}">
|
||||
<span class="help-block">{formvh:translateElementProperty(element: element, property: 'elementDescription')}</span>
|
||||
</f:if>
|
||||
</div>
|
||||
{elementContent -> f:format.raw()}
|
||||
</label>
|
||||
</f:form.validationResults>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<formvh:renderRenderable renderable="{element}">
|
||||
<fieldset id="{element.uniqueIdentifier}" class="{f:if(condition: element.properties.elementClassAttribute, then: ' {element.properties.elementClassAttribute}')}">
|
||||
<f:if condition="{element.label}">
|
||||
<legend class="pb-2 mb-2 border-b border-gray-400">{formvh:translateElementProperty(element: element, property: 'label')}</legend>
|
||||
</f:if>
|
||||
<f:for each="{element.elements}" as="element">
|
||||
<f:render partial="{element.templateName}" arguments="{element: element}" />
|
||||
</f:for>
|
||||
</fieldset>
|
||||
</formvh:renderRenderable>
|
||||
</html>
|
||||
@@ -1,26 +1,22 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<formvh:renderRenderable renderable="{element}">
|
||||
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
|
||||
<div id="{element.uniqueIdentifier}">
|
||||
<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
|
||||
<span class="block text-gray-700 mb-1">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
|
||||
<f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
|
||||
<div class="checkbox">
|
||||
<label class="form-check-label" for="{element.uniqueIdentifier}-{idIterator.index}">
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<f:form.checkbox
|
||||
property="{element.identifier}"
|
||||
multiple="1"
|
||||
id="{element.uniqueIdentifier}-{idIterator.index}"
|
||||
value="{value}"
|
||||
errorClass="{element.properties.elementErrorClassAttribute}"
|
||||
class="form-checkbox h-6 w-6"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
/>
|
||||
<span class="cr">
|
||||
<i class="cr-icon glyphicon glyphicon-ok"></i>
|
||||
</span>
|
||||
{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}
|
||||
<span class="ml-2">{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:render>
|
||||
</formvh:renderRenderable>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<formvh:renderRenderable renderable="{element}">
|
||||
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
|
||||
<f:if condition="{element.properties.prependOptionLabel}">
|
||||
<f:then>
|
||||
<f:form.select
|
||||
property="{element.identifier}"
|
||||
id="{element.uniqueIdentifier}"
|
||||
class="{element.properties.elementClassAttribute} form-multiselect block w-full mt-1"
|
||||
options="{formvh:translateElementProperty(element: element, property: 'options')}"
|
||||
multiple="multiple"
|
||||
errorClass="form-multiselect-error"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}"
|
||||
prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}"
|
||||
/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:form.select
|
||||
property="{element.identifier}"
|
||||
id="{element.uniqueIdentifier}"
|
||||
class="{element.properties.elementClassAttribute} form-multiselect block w-full mt-1"
|
||||
options="{formvh:translateElementProperty(element: element, property: 'options')}"
|
||||
multiple="multiple"
|
||||
errorClass="form-multiselect-error"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
/>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
</f:render>
|
||||
</formvh:renderRenderable>
|
||||
</html>
|
||||
@@ -1,17 +1,18 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<formvh:renderRenderable renderable="{element}">
|
||||
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
|
||||
<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
|
||||
<f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
|
||||
<div class="radio">
|
||||
<label for="{element.uniqueIdentifier}-{idIterator.index}">
|
||||
<div>
|
||||
<label for="{element.uniqueIdentifier}-{idIterator.index}" class="inline-flex items-center">
|
||||
<f:form.radio
|
||||
property="{element.identifier}"
|
||||
id="{element.uniqueIdentifier}-{idIterator.index}"
|
||||
value="{value}"
|
||||
errorClass="{element.properties.elementErrorClassAttribute}"
|
||||
class="form-radio"
|
||||
errorClass="form-radio-error"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
/>
|
||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> {formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}
|
||||
<span class="ml-2">{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</f:for>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<formvh:renderRenderable renderable="{element}">
|
||||
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
|
||||
<f:if condition="{element.properties.prependOptionLabel}">
|
||||
<f:then>
|
||||
<f:form.select
|
||||
property="{element.identifier}"
|
||||
id="{element.uniqueIdentifier}"
|
||||
options="{formvh:translateElementProperty(element: element, property: 'options')}"
|
||||
class="{element.properties.elementClassAttribute} form-select block w-full mt-1"
|
||||
errorClass="form-select-error"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}"
|
||||
prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}"
|
||||
/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:form.select
|
||||
property="{element.identifier}"
|
||||
id="{element.uniqueIdentifier}"
|
||||
options="{formvh:translateElementProperty(element: element, property: 'options')}"
|
||||
class="{element.properties.elementClassAttribute} form-select block w-full mt-1"
|
||||
errorClass="form-select-error"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
/>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:render>
|
||||
</formvh:renderRenderable>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<formvh:renderRenderable renderable="{element}">
|
||||
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
|
||||
<f:form.textfield
|
||||
property="{element.identifier}"
|
||||
id="{element.uniqueIdentifier}"
|
||||
class="form-input mt-1 block w-full"
|
||||
errorClass="form-input-error"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
/>
|
||||
</f:render>
|
||||
</formvh:renderRenderable>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<formvh:renderRenderable renderable="{element}">
|
||||
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
|
||||
<f:form.textarea
|
||||
property="{element.identifier}"
|
||||
id="{element.uniqueIdentifier}"
|
||||
class="{element.properties.elementClassAttribute} form-textarea mt-1 block w-full"
|
||||
rows="{element.properties.rows}"
|
||||
cols="{element.properties.cols}"
|
||||
errorClass="form-textarea-error"
|
||||
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
|
||||
/>
|
||||
</f:render>
|
||||
</formvh:renderRenderable>
|
||||
</html>
|
||||
@@ -6,99 +6,82 @@
|
||||
|
||||
<f:section name="Main">
|
||||
<contact-form inline-template>
|
||||
<div class="form form--border">
|
||||
<div class="relative">
|
||||
<f:form id="contactform" object="{contactForm}" name="contactForm"
|
||||
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
|
||||
pageUid="{settings.defaultAjaxUid}" class="border"
|
||||
pageUid="{settings.defaultAjaxUid}"
|
||||
additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
|
||||
<f:form.hidden property="pageUrl"/>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.name }">
|
||||
<label for="name" class="control-label">Name*</label>
|
||||
<f:form.textfield class="form-control" property="name"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.name" v-html="formErrors.name"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.firstName }">
|
||||
<label for="firstName" class="control-label">Vorname*</label>
|
||||
<f:form.textfield class="form-control" property="firstName"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.gender }">
|
||||
<label for="gender" class="control-label">Gender*</label>
|
||||
<f:form.select class="form-control" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.gender" v-html="formErrors.gender"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.company }">
|
||||
<label for="company" class="control-label">Firma/Verein</label>
|
||||
<f:form.textfield class="form-control" property="company"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.company" v-html="formErrors.company"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.email }">
|
||||
<label for="email" class="control-label">E-Mail*</label>
|
||||
<f:form.textfield class="form-control" property="email"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.email" v-html="formErrors.email"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.phone }">
|
||||
<label for="phone" class="control-label">Telefon/Fax*</label>
|
||||
<f:form.textfield class="form-control" property="phone"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.phone" v-html="formErrors.phone"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.period }">
|
||||
<label for="period" class="control-label">Zeitraum</label>
|
||||
<f:form.textfield class="form-control" property="period"
|
||||
placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.period" v-html="formErrors.period"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.duration }">
|
||||
<label for="duration" class="control-label">Aufenthaltsdauer</label>
|
||||
<f:form.textfield class="form-control" property="duration"
|
||||
placeholder="Tage inkl. An- & Abreisetag"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.duration" v-html="formErrors.duration"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.pax }">
|
||||
<label for="pax" class="control-label">Anzahl der Personen</label>
|
||||
<f:form.textfield class="form-control" property="pax"
|
||||
placeholder="ab 25 Personen"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.pax" v-html="formErrors.pax"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.age }">
|
||||
<label for="age" class="control-label">Durchschnittsalter</label>
|
||||
<f:form.textfield class="form-control" property="age"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.age" v-html="formErrors.age"></div>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<f:form.checkbox class="form-control" property="children" value="Ja"/>
|
||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
||||
Kinder (ja/nein)
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="name"/>
|
||||
<div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
|
||||
<div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
|
||||
<f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
|
||||
<div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="company"/>
|
||||
<div class="text-red-500" v-show="formErrors.company" v-html="formErrors.company"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="email"/>
|
||||
<div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
|
||||
<div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
|
||||
<div class="text-red-500" v-show="formErrors.period" v-html="formErrors.period"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" placeholder="Tage inkl. An- & Abreisetag"/>
|
||||
<div class="text-red-500" v-show="formErrors.duration" v-html="formErrors.duration"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" placeholder="ab 25 Personen"/>
|
||||
<div class="text-red-500" v-show="formErrors.pax" v-html="formErrors.pax"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full"/>
|
||||
<div class="text-red-500" v-show="formErrors.age" v-html="formErrors.age"></div>
|
||||
</label>
|
||||
<div class="mb-4">
|
||||
<label class="inline-flex items-center">
|
||||
<f:form.checkbox class="form-checkbox" property="children" value="Ja"/>
|
||||
<span class="ml-2">Kinder (ja/nein)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.inquiry }">
|
||||
<label for="inquiry" class="control-label">(Zusatz-) Wünsche</label>
|
||||
<f:form.textarea class="form-control"
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
|
||||
<f:form.textarea class="form-textarea mt-1 block w-full"
|
||||
property="inquiry"
|
||||
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
|
||||
cols="30" rows="5"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="help-block">
|
||||
<div class="text-red-500" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
|
||||
</label>
|
||||
<div class="mb-4">
|
||||
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
|
||||
title="Datenschutzerklärung"
|
||||
target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="mb-4">
|
||||
<button type="submit" class="button button-warning">Jetzt anfragen</button>
|
||||
</div>
|
||||
</f:form>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
<f:flashMessages />
|
||||
<f:if condition="{formConfiguration}">
|
||||
<div class="form-wrapper form--border">
|
||||
<formvh:render overrideConfiguration="{formConfiguration}" />
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -9,55 +9,48 @@
|
||||
<div class="form form--border">
|
||||
<f:form id="contactform" object="{contactForm}" name="contactForm"
|
||||
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
|
||||
pageUid="{settings.defaultAjaxUid}" class="border"
|
||||
pageUid="{settings.defaultAjaxUid}"
|
||||
additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
|
||||
<f:form.hidden property="pageUrl"/>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.gender }">
|
||||
<label for="gender" class="control-label">Geschlecht</label>
|
||||
<f:form.select options="{m: 'm', w: 'w', d: 'd'}" property="gender" />
|
||||
<div class="help-block"
|
||||
v-show="formErrors.gender" v-html="formErrors.gender"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.name }">
|
||||
<label for="name" class="control-label">Name</label>
|
||||
<f:form.textfield class="form-control" property="name"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.name" v-html="formErrors.name"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.firstName }">
|
||||
<label for="firstName" class="control-label">Vorname</label>
|
||||
<f:form.textfield class="form-control" property="firstName"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.email }">
|
||||
<label for="email" class="control-label">E-Mail</label>
|
||||
<f:form.textfield class="form-control" property="email"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.email" v-html="formErrors.email"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.phone }">
|
||||
<label for="phone" class="control-label">Telefon</label>
|
||||
<f:form.textfield class="form-control" property="phone"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.phone" v-html="formErrors.phone"></div>
|
||||
</div>
|
||||
<div class="form-group" :class="{ 'has-error': formErrors.inquiry }">
|
||||
<label for="inquiry" class="control-label">Anfrage</label>
|
||||
<f:form.textarea class="form-control"
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
|
||||
<f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
|
||||
<div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="name"/>
|
||||
<div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
|
||||
<div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="email"/>
|
||||
<div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
|
||||
<f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
|
||||
<div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div>
|
||||
</label>
|
||||
<label class="block mb-4">
|
||||
<span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
|
||||
<f:form.textarea class="form-textarea mt-1 block w-full"
|
||||
property="inquiry"
|
||||
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
|
||||
cols="30" rows="5"/>
|
||||
<div class="help-block"
|
||||
v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="help-block">
|
||||
<div class="text-red-500" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
|
||||
</label>
|
||||
<div class="mb-4">
|
||||
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
|
||||
title="Datenschutzerklärung"
|
||||
target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="mb-4">
|
||||
<button type="submit" class="button button-warning">Jetzt anfragen</button>
|
||||
</div>
|
||||
</f:form>
|
||||
|
||||
@@ -25,6 +25,42 @@ module.exports = {
|
||||
fontFamily: {
|
||||
'sans': [ 'Lato', 'sans-serif' ],
|
||||
},
|
||||
customForms: theme => ({
|
||||
default: {
|
||||
'input, textarea, select, multiselect': {
|
||||
paddingTop: theme('spacing.4'),
|
||||
paddingBottom: theme('spacing.4'),
|
||||
paddingLeft: theme('spacing.8'),
|
||||
paddingRight: theme('spacing.8'),
|
||||
borderColor: theme('colors.gray.500'),
|
||||
borderRadius: undefined,
|
||||
'&:focus': {
|
||||
borderColor: undefined,
|
||||
boxShadow: undefined,
|
||||
},
|
||||
},
|
||||
'checkbox, radio': {
|
||||
width: theme('spacing.6'),
|
||||
height: theme('spacing.6'),
|
||||
backgroundColor: theme('colors.white'),
|
||||
borderColor: undefined,
|
||||
'&:focus': {
|
||||
borderColor: undefined,
|
||||
boxShadow: undefined,
|
||||
},
|
||||
'&:checked': {
|
||||
backgroundColor: theme('colors.ep.secondary'),
|
||||
boxShadow: undefined,
|
||||
},
|
||||
},
|
||||
},
|
||||
error: {
|
||||
'input, textarea, select, multiselect': {
|
||||
color: theme('colors.red.500'),
|
||||
borderColor: theme('colors.red.500'),
|
||||
}
|
||||
},
|
||||
}),
|
||||
extend: {
|
||||
colors: {
|
||||
'overlay': {
|
||||
|
||||
Reference in New Issue
Block a user