Internetservice - Blog

Vorgehensweise
=============
A) Plugin th_mailformplus installieren und falls CAPTCHA-Handling gewünscht ggf. Plugin captcha, oder alternativ sr_freecaptcha installieren
B) Template anlegen
C) Typoscript für Formular einrichten
D) Plugin auf Seite einfügen und konfigurieren

Mehr dazu…

Zu A) Plugin installieren th_mailformplus und ggf. captcha installieren
==============================================

Plugin-Einstellungen von th_mailformplus
Option

Zitat:

Use references to templates instead… If set, the template files will not be copied to /uploads/th_mailformplus/ anymore. Instead a direct reference to the original file is stored. If the original file is modified, the changes will take effect instantly without the need to remap the template.Default: 1

aktivieren, damit das Template frei wählbar ist

Plugin-Einstellungen von captcha
Das Captcha lesbar mit grösserer Schrift konfigurieren.
dazu die TTF-Methode aktivieren

Zitat:

Use TTF When set the captcha will get generated using TTF font rendering functions which will result in much more readable captchas

Zu B) Template anlegen
=====================

Formularbereich festlegen

Code:

<!– ###TEMPLATE_FORM### begin –> . . . <!– ###TEMPLATE_FORM### end –>

Formularkopf
Hinweis: die hidden-Felder sind Pflicht

Code:

<form name=”Formular” method=”post” action=”###REL_URL###” enctype=”multipart/form-data” > <input type=”hidden” name=”id” value=”###PID###” /> <input type=”hidden” name=”submitted” value=”1″ /> <input type=”hidden” name=”L” value=”###value_L###” /> <input type=”hidden” name=”type” value=”###value_type###” />

captcha Eintrag im Template:
für captcha Plugin

Code:

<fieldset name=”fset_captcode” class=”fset_captcode”> <legend>Sicherheitsprüfung</legend> ###CAPTCHA###<br/> <label for=”captcode”>Sicherheitscode:*</label><br/><span id=”error_captcode” style=”color: red;”>###error_captcode###</span> <input type=”text” name=”captcode” id=”captcode” size=”20″ maxlength=”20″ tabindex=”11″/> </fieldset>

alternativ für sr_freecap Plugin

Code:

<!–###CAPTCHA_INSERT### this subpart is removed if CAPTCHA is not enabled! –> <div class=”tx_thmailformplus_pi1-captcha”><br/><span id=”error_captcode” style=”color: red;”>###error_captcode###</span> <label for=”tx_your_extension_id_pi1_captcha_response”>###SR_FREECAP_NOTICE###</label> ###SR_FREECAP_CANT_READ### <br /> <input type=”text” size=”15″ id=”tx_thmailformplus_pi1_captcha_response” name=”captcha_response” title=”###SR_FREECAP_NOTICE###” value=”"> ###SR_FREECAP_IMAGE### </div> <!–###CAPTCHA_INSERT###–>

Beispiel INPUT-Feld

Code:

<div class=”form_input”> <div class=”div_label”><label for=”Strasse”>Strasse: *</label></div> <input name=”Strasse” id=”Strasse” value=”###value_Strasse###” type=”text” class=”feld” onChange=”top.hot=true;” onblur=”this.className=’feld’;” onfocus=”this.className=’inputselected’”> </div> <div id=”error”>###error_Strasse###</div>

Beispiel Textarea

Code:

<div class=”form_input”> <div class=”div_label”><label for=”Bemerkung”>Bemerkung:</label></div> <textarea id=”" name=”Bemerkung” class=”textarea” onChange=”top.hot=true;” onblur=”this.className=’textarea’;” onfocus=”this.className=’textareaselected’”>###value_Bemerkung###</textarea> </div> <div id=”error”>###error_Bemerkung###</div>

Beispiel Dropdown-/Select

Code:

<div class=”form_input”> <div class=”div_label”><label for=”anrede”>Anrede: *</label></div> <select name=”Anrede” id=”anrede” class=”feld”> <option value=”">*** Bitte auswählen ***</option> <option value=”Frau” ###selected_Anrede_Frau###>Frau</option> <option value=”Herr” ###selected_Anrede_Herr###>Herr</option> </select> </div> <div id=”error”>###error_Anrede###</div>

Beispiel CHECKBOX

Code:

<div class=”form_input”> <div class=”div_label”><label for=”Taetigkeit”>Gewüschte Dienstleistung:</label></div> <input type=”checkbox” name=”Taetigkeit” value=”Webdesign” ###checked_Taetigkeit_Webdesign###>Webdesign </div> <div id=”error”>###error_Taetigkeit###</div>

Beispiel Radio-Button

Code:

