Aby vás vaši zákazníci alebo návštevníci webu mohli kontaktovať, potrebujte mať na svojej stránke kontaktný formulár. V nasledujúcom návode vám popíšem, ako ho vytvoríte vo WordPress.
Obsah
Na čo slúži kontaktný formulár
Kontaktný formulár slúži návštevníkom stránky ako jednoduchý nástroj pre kontaktovanie s vami. Návštevníci internetu ho využívajú radšej ako e-mail. Je to preto, že im šetrí čas. Môžu svoju správu napísať priamo na stránke bez toho, aby museli otvárať svoj e-mail.
Kontaktný formulár šetrí čas aj vám. A poskytne vám všetky informácie, ktoré potrebujete:
- Vo formulári si nastavíte polia pre informácie, ktoré od ľudí vyžadujete. Napríklad telefónne číslo. Tieto informácie by v e-maili pravdepodobne neuviedli.
- Môžete si nastaviť automatické odpovede, v ktorých používateľovi oznámite základné informácie.
Okrem toho vás používanie kontaktného formulára chráni proti spamu. Ak na webe uverejníte len aktívny e-mail, začnete dostávať množstvo nevyžiadanej pošty.
Ako pridať kontaktný formulár vo WordPress
WordPress ponúka možnosť vytvorenia kontaktného formulára pomocou pluginu. Osobne odporúčam využiť plugin Contact Form by WPForms.
Tento plugin je veľmi jednoduchý na ovládanie. Používa nástroj drag & drop a kontaktný formulár si v ňom rýchlo vytvorí aj začiatočník. V základnej verzii je dostupný zadarmo.
Ak budete potrebovať využívať zložitejšie funkcie, môžete ho upgradovať na WPForms Pro. Oproti free verzii obsahuje navyše možnosť ukladania odoslaných formulárov v databáze, nahrávanie súborov, šablóny formulárov a iné praktické funkcie.
Plugin si nainštalujete priamo z administrácie stránky. Po inštalácii nezabudnite plugin aktivovať. Presný postup sa dozviete v mojom článku Čo je to WordPress plugin? Ako ho nainštalovať?
V administrácii stránky sa vám po aktivovaní pluginu zobrazí nová položka WPForms.
Tvorba formulára pomocou WPForms
Ak chcete vytvoriť nový kontaktný formulár, prejdite na fukciu WPForms > Add new. Zobrazí sa vám nasledujúca stránka:
Ako prvé zadajte názov kontaktného formulára. Potom si vyberte šablónu, ktorú chcete používať. Základná verzia WPForms ponúka štyri šablóny na vytvorenie formulárov.
Prázdny formulár (blank form) — Ak si vyberiete prázdny formulár, môžete si vytvoriť vlastnú verziu pomocou funkcie drag & drop.
Jednoduchý formulár (Simple Contact Form) — táto šablóna ponúka možnosť použitia vopred pripraveného formulára. Budete si však môcť pridávať a odoberať jednotlivé polia tak, ako potrebujete.
Formulár na odber noviniek (Newsletter Signup Form) — v tejto šablóne vytvoríte formulár pre prihlásenie na odber noviniek vášho webu. Aj tu si môžete pridať a odobrať jednotlivé polia podľa vašich preferencií.
Formulár pre návrhy (Suggestion form) — využijete ho, ak chcete návštevníkov stránky požiadať o názory či návrhy.
Ako vytvoriť jednoduchý formulár
Budeme pokračovať popisom postupu vytvorenia formulára pomocou šablóny Simple Contact Form.
V pravej časti obrazovky nájdete vopred vytvorené polia pre pridanie mena, e-mailu a správy. Keď prejdete myšou na jednotlivé polia, zobrazí sa vám ponuka pre ich vymazanie a úpravu. Môžete si ich tiež jednoducho chytiť myšou a presunúť na iné miesto vo formulári.
Pre pridanie nového poľa prejdite na ponuku v ľavej strane obrazovky. Na vybrané pole kliknite alebo ho pretiahnite myšou na pravú stranu.
Pre uloženie kontaktného formulára nezabudnite kliknúť na Save. Tlačidlo nájdete navrchu obrazovky.
Nastavenie vlastností formulára
Vytvorený formulár sa vám na stránke bude zobrazovať s tlačidlom Submit. Ak chcete nastaviť názov tlačidla v slovenčine, prejdite na Settings > General.
Okrem toho tu nájdete viacero iných možností nastavenia:
- Form Name — tu upravujete názov kontaktného formulára.
- Form Description — slúži na popis formulára.
- Form CSS Class — umožňuje vložiť vlastnú triedu pre formulár.
- Submit Button Text — tu upravíte text tlačidla
- Submit Button Processing Text — vyplňte text, ktorý sa má zobraziť po odoslaní formulára.
- Submit Button CSS Class — toto pole slúži na pridanie vlastnej triedy pre tlačidlo na odoslanie.
- Enable anti-spam honeypot — okno v tomto riadku odporúčam ponechať zaškrtnuté. Táto funkcia slúži na ochranu proti spamovému odosielaniu formulára.
Pri nastavení vlastností na záložke General nemusíte okrem textu pre tlačidlo Submit a textu, ktorý sa zobrazí po odoslaní formulára nič upravovať.
Nastavenia notifikácii na e-mail
Pod záložkou Settings > Notifications nájdete ďalšie možnosti nastavení. A to nastavenia pre e-mailové upozornenia. Tie sa spravidla odosielajú na e-mailovú adresu správcu webu. Pre prehľadnosť prijímaných správ upravte predmet e-mailu. Ak chcete, môžete upraviť aj iné polia.
- Notifications– tu zapínate alebo vypnete funkciu odosielania formulára na váš e-mail. Túto funkciu odporúčam nechať zapnutú. Jednotlivé vyplnené formuláre sa nikde neukladajú. Na vaše informovanie o nich slúži práve e-mailová notifikácia.
- Send To Email Address— vyplňte e-mailovú adresu, na ktorú sa má formulár odoslať.
- Email Subject— môžete si nastaviť aj predmet e-mailu.
- From Name — názov odosielateľa e-mailu. Nájdete tu vopred nastavený názov vašej stránky.
- From Email— e-mailová adresa odosielateľa.
- Reply-To— e-mailová adresa pre odpoveď.
- Message—telo e-mailu. Ak ponecháte nastavenie {all_fields} e-mail bude obsahovať všetky polia formulára.
Nastavenie potvrdenia odoslania formulára
Potvrdenie formulára je to, čo sa návštevníkovi stránky zobrazí potom, ako odošle formulár. Môžete zvoliť poďakovanie za kontaktovanie alebo ho presmerovať na vybranú stránku webu. Nastavenia vykonáte na záložke Settings > Confirmations.
Najskôr si zvoľte typ potvrdenia. V poli Confirmation Type sú na výber tri možnosti:
- Message– zobrazí text, ktorý napíšete do okna nižšie.
- Show page– nastavíte presmerovanie na vybranú stránku webu.
- Go To URL– vložte URL stránky, na ktorú má byť návštevník webu presmerovaný po odoslaní formulára.
Úprava, odstránenie a duplikovanie formulára
Všetky vytvorené formuláre sa zobrazia v zozname formulárov po kliknutí na WPForms v administrácii stránky. Keď prejdete myšou na názov formulára, zobrazí sa ponuka dostupných funkcií. Môžete si vybrať, či chcete formulár upravovať, zobraziť jeho náhľad, vymazať alebo duplikovať.
Poslednou z funkcií je počet zobrazení. Táto funkcia je dostupná len v Pro verzii. Vďaka nej sa vyplnené formuláre ukladajú priamo do administrácie stránky.
Ako pridať vo WordPress kontaktný formulár na stránku
Po vytvorení na nastavení vlastností formulára vo WPForms je ešte potrebné vložiť ho na stránku. Ako prvé si otvorte existujúcu stránku, ktorú chcete upravovať, alebo si vytvorte novú.
Na pridanie sa používa shortcode kontaktného formulára. Nájdete ho:
- na stránke úpravy formulára pod tlačidlom Embed
v pravom hornom rohu, - na stránke zoznamu všetkých formulárov v stĺpci shortcode.
Na stránke, kam chcete kontaktný formulár vložiť, si vytvorte nový blok. Do neho vložíte shortcode. Nezabudnite si uložiť všetky zmeny na stránke.
Takto bude vyzerať stránka po vložení shortcode.
Ako pridať kontaktný formulár na bočný panel
Kontaktný formulár sa vo WordPress dá pridať aj na bočný panel, do hlavičky či päty stránky. V administrácii prejdite na možnosť Vzhľad > Widgety. V zozname widgetov zrolujte nižšie a nájdete WPForms.
Formulár pridáte rovnako ako iné dostupné widgety pretiahnutím myšou na zvolené miesto.
Vyplňte názov a vyberte formulár, ktorý chcete použiť. Nezabudnite na uloženie vykonaných zmien. Úpravy vloženého formulára môžete vykonávať aj so živým náhľadom.
WPForms Premium vs WPForms Lite
Platená verzia WPForms Premium dokáže oproti bezplatnej (lite) verzii napríklad tieto užitočné tieto veci:
- Možnosť vytvárať neobmedzené množstvo formulárov.
- Väčšie množstvo šablón pre formuláre.
- Možnosť používať podmienenú logiku na ovládanie viditeľnosti polí formulára.
- Možnosť vytvárať viac-stránkové formuláre.
- Možnosť vytvárať formuláre pre registráciu používateľov.
- Pokročilá ochrana pred spamom.
- Možnosť nahrávať a prijímať súbory cez formulár.
- Pokročilé typy polí ako sú polia pre dátum a čas.
- Možnosť ukladať, vidieť a spravovať odpovede z formulárov priamo v administrácii WordPress.
- Integrácia so službami tretích strán ako sú napríklad: PayPal, Stripe, Mailchimp, AWeber, GetResponse, Constant Contact, Drip, Zapier…
Dobrý den pán Jurosko,
pripravujem “sign up form” v mailchimpe na web stránku bežiacu vo wordpress cms.
v sekcií “sign up Thank you form” sa neviem dopátrať kde sa da urobiť preklad výrazov.
Mam nastavený autopreklad, ale ten je zvláštny. Keď prijmem potvrdzujúci mail je to v takomto tvare: citujem:
********************
Prosím potvrďte objednávku predplatného
Áno, prihláste sa ma do tohto zoznamu.
Potom kliknem na: Áno, prihláste sa ma do tohto zoznamu
a zobrazí sa: citujem:
Potvrdiť ľudstvo
Než sme sa prihlásite, musíme potvrdzujete, že ste človek.
************************
Horeuvedene by som potreboval dat do normálnej slovenskej reči, ale neviem ako to urobiť…
uz sa s tým trápim asi 3 dni…Nevedeli by ste mi prosim pomôcť ?
Dakujem pekne
Janovic
Dobrý deň,
Ak sa nemýlim, malo by to ísť cez Signup forms -> Form builder -> zvoliť si správny formulár -> Translate it -> Set default language: Slovak -> vložiť preklady.
Dajte mi potom prosím vedieť, či sa vám to podarilo.
Dobry den pan Jurosko,
ano toto sa da prelozit, avsak este pred tymto potvrdenim su dve casti (neviem ako to nazvat)….mozno jednoduchsie to vysvetlim takto:
Skusal som sa prave u vas na wp.sk odhlasit (pardon za spam) a hned som sa zasa prihlasil k odberu ?
Pride mi od vas email: wp.sk: už iba prosím potvrďte emailovú adresu
No a to co je v emaily potrebujem normalne prelozit a neviem sa dopatrat kde to prelozim.
Tzn. vy mate (a toto neviem ako prelozit, lebo mi to v casti translate mailchimp neuvedie…):
Prihlásenie na odber
Ďakujem. Prosím potvrďte svoju emailovú adresu.
Áno, prajem si dostávať emaily.
********************************************
No a ked to potvrdim, potom mam potvrdit ze som CLOVEK…no a aj toto by som potreboval editovat, a ani to mi mailchimp neudava ako moznost.
Dakujem Vam za pomoc
PS: inak ked som si dal u vas ” Ano prajem si dostavat maily” vyhodilo mi ze “Cannot find an email address id”
Pre preklad prvého spomínaného emailu na potvrdenie som si zvolil ako formulár ‚Opt-in confirmation email‘ a tam to preložil spôsobom spomínaným vyššie:
Pre preklad textov na potvrdenie, že daná osoba nie je robot, je potrebné otvoriť si formulár s názvom ‚reCAPTCHA confirmation‘.
Inak nič si z toho nerobte, že vám to nešlo. Mailchimp to má spravené veľmi neintuitívne. Pamätám si, že aj ja som vtedy dosť hľadal keď som to potreboval preložiť.
Super dakujem. reCAPTCH confirmation som nasiel. Ale nepodarilo sa mi nájsť vo výbere: Ot-in confirmation email. Je možné že je to iba v platenej verzii ? dakujem
Ani ja nemám platenú verziu, takže tým to nebude.
Rozmýšľam, že možno nemáte aktivovaný double opt-in (teda potvrdzovanie emailu pre prihlásenie k odberu). Nech sa páči, tu je návod: https://mailchimp.com/help/about-double-opt-in/
Veľmi pekne Vám dakujem za pomoc. Všetko nastavené a funguje ! Boh vás žehnaj a veľa zdravia prajem. Jano
Ďakujem, som rád, že som pomohol ?.
ahoj,
vytvorila som WPForms formulár. Chcela by som aby mi po vyplnení formulára klientom na webstránke aby prišiel ten mail aj mne a aj jemu aby prišla správa na jeho mail, že bol úspešne odoslaný. Robí sa to v „Send To Email Address“? Akou formou to treba napísať, do tých svoriek alebo nejako inak?
Stránku robím cez wordpress
Budem veľmi vďačná za akúkoľvek radu
s pozdravom
Tina
Ahoj,
Áno, robí sa to v „Send To Email Address“. Treba si kliknúť na „Show Smart Tags“ – to ti rozbalí zoznam polí tvojho formulára. Tam si zvolíš pole s emailom:
To ti pridá to „Send To Email Address“ niečo takéto: {field_id=“1″}.
Daj mi potom vedieť, či sa ti to podarilo a či ti to funguje.
Dobry den,
mam poziadavku od klienta, aby po odoslani kont.formualru sa zobrazila „dakovacia stranka“ s vlastnou url.
Viete mi s tymto poradit? Nasla som k tomu plugin Contact form 7 redirection. Co odporucate Vy?
A este mam aj taku poziadavku, ze opravit skrolovanie stranky na rychlejsie – da sa to vobec?
dakujem
Dobrý deň,
Z otázky predpokládam, že na kontaktné formuláre používate plugin Contact Form 7.
Presmerovanie na ‘Thank you’ stránku sa dá spraviť aj bez ďalšieho pluginu, tu je na to návod.
Dajte potom vedieť, či a ako sa vám to podarilo vyriešiť.
Ano, contact form 7 pouzivam. Neviem ci sa mi podari spravit presmerovanie podla tohto postupu, kodovaniu zatial nerozumiem, neviem kam ho mam vlozit, atd.. Skusim asi skor nejaky plugin.
No tak som skusala navod, ktory ste mi poslali, ale nepodarilo sa. Postupovala som takto:
V KONTAKToch som sla na konkretny kontaktny formular, “dodatocne nastavenia”, vlozila kod s linkom z navodu s prepisanim na dakovaciu stranku, ktoru mam vytvorenu.
Tak som si to testovala a pod kont. formularom sa zobrazilo len ze sprava bola odoslana, ale nepresmerovalo ma to na ziadnu dakovaciu stranku. Kde mozem robit chybu prosim? dakujem
V návode píšu, že sa to má riešiť cez DOM events, takže cez dodatočné nastavenia sa to nedá spraviť. Musíte si to vložiť do javascript súboru.
aha, ..tak uz len najst kde sa nachadzaju tie javascript subory..
Zobrazit výsledok shortcode pre CF7
Zdravím,
vytvoril som si vo WP v php shorcode pre zachytávanie zadávaných údajov pre Contact Form 7. Podľa zadaných údajov vo formulári pak vo function.php dostanem želaný výsledok, ktorý potrebujem zobraziť a tiež dostať do mailu. V CF7 použijem [názov] v záložke E-mail, tiež vo záložke Form a aj na stránke.
1. do mailu výsledok príde v poriadku
2. vo formulári CF7 sa zobrazí zlý výsledok
3. na stránke za formulárom mimo CF7 sa tiež zobrazí rovnaký ale zlý výsledok
Čiže, ešte pred odoslaním CF7 prebehne výpočet a ten sa dostanem do mailu. Ale pre zobrazenie či už vo formulári (za tlačítkom submit použijem [nazov] ) alebo na rovnakej stránke ako formulár (za formulárom použijem [nazov] ) alebo po odoslaní a presmerovaní na novú stránku sa vždy zobrazí zlá hodnota. Výpočet prebehne ešte pred odoslaním a ten sa zobrazí.
Ako je možné získať rovnaký výsledok z shortcode pre email i zobrazenie na web?
Použil som následovné:
add_filter( 'wpcf7_form_elements', 'do_shortcode' ); function nazov_cf7_func() { následuje výpočet } add_shortcode('nazov', 'pzp_cf7_func'); add_filter('wpcf7_mail_components', 'do_shortcode_mail', 10, 3); function do_shortcode_mail( $components, $contactForm, $mailComponent ){ if( isset($components['body']) ){ $components['body'] =do_shortcode($components['body']); } return$components; }Môžem zaslať aj celý kód, ak to pomôže.
Som 50+ a je to moja prvá skúsenosť s webom, nenašiel som nič podobné a už ma nič nenapadá, zatial 🙂
Viete mi niejako poradiť?
Ďakujem.
S úctou
Jaroslav Nytra
Dobrý deň,
Toto je veľmi špecifická situácia akú som ešte neriešil. Žiaľ neviem poradiť, kde presne by mohol byť problém. Ak sa vám to nejako podarí vyriešiť dajte vedieť, som zvedavý.
dobry den, zaujimalo by ma, ci sa vam podarilo vas formular upravit a spracovat ako ste popisovali.