Tvorba www prezentácií a internetových obchodov. Optimalizácia web stránok pre vyhľadávače. Tvorba loga a propagačných materiálov.

Návod: Vytvorenie webového formulára Wufoo

17.02.2011 16:37

Pred nejakým časom ma v našej Webnode poradni slečna alebo pani Mari požiadala o návod k tvorbe Wufoo formulárov a ich vloženie do stránok Webnode.

Wufoo formuláre je pohodlný a profesionálny online nástroj pre tvorbu webových formulárov s množstvom funkcií aj v bezplatnej verzii.

1. Vytvorenie účtu/konta na webe Wufoo.com

Na adrese http://wufoo.com/signup/ máte na výber z niekoľkých balíčkov registrácie.

Výber z niekoľkých balíčkov registrácie.

V bez-platnom balíčku (FREE!) máte pod jedným účtom:
1 User / 1 uživateľa
3 Forms / 3 formuláre
3 Reports / 3 reporty
10 Fields / 10 polí (v rámci jedného formulára)
100 Entries / Month / 100 odoslaní formulára / mesiac

Klikneme si teda na bezplatnú registráciu balíček FREE! a dostaneme sa na adresu: https://secure.wufoo.com/signup/1/ a zobrazí sa Vám klasická registrácia uživateľa, kde vyplníte email, dvakrát heslo a potvrdíte podmienky registrácie. Jedinou odlišnosťou je to, že si zvolíte vlastnú URL adresu, cez ktorú môžete pristupovať k svojmu účtu a na ktorej môžete tiež uverejňovať svoje formuláre. Prvýkrát som som do URL zvolil slovo “skuska”, ale keďže táto adresa už bola obsadená, nahradil som ju slovom “peknyformular” ako vidíte na ďalšom obrázku. Do URL píšte slová malým písmom, bez diakritiky a bez medzier. Moja URL adresa teda bude: http://peknyformular.wufoo.com.

Wufoo registrácia.

Wufoo registrácia oprava.

Po registrácii môžete rovno vytvárať formuláre. Pokračujeme v bode 2.

2. Vytvorenie a nastavenia Wufoo formulára

Pokiaľ Vaša registrácia prebehla v poriadku, budete presmerovaní na stránku, ktorú vidíte na obrázku nižšie. Klikneme na tlačidlo “New Form” v preklade “nový formulár”.

Nový formulár.
Zobrazí sa Vám stránka s editáciou formulára

 Stránka s editáciou formulára.

Názov formulára “Ultiled Form” prepíšeme “Online objednávka” a “This is my form. Please fill it out. It's awesome!” napríklad na “Všetky polia označené hviezdičkou sú povinné” alebo iné potrebné informácie k vyplneniu formulára.
Zvolíme si jazyk formulára na “Slovak”.
Prepíšeme “hlášku”, ktorá sa návštevníkovi zobrazí po odoslaní formulára, čiže “Success! Thanks for filling out my form!” napríklad na
Pokiaľ chcete, aby návštevník dostal kópiu objednávky na zadaný email, zaškrtnite “Send Confirmation Email to User”
Ostatné nastavenia môžete nechať nevyplnené.

Stránka s editáciou formulára - vyplniť nastavenia.

3. Pridávanie polí do Wufoo formulára

Pre pridanie polí kliknite na Add a Field a vyberte prvé pole formulára. V našom prípade to bude pridanie poľa “Meno a priezvisko” a pre toto pole zvolíme možnosť “Single Line Text”.

Pridať pole Single Line Text.
Kliknutím na toto nové pole zmeníme jeho názov a nastavenia napríklad takto, ako to vidíte na obrázku nižšie. “Required” znamená povinné vyplnenie poľa a a zobrazí sa pri ňom červená hviezdička. “Instructions for User” slúži pre zobrazenie informácií pre vypĺňanie jednotlivých polí.

Single Line Text prepísať názov.

Nižšie pridám zopár obrázkov počas pridávania ďalších polí.

Pridať pole email.

Pridať pole


4. Uloženie formulára

Pokiaľ máte pridané všetky potrebné polia, kliknite na tlačidlo “Save Form” a po uložení sa Vám zobrazí okno s tromi možnosťami:

1. Continue editing this form / Pokračovať v editácii tohto formulára
2. Setup email notifications for this form / Nastaviť emailovú notifikáciu pre tento formulár
3. I'm finished! Take me back to the Form Manager / Som hotový! Zobraziť form manažér

Uloženie formulára
Vyberieme druhú možnosť a klikneme na “2. Setup email notifications for this form “ pre nastavenie emailu na ktorý budú posielané objednávky z tohto formulára a zobrazí sa nám táto stránka, kde vyplníme svoj email podľa obrázku nižšie.

Setup email notifications for this form.

Pre nastavenie mena odosielateľa emailu si šte klikneme na odkaz “Customize Notification Email” a prepíšeme odosielateľa príklad takto, ako je to na obrázku nižšie a klikneme na tlačidlo “Done” a v modrom boxe “to My Inbox” klikneme na tlačidlo “Save” a nastavenia emailu a mena odosielateľa pre tento formulár máme hotové. V hornom menu klikneme na prvú položku s názvom “Forms” a zobrazí “Form Manager” s našim prvým formulárom “Online objednávka”.

Prepíšeme odosielateľa.

5. Prepíšeme text tlačidla zo "Submit" na "Odoslať"

Aby sme si do tlačidla pre odoslanie formulára zadať iný text ako "Submit", musíme formuláru priradiť tému v časti "Themes". V hornom menu klikneme na tlačidlo "Themes" a zobrazí sa nám táto stránka.

Prepíšeme text tlačidla zo

Klikneme na položku "Buttons" (v preklade tlačidlá) a prepíšeme "Submit" na "Odoslať". Tému uložíme kliknutím na tlačidlo "Save Theme" a zobrazí sa nám okno, kde zadáme názov témy.

Uložiť tému.

Vrátime sa do časti "Form Manager" kliknutím na prvú položku "Forms" v hornom menu a k formuláru "Online objednávka" priradíme novo vytvorenú tému "Online objednávka Peknastranka.sk".

Priradíme novo vytvorenú tému.

Túto tému potom môžete priradiť aj ďalším formulárom. V nastaveniach témy môžete tiež meniť farbu a veľkosť písma, farbu pozadia jednotlivých častí formulára.


6. Vloženie Wufoo formulára do (nie len) Webnode stránok

V časti “Form Manager” klikneme na tlačidlo “Code” pod vybraným formulárom a zobrazí sa nám stránka, ktorú vidíte na obrázku nižšie.

Klikneme na tlačidlo “Code”.

Klikneme na "Embed Form Code" a skopírujeme HTML kód z časti “iframe Version” a ten môžeme vložiť do našej stránky na Webnode dvoma spôsobmi.

Skopírujeme HTML kód z časti “iframe Version”.

Prvý spôsob vloženia Wufoo formulára do Webnode stránky je ten, že v administrácii Webnode v časti "Obsah" vyberieme možnosť "Ostatné > Ostatné > Wufoo a do zobrazeného okna vložíme inframe kód formulára.

Prvý spôsob vloženia Wufoo formulára do Webnode stránky.

Druhý spôsob vloženia formulára Wufoo do stránok Webnode platí aj pre ostatné web stránky poháňané iným redakčným systémom a vkladanie prevedieme vložením tým istým inframe kódom formulára cez Wysiwyg editor tak, že si zobrazíme zdrojový kód, do ktoréh vložíme inframe kód. Vloženie inframe kódu nepodporujú všetky Wysiwyg editory, preto s tým pri niektorých Wysiwyg editoroch mať problém.

Vloženie Wufoo formulára cez Wysiwyg editor.

 

7. Záver

Dúfam, že Vám tento návod pomohol. Akékoľvek otázky ohľadom tvorby a editácie Wufoo formulárov píšte do diskusie k tomuto článku. Pokiaľ by ste mali záujem o návod pre úpravu Wufoo témy, tak to prosím napíšte do komentára a snáď sa k tomu niekedy odhodlám :)

Peter Varga

Späť

Diskusia: Návod: Vytvorenie webového formulára Wufoo

Dátum
Vložil
Titulok

thx

ja som z vas asi najvätsi laik a preto vam chcem podakovat za super navod diki diki

Dátum
Vložil
Titulok

Funguje

Výborně, krok za krokem a zvládl jsem to :-)

Dátum
Vložil
Titulok

Poděkování

Děkuji za návod. I jako naprostý laik jsem to zvládnul.O.L

Dátum
Vložil
Titulok

pripajanie suborov

Dobrý den,
chcem sa opytat ci moze byt aj funkcia pripajanie suborov ako napr. fotiek atd,
dakujem

Dátum
Vložil
Titulok

Re:pripajanie suborov

v platenej verzii áno.

Dátum
Vložil
Titulok

dakujem

ja sa len chcem podakovať za vynaloženú snahu, mne tento návod výrazne pomohol, skrátilo mi to čas pri zostavovaní formulára a dokonca na prvýkrát sa mi ho podarilo dostať aj na stránku a je funkčný
(www.magazinexclusive.sk)

Dátum
Vložil
Titulok

Re:dakujem

som rád, že návod pomohol.

Dátum
Vložil
Titulok

posunie sa mi dolu "odoslať"

Zdravim,
mam vo formulári skoro samé povinné polia . ked zakazník nevyplní niektoré z nich a odošle formular tak samozrejme mu vypíše že treba vyplniť povinné polia. Lenže ked ich všetky vyplní a prejde znova na spodok stránky zistí že "Odoslať" tam nie je - zmizlo . Myslím, že je to len poposúvané . Ako to odstránim? Dakujem pekne

Dátum
Vložil
Titulok

Re:posunie sa mi dolu "odoslať"

Dobrý deň, prepáčte za neskorú reakciu. Vyriešiť sa to dá tak, že zmeníte výšku (dĺžku smerom dole) formulára v inframe kóde na požadovanú hodnotu. Potom ale bude o niečo dlhší. Toto je trochu chyba Wufoo formulárov. Môžete tam tiež pre návštevníkov napísať poznámku, že v prípade problémov s odoslaním formulára je potrebné znovu načítať stránku a tým sa obnoví formulár bez chybových hlášok.

(c) 2009 Peknastranka.sk