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-] .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:
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:
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í).
/* 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 */
}/* 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ř */
}/*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:
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 šíří
div[id*=wt-form-wrapper-] select {
display: block;
min-width: 100%;
}9. Zarovnání tlačítka odeslat na střed
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.
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.