Fluidforms idea

contact.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
<f:layout name="{v:extension.loaded(extensionName: 'fluidcontent_core', then: 'ContentCore', else: 'Content')}" />

<f:section name="Configuration">
	<flux:form id="contact" options="{group: 'forms'}" label="Contact">
		<flux:field.input name="subject" label="Subject" required="1" />
		<flux:field.input name="recipient" label="Recipient" required="1" />
		
		<ff:validate name="name" as="Required" />
		<ff:validate name="email" as="E-Mail" />
		<ff:validate name="message" as="Required" />
	</flux:form>
</f:section>

<f:section name="Form">
	<f:form>
		<f:form.textfield name="name" />
		<f:form.textfield name="email" />
		<f:form.textarea name="message" />
		<button type="submit">Submit</button>
	</f:form>
</f:section>

<f:section name="Preview">
	<f:form>
		<f:form.hidden name="name" value="{name}"/>
		<f:form.hidden name="email" value="{email}"/>
		<f:form.hidden name="message" value="{message}"/>
		<strong>{name}</strong>
		<p>{message -> f:format.nl2br()}</p>
		<button type="submit">Confirm</button>
	</f:form>
</f:section>

<f:section name="Success">
	Thanks for your message!
	
	<ff:message subject="{subject}" recipient="{recipient}">
		<strong>{name}</strong>
		<strong>{E-Mail}</strong>
		<p>{message}</p>
	</ff:message>
</f:section>