Formular-Design

Ihr Formular soll nach Ihnen aussehen. Nicht nach dem Werkzeug, mit dem es gebaut wurde.

Die meisten Funnel-Baukästen erkennt man am Formular. Gleiche Kacheln, gleiche Rundungen, gleicher Knopf unten rechts. Für den Anbieter ist das praktisch. Für Ihre Marke weniger, und für eine Agentur, die im Kundenauftrag baut, ist es oft der Grund, das Werkzeug gar nicht erst vorzuschlagen. In asksteps gibt es zwei Wege da heraus, und Sie können beide im selben Formular gehen.

Beide sind in jedem Tarif drin, auch im kostenlosen.

Ablauf

Wie weit wollen Sie gehen?

  1. 01

    Meistens reicht Einstellen

    Farben, Schrift, Eckenradien, Rahmenstärke, Schatten, Breite, die Anordnung der Antworten, die Fortschrittsanzeige. Alles über Farbwähler und Auswahlfelder, mit Sofortvorschau. Dreizehn Themes liegen als Ausgangspunkt bereit; was Sie daraus machen, speichern Sie als eigenes.

  2. 02

    Und wenn nicht, schreiben Sie es selbst

    Für alles, wofür es kein Formularelement gibt, ziehen Sie einen freien Abschnitt ins Formular und schreiben HTML und CSS hinein. Preistabelle, Vergleichsraster, Hinweiskasten, eine Eingabemaske mit eigenem Weiter-Knopf.

  3. 03

    Beides im selben Formular

    Der freie Abschnitt kennt die Farben Ihres Themes. Wechseln Sie das Theme, wechselt er mit, statt als andersfarbiger Kasten stehen zu bleiben. Klingt nach Kleinigkeit. Ist aber der Unterschied zwischen selbst gebaut und sieht selbst gebaut aus.

  4. 04

    Beim nächsten Kunden wieder

    Ihr Theme lässt sich als Datei ausgeben und in einem anderen Konto einlesen. Wer für mehrere Auftraggeber baut, hat nach ein paar Projekten eine kleine Bibliothek, statt jedes Mal die Farbwerte aus dem Styleguide abzutippen.

In Betrieb

Theme-Editor

Zwei Formulare aus asksteps sehen nicht nach asksteps aus.

Farben, Schrift, Ecken, Rahmen, wie die Antworten liegen, ob eine Fortschrittsanzeige läuft, ob ein Bild im Hintergrund steht. Alles im Editor, mit der Vorschau daneben. Dreizehn Themes sind fertig dabei. Ihr eigenes speichern Sie ab und holen es beim nächsten Kunden wieder heraus.

  • Antworten untereinander oder als Kacheln, mit Symbol oder ohne
  • Fortschritt als Balken, Punkte, Segmente oder gar nicht
  • Eine Frage mit acht Antworten darf anders aussehen als der Rest
asksteps studio — theme-editor
EIN FUNNEL · DREI THEMES · DIESELBEN FRAGENBeratungBewerbungSonstigesWeiterHELL · LISTE · KARTEBeratungAngebotSupportPresseWEITERDUNKEL · RASTER · PUNKTEBeratungBewerbungSonstigesWeiterPAPIER · BOGEN · SEGMENTE Farben, Schrift, Radien, Anordnung, Fortschritt — eingestellt, nicht programmiert.

Eigenes HTML

Wo der Baukasten aufhört, schreiben Sie selbst weiter.

Ein Abschnitt im Formular, den Sie in HTML und CSS selbst schreiben. Preistabelle, Vergleichsraster, Hinweiskasten, eine Eingabemaske, die genau so aussehen muss und nicht anders. Was Sie an Feldern hineinbauen, ist echt: Die Antworten landen im Lead wie alle anderen auch.

  • Ein importiertes PDF-Formular frei umbauen, ohne die Zuordnung zu verlieren
  • Der Weiter-Knopf sitzt da, wo Sie ihn hinsetzen
  • Ohne JavaScript, und ohne dass Ihr Formular bei Google Schriften nachlädt
eigenes html — geschrieben, gerendert, erfasst
EIGENES HTML<style> .zeile { display:grid }</style><label>Vorname</label><input data-xm-id="Vorname_1" data-xm-required><input data-xm-qst="Wunsch- termin" type="date"><button data-xm-next> Weiter</button>SO SIEHT ES DER BESUCHERVORNAMENACHNAMEWUNSCHTERMINGut zu wissenWir melden uns binnen 24 Stunden.WeiterERKANNTE FELDERvornamePflicht→ Vorname_1 (PDF)wunschterminDatum→ Frage im LeadKEIN JAVASCRIPTKEIN FREMD-REQUEST
Funktionen

Was das praktisch heißt

Niemand sieht, womit es gebaut wurde

Farbwelt, Schrift, Kantenschärfe, Anordnung: austauschbar. Zwei Formulare aus demselben Konto müssen einander nicht ähneln, und ab dem Starter-Tarif verschwindet auch der Hinweis „Powered by asksteps" unter dem Formular.

Ohne eine Zeile Code

Der Theme-Editor deckt den weitaus größten Teil ab. HTML brauchen Sie erst, wenn Ihnen etwas fehlt, das kein Formularelement abbildet.

Ein Design pro Kunde

Das Erscheinungsbild hängt am Formular, nicht am Konto. Ein Team kann für mehrere Auftraggeber parallel arbeiten, jeder in seinem Corporate Design und auf seiner eigenen Domain.

Keine fremden Server

Eigene Schriften müssen bei Ihnen liegen oder eingebettet sein; ein Verweis auf einen fremden Schriftserver fliegt raus. Ihr Formular lädt nichts nach, was Sie nicht kennen. Die Frage kommt in Ausschreibungen öfter, als man denkt.

Auf dem Telefon geprüft

Die Vorschau zeigt dieselbe Ausgabe, die der Besucher bekommt. Was dort passt, passt auch auf einem schmalen Bildschirm.

Kein Aufpreis fürs Gestalten

Weder Theme-Editor noch HTML-Abschnitt hängen an einem höheren Tarif. Bei manchem Wettbewerber gibt es eigenes HTML erst ab der Geschäftskunden-Stufe.

Häufige Fragen

Fragen zur Gestaltung

Brauche ich HTML-Kenntnisse?

Für den Theme-Editor nicht. Das sind Farbwähler, Schieberegler und Auswahlfelder, und die Vorschau daneben zeigt jede Änderung sofort. HTML brauchen Sie erst, wenn Sie einen Abschnitt bauen wollen, den es als Formularelement nicht gibt.

Kann ich das Design des ganzen Funnels ändern oder nur einzelner Seiten?

Das Theme gilt für den ganzen Funnel oder das ganze Formular: Fragen, Antworten, Schaltflächen, Fortschritt. Einzelne Fragen dürfen abweichen. Eine Frage mit acht Antworten funktioniert oft besser als Raster, während der Rest Liste bleibt.

Kann ich JavaScript einbinden?

Nein, und das ist Absicht. Ihr Formular läuft eingebettet auf fremden Seiten. Skriptfähiges Fremd-HTML wäre dort eine dauerhafte Sicherheitslücke gegenüber jedem Besucher. Wo andere Anbieter eigenes JavaScript zulassen, geben sie dieses Risiko an Sie weiter.

Gilt das Design auch für die WordPress-Einbindung?

Ja. Ob Sie das Formular per Einbett-Schnipsel, über das WordPress-Plugin oder auf einer eigenen Subdomain ausspielen: Es ist dasselbe Widget mit demselben Theme.

Was passiert mit meinem Design, wenn asksteps sich ändert?

Ein Theme ist ein gespeicherter Datensatz, kein Zustand der Oberfläche. Felder, die Sie leer lassen, erben ihre Werte. Deshalb sieht ein Formular, das Sie heute anlegen, auch nach einer Erweiterung noch so aus, wie Sie es eingestellt haben.

Mehr zum Thema

Formular-Design im Einzelnen

Bauen Sie ein Formular, das nach Ihnen aussieht

Kostenloses Konto anlegen und das erste Theme einstellen. Dauert kürzer als das Lesen dieser Seite.

Jetzt Konto anlegen