Zum Inhalt springen

Frage zum Standard-Kontaktformular

Erstellt am 16. November 2008 · 12 Antworten · letzte Antwort am 29. Dezember 2008

Tags: HTML & CSS, Frage

andre99 ·

Hallo!

Für bevorstehende TYPO3-Schulungen hätte ich gern von Euch noch einmal ein paar theoretische Erläuterungen.

Wenn ich ein Standard-Kontaktformular einbaue, dann sieht das erst einmal recht verschroben aus.

Also kommt ein wenig TypoScript-Code rein:

tt_content.mailform.20.stdWrap.wrap = <table> |</table>
tt_content.mailform.20.layout=<tr><td>###LABEL###</td> <td>###FIELD###</td></tr>

damit das ganze Form annimmt. Und das klappt auch.
Doch warum eigentlich?? Was machen diese CodeZeilen hintergründig??
Laut ObjectBrowser ist doch bereits alles in eine Tabelle gehüllt.

tt_content.mailform.20.stdWrap.wrap =
<table border="0" cellspacing="1" cellpadding="1" class="csc-mailform">  | </table>

tt_content.mailform.20.layout =
<tr><td class="csc-form-labelcell">###LABEL###</td><td class="csc-form-fieldcell">###FIELD###</td></tr>

In der Hoffnung anderen das vernünftig erklären zu können, bin ich für jede Erläuterung von Euch dankbar.

Viele Grüße
Andre

einpraegsam.​net ·

Also gerade in einer Schulung (Man ist ja doch irgendwo ein Vorbild) sollte man keine Tabellen zum Designen eines Formulare verwenden.
Dafür gibt es CSS. Einmal per CSS das Design für Formulare einstellen und dann können deine Schulungsteilnehmer Formulare bis zum Umfallen erstellen.

andre99 ·

Hallo Einprägsam!

Danke für die schnelle Antwort! Die Idee gefällt mir gut.
Doch leider kann ich sie nicht umsetzen. :o

Ob Du wohl ein paar mehr Zeilen posten könntest??
Vielleicht ein konkretes Beispiel??

Unabhängig davon wäre ich für eine Erläuterung dessen, was
die oben angegebenen Codezeilen hintergründig machen sehr dankbar!

Vielen dank im voraus auch im Namen meiner Schulungsteilnehmer
und der Hoffnung auf weitere Verbreitung von TYPO3 :p

Andre

andre99 ·

Hay Einprägsam!

Ne Du , das stimmt aber nicht.
Ich nehme immer css_styled_content.

Aber ohne das

tt_content.mailform.20.layout=<tr><td>###LABEL###</td> <td >###FIELD###</td></tr>
tt_content.mailform.20.stdWrap.wrap = <table> |</table>

ist da nichts spaltengerecht.
Ich gewähre Dir gern Einblick!!!!
Wenn Du mir nur erklären würdest warum die Codierung erforderlich ist?

Viele Grüße
Andre

andre99 ·

Hay Einprägsam!

Also, ich weiss jetzt nicht ganz genau was Du meinst.
Beim Standard-Mail-Formular kann ich im Backend den Html-Code nicht sehen.
Der über den Browser einsehbare Quelltext-Abschnitt sieht so aus:

	<!--  CONTENT ELEMENT, uid:17/mailform [begin] -->
		<a id="c17"></a>
		<!--  Header: [begin] -->
			<div class="csc-header csc-header-n1"><h4 class="csc-firstHeader">Kontaktformular</h4></div>
		<!--  Header: [end] -->
			<form action="24.0.html" id="mailform" name="mailform" enctype="multipart/form-data" method="post" onsubmit="return validateForm('mailform','name,Name%2A%3A,email,Email%2A%3A','','','')"><div style="display:none;"><input type="hidden" name="html_enabled" id="mailformhtml_enabled" value="1" /><input type="hidden" name="subject" id="mailformsubject" value="Nachricht aus Kontaktformular" /><input type="hidden" name="locationData" value="6:tt_content:17" /></div>
		<!--  Mail form inserted: [begin] -->
			<fieldset class="csc-mailform"><div class="csc-mailform-field"><label for="mailformname">Name*:</label> <input type="text" name="name" id="mailformname" size="40" value="" /></div><div class="csc-mailform-field"><label for="mailformemail">Email*:</label> <input type="text" name="email" id="mailformemail" size="40" value="" /></div><div class="csc-mailform-field"><label for="mailformTelefon">Telefon</label> <input type="text" name="Telefon" id="mailformTelefon" size="40" value="" /></div><div class="csc-mailform-field"><label for="mailformnachricht">Ihre Nachricht</label> <textarea name="nachricht" id="mailformnachricht" cols="40" rows="5">
