Stylesheet für tabellenloses Kontaktformular

Hallo zusammen,

"Tutorial" ist in diesem Zusammenhang wohl etwas übertrieben, nennen wir es lieber "Snippet-Sammlung". :D

Ich stand immer wieder auf Kriegsfuß mit meinen Stylesheets, wenn es darum ging, ein tabellenloses Kontaktformular zu gestalten, wollte aber der Versuchung widerstehen, schon wieder auf die bequemere Tabellen-Version auszuweichen.

Also habe ich ein Stylesheet zusammengestellt, das (hoffentlich) auf gängigen aktuellen Browsern einigermaßen identisch ausschaut. Bei der Gestaltung habe ich mich dabei von einem Kontaktformular aus meiner alten WordPress-Installation inspirieren lassen. So soll es ausschauen:

Anhang 1776

Etwas problematisch ist dabei die Anordnung der Fehlermeldungen, wenn die Formularüberpüfung anschlägt. Dies ist aber mit Änderungen in zwei Templates in den Griff zu kriegen:

Anhang 1777

Damit das Ergebnis so aussieht, müsst Ihr zuerst zwei neue Templates anlegen: form_widget.tpl und form_captcha.tpl. Dort muss die Reihenfolge der Generierung von Label, Error-Message und Input-Feld verändert werden.

form_widget.tpl:

PHP-Code:

---

<?php if (!$this->tableless): ?>
  <tr class="<?php echo $this->rowClass; ?>">
    <td class="col_0 col_first"><?php echo $this->generateLabel(); ?></td>
    <td class="col_1 col_last"><?php echo $this->generateWithError(); ?></td>
  </tr>
<?php else: ?>
  <?php echo $this->generateWithError(); ?>
    <?php echo $this->generateLabel(); ?><br />
<?php endif; ?>

---

form_captcha.tpl:

PHP-Code:

---

<?php if (!$this->tableless): ?>
  <tr class="<?php echo $this->rowClass; ?>">
    <td class="col_0 col_first"><?php echo $this->generateLabel(); ?></td>
    <td class="col_1 col_last"><?php echo $this->generateWithError(); ?> <?php echo $this->generateQuestion(); ?></td>
  </tr>
<?php else: ?>
  <?php echo $this->generateWithError(); ?>
  <?php echo $this->generateLabel(); ?> 
  <?php echo $this->generateQuestion(); ?><br />
<?php endif; ?>

---

Dann geht es ans Stylesheet. Damit es funktioniert, muss für dieses Beispiel dem Kontaktformular die ID "contact_form" vergeben werden.

Code:

---

input.text,textarea{padding-right:2px;padding-left:2px;}
input.submit{cursor:pointer;}
form#contact_form{margin:10px 25px;padding:10px;}
#contact_form fieldset{margin-bottom:25px;padding:10px 25px;border:1px solid #cccccc;}
#contact_form legend{padding:2px 5px;background-color:#cccccc;font-weight:bold;color:#ffffff;}
#contact_form label{width:100px;float:left;display:block;margin:5px 0 0;padding:0;text-align:right;}
#contact_form select,#contact_form input,#contact_form textarea{width:250px;display:inline;margin:5px 0 0 10px;border:1px solid #cccccc;}
#contact_form textarea{height:200px;overflow:auto;}
#contact_form br{clear:both;}
#contact_form input.captcha{width:25px;}
#contact_form input.submit{width:75px;margin-top:25px;margin-right:auto;margin-left:auto;padding:1px;text-align:center;background-color:#ffffff;border:1px solid #cccccc;}
#contact_form input[type="hidden"]{display:none;}
#contact_form p.error{margin-top:10px;margin-left:110px;padding-left:25px;background:url("tl_files/layout/icons/error.png") left top no-repeat;font-style:italic;color:#ff0000;}
.mandatory{font-weight:bold;color:#505050;}

---

Die Hintergrundgrafik für die Fehlermeldung stammt aus dem Silk icon set 1.3 von Mark James und kann natürlich gegen eine eigene Grafik getauscht werden.

Damit die einzelnen Blöcke ("erforderlich", "optional" ...) des Formulars auch wie abgebildet dargestellt werden, muss man sie in den sogenannten Fieldsets gruppieren. Diese werden um die gewünschten Eingabefelder gelegt, wie man es z.B. vom Accordion kennt. Also je ein Start- und ein Endelement (was gerne vergessen wird).

Ich hoffe, diese kleine Sammlung ist hilfreich für Euch. Natürlich erhebe ich keinen Anspruch auf Fehlerfreiheit, daher sind Feedback oder Verbesserungsvorschläge stets willkommen! ;)

Wenn Ihr z.B. eine Lösung habt, die das Select-Feld in allen Browsern gleicht breit darstellt, immer her damit! :D

Viele Grüße
Alex