# Tvorba formuláře

> Přidávejte v editoru formulářů kroky, text, obrázky, tlačítka a vstupní pole, nastavte formuláři styl, zobrazte si náhled na jednotlivých zařízeních a publikujte ho, jakmile projde kontrolami.

Editor formulářů je celoobrazovkový editor, ve kterém navrhujete, co návštěvníci uvidí: jeden nebo více kroků formuláře, krok s poděkováním, všechny bloky na nich a styly formuláře. Tato stránka prochází jednotlivé části editoru a kontroly, kterými formulář musí projít, než ho budete moci publikovat.

## Než začnete

- Formuláře jsou v předběžném přístupu. Pokud ve vašem workspace nejsou dostupné, viz [Formuláře](/cs/docs/forms/).
- Vytvořte formulář v **Email Marketing → Forms** tlačítkem **Create form** a zadejte mu **Name** a **Type**.

## Otevřete editor

Na stránce formuláře vyberte **Edit form**. Editor se otevře přes webové rozhraní:

- **Záhlaví:** název formuláře (výběrem ho přejmenujete), označení **Draft**, nebo **Live**, značka **Unsaved**, když máte neuložené změny, **Undo** a **Redo**, jedno tlačítko pro každý krok, **Add step**, **Publish**, **Save** a tlačítko pro zavření.
- **Plátno:** živý náhled vybraného kroku. Přepínejte mezi **Desktop**, **Mobile** a **Both**, kontrolujte velikost formuláře, přibližujte posuvníkem **Scale** a tlačítkem **Reset canvas** plátno znovu vycentrujete.
- **Boční panel:** karty **Content** a **Styles** a dole **Alerts & checks**.

Změny uložíte tlačítkem **Save**. Uložením publikovaného formuláře se změny projeví i na webu.

## Kroky

Nový formulář má dva kroky: **Step 1** s textem „Join our list“, polem **Email** a tlačítkem **Subscribe** a krok **Success** s textem „Thanks for subscribing!“.

- **Kroky formuláře** obsahují pole, která návštěvníci vyplňují. Další krok formuláře přidáte tlačítkem **Add step** (tlačítko plus v záhlaví). Nové kroky se vkládají před krok s poděkováním.
- **Krok s poděkováním** se zobrazí po odeslání formuláře. Použijte ho k poděkování, odkazu jinam nebo nabídce slevového kódu.
- **Mezi kroky se přechází** tlačítky. Tlačítko **Next step** zkontroluje aktuální krok a zobrazí další. Tlačítko **Submit** zkontroluje krok, odešle odpověď a zobrazí krok s poděkováním.

Krok upravíte na plátně, když vyberete jeho tlačítko v záhlaví.

## Přidejte bloky

Na kartě **Content** vyberte blok a přidá se do aktuálního kroku. Pokud chcete blok vložit na konkrétní místo, najeďte myší na plátno mezi dva bloky a vyberte tlačítko plus. Bloky přeskupíte přetažením a výběrem bloku upravíte jeho nastavení. **Delete** je nahoře v nastavení každého bloku.

| Skupina | Blok | K čemu slouží |
| --- | --- | --- |
| **Elements** | **Text** | Nadpisy a odstavce s tučným písmem, kurzívou, odkazy a emoji. |
| | **Button** | Odeslání, přechod na další krok, zavření formuláře nebo otevření odkazu. |
| | **Image** | Logo, fotka produktu nebo obrázek do záhlaví, volitelně s odkazem. |
| **Inputs** | **Email** | E-mailová adresa návštěvníka. Kontroluje se platnost formátu. |
| | **Text input** | Jakýkoli krátký text, například jméno nebo firma. |
| | **Phone** | Telefonní číslo. Kontroluje se platnost formátu. |
| | **Radio** | Jedna volba ze seznamu. |
| | **Checkbox** | Více voleb ze seznamu, nebo jedno zaškrtávací políčko se souhlasem. |
| | **Date** | Datum ve zvoleném formátu. |
| | **Dropdown** | Jedna volba ze seznamu v kompaktní nabídce. |

### Nastavení bloků

**Text**

- Obsah, upravuje se přímo na plátně.
- **Typography:** **Alignment**, **Font size**, **Weight**, **Color** a **Link color**.

**Button**

- **Label** a **Action**: **Submit**, **Next step**, **Close**, nebo **Go to URL**. **Go to URL** potřebuje navíc **URL**.
- **Button style:** **Width** (automatická, nebo plná), **Alignment**, **Background**, **Text**, **Hover** a **Border radius**.

**Image**

- **Image URL**, **Alt text** a volitelně **Link URL**.
- **Layout:** **Width (%)**, **Alignment** a **Object fit**.

**Email, Text input, Phone a Date**

- **Property name:** klíč, pod kterým se hodnota ukládá v každé odpovědi, například `email` nebo `company`. Ve formuláři musí být jedinečný.
- **Label**, **Placeholder** (u dat **Date format**: `MM/DD/YYYY`, `DD/MM/YYYY` nebo `YYYY-MM-DD`) a **Help text**.
- **Required** s volitelnou zprávou **Required message** a **Invalid message**, která se zobrazí, když e-mailová adresa nebo telefonní číslo nevypadá platně. Telefonní čísla se nejsnáz validují v mezinárodním formátu, například `+15551234567`.

**Radio, Checkbox a Dropdown**

- **Property name**, **Label** a **Help text**.
- **Required** s volitelnou zprávou **Required message**.
- **Layout:** svisle, nebo vodorovně.
- **Options**, jedna na řádek ve tvaru `label|value`, například `Weekly digest|weekly`.

**Všechny bloky**

- **Spacing:** **Margin top** a **Margin bottom**.
- **Visibility:** **Show on** **Desktop & mobile**, **Desktop only** nebo **Mobile only**. Skryté bloky ve formuláři zůstávají a jen se nezobrazí v odpovídajícím náhledu a na odpovídajícím zařízení.

## Nastavte styl formuláře

Karta **Styles** řídí celý formulář:

| Sekce | Nastavení |
| --- | --- |
| **Form type** | **Type**. U bočních panelů **Flyout side** (**Bottom right**, **Bottom left** nebo **Bottom**). U lišt **Banner position** (**Top**, nebo **Bottom**). |
| **Size** | **Width (px)** a **Min height (px)**. Pro automatickou výšku ponechte výšku na 0. |
| **Overlay** | **Overlay color** a **Opacity** za vyskakovacími okny, bočními panely a celostránkovými formuláři. |
| **Form background** | **Fill**, **Border color**, **Border width**, **Border radius**, **Padding** a **Shadow**. |
| **Side image** | Obrázek vlevo (**Left**), nebo vpravo (**Right**) od formuláře s nastavením **Image URL**, **Alt text** a **Size**. |
| **Background image** | Obrázek za formulářem s nastavením **Image URL** a **Fit** (**Cover**, nebo **Contain**). |
| **Fonts** | **Font family** (**Inter**, **Georgia**, **Mono** nebo **System**), **Heading color** a **Body color**. |
| **Input field styles** | Barvy **Background**, **Border**, **Border radius**, **Text**, **Placeholder** a **Label**. |
| **Button styles** | **Fill**, **Text**, **Hover**, **Border radius** a **Style** (**Solid**, nebo **Outline**). Jednotlivá tlačítka je mohou přepsat. |
| **Close icon** | **Color**, **Size** a **Style** (**X**, nebo **Circle X**) tlačítka pro zavření. U vložených formulářů se nezobrazuje. |

## Náhled

Přepínači **Desktop**, **Mobile** a **Both** nad plátnem zkontrolujete rozvržení na jednotlivých velikostech obrazovky, včetně bloků, které jste na jednom zařízení skryli. **Undo** a **Redo** procházejí vaše poslední změny.

## Zkontrolujte a publikujte

**Alerts & checks** dole v bočním panelu uvádí problémy s formulářem. Červené číslo ukazuje, kolik je chyb.

| Úroveň | Kontrola |
| --- | --- |
| Chyba | „Add at least one form step before publishing.“ |
| Chyba | „Add a success step before publishing.“ |
| Varování | Krok formuláře nemá žádné bloky obsahu. |
| Varování | Více než jedno pole pro e-mail. Pokud to jde, použijte jediné pole pro e-mail. |
| Varování | Žádný krok formuláře nemá tlačítko pro odeslání ani pro další krok. |
| Varování | Tlačítko **Go to URL** nemá URL. |

Chyby publikování blokují. Varování ne, ale opravte je, aby návštěvníci mohli formulář dokončit.

Jakmile formulář kontrolami projde, vyberte v záhlaví editoru **Publish**. Emailit formulář uloží, publikuje a editor zavře. Publikovat i stáhnout formulář můžete také na jeho stránce. Pokud jste to ještě neudělali, [nainstalujte skript](/cs/docs/forms/install/) na svůj web.

## Související

  - [Instalace formulářů](/cs/docs/forms/install/): Zobrazte své publikované formuláře na webu.
  - [Přehled formulářů](/cs/docs/forms/): Typy formulářů, stavy a odpovědi.

---
Zdroj: https://emailit.com/cs/docs/forms/build/