<div class=”form_input”> <div class=”div_label”><label for=”contact_via”>Bevorzugte Kontaktaufnahme:</label></div> <input type=”radio” name=”contact_via” value=”EMail” style=”border-style:none;” ###checked_contact_via_EMail###>e-mail<br/> <input type=”radio” name=”contact_via” value=”Telefon” style=”border-style:none;” ###checked_contact_via_Telefon###>Telefon </div> <div id=”error”>###error_contact_via###</div>

einfache Sendebestätigung auf der selben Seite anzeigen
diesen Bereich ins Template einfügen:

Code:

<!– ###TEMPLATE_SUBMITTED_OK### begin OPTIONAL - will be shown if form was submitted and all required fields were filled out –> <b>Vielen Dank für Ihre Anfrage.</b> Wir werden diese in innerhalb unserer Geschäftszeiten schnellst möglich bearbeiten.<br/> <!– ###TEMPLATE_SUBMITTED_OK### end –>

elegante Sendebestätigung auf der selben Seite anzeigen

Code:

<!– ###TEMPLATE_SUBMITTED_OK### begin OPTIONAL - will be shown if form was submitted and all required fields were filled out –> <div style=”font-family: Helvetica,Arial; font-weight: normal; font-size: 10pt;”> <b>Vielen Dank für Ihre Anfrage. Sie haben uns folgende Angaben übermittelt:</b><br/><br/> <table> <tr><td width=”80″ style=”font-weight: bold”>Name:</td><td>###Anrede### ###Vorname### ###name###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Strasse:</td><td>###Strasse###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Ort: </td><td>###Postleitzahl### ###Ort###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Land:</td><td>###Land###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Telefon:</td><td>###Telefon###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Fax:</td><td>###Fax###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Mobil:</td><td>###Mobil###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>E-Mail:</td><td><a href=”mailto:###EMail###”>###EMail###</a></td></tr> <tr><td width=”80″ style=”font-weight: bold”>Internet:</td><td>###Internet###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Bemerkung:</td><td>###Bemerkung###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Gewüschte Dienstleistung:</td><td>###Taetigkeit###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Bevorzugte Kontaktaufnahme:</td><td>###contact_via###</td></tr> </table> <br/>Wir werden Ihre Anfrage in innerhalb unserer Geschäftszeiten schnellst möglich bearbeiten.<br/><br/> <strong>Mit freundlichen Grüßen<br/>Ihr Collada-Team</strong> </div> <!– ###TEMPLATE_SUBMITTED_OK### end –>

elegante Sendebestätigung auf einer anderen Seite anzeigen
1) legen Sie bei der Pluginkonfiguration (Schritt D) siehe unten) die ZielseitenID bei der Einstellung Plugin-Optionen->Redirect Seite-> fest

2) verwenden Sie im Template statt dem Abschnitt ###TEMPLATE_SUBMITTED_OK### den Abschnitt ###TEMPLATE_PRINT###

3) Der Inhalt des Templates wird in der Sessionvariable gespeichert.
Geben Sie diesen auf der Zielseite wie im th_mailformplus Manual beschrieben per Typoscript aus.

Benachrichtigungsemail
Je ein Template für Text- und HTML-Version der Email anlegen

Benachrichtigungsemail (Textformat)

Code:

<!– ###TEMPLATE_EMAIL_RECEIVER### begin OPTIONAL - this will be the email text that is sent to the admin (html!) (admin-email = the email you can specify in the mailformplus plugin) –> Ein Besucher auf Collada.de hat eben das Kontaktformular ausgefüllt:Anrede: ###Anrede### Vorname: ###Vorname### Name: ###name###Postleitzahl: ###Postleitzahle### Ort: ###Ort### Land: ###Land###Telefon: ###Telefon### Fax: ###Fax### Mobil: ###Mobil### Email: ###EMail### Internet: ###Internet### Gewüschte Dienstleistung: ###Taetigkeit### Bevorzugte Kontaktaufnahme: ###contact_via###Bemerkung: ###Bemerkung### <!– ###TEMPLATE_EMAIL_RECEIVER### end –>

Benachrichtigungsemail (HTMLformat)

Code:

