Schnellnavigation:

Kategorien

« Oktober 2014»
S M T W T F S
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
RSS 2.0Nachrichten

In eigener Sache

Peter Linzenkirchner, Lisardo EDV Beratung in Augsburg. Freelance und Partner für Design- und Webagenturen in Augsburg und München. Pixelgenaue Templates, valides HTML, barrierearm. TYPO3-Projekte, Extension-Programmierung und mehr ... 

Zur Zeit wird gefiltert nach: form
Filter zurücksetzen

Die Optionen aller Eingabefelder im Backend können modifizert (= geändert oder erweitert) werden. Prinzipiell ist die Syntax:

  1. TCEFORM.[tablename].[field] {
  2.   # Feld komplett entfernen:
  3.   disabled=1
  4.   # Item entfernen
  5.   removeItems=1,2,3
  6.   # Item hinzufügen (Achtung: erfordert für das Frontend noch TypoScript im Template!)
  7.   addItems.[itemValue]=100,101
  8.   # Umbenennen
  9.   altLabels.[item_value]=ein ganz neuer Name
  10. }

Leider gibt es keine Dokumentation, welche Optionen für welches Feld zur Verfügung stehen und wie diese im Frontend ausgegeben werden. Das kann man wohl am einfachsten aus dem Quelltext des Eingabeformulars im Backend entnehmen. Für das Frontend kenne ich im Moment nur die Möglichkeit, es auszutesten bzw im Falle von tt_content das TypoScript von css_styled_content durchzusehen.

Bezeichnungen der Headline-Layouts ändern:

Ins TSconfig der der Seite folgendes eintragen: 

  1. TCEFORM.tt_content {
  2.   # ausblenden
  3.   header_layout.removeItems=1,4,5,100
  4.   # mit anderem Namen versehen
  5.   header_layout.altLabels.0=Ebene 1,H1
  6.   header_layout.altLabels.2=Ebene 2,H2
  7.   header_layout.altLabels.3=Ebene 3,H3
  8. }

Falls H1 nicht genutzt werden soll, muss die Default-Einstellung noch geändert werden, bzw. die Ausgabe für header_layout.altLabels.0. Das geht über folgende Eingabe im Constants-Bereich des TypoScript-Templates:

  1. # Voreinstellunge auf Headline <h3>
  2. content.defaultHeaderType=3

Rahmenoptionen umbenennen:

  1. TCEFORM.tt_content {
  2.   # Rahmenoptionen im Bereich Typ
  3.   section_frame {
  4.     # neue Labels
  5.     altLabels {
  6.       10=Kasten
  7.       5=Linie davor
  8.       6=Linie danach
  9.       11=BoxBlau
  10.       12=BoxGrau
  11.     }
  12.   # ausblenden
  13.   removeItems=1,20,21
  14.   }
  15. }

Neue Rahmenoptionen hinzufügen

Das ist etwas aufwändiger, da hierzu auch das TypoScript von tt_content verändert werden muss. Erster Schritt im TSconfig der Seite:

  1. # neuer Rahmen dazu
  2. TCEFORM.tt_content.section_frame {
  3.   addItems.100=Mal ganz anders
  4. }

Danach im TypoScript-Template:

  1. tt_content.stdWrap.innerWrap.cObject= CASE
  2. tt_content.stdWrap.innerWrap.cObject {
  3.   100=TEXT
  4.   100.value= <div class="mal-ganz-anders">|</div>
  5. }

Danach ganz normal in der CSS-Datei formatieren.

ACHTUNG: Das funktioniert seit TYPO3 4.3 nicht mehr; hier wurde css_styled_content etwas verändert. Man kann zwar die alte Fassung als static_content in das Template laden, aber besser ist es, es auf die neue Art zu machen:

  1. tt_content.stdWrap.innerWrap.cObject {
  2.     # Definitionen zuweisen
  3.     100=<tt_content.stdWrap.innerWrap.cObject.default
  4.     # Klasse zuweisen
  5.     100.15.value=mal-ganz-anders
  6. }

Das hat auch den Vorteile, dass die Abstände oben und unten funktionieren.

Weiterführende Links:

Im Mailformular soll ein Dropdownmenü angeboten werden, mit dessen Hilfe die Zieladresse ausgewählt werden kann. Umsetzung mit der Extension Mailformplus. 

