Gibt es irgendwo eine Anleitung, bei der beschrieben ist, wie man sein eigenes HTML-Template einbinden kann, um ein Kontaktformular zu erstellen?
Ich frage mich, wie das HTML-Formular aussehen muss, damit die "finisher" reagieren.
Einbinden eines HTML-Templates ist nicht das Problem.
type: 'TYPO3.Form:Form'
identifier: contact-form
label: Contact
renderingOptions:
templatePathPattern: 'resource://Vendor.Site/Private/Templates/ContactForm/Form.html'
#submitButtonLabel: Send
renderables:
-
type: 'TYPO3.Form:Page'
identifier: page-one
label: Contact
finishers:
-
identifier: 'TYPO3.Form:Email'
options:
templatePathAndFilename: resource://Vendor.Site/Private/Templates/ContactForm/Message.txt
subject: Contact from example.net
recipientAddress: alexander.kellner@domain.org
recipientName: 'Alex'
senderAddress: website@domain.org
senderName: in2code.de
replyToAddress: alex@domaein.org
format: plaintext
-
identifier: 'TYPO3.Form:Confirmation'
options:
message: >
<h3>Thank you for your feedback</h3>
<p>We will process it as soon as possible.</p>
{namespace neos=TYPO3\Neos\ViewHelpers}
<f:form
actionUri="{neos:uri.node(node:'/sites/name/unternehmen/kontakt@live')}"
name="--contact-form"
enctype="multipart/form-data"
id="contact-form"
object="{form}">
<div>
<label for="vorname">
Ihr Vorname
</label>
<f:form.textfield name="vorname" id="vorname" value="" required="required" placeholder="Rainer" />
</div>
<div>
<f:form.submit value="Kontaktformular jetzt absenden" />
<f:form.hidden name="__currentPage" value="1" />
</div>
</f:form>
Oder ist eine Einbindung so nicht vorgesehen?
Ob das gut ist, weiß ich nicht, aber so geht es mir momentan täglich mit Neos 😉
contact.yaml
type: 'TYPO3.Form:Form'
identifier: contact-form
label: Contact
renderingOptions:
templatePathPattern: 'resource://Vender.Site/Private/Templates/ContactForm/Form.html'
submitButtonLabel: Kontaktformular jetzt absenden
renderables:
-
type: 'TYPO3.Form:Page'
identifier: page-one
label: Contact
# renderables:
# -
# type: 'TYPO3.Form:SingleLineText'
# identifier: vorname
# label: Vorname
# properties:
# placeholder: Rainer
# defaultValue: ''
# -
# type: 'TYPO3.Form:SingleLineText'
# identifier: nachname
# label: Nachname
# properties:
# placeholder: Zufall
# defaultValue: ''
# -
# type: 'TYPO3.Form:SingleLineText'
# identifier: email
# label: E-Mail
# validators:
# - identifier: 'TYPO3.Flow:EmailAddress'
# properties:
# placeholder: 'email@unternehmen.de'
# defaultValue: ''
# -
# type: 'TYPO3.Form:SingleLineText'
# identifier: unternehmen
# label: Unternehmen
# properties:
# placeholder: 'Abc AG'
# defaultValue: ''
# -
# type: 'TYPO3.Form:MultiLineText'
# identifier: message
# label: Ihr Anliegen
# properties:
# placeholder: 'Ich benötige Ihre Hilfe bei...'
# defaultValue: ''
finishers:
-
identifier: 'TYPO3.Form:Email'
options:
templatePathAndFilename: resource://Vender.Site/Private/Templates/ContactForm/Email.txt
subject: Kontaktformular
recipientAddress: alexander.kellner@domain.org
recipientName: 'Empfänger'
senderAddress: website@domain.org
senderName: Administrator
replyToAddress: service@domain.org
format: plaintext
-
identifier: 'TYPO3.Form:Confirmation'
options:
message: >
<h3>Vielen Dank für Ihre Nachricht</h3>
<p>Wir werden Sie umgehend Kontaktieren</p>
Formular HTML:
{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace form=TYPO3\Form\ViewHelpers}
<form:form
actionUri="{neos:uri.node(node:'/sites/sitename/unternehmen/kontakt@live')}"
name="--contact-form"
enctype="multipart/form-data"
id="contact-form"
object="{form}">
<div>
<label for="firstname">
Ihr Vorname
</label>
<f:form.textfield
property="firstname"
id="firstname"
value=""
placeholder="Rainer" />
</div>
<div>
<label for="lastname">
Ihr Nachname
</label>
<f:form.textfield
property="lastname"
id="lastname"
value=""
placeholder="Zufall" />
</div>
<div>
<label for="email">
Ihre E-Mail-Adresse
</label>
<f:form.textfield
property="email"
id="email"
value=""
placeholder="email@unternehmen.de" />
</div>
<div>
<label for="company">
Ihr Unternehmen
</label>
<f:form.textfield
property="company"
id="company"
value=""
placeholder="Zufall AG" />
</div>
<div>
<label for="message">
Ihr Anliegen
</label>
<f:form.textarea
property="message"
id="message"
value=""
placeholder="Zufall AG"></f:form.textarea>
</div>
<div>
<f:form.submit value="Kontaktformular jetzt absenden" />
<f:form.hidden name="__currentPage" value="1" />
</div>
</form:form>
Email.txt:
Neue Nachricht
Alle Werte:<f:for each="{form.request.arguments}" key="name" as="value">
{name}: {value}</f:for>
Hi,
Danke für die Anleitung, hast du eine Ahnung wie man das Captcha noch einbindet? weil so werden nicht mal die Felder geprüft.
properties:
siteKey: xxxxx
wrapperClassAttribute: 'form-group'
# Optional values to adjust recaptcha. For further information visit
# https://developers.google.com/recaptcha/docs/display#config
theme: 'light'
type: 'image'
size: 'normal'
tabindex: 0
# optionally change the translationPackage
# if you want to adjust the error message
renderingOptions:
translationPackage: 'Wegmeister.Recaptcha'
validators:
-
identifier: 'Wegmeister.Recaptcha:IsValid'
options:
secretKey: xxxxx