# Formular erstellen

> Fügen Sie im Formular-Editor Schritte, Text, Bilder, Schaltflächen und Eingabefelder hinzu, gestalten Sie das Formular, prüfen Sie die Vorschau auf jedem Gerät und veröffentlichen Sie es, sobald die Prüfungen bestanden sind.

Der Formular-Editor ist ein Vollbild-Editor, in dem Sie gestalten, was Besucher sehen: einen oder mehrere Formularschritte, einen Erfolgsschritt, jeden Block darauf und die Stile des Formulars. Diese Seite führt durch jeden Teil des Editors und die Prüfungen, die ein Formular bestehen muss, bevor Sie es veröffentlichen können.

## Voraussetzungen

- Formulare sind im Early Access. Siehe [Formulare](/de/docs/forms/), wenn sie in Ihrem Workspace nicht verfügbar sind.
- Erstellen Sie das Formular unter **Email Marketing → Forms** mit **Create form** und geben Sie ihm einen **Name** und einen **Type**.

## Editor öffnen

Wählen Sie auf der Seite des Formulars **Edit form**. Der Editor öffnet sich über der Weboberfläche:

- **Kopfzeile:** der Formularname (zum Umbenennen anklicken), das Badge **Draft** oder **Live**, die Markierung **Unsaved** bei ungespeicherten Änderungen, **Undo** und **Redo**, eine Schaltfläche pro Schritt, **Add step**, **Publish**, **Save** und die Schaltfläche zum Schließen.
- **Arbeitsfläche:** eine Live-Vorschau des ausgewählten Schritts. Wechseln Sie zwischen **Desktop**, **Mobile** und **Both**, prüfen Sie die Größe des Formulars, zoomen Sie mit **Scale** und wählen Sie **Reset canvas**, um die Ansicht wieder zu zentrieren.
- **Seitenleiste:** die Tabs **Content** und **Styles** und unten **Alerts & checks**.

Wählen Sie **Save**, um Ihre Änderungen zu speichern. Wenn Sie ein Live-Formular speichern, wird es auch auf Ihrer Website aktualisiert.

## Schritte

Ein neues Formular hat zwei Schritte: **Step 1** mit dem Text „Join our list“, einem Feld **Email** und einer Schaltfläche **Subscribe** sowie einen Schritt **Success** mit dem Text „Thanks for subscribing!“.

- **Formularschritte** enthalten die Felder, die Besucher ausfüllen. Wählen Sie **Add step** (die Plus-Schaltfläche in der Kopfzeile), um einen weiteren Formularschritt hinzuzufügen. Neue Schritte werden vor dem Erfolgsschritt eingefügt.
- **Der Erfolgsschritt** erscheint, nachdem der Besucher das Formular abgesendet hat. Nutzen Sie ihn, um sich zu bedanken, auf eine Seite zu verlinken oder einen Rabattcode anzubieten.
- **Zwischen Schritten wechseln** Besucher über Schaltflächen. Eine Schaltfläche **Next step** validiert den aktuellen Schritt und zeigt den nächsten. Eine Schaltfläche **Submit** validiert den Schritt, sendet die Einsendung ab und zeigt den Erfolgsschritt.

Wählen Sie die Schaltfläche eines Schritts in der Kopfzeile, um ihn auf der Arbeitsfläche zu bearbeiten.

## Blöcke hinzufügen

Wählen Sie im Tab **Content** einen Block, um ihn zum aktuellen Schritt hinzuzufügen. Um einen Block an einer bestimmten Stelle einzufügen, bewegen Sie den Mauszeiger auf der Arbeitsfläche zwischen zwei Blöcke und wählen Sie die Plus-Schaltfläche. Ziehen Sie Blöcke, um sie neu anzuordnen, und wählen Sie einen Block, um seine Einstellungen zu bearbeiten. **Delete** steht oben in den Einstellungen jedes Blocks.

| Gruppe | Block | Geeignet für |
| --- | --- | --- |
| **Elements** | **Text** | Überschriften und Absätze, mit Fett- und Kursivschrift, Links und Emojis. |
| | **Button** | Absenden, zum nächsten Schritt wechseln, das Formular schließen oder einen Link öffnen. |
| | **Image** | Ein Logo, ein Produktfoto oder ein Bannerbild, optional verlinkt. |
| **Inputs** | **Email** | Die E-Mail-Adresse des Besuchers. Wird auf ein gültiges Format geprüft. |
| | **Text input** | Beliebiger kurzer Text, etwa ein Name oder eine Firma. |
| | **Phone** | Eine Telefonnummer. Wird auf ein gültiges Format geprüft. |
| | **Radio** | Eine Auswahl aus einer Liste. |
| | **Checkbox** | Mehrere Auswahlmöglichkeiten aus einer Liste oder eine einzelne Checkbox für eine Einwilligung. |
| | **Date** | Ein Datum im gewählten Format. |
| | **Dropdown** | Eine Auswahl aus einer Liste, in einem kompakten Menü. |

### Blockeinstellungen

**Text**

- Inhalt, direkt im Block bearbeitet.
- **Typography:** **Alignment**, **Font size**, **Weight**, **Color** und **Link color**.

**Button**

- **Label** und **Action**: **Submit**, **Next step**, **Close** oder **Go to URL**. **Go to URL** erfordert zusätzlich eine **URL**.
- **Button style:** **Width** (auto oder full), **Alignment**, **Background**, **Text**, **Hover** und **Border radius**.

**Image**

- **Image URL**, **Alt text** und eine optionale **Link URL**.
- **Layout:** **Width (%)**, **Alignment** und **Object fit**.

**Email, Text input, Phone und Date**

- **Property name:** der Schlüssel, unter dem der Wert in jeder Einsendung gespeichert wird, zum Beispiel `email` oder `company`. Er muss im Formular eindeutig sein.
- **Label**, **Placeholder** (bzw. **Date format** bei Datumsfeldern: `MM/DD/YYYY`, `DD/MM/YYYY` oder `YYYY-MM-DD`) und **Help text**.
- **Required**, mit einer optionalen **Required message**, und eine **Invalid message**, die erscheint, wenn eine E-Mail-Adresse oder Telefonnummer nicht gültig aussieht. Telefonnummern lassen sich im internationalen Format am einfachsten validieren, etwa `+15551234567`.

**Radio, Checkbox und Dropdown**

- **Property name**, **Label** und **Help text**.
- **Required**, mit einer optionalen **Required message**.
- **Layout:** vertikal oder horizontal.
- **Options**, eine pro Zeile im Format `label|value`, zum Beispiel `Weekly digest|weekly`.

**Jeder Block**

- **Spacing:** **Margin top** und **Margin bottom**.
- **Visibility:** **Show on** mit **Desktop & mobile**, **Desktop only** oder **Mobile only**. Ausgeblendete Blöcke bleiben im Formular und werden nur in der passenden Vorschau und auf dem passenden Gerät herausgefiltert.

## Formular gestalten

Der Tab **Styles** steuert das gesamte Formular:

| Bereich | Einstellungen |
| --- | --- |
| **Form type** | **Type**. Bei Flyouts **Flyout side** (**Bottom right**, **Bottom left** oder **Bottom**). Bei Bannern **Banner position** (**Top** oder **Bottom**). |
| **Size** | **Width (px)** und **Min height (px)**. Lassen Sie die Höhe für automatische Höhe auf 0. |
| **Overlay** | **Overlay color** und **Opacity** hinter Pop-ups, Flyouts und Ganzseiten-Formularen. |
| **Form background** | **Fill**, **Border color**, **Border width**, **Border radius**, **Padding** und **Shadow**. |
| **Side image** | Ein Bild neben dem Formular (**Left** oder **Right**), mit **Image URL**, **Alt text** und **Size**. |
| **Background image** | Ein Bild hinter dem Formular, mit **Image URL** und **Fit** (**Cover** oder **Contain**). |
| **Fonts** | **Font family** (**Inter**, **Georgia**, **Mono** oder **System**), **Heading color** und **Body color**. |
| **Input field styles** | Die Farben **Background**, **Border**, **Border radius**, **Text**, **Placeholder** und **Label**. |
| **Button styles** | **Fill**, **Text**, **Hover**, **Border radius** und **Style** (**Solid** oder **Outline**). Einzelne Schaltflächen können diese Werte überschreiben. |
| **Close icon** | **Color**, **Size** und **Style** (**X** oder **Circle X**) der Schaltfläche zum Schließen. Bei eingebetteten Formularen nicht angezeigt. |

## Vorschau

Prüfen Sie mit **Desktop**, **Mobile** oder **Both** über der Arbeitsfläche das Layout auf jeder Bildschirmgröße, einschließlich der Blöcke, die Sie auf einem Gerät ausgeblendet haben. Mit **Undo** und **Redo** gehen Sie durch Ihre letzten Änderungen.

## Prüfen und veröffentlichen

**Alerts & checks** unten in der Seitenleiste listet Probleme des Formulars auf. Eine rote Zahl zeigt, wie viele Fehler es gibt.

| Stufe | Prüfung |
| --- | --- |
| Fehler | „Add at least one form step before publishing.“ |
| Fehler | „Add a success step before publishing.“ |
| Warnung | Ein Formularschritt hat keine Inhaltsblöcke. |
| Warnung | Mehr als ein E-Mail-Feld. Verwenden Sie nach Möglichkeit ein einziges E-Mail-Feld. |
| Warnung | Kein Formularschritt hat eine Schaltfläche zum Absenden oder zum nächsten Schritt. |
| Warnung | Eine Schaltfläche **Go to URL** hat keine URL. |

Fehler blockieren das Veröffentlichen. Warnungen nicht, aber beheben Sie sie, damit Besucher das Formular abschließen können.

Wenn die Prüfungen bestanden sind, wählen Sie **Publish** in der Kopfzeile des Editors. Emailit speichert das Formular, schaltet es live und schließt den Editor. Sie können auch auf der Seite des Formulars veröffentlichen oder die Veröffentlichung zurückziehen. Als Nächstes [installieren Sie das Skript](/de/docs/forms/install/) auf Ihrer Website, falls noch nicht geschehen.

## Siehe auch

  - [Formulare installieren](/de/docs/forms/install/): Ihre Live-Formulare auf Ihrer Website anzeigen.
  - [Formulare im Überblick](/de/docs/forms/): Formulartypen, Status und Einsendungen.

---
Quelle: https://emailit.com/de/docs/forms/build/