Im Template:

  1. <select name="to">
  2.     <option value="eins"###checked_to_eins###>Eins</option>
  3.     <option value="zwei"###checked_to_zwei###>Zwei</option>
  4.     <option value="drei"###checked_to_drei###>Drei</option>
  5. </select>

Im TypoScript:

  1. plugin.tx_thmailformplus_pi1.default.contact_to=TEXT
  2. plugin.tx_thmailformplus_pi1.default.contact_to.data=GPvar:to
  3. plugin.tx_thmailformplus_pi1.default.contact_to.wrap= |
  4.  
  5. [globalVar=GP:to=eins]
  6.     plugin.tx_thmailformplus_pi1.default.email_to=eins@e-mail.de
  7. [end]
  8. [globalVar=GP:to=zwei]
  9.     plugin.tx_thmailformplus_pi1.default.email_to=zwei@e-mail.de
  10. [end]
  11. [globalVar=GP:to=drei]
  12.     plugin.tx_thmailformplus_pi1.default.email_to=drei@e-mail.de
  13. [end]

Quelle: Deutschsprachige Mailingliste; Beitrag von Fabian Seltmann.

[Update]

Bei Powermail gibt es einen Eintrag hierzu direkt im Manual

 

30August2010

Formulare in Typo3

Mit dem normalen Inhaltselement FORM kann man bereits einiges machen, allerdings hat es einige Einschränkungen:

  • man kann die Formularelemente nur sehr mühsam mehrspaltig anordnen
  • Zwischentexte zwischen den Elementen sind zwar möglich, können aber nur mit einer einheitlichen Formatierung versehen werden.
  • die Validierung erfolgt nur mittels JavaScript
  • der Absender bekommt die gesendeten Inhalte nicht mehr gezeigt.
  • die eingebenen Daten werden nicht in einer Datenbank gespeichert

Es gibt einige Erweiterungen, die das Inhaltselement FORM erweitern, ausserdem kann man Erweiterungen einsetzen, die es komplett ersetzen.

Tipps zu FORM

Einzelne Elemente mit Klassen versehen:

  1. tt_content.mailform.20.params.input = class="mein_input"
  2. tt_content.mailform.20.params.textarea = class="mein-text"

In den Beispielen auf Typo3.org findet sich eine Syntax, wie Kopien an mehrere Empfänger versendet werden können

  1. |recipient_copy=hidden | copy@email.com

und wie man eine Bestätigungs-E-Mail an den Absender schicken kann: 

  1. |auto_respond_msg=hidden|Hello / This is an autoresponse. //We have received your mail.
  2.  

Diese Nachricht wird nur gesendet, wenn die E-Mailadresse bekannt ist, also das Feld “email” ausgefüllt wurde. Unklar ist dabei, inwieweit das gegen Spam geschützt werden kann. Ich vermute, dass es ein neues Feature von Typo3 Vs. 4 ist.

Weiterführende Links:

FORM in css_styled_content

In css_styled_content findet sich ein ziemlich ausführliches TypoScript zum FORM-Objekt, das als Ausgangspunkt genommen werden kann. Es ist dann relativ einfach, dieses zu ergänzen. Nachfolgend zuerst der Code, wie das FORM-Objekt standardmäßig überschrieben wird:

  1. tt_content.mailform = COA
  2. tt_content.mailform.10 = < lib.stdheader
  3. tt_content.mailform.20 = FORM
  4. tt_content.mailform.20 {
  5.   layout = <tr><td class="csc-form-labelcell">###LABEL###</td><td class="csc-form-fieldcell">###FIELD###</td></tr>
  6.   labelWrap.wrap = <p class="csc-form-label">|</p>
  7.   commentWrap.wrap = <p class="csc-form-comment">|</p>
  8.   radioWrap.wrap = <span class="csc-form-radio">|</span><br />
  9.   REQ = 1
  10.   REQ.labelWrap.wrap = <p class="csc-form-label-req">|</p>
  11.   COMMENT.layout = <tr><td colspan="2" class="csc-form-commentcell">###LABEL###</td></tr>
  12.   target = {$styles.content.mailform.target}
  13.   goodMess = {$styles.content.mailform.goodMess}
  14.   badMess = {$styles.content.mailform.badMess}
  15.   redirect.field = pages
  16.   redirect.listNum = 0
  17.   recipient.field = subheader
  18.   data.field = bodytext
  19.   locationData = 1
  20.  
  21.   stdWrap.wrap = <table border="0" cellspacing="1" cellpadding="1" class="csc-mailform">| </table>
  22.   stdWrap {
  23.       editIcons = tt_content: bodytext, pages, subheader
  24.       editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.php:eIcon.form
  25.  
  26.       prefixComment = 2 | Mail form inserted:
  27.   }
  28. }