<!– ###TEMPLATE_EMAIL_RECEIVER_HTML### begin OPTIONAL - this will be the email text that is sent to the admin (plaintext!) (admin-email = the email you can specify in the mailformplus plugin) –> <div style=”font-family: Helvetica,Arial; font-weight: normal; font-size: 10pt;”> Ein Besucher auf Collada.de hat eben das Kontaktformular ausgefüllt:<br/><br/> <table> <tr><td width=”80″ style=”font-weight: bold”>Name:</td><td>###Anrede### ###Vorname### ###name###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Strasse:</td><td>###Strasse###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Ort: </td><td>###Postleitzahl### ###Ort###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Land:</td><td>###Land###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Telefon:</td><td>###Telefon###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Fax:</td><td>###Fax###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Mobil:</td><td>###Mobil###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>E-Mail:</td><td><a href=”mailto:###EMail###”>###EMail###</a></td></tr> <tr><td width=”80″ style=”font-weight: bold”>Internet:</td><td>###Internet###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Bemerkung:</td><td>###Bemerkung###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Gewüschte Dienstleistung:</td><td>###Taetigkeit###</td></tr> <tr><td width=”80″ style=”font-weight: bold”>Bevorzugte Kontaktaufnahme:</td><td>###contact_via###</td></tr> </table> </div> <!– ###TEMPLATE_EMAIL_RECEIVER_HTML### end –>

Fehlertexte im Template festlegen
Im Abschnitt ###TEMPLATE_ERROR### die Meldungen wie folgt einfügen:

Code:

<!– ###TEMPLATE_ERROR### begin –> <!– ###ERROR_Vorname### –> Wählen Sie einen Wert aus dem Feld “Vorname” aus.<br/><br/> <!– ###ERROR_Vorname### –> . . . <!– ###TEMPLATE_ERROR### end –>

Zusammenfassende Fehlermeldung ausgeben
Im Formular an der Stelle, an der die zusammenfassende Meldung erscheinen soll den Marker ###ERROR### einfügen.
Am Anfang des Abschnitts ###TEMPLATE_ERROR### folgenden Bereich einfügen:

Code:

<!– ###TEMPLATE_ERROR### begin –> <!– ###ERROR_START### begin this is used for the global error marker ###ERROR### –> <strong>Folgende Fehler traten auf:</strong><br/> <!– ###ERROR_START### end –> <!– ###ERROR_END### begin this is used for the global error marker ###ERROR### –> Dies ist das Ende der Fehlermeldungsliste. <!– ###ERROR_END### end –> . .

Zu C) Typoscript für Formular einrichten
============================

# Captcha Verwendung aktivieren
für Plugin captcha

Code:

plugin.tx_thmailformplus_pi1.captchaFieldname = captcode

für Plugin sr_feecap

Code:

plugin.tx_thmailformplus_pi1.freecapFieldname = captcha_response

# Logging von Formulardaten konfigurieren

Code:

plugin.tx_thmailformplus_pi1.saveLog = 1

# Timstamp mitloggen

Code:

plugin.tx_thmailformplus_pi1.saveLog.logDateTime = 1

# IP-Adressen mitloggen

Code:

plugin.tx_thmailformplus_pi1.saveLog.logIP = 1

# Die zu loggenden Formularfelder und die Reihenfolge festlegen

Code:

plugin.tx_thmailformplus_pi1.saveLog.saveLog.order = id, Anrede, Vorname,

# so kann bei Bedarf das Datum in ein Formularfeld eingetragen werden

Code:

plugin.tx_thmailformplus_pi1.fieldConf.Feldname.defaultValue.data = date:d.m.Y h:i:s

# so eine Environmentvariable

Code:

plugin.tx_thmailformplus_pi1.fieldConf.ipaddr.defaultValue.data = getenv:REMOTE_ADDR

# so anzuzeigender Text

Code:

plugin.tx_thmailformplus_pi1.fieldConf.SomeText.defaultValue.value = AnzuzeigendesLiteral

# Fehlerprüfung

Code:

plugin.tx_thmailformplus_pi1.fieldConf.EMail.errorCheck = required, email plugin.tx_thmailformplus_pi1.fieldConf.EMail.errorText = Bitte geben Sie eine gültige Emailadresse ein!

zu D) Plugin auf Seite einfügen und konfigurieren
==================================

Plugin-Optionen->Allgemeine Optionen
Template-Datei zuordnen

Plugin-Optionen->E Mail-Optionen->Empfänger
Emailadresse des Empfängers der Formulardaten eintragen

Plugin-Optionen->E Mail-Optionen->Name des Absenders
so Eintragen sonst Probleme:

Zitat:

Max Mustermann <max.mustermann@musterfirma.de>

Hinweise: mehrere Einträge dieser Art können als kommagetrennte Liste angegeben werden

Plugin-Optionen->E Mail-Optionen->Redirect Seite
Nur angeben falls die Versendebestätigung auf einer anderen Seite angezeigt werden soll.

Plugin-Optionen->E Mail-Optionen->Pflichtfelder
Hinweis: exakte groß-/Kleinschreibung der Feldnamen ist wichtig, sonst ist das Formular nicht absendbar