# Jak upravit design formuláře pomocí CSS

> Přizpůsobte formulář vzhledu svého e-shopu pomocí CSS: barvy, rozestupy, tlačítka i chybové hlášky. Návod včetně videa.

- **Zdroj:** https://www.webotvurci.cz/navody/kontaktni-formulare/jak-upravit-design-formulare-pomoci-css/
- **Doplněk / kategorie:** Kontaktní formuláře (https://www.webotvurci.cz/navody/kontaktni-formulare/)
- **Datum:** 2024-08-09
- **Autor:** Webotvůrci (https://www.webotvurci.cz/)

---

### Kompletní návod na úpravy formuláře pomocí CSS v Shoptetu

Tento návod vám ukáže, jak pomocí CSS upravit vzhled formuláře ve vašem e-shopu na platformě Shoptet. Následující kroky vám pomohou přizpůsobit formulář tak, aby byl vizuálně atraktivní a snadno použitelný pro vaše zákazníky.

#### 1. Zúžení formuláře a zarovnání na střed

Pokud chcete, aby byl váš formulář užší a zarovnaný na střed stránky, použijte následující CSS kód:

```css
div[id*=wt-form-wrapper-] {
    max-width: 600px; /* Maximální šířka formuláře */
    margin: auto; /* Zarovnání formuláře na střed */
}
```

#### 2. Změna barvy okrajů a pozadí vstupních polí

Pro lepší viditelnost vstupních polí můžete upravit barvu jejich okrajů a pozadí:

```css
div[id*=wt-form-wrapper-] input,
div[id*=wt-form-wrapper-] textarea {
    border: 2px solid #008CBA; /* Barva okraje */
    background-color: #f0f8ff; /* Barva pozadí */
    padding: 10px; /* Vnitřní odsazení */
}
```

#### 3. Úprava vzhledu tlačítka pro odeslání formuláře

Pokud chcete změnit vzhled tlačítka, můžete použít tento CSS kód:

```css
div[id*=wt-form-wrapper-] .f-btn-group button[type="submit"]{
    color: red; /* Barva textu tlačítka */
    background-color: blue; /* Barva pozadí tlačítka */
    font-size: 22px; /* Velikost textu tlačítka */
}
```

#### 4. Změna stylu labelů (popisků)

Zvýrazněte popisky formulářových polí pomocí tohoto kódu:

```css
div[id*=wt-form-wrapper-] .f-field-group > label {
    font-size: 16px; /* Velikost písma */
    color: #333333; /* Barva textu */
    font-weight: bold; /* Ztučnění textu */
    margin-bottom: 5px; /* Odsazení pod label */
    display: block; /* Label na samostatném řádku */
}
```

#### 5. Odebrání zakulacení rohů

Pokud preferujete ostré rohy u polí a tlačítek, můžete použít tento kód:

```css
div[id*=wt-form-wrapper-] input,
div[id*=wt-form-wrapper-] textarea,
div[id*=wt-form-wrapper-] button[type="submit"] {
    border-radius: 0px; /* Odebrání zakulacení rohů */
}
```

#### 6. Stylování přepínačů a zaškrtávacích políček

Přepínače a zaškrtávací políčka se stylují pomocí pseudoelementů `::before` (rámeček) a `::after` (výplň po zaškrtnutí).

```css
/* Rámeček nevybrané políčko (checkbox): */
div[id*=wt-form-wrapper-] .f-checkbox label::before {
    border: 1px solid #008CBA; /* Barva rámečku */
    background: #e6f4f9; /* Pozadí nevybraného políčka */
}
/* Rámeček nevybraný přepínač (radio): */
div[id*=wt-form-wrapper-] .f-radio label::before {
    border: 1px solid #008CBA; /* Barva rámečku */
    background: #e6f4f9; /* Pozadí nevybraného políčka */
}
```

```css
/* Rámeček zaškrtnutého přepínače (radio): */
div[id*=wt-form-wrapper-] .f-radio input:checked + label::before {
    border-color: #008CBA; /* Barva rámečku */
    background: radial-gradient(#008CBA 45%, transparent 45%); /* Tečka uvnitř */
}
/* Rámeček zaškrtnutého políčka (checkbox): */
div[id*=wt-form-wrapper-] .f-checkbox input:checked + label::before {
    border-color: #008CBA; /* Barva rámečku */
    background: radial-gradient(#008CBA 45%, transparent 45%); /* Tečka uvnitř */
}
```

```css
/*Výplň po zaškrtnutí (checkbox i radio):*/
div[id*=wt-form-wrapper-] .f-checkbox input[type="checkbox"]:checked + label::after,
div[id*=wt-form-wrapper-] .f-radio input[type="radio"]:checked + label::after {
    background-color: #008CBA; /* Barva výplně */
    border-color: #008CBA; /* Barva okraje výplně */
    color: #fff; /* Barva fajfky/tečky */
}
```

#### 7. Stylování tlačítka při najetí myší (hover efekt)

Přidání efektu najetí myší na tlačítko pro zlepšení interaktivity:

```css
div[id*=wt-form-wrapper-] .f-btn-group button[type="submit"]:hover {
    background-color: #005f8a; /* Barva pozadí při najetí myší */
    color: #ffffff; /* Barva textu při najetí myší */
    cursor: pointer; /* Změna kurzoru na ukazatel ruky */
    transform: scale(1.05); /* Mírné zvětšení tlačítka */
}
```

#### 8. Roztáhnutí SELECTu na celou šíří

```css
div[id*=wt-form-wrapper-] select {
    display: block;
    min-width: 100%;
}
```

#### 9. Zarovnání tlačítka odeslat na střed

```css
div[id*=wt-form-wrapper-] .f-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
```

### Jak vložit CSS kód do Shoptetu

Pro aplikaci výše uvedených úprav na vašem e-shopu v Shoptetu je třeba vložit CSS kód do administrace Shoptetu. Postupujte podle návodu zde: [Jak vložit CSS kód do Shoptet platformy](https://www.webotvurci.cz/navody/obecne-navody-pro-shoptet/jak-vlozit-css-kod-do-shoptet-platformy/).

Tento návod vám ukáže krok za krokem, jak přidat CSS kód do správného místa ve vaší administraci, aby se změny na e-shopu projevily.

Po vložení CSS kódu nezapomeňte uložit změny a zkontrolovat, jak formulář na vašem e-shopu vypadá. Tímto způsobem můžete snadno upravit vzhled formuláře tak, aby vyhovoval vašim požadavkům a zlepšil uživatelskou zkušenost.

## Video

<div class="video-embed">
  <iframe src="https://www.loom.com/embed/9843092cbf5d412ba00b79b56ecabed8?sid=694d3233-4aca-4e99-a060-bb5d0c8bcc5a" title="Videonávod" loading="lazy" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
</div>

---

*Návod pochází z webu Webotvůrci — Zlatý a Premium partner Shoptetu.*
*Všechny návody: https://www.webotvurci.cz/navody/ · Kontakt: jsme@webotvurci.cz*