Dein Kontaktformular gestalten

Nachdem du ein Kontaktformular hinzugefügt hast, kannst du das Aussehen anpassen. Dieser Ratgeber zeigt dir, wie du den Stil, die Farben und das Layout deiner Website-Formulare ändern kannst.

Der Formularblock enthält verschiedene Designstile für Formulare, aus denen du wählen kannst:

1. Wähle in der linken oberen Ecke des Editors die Option Listenansicht aus. Das Icon besteht aus drei waagerechten Linien übereinander.
2. Suche hier den Formularblock und klicke darauf:

3. Klicke in den Blockeinstellungen in der rechten Seitenleiste auf den Tab Stile (dargestellt durch ein schwarz-weißes Kreis-Icon):

4. Wähle einen Stil aus:
   • Standard zeigt die Feldnamen außerhalb der Eingabefelder ohne Animation an.
   • Animiert zeigt die Feldnamen in den Eingabefeldern sowie eine kurze Animation an und hebt das Feld hervor, auf das ein Besucher klickt.
   • Bei Umrissen werden die Feldnamen in den Eingabefeldern, eine kurze Animation und ein Umriss um die Formularblock-Einstellungen angezeigt.
5. Klicke am Anfang des Bildschirms auf den Button Speichern.

Platzhaltertext ist Beispieltext, der in einem Formularfeld angezeigt werden kann, bevor der Besucher darauf klickt. Er verschwindet, sobald der Besucher klickt, um seinen eigenen Text einzugeben. Es kann nützlich sein, deinen Besuchern ein Beispiel für die Art von Inhalten zu zeigen, die sie in das Formular eingeben sollen.

So fügst du Platzhaltertext zu einem Kontaktformular hinzu:

1. Klicke auf ein beliebiges Feld in deinem Formular.
2. Öffne die Blockeinstellungen in der Seitenleiste.
3. Scrolle nach unten zur Einstellung Platzhaltertext.
4. Gib deinen Platzhaltertext in das dafür vorgesehene Feld ein. Er wird dann im Formularfeld angezeigt.
5. Klicke am Anfang des Bildschirms auf den Button Speichern.

Standardmäßig füllen die Felder in einem Formular die Breite des Formularcontainers aus. Du kannst die Breite einzelner Felder wie folgt ändern:

1. Klicke auf ein beliebiges Feld in deinem Formular.
2. Öffne die Blockeinstellungen in der Seitenleiste.
3. Scrolle nach unten zur Einstellung Breite und setze die Breite auf 25 %, 50 %, 75 % oder 100 %.
   • Wenn zwei Felder nebeneinander angezeigt werden sollen, setze jedes auf 50 %. Wenn Platz ist, können mehrere Felder in einer Zeile angezeigt werden.
4. Klicke am Anfang des Bildschirms auf den Button Speichern.

Du kannst festlegen, wie die Farbe und der Text für jedes einzelne Formularfeld angezeigt werden sollen, oder dass für jedes Formularfeld dieselben Farb- und Texteinstellungen verwendet werden.

Wenn du auf ein einzelnes Formularfeld klickst, enthalten die Blockeinstellungen den Umschalter Stil der Felder synchronisieren. Wenn diese Option auf „EIN“ gesetzt ist, wirken sich Änderungen, die du an diesem Feld vornimmst, auf alle Felder aus. Schalte per Klick auf die AUS-Position, wenn du nur die Einstellungen für dieses Feld ändern möchtest:

Du kannst die folgenden Änderungen über alle Felder hinweg synchronisieren, um ein einheitliches visuelles Erlebnis im gesamten Formular zu gewährleisten:

• Farbe: definiert Farben für:
  • Beschriftungstext: der Text, der über dem Formularfeld angezeigt wird.
  • Feldtext: der (optionale) Platzhaltertext sowie der Eingabetext in einem Feld.
  • Feldhintergrund: der Hintergrund des Eingabebereichs eines Formularfelds.
  • Rahmen: der Rahmen um das Formularfeld.
• Eingabefeld-Stile: Lege die Textgröße, Zeilenhöhe und Rahmenstile für das Feld fest.
• Beschriftungsstile: Lege die Textgröße und Zeilenhöhe für Feldbeschriftungen fest.

So passt du die Farben des Formulars an:

1. Öffne die Listenansicht und suche den Formularblock und die einzelnen Felder darin:

2. Wenn der gesamte Formularblock ausgewählt ist, öffne die Blockeinstellungen in der Seitenleiste und klicke dann auf den Tab Stile (das Icon ist ein schwarz-weißer Kreis).
3. Mithilfe der Farbeinstellungen kannst du die Farbe des Textes im Formular, die Hintergrundfarbe und die Farbe der im Formular verwendeten Links festlegen:

4. Klicke dann auf ein einzelnes Formularfeld und öffne erneut die Blockeinstellungen.
5. Hier kannst du für jedes einzelne Formularfeld die folgenden Farben festlegen:
   • Beschriftungstext: der Text, der über dem Formularfeld angezeigt wird.
   • Feldtext: der (optionale) Platzhaltertext sowie der Eingabetext in einem Feld.
   • Feldhintergrund: der Hintergrund des Eingabebereichs eines Formularfelds.
   • Rahmen: der Rahmen um das Formularfeld.
6. Aktiviere den Umschalter Stil der Felder synchronisieren, um deine Änderungen auf alle Felder anzuwenden, oder deaktiviere ihn, um jedes Feld einzeln zu steuern.
7. Klicke am Anfang des Bildschirms auf den Button Speichern.