Samstag, 10. Dezember 2011

FS Contact Form individuell gestalten

Meine eigene Aufgabenstellung war das WordPress Plugin Fast Secure Contact Form dazu zu bringen ein Kontaktformular nach meinen Wünschen darzustellen: vordefinierte Werte in den Inputfelder, die auf Klick verschwinden und die Felder sollen individuell kleiner gemacht werden. Hintergrund ist, dass ich ein Kontaktformular für einen Sidebar erstellen wollte, das möglichst wenig Platz benötigt, um nicht zuviel des sichtbaren Bereiches zu verschwenden. Das Formular wird dann mittels Shortcode einfach in ein Text-Widget der WordPress Sidebar integriert.


Da es ein indivuelles Formular ist benutze ich die Extra Fields.  Folgende Bereich habe ich verändert:

  1. Das Label wollte ich ja nicht angezeigt haben, muss es aber beim Extra Field angeben, da hiermit das Feld "aktiviert" wird.
  2. bei Default text kann man den Text eingeben, der im Inputfeld vordefiniert ausgegeben wird.
  3. Bei Attributes kann man HTML-Attribute hinterlegen, hier onfocus="this.value=''" um den vordefinierten Wert fürs Inputfeld beim Klick verschwinden zu lassen.
  4. Bei Label CSS habe ich dann das Label einfach via display: none ausgeblendet.
  5. Bei Inupt CSS kann man dann noch das Inputfeld seinen Wünschen anpassen.
  6. Da durch das Ausblenden des Labels scheint es die Inputfelder inline darstellen zu wollen. Ich habe es über die Breitendefinition gelöst, die ich einfach so klein gemacht habe damit das nächste Inputfeld in eine neue Zeile springt.

Keine Kommentare:

Kommentar veröffentlichen