Danach folgt die neue Version ([compatVersion = 3.9.0]):

  1. tt_content.table.20.innerStdWrap.wrap = |
  2.  
  3. tt_content.mailform.20 {
  4.   accessibility = 1
  5.   noWrapAttr=1
  6.   formName = mailform
  7.   dontMd5FieldNames = 1
  8.   REQ = 1
  9.   layout = <div class="csc-mailform-field">###LABEL### ###FIELD###</div>
  10.   COMMENT.layout = <div class="csc-mailform-label">###LABEL###</div>
  11.   RADIO.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-radio">###FIELD###</span></div>
  12.   LABEL.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-label">###FIELD###</span></div>
  13.   labelWrap.wrap = |
  14.   commentWrap.wrap = |
  15.   radioWrap.wrap = |<br />
  16.   REQ.labelWrap.wrap = |
  17.   stdWrap.wrap = <fieldset class="csc-mailform"> | </fieldset>
  18.   params.radio = class="csc-mailform-radio"
  19.   params.check = class="csc-mailform-check"
  20.   params.submit = class="csc-mailform-submit"
  21. }

Das ergibt zum Beispiel folgenden Output:

  1. <form action="Divers.64.0.html" id="mailform" name="mailform" enctype="multipart/form-data" method="post" target="_self" onsubmit="return validateForm('mailform','the_name,Name:,email,Email:','','Leere Pflichtfelder:','')">
  2.   <div style="display:none;">
  3.       <input type="hidden" name="html_enabled" id="mailformhtml_enabled" value="1" />
  4.       <input type="hidden" name="subject" id="mailformsubject" value="This is the subject" />
  5.       <input type="hidden" name="auto_respond_msg" id="mailformauto_respond_msg" value="Hello / This is an autoresponse. //We have received your mail." />
  6.       <input type="hidden" name="tv" id="mailformtv" value="0" />
  7.       <input type="hidden" name="locationData" value="64:tt_content:165" />
  8.   </div>
  9.   <fieldset class="csc-mailform">
  10.       <div class="csc-mailform-field">
  11.           <label for="mailformthe_name">Name:</label>
  12.           <input type="text" name="the_name" id="mailformthe_name" size="20" value="Enter your name here" />
  13.       </div>
  14.       <div class="csc-mailform-label">
  15.           Eine kleine Zwischenzeile
  16.       </div>
  17.       <div class="csc-mailform-field">
  18.           <label for="mailformemail">Email:</label>
  19.           <input type="text" name="email" id="mailformemail" size="20" value="" />
  20.       </div>
  21.       <div class="csc-mailform-field">
  22.           Label <span class="csc-mailform-label">Label value</span>
  23.       </div>
  24.       <div class="csc-mailform-field">
  25.           <label for="mailformtv">Like TV:</label>
  26.           <input type="checkbox" value="1" name="tv" id="mailformtv" class="csc-mailform-check" />
  27.       </div>
  28.       <div class="csc-mailform-field">
  29.           <input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Send this!" class="csc-mailform-submit" />
  30.       </div>
  31.   </fieldset>
  32. </form>

Funktionserweiterungen für FORM

Drei Extensions von Christian Jul Jensen erweitern FORM um einige dieser aufgezählten Funktionen:

  • julle_formpreview: zeigt nach dem Ausfüllen und vor dem Absenden des Formulars nochmals alle Daten.RepositoryManual
  • julle_formreceipt: Damit kann eine Bestätigungsmail an den Ausfüller versendet werden. RepositoryManual
  • julle_form2csv: speichert die Daten im CSV-Format. RepositoryManual
  • formevalwizard: Damit können Validierungsvorgaben gespeichert werden; das macht es für die Redakteure einfacher, komplexe Validierungen einzusetzen, da sie keine regulären Ausdrücke mehr benötigen. Repository,Manual
  • qforms: ein einfach zu nutzender Formulareditor, der den Redakteuren das Anlegen von Formularen erleichtern soll. Repository]=search&no_cache=1&tx;_terfe_pi1[sword]=qforms, Manual

MailformPlus

Diese Extension wird wohl am häufigsten eingesetzt, um FORM zu ersetzen. Die Handhabung ist recht einfache, das eigentliche Formular wird einfach als HTML-Template angelegt, mit den üblichen Platzhaltern. Es ermöglicht somit ein völlig freies Layout. Seine Features:

  • flexibles Layout mit Templates
  • serverseitige Validierung
  • E-Mail an den Absender
  • Speichern in Datenbank und als Export als CSV-Datei
  • Erweiterbar um JavaScript-Validierung, bis hin zu Ajax.
  • ermöglicht mehrseitige Formulare

Nachteil:

  • man kann keine Felder dynamisch vorbelegen
  • komplexere Validierungen (die über »Feld leer« hinausgehen, sind offensichtlich nicht möglich.

RepositoryManual. Eine schöne Beispielseite mit etwas AJAX ist bei Steffen Kamper zu finden.

Mehrsprachigkeit kann mit mailformplus so realisiert werden:

  1. plugin.tx_thmailformplus_pi1.default.email_htmltemplate = /fileadmin/tmpl/deutsch.html
  2. [globalVar = GP:L=1]
  3.   plugin.tx_thmailformplus_pi1.default.email_htmltemplate = /fileadmin/tmpl/andereSprache.html

Mir ist noch dre_formmaker aufgefallen: offensichtlich extrem mächtig, aber neu und noch im Experimentalstadium. Das Manual ist verwirrend, ausserdem erfordert es mindestens PEAR und noch weitere Bibliotheken. Sollte man aber im Auge behalten … RepositoryManual

Kategorien: Extensions  Kommentare 1
Tags: formular, form

Es ist möglich, die Felder eines Mailformulars mit GET-Variablen vorzubelegen. Das muss allerdings mit Hilfe von TypoScript vorbereitet werden.

Folgendes Beispiel geht davon aus, dass das Formular mit der Variablen ?prod=xx aufgerufen wird. xx enthalt die uid eines News-Eintrags. Anhand der übergebenen uid soll das Formular mit dem Titel des News-Eintrags vorbelegt werden.

  1. tt_content.mailform {
  2.     # Kann auch an anderer Stelle erfolgen -
  3.     # das Register ist global
  4.  

  1.     15=LOAD_REGISTER
  2.     15 {
  3.       # REGISTER hat stdWrap-Eigenschaften, hier cObject
  4.       # Dadurch ist es möglich, das Register mit einer
  5.       # Datenbankabfrage zu füllen, was
  6.       # hier passiert mit Hilfe von RECORDS
  7.       produktname.cObject=RECORDS

  1.       # Contentobjekt RECORDS wird aufgerufen
  2.       produktname.cObject {
  3.           # source: Liste von uid. Mit stdWrap-
  4.           # Eigenschaften.
  5.           # data: stdWrap vom Typ getText
  6.           source.data=GPvar:prod
  7.           # tables: Liste der Tabellen
  8.           tables=tt_news
  9.           # Mit source und tables wird der Datenbank-Inhalt
  10.           # abgefragt.
  11.           # Dieser Inhalt muss jetzt noch gerendert werden.
  12.           # conf.[Tabelle]: Configarray zum Rendern des
  13.           # Inhalts (cObject)
  14.  

  1.           conf.tt_news=TEXT
  2.           conf.tt_news {
  3.               field=title
  4.           }
  5.       }
  6.   }
  7. }
  8. # Nötig, damit der die Variable auch wirklich ersetzt wird
  9. tt_content.mailform.20.data.insertData=1
  10. # Cache muss deaktiviert sein
  11. config.no_cache=1

Im Formular kann so auf den Wert zugegriffen werden:

  1. Name: | *Name=input,40
  2. Firma: |Firma=input,40
  3. Straße: |Strasse=input,40
  4. PLZ/Ort: |Ort=input,40
  5. Telefon: |Telefon=input,40
  6. E-Mail: | *email=input,40| |EMAIL
  7. Produkt: |Produkt=input,40|{register:produktname}
  8. Ihre Nachricht: |Mitteilung=textarea,40,8

Auch ohne TemplaVoila oder einem Template-Switcher können den Redakteuren verschiedene Layouts einfach über eine TypoScript-Konfiguration im Main-Template zur Verfügung gestellt werden:

  1. page = PAGE
  2. page {
  3.     10 = CASE
  4.     10.key.field = layout
  5.     # Standardtemplate
  6.     10.0= TEMPLATE
  7.     10.0.template = FILE
  8.     10.0.template.file = fileadmin/tmpl/standard.html
  9.     10.0.workOnSubpart = DOCUMENT_BODY
  10.     10.0.marks {
  11.         # etc.
  12.     }
  13.     # Variante 1:
  14.     10.1= TEMPLATE
  15.     10.1.template = FILE
  16.     10.1.template.file = fileadmin/tmpl/variante1.html
  17.     10.1.workOnSubpart = DOCUMENT_BODY
  18.     10.1.marks {
  19.         # etc.
  20.     }
  21.     # und so weiter.
  22. }

Standardmäßig sind vier Varianten vorgesehen. Diese können über PageTSconfig anders benannt werden:

  1. #In die Rootseite ins Feld Tsconfig:
  2. TCEFORM.pages {
  3.     layout.altLabels.0 = Standard Vorlage
  4.     layout.altLabels.1 = Zwei Spalter
  5.     layout.altLabels.2 = Drei Spalter
  6.     layout.altLabels.3 = Und so weiter.
  7. }

Falls vier Varianten nicht reichen, können noch weitere ergänzt werden:

  1. TCEFORM.pages{
  2.     layout.addItems {
  3.         4 = eine weitere Variante
  4.         # usw
  5.     }
  6. }

Mit dieser Technik kann sogar das klassische 4-Spalten-Layout im Backend mit TemplaVoila kombiniert werden, von Seite zu Seite individuell und einfach vom Redakteur auszuwählen:

  1. page = PAGE
  2. page {
  3.     10 = CASE
  4.     10.key.field = layout
  5.     # Standardtemplate
  6.     10.0 = USER
  7.     10.0.userFunc = tx_templavoila_pi1->main_page
  8.     # Variante 1:
  9.     10.1= TEMPLATE
  10.     10.1.template = FILE
  11.     10.1.template.file = fileadmin/tmpl/variante1.html
  12.     10.1.workOnSubpart = DOCUMENT_BODY
  13.     10.1.marks {
  14.         # etc.
  15.     }
  16.     # und so weiter.
  17. }

Allerdings muss dann TemplaVoila so konfiguriert werden, dass in der Rubrik »Web« im Backend beide Seiten-Module gezeigt werden: für TemplaVoila und das klassische. (Je nach Seitenlayout muss das passende Modul für die Eingabe der Inhalte verwendet werden). Dazu öffnet man im Extension Manager TemplaVolia und aktiviert die Option »Enable the classic page module«. Aber Achtung: da beide Seitenmodule leicht verwechselt werden können, erstellen ungeübte Redakteure schnell Inhalte in den falschen Modulen, was dazu führen kann, dass Inhalte zwar in TemplaVoila erscheinen sollen, aber dort nicht referenziert und damit letztlich auch nicht gezeigt werden. Diese Technik setzt also Redakteure voraus, die wissen was sie tun.

Falls doch einmal Inhalte nicht in TemplaVoila referenziert werden und damit nicht im Frontend erscheinen, so gibt es unter »Funktionen« den Assistenten »Referenziere unbenutzte Inhaltselement (TemplaVolia)«. Damit werden alle Inhaltselement in TemplaVoila-Spalten eingefügt – leider oft in die falschen. Aber immerhin sind sie jetzt da und und in der aktuellen Version von TemplaVoila können Inhaltselemente leicht per Drag und Drop verschoben werden, so dass sich der Aufwand in Grenzen hält.

Besuchen Sie mich auf Google+