# Návod na ovládání vizuálního editoru > Postavte si formulář ve vizuálním editoru bez znalosti kódu. Na příkladu kontaktního formuláře projdeme celý postup včetně videa. - **Zdroj:** https://www.webotvurci.cz/navody/kontaktni-formulare/navod-na-ovladani-vizualniho-editoru/ - **Doplněk / kategorie:** Kontaktní formuláře (https://www.webotvurci.cz/navody/kontaktni-formulare/) - **Datum:** 2024-07-24 - **Autor:** Webotvůrci (https://www.webotvurci.cz/) --- Doplněk Kontaktní formuláře nabízí možnost si formulář snadno vytvořit pomocí vizuálního editoru. Není třeba tedy mít žádné znalosti programování. V tomto článku si na příkladu ukážeme jak editor používat. Naším cílem bude vytvoření kontaktního formuláře pro sjednání schůzky. ## Videonávod
## Vytvoření formuláře Nový formulář vytvoříme kliknutím na tlačítko “+ Přidat formulář” v administraci. Nejprve zadejte název, pod kterým pak formulář najdete v administraci. Na první obrazovce zvolíme název a pomocí přepínače umístění formuláře. - “Ve všech kategoriích” znamená, že se formulář bude zobrazovat všude. - “Jen v kategorii”, vám nabídne možnost specifikovat jednu i více kategorií. - “Na konkrétním místě, použít shortcode” vám umožní vložit formulář na jakékoliv místo i stránku ve vašem Shoptetu. Pokračujte stisknutím zeleného tlačítka “Uložit a generovat formulář” ![Vytvoření nového formuláře](https://www.webotvurci.cz/uploads/navody/screenshot-2024-06-30-at-10.23.55.png) Následně se vám zobrazí vizuální editor formulářů. Ten se dělí na dvě hlavní části. - Pravá část nabízí prvky, které můžete využít. - Levá část slouží pro vizuální poskládání formuláře. Zkuste v pravé části kliknout na “Textový vstup” a přetáhnout jej do prázdné plochy. Výsledek by měl vypadat následovně. ![Vizuální editor formulářů — prázdný formulář s textovým vstupem a panelem dostupných polí vpravo](https://www.webotvurci.cz/uploads/navody/ad_4nxf98tnxcyezq_mo33cycmcu-touehxxcfj4okz_4oms95mlr5tewixkf_2aoqyarmdluvejqctjugpi_xikhk5_yt9mia9yw8i_2praaygykkzisbdr.png) Název “Textový vstup” můžete snadno přepsat na libovolný text. Pro naši ukázku zvolíme “Vaše jméno”. Když na prvek najedete myší – tak se vám v pravé části zobrazí několik ikon. Pomocí ikony tužky se dostanete do nastavení, kde přepínačem “Požadováno” zajistíte, že jméno musí uživatel vyplnit. Sekci podmínek a další atributy nepotřebujete. ![Nastavení pole Vaše jméno se zaškrtnutým atributem Požadováno a polem pro CSS třídu](https://www.webotvurci.cz/uploads/navody/ad_4nxe6zxm6xqvgbj_v14bs4xtvd46htvgw_ca87qx6zgdyvq2oocgauqiswv1vracd0nkbip3i8n8r-ahz1kwyy9l88ooeovhyw7skspr897mci2r74-j6.png) Stejným způsobem vložíme další “textový vstup” a přejmenujme jej na “. Váš e–mail” Následně vložte prvek Datum, jenž pojmenujeme “Který den vám nejlépe vyhovuje pro schůzku?” A na závěr vložíme “Tlačítko”, ve kterém opět zvolíme ikonu tužky a přepneme záložku na “Možnosti”, kde si tlačítko můžeme přejmenovat např. na “Odeslat” a změníme jej z button na submit. Viz obrázek. ![Formulář se jménem, e-mailem a datem schůzky a nastavení tlačítka Odeslat](https://www.webotvurci.cz/uploads/navody/ad_4nxfae2gzctguc6ndtkt7fnqxn6qs_pkhx3vb__kazf6kz_kxfw2mgwvweqnbw1_7v9dszk8-cmq7lpfyvvf7q7syrbkeesljn1lah5hub3kyxn8f2wtt.png) Pod editorem se nachází tlačítko “Vykreslit formulář”, po jehož kliknutí se nám ukáže, jak bude formulář vypadat. Nebojte – jde jen o ukázku – design a barvy si načte dle šablony, kterou máte vybranou v Shoptetu. ![Náhled hotového formuláře — jméno, e-mail, datum schůzky a tlačítko Odeslat](https://www.webotvurci.cz/uploads/navody/ad_4nxc3mpob5j1jqkpb_tmfsjmu2dedqpspiyuu4zg582w8u34iptcqlkmsnrv7kqoduly4skekvmhh4nhdp68mxrhnq8r7-ypebb-88dphw0hfjmrhxdvr.png) Se samotným vzhledem a zarovnáním prvků si můžete ještě trochu vyhrát. Pokud například v pravém panelu použijte šipku tak se dostanete do sekce “HTML elementy”, které vám umožní vložit do formuláře různé texty a nadpisy. ![Doplnění nadpisu a odstavce do formuláře pomocí panelu HTML elementů](https://www.webotvurci.cz/uploads/navody/ad_4nxfdv9j6k9qfyecjceb8zg9clkfu4edkbsh3ptinc976khglhaa7rdysgvbhb9aelodgtagxqgpblgrys5ixbnhx1y7g_tchqeb6lfendk8fu7jusufy.png) Další nabídka pak obsahuje “Rozložení”, díky kterému můžete dát prvky například vedle sebe. Určitě si to vyzkoušejte. Díky “Sloupec” si můžeme dát “Vaše jméno” a “Váš e-mail” hezky vedle sebe. ![Rozložení formuláře do sloupců — jméno a e-mail vedle sebe pomocí panelu Rozložení](https://www.webotvurci.cz/uploads/navody/ad_4nxergv1n-hk3djhyxhfnmjjn88eyg2wys1ln9v-dnv_hyk7lzfe2sfrjnlgxqpmeqlz4aav_mvn5hq8g2yvlaelu0jlpg2av3hefjedpmua21maxnvpa.png) A když si formulář nyní vykreslíme, bude vypadat takto: ![Hotový formulář pro sjednání schůzky s poli uspořádanými do dvou sloupců](https://www.webotvurci.cz/uploads/navody/ad_4nxfyjxwc5clu_x_oljek8tt5ab2zsnyizoni2mxhsdmui-nwxfv_0lprg9q3wwe4vqe4a9mwzhshmdufipj4wl84oxxap3yjcmdfteqh_cjtoc0qdvlp.png) Jak vidíte, tak vizuální editor vám umožňuje snadno vytvořit formulář libovolného účelu. Vyzkoušejte si vytvořit nějaký přímo pro vás a vaše potřeby. Nezapomeňte si vaši práci **uložit** stejnojmenným tlačítkem v pravém panelu. Tlačítko “vyčistit” vám umožňuje vše smazat a začít znovu. Následně je potřeba nastavit zobrazení formuláře v Shoptetu. Jak na to? To se dozvíte v následujícím článku [ZDE](https://www.webotvurci.cz/navody/kontaktni-formulare/zobrazeni-formulare-v-shoptetu/). --- *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*