</textarea></div><div class="csc-mailform-field"><label for="mailformkontakt">Kontakt erbeten</label> <select name="kontakt" id="mailformkontakt" size="1"><option value="telefonisch">telefonisch</option><option value="per E-Mail">per E-Mail</option><option value="kein Kontaktwunsch">kein Kontaktwunsch</option></select></div><div class="csc-mailform-field"> <input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Senden" class="csc-mailform-submit" /></div></fieldset>
		<!--  Mail form inserted: [end] -->
			</form>
	<!--  CONTENT ELEMENT, uid:17/mailform [end] -->

Und das ist der Standard-Inhalt des Mail-Formulars im Backend

Name*: | *name=input,40
Email*: | *email=input,40
Telefon | Telefon=input,40

Ihre Nachricht | nachricht=textarea,40,5
Kontakt erbeten | kontakt=select | telefonisch, per E-Mail, kein Kontaktwunsch

 | formtype_mail=submit | Senden
 | html_enabled=hidden | 1
 | subject=hidden | Nachricht aus Kontaktformular

Das ist der Standard-Eintrag im Object-Browser:

 <tr><td class="csc-form-labelcell">###LABEL###</td><td class="csc-form-fieldcell">###FIELD###</td></tr>

und ohne nachfolgenden Eintrag im TypoScript

tt_content.mailform.20.layout=<tr><td>###LABEL###</td> <td>###FIELD###</td></tr>
tt_content.mailform.20.stdWrap.wrap = <table> |</table>

ist das Ergebnis verschoben und nicht spaltengerecht.
Warum???
#paralyzed#
Viele Grüße
Andre

andre99 ·

Hallo einprägsam!

Warum nimmst du nicht CSS und machst aus dem "verschobenen" Layout ein vernünftiges Layout?

Wie ich schon sagte: ich weiss nicht wie?? #paralyzed#
Hast Du nicht ein wenig Code für mich??

Doch, wenn niemand Lust hat sich die Arbeit zu machen und mir
hier etwas vorzuschreiben, dann wäre ich auch mit einer simplen
Erklärung meiner Frage, warum die Codierungen im TypoScript erforderlich sind
obwohl die Tabelle bereits im Objectbrowser stehen, zufrieden.

D.h. eigentlich wäre mir die Erklärung noch viel wichtiger.
Es geht mir nur darum es zu verstehen um es erklären zu können.
Vielen Dank im voraus.

Viele Grüße
Andre

just2b ·

Hallo,

vielleicht haben hier weniger Leute lust, weil es eben CSS-Stylesheets für TYPO3-Mailform wie Sand an Meer gibt, zB hier > die passende Kategorie übrigens ... /t/extensions > 1. Thread

georg

andre99 ·

Hallo Georg!

Danke vielmals. Der Link ist super!!
Zu blöd, den ich den übersehen habe. :o

Dennoch wurmt mich nach wie vor meine erste Frage:
Warum erscheint es denn nicht automatisch spaltengerecht
wo es doch im ObjectBrowser standardmäßig so drin steht.

tt_content.mailform.20.stdWrap.wrap =
<table border="0" cellspacing="1" cellpadding="1" class="csc-mailform">  | </table>
 
tt_content.mailform.20.layout =
<tr><td class="csc-form-labelcell">###LABEL###</td><td class="csc-form-fieldcell">###FIELD###</td></tr>

Wie soll ich das meinen Schulungsteilnehmern erklären?
Du bist doch so ein alter TYPO3-Hase, Georg, weisst Du denn keine Antwort??

Viele Grüße
Andre

Michaelh74 ·

Das ist noch ein Relikt aus content (default). Darauf basiert nämlich die CSS Styled Content. Priorität hat hier aber in jedem Fall die CSS Variante. Die Tabellen-Lösung kommt glaub ich bei T3 Version 3.8 und kleiner zum Einsatz.

Kuck Dir am besten mal im Template-Analyse das TS Setup von css styled content an. Dann wird Dir das sicher klar...

Gruß
Michael

andre99 ·

Hay Michael!

Danke vielmals mit dem Hinweis zum TemplateAnalyzer.

Wenn ich auch das Gefühl habe, als wenn da mal jemand
aufräumen sollte im TemplateAnalyzer, so ist es mir
jetzt doch zumindest ein wenig klarer.

Viele Grüße
Andre