Wufoo-Formular - CSS-Erweiterung anwenden

Wufoo-Formulare sehen ohne Styling aus wie ... ähm ... „normale“ Formulare :-)

Damit Sie Ihre Website mit Ihren Wufoo-Formularen nicht nur funktional, sondern auch optisch bereichern, haben wir für Sie eine CSS-Erweiterung geschrieben, mit der Sie das Bootstrap-Theme für Ihr Formular anwenden. Außerdem haben wir schicke Buttons für Sie gestaltet, mit denen Ihr Wufoo-Formular noch klicktippiger aussieht. ;-)

Mit diesen beiden kleinen Änderungen wirkt Ihr Formular sehr viel professioneller und Sie heben sich deutlich von der Masse ab.

In diesem Beitrag möchten wir Ihnen gern zeigen, wie Sie die Klick-Tipp-Styles mit wenigen Mausklicks für Ihr Wufoo-Formular anwenden können. Nur zwei Schritte sind notwendig:

1. Wählen Sie einen passenden Button aus

Suchen Sie über die beiden folgenden Drop-down-Menüs einen passenden Button für Ihr Formular aus. Wenn Sie sich für die Option „Wufoo-Button-Text“ entscheiden, dann erscheint auf dem Button der Text, der in Wufoo für Ihr Formular festgelegt wurde.

Ihr Button wird dann direkt in der Vorschau angezeigt:

2. Verknüpfen Sie Ihr Wufoo-Formular mit Ihrem Klick-Tipp-Theme

Kopieren Sie die folgende URL-Adresse in Ihre Zwischenablage. (Klicken Sie dazu mit der rechten Maustaste in das Feld und wählen Sie anschließend die Option „Kopieren“.)

 

Loggen Sie sich nun in Ihr Wufoo-Konto ein. Klicken Sie oben auf der Übersichtsseite auf den Reiter „Themes“.

Wufoo Theme Menü

Dadurch gelangen Sie zum „Theme Designer“. Klicken Sie in dem Menü „Properties“ auf die Option „Advanced“.

Wufoo Theme Advanced

Fügen Sie in das daraufhin erscheinende Eingabefeld die URL-Adresse zu Ihrem gewählten Klick-Tipp-Theme ein, die Sie gerade in die Zwischenablage Ihres Computers kopiert haben.

Wufoo Theme einbinden

Klicken Sie auf den Button „Save Theme“.

Wufoo Theme speichern

Geben Sie Ihrem soeben angelegten Theme einen Namen.

Wufoo Theme Name

Klicken Sie nun auf den Reiter „Forms“.

Wufoo Theme Menü Forms

Bewegen Sie Ihre Maus auf der Übersichtsseite über das Formular, das Sie mit Ihrem Theme verknüpfen wollen, und wählen Sie im rechten Drop-down-Menü Ihr neu angelegtes Theme aus.

Wufoo Theme auswählen

Damit haben Sie Ihr Wufoo-Formular mit Ihrem ausgewählten Klick-Tipp Theme verbunden. Schauen Sie sich Ihr Formular auf Ihrer Webseite an. Schön, oder? :-)

Für Profis: Erweitern Sie Ihr Klick-Tipp-Theme

Falls Sie Änderungen an der Gestaltung unserer zur Verfügung gestellten Klick-Tipp-Themes vornehmen möchten, können Sie dies sehr einfach mittels CSS tun. Importieren Sie hierzu die CSS-Datei des Klick-Tipp-Themes, welches Sie erweitern möchten. Dies können Sie über den Befehl „@import“ erreichen.

Wufoo Theme auswählen

Fügen Sie der Datei beliebige weitere CSS-Attribute hinzu.

War dieser Artikel hilfreich?