Jak upravit design formuláře pomocí CSS

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:

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í:

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:

div[id*=wt-form-wrapper-] 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:

div[id*=wt-form-wrapper-] 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:

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

Pro větší a barevně výraznější přepínače a zaškrtávací políčka použijte tento CSS:

div[id*=wt-form-wrapper-] input[type="checkbox"],
div[id*=wt-form-wrapper-] input[type="radio"] {
    width: 20px; /* Velikost */
    height: 20px; /* Velikost */
    accent-color: #008CBA; /* Barva políček */
    margin-right: 10px; /* Odsazení mezi polem a labelem */
}

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

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

div[id*=wt-form-wrapper-] 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 šíří

div[id*=wt-form-wrapper-] select {
    display: block;
    min-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.

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.