Dieser Artikel erklärt, wie Sie die Design-Tools in Capture Forms nutzen können, um Ihre Formulare anzupassen.
Schritt 1: Zugriff auf „Capture Forms“
Melden Sie sich zunächst bei Ihrem Pabau-Konto an, indem Sie Ihre Anmeldedaten verwenden. Navigieren Sie dann zum Bereich Marketing im linken Seitenmenü und klicken Sie, um ihn zu erweitern. Die Registerkarte „Capture Forms“ wird angezeigt.
Schritt 2: Zugriff auf den Formular-Editor
Um auf den Formular-Editor zuzugreifen, können Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten. In diesem Fall bearbeiten wir ein vorhandenes Formular, indem wir zur Registerkarte „Forms“ oben links navigieren.
Wählen Sie die Option „Update“, um mit der Bearbeitung Ihres Formulars fortzufahren.
Schritt 3: Gestalten Sie Ihr Formular
Nutzen Sie das Panel auf der rechten Seite, um auf die Designoptionen des Formulars zuzugreifen und diese anzupassen.
Schritt 4: Design-Tools verwenden
Die wichtigsten Tools, die Capture Forms bietet, sind:
- Google Fonts - Wählen Sie Google-Schriftarten mit Live-Vorschau aus einer Dropdown-Liste aus.
- Stock-Bilder - Fügen Sie Ihrem Formular Stock-Bilder hinzu.
- Web-Verlaufsauswahl - Hier finden Sie die Verlaufsauswahl, mit der Sie Ihren eigenen Verlauf erstellen können (linear, radial, Farben und Farbverläufe auswählen und mehr) oder aus über 100 fertigen, ansprechenden Web-Verläufen wählen können.
- Subtile Muster - Wählen Sie aus Hunderten von subtilen Mustern, die von Toptal für Sie ausgewählt wurden – schöne Texturen für Ihre Formulare.
Schritt 5: Design-Komponenten
Im Panel „Design“ können Sie das Erscheinungsbild Ihres Formulars anpassen, indem Sie Stile auf verschiedene Teile davon anwenden. Jeder Abschnitt entspricht einer bestimmten Formularkomponente oder Gruppe von Komponenten:
-
Global: Bezieht sich auf den gesamten Formular-Container. Dies steuert den Abstand, den Hintergrund und das Layout des gesamten Formularbereichs.
-
Form: Dies ist das Formularelement selbst. Standardmäßig hat es keinen Innenabstand, damit es sich beim Einbetten in externe Websites gut einfügt.
-
Form Group: Eine Gruppe, die das Label, das Eingabefeld, den Hilfetext und die Validierungsnachricht umfasst. Die Gestaltung dieses Abschnitts beeinflusst das Layout und den Abstand dieser Elemente zusammen.
-
Form Control: Betrifft die Eingabefelder (z. B. Textfelder, Dropdowns usw.), in die Benutzer Informationen eingeben.
-
Button: Bezieht sich auf die Absende-Schaltfläche des Formulars. Standardmäßig folgt sie dem Bootstrap-Primary-Button-Stil, aber Sie können ihr Erscheinungsbild hier anpassen.
-
Label: Gestaltet die Labels neben den Eingabefeldern. Diese sind üblicherweise an den Formularfeldern ausgerichtet und verwenden Bootstrap-Control-Label-Klassen.
-
Placeholder: Ermöglicht es Ihnen, den Stil des Platzhaltertexts innerhalb von Eingabefeldern anzupassen.
-
Heading: Wird verwendet, um alle Überschriften, die Sie Ihrem Formular hinzugefügt haben, für die visuelle Hierarchie oder Abschnittsbildung zu gestalten.
-
Paragraph: Gestaltet jeglichen Absatztext, den Sie hinzugefügt haben, um Kontext oder Erklärungen innerhalb Ihres Formulars zu geben.
-
Help Text: Steuert das Erscheinungsbild des Hilfetextes, der Anleitung zum Ausfüllen bestimmter Felder bietet.
-
Form Steps: Dieser Abschnitt erscheint, wenn Sie ein Seitenumbruch-Feld hinzugefügt haben, das mehrstufige Formulare ermöglicht. Sie können das Erscheinungsbild jedes Schrittanzeigers anpassen.
-
Form Alerts: Gestaltet die Erfolgs- oder Fehlermeldungen, die nach dem Absenden eines Formulars erscheinen.
-
Field Validation: Passen Sie an, wie Fehlerzustände (wie ungültige Eingaben) in Ihren Formularfeldern angezeigt werden.
-
Other Components: Bietet Gestaltungsoptionen für benutzerdefinierte Checkboxen, benutzerdefinierte Radiobuttons, reCAPTCHA, Signaturfeld und Fortschrittsbalken — was sowohl die Funktion als auch die optische Wirkung verbessert.
Um die Details zu bearbeiten, klicken Sie auf jede Registerkarte, um sie zu erweitern. Dadurch werden die entsprechenden, oben beschriebenen Designoptionen angezeigt.
Schritt 6: Design kopieren & einfügen
Wenn Sie zuvor schon ein Formular erstellt haben, können Sie mit den Funktionen „Design kopieren“ und „Design einfügen“ CSS-Stile schnell von einem Formular auf ein anderes übertragen, indem Sie auf die drei Punkte oben rechts im Design-Panel klicken. Sie können das Design jederzeit mit einem einzigen Klick auf die Standardstile zurücksetzen.
Schritt 7: Änderungen speichern
Sobald Sie Ihr Formular angepasst haben, klicken Sie auf die Schaltfläche „Formular speichern“ am unteren Rand der Seite, um den Vorgang abzuschließen.
Nachdem Sie „Formular speichern“ ausgewählt haben, erscheint ein Modalfenster mit 4 Optionen:
- Formularbearbeitung fortsetzen
- Zu den erweiterten Formulareinstellungen gehen
- Formular teilen
- Zum Formular-Manager gehen
Wählen Sie in diesem Fall die 4. Option, um den Vorgang abzuschließen.
HINWEIS: Wenn Sie das Modalfenster schließen, ohne eine dieser drei Optionen auszuwählen, erstellen Sie beim erneuten „Speichern“ ein weiteres Formular, statt das bereits erstellte zu bearbeiten. Diese Option kann nützlich sein, wenn Sie schnell mehrere ähnliche Formulare erstellen möchten.
Indem Sie diese Schritte befolgen, können Sie Ihre Formulare passend zu Ihrer Marke gestalten.
Für weitere Anleitungen lesen Sie die untenstehenden verwandten Artikel, wählen Sie weitere Anleitungen aus oder verwenden Sie die Suchleiste oben auf der Seite. Diese Anleitungen helfen Ihnen, das Beste aus Ihrem Pabau-Konto herauszuholen.
Um Ihr Pabau-Konto vollständig zu nutzen und zu verstehen, empfehlen wir Ihnen außerdem, die zusätzlichen Anleitungen und Ressourcen der Pabau Academy zu erkunden. Diese bietet ausführliche Videotutorials und Lektionen für eine ganzheitliche Lernerfahrung, die Sie mit den wesentlichen Fähigkeiten ausstattet, um mit Pabau erfolgreich zu sein.