Formulář aplikace WordPress. Formuláře pro WordPress – rychlé, jednoduché, efektivní! Nastavení kontaktního formuláře

Ve výchozím nastavení WP takovou funkčnost nemá, ale na záchranu přicházejí pluginy a speciálně navržené konfigurace pro motor.

Formulář zpětné vazby WordPress pomocí pluginu Contact Form 7

Budu analyzovat bezplatný kontaktní formulář 7, který byl přeložen do ruštiny. Standardně zahrnuje:

• Emailová adresa
• V případě zájmu telefon
• Text zprávy
• Captcha

Přidejte captcha reCaptcha

Plugin instalujeme standardně přes WordPress admin panel, takto to v panelu vypadá.

CF7 ve vyhledávání

Pojďme nastavit reCaptcha od Google, přejděte do sekce integrace a klikněte na odkaz google.com/recaptcha. Musíte mít účet Google.

Odkaz na recaptcha

Přenese to do služby, nastaví položky jako na snímku obrazovky, zadá správně doménu a dole klikne na odeslat.

Propojení captcha s webem

Zkopírujte data pro captcha, oba klíče.

Přístupové klíče

Vraťme se k WordPress plugin a klepněte na tlačítko Nastavení integrace.

Integrace

Zadáme klíče zkopírované ze služby reCaptcha, zapíšeme je do příslušných sekcí a uložíme.

Ukládání nastavení

Vytvoření formuláře

Přejděte do nastavení a vytvořte nová uniforma. Vymažeme standardní označení.

Vymazat standardní nápisy

Zadejte název nového projektu a klikněte na tlačítko Text, protože název bude zadán jako text bez pravidel.

Textové pole

Zobrazí se vyskakovací okno, upravte jej podle svých potřeb.

1. Typ určuje, zda je návštěvník povinen pole vyplnit, já nastavil ano
2. Jméno neměníme, jedná se o jedinečný identifikátor
3. Výchozí hodnota, zadaná fráze, kterou uvidím uvnitř
4. Použijte místo zástupného symbolu, to znamená, že dokud nic nezadáte, zobrazí se nápis
5. Nedoporučuji používat pole Akismet
6. Chcete-li přidat styly, zadejte třídu nebo id, vytvořený název pole
7. Vložte značku do společného pole

Podobně stiskneme tlačítko e-mail, vidíme stejné rozhraní.

Generátor pošty

Svůj email můžete zadat jako text, ale pak přijdete o funkci kontroly správnosti. Plugin zkontroluje, zda existuje znak @.

Přidejte textovou oblast a sekci telefonu (volitelné), princip je stejný.

Tlačítka oblasti telefonu a textu

Dříve jsme nastavili integraci captcha ve WordPressu, v základní verze CF7 nemá tlačítko pro vložení captcha; byl pro to vytvořen krátký kód a umístěn pod ostatní prvky.

Zbývá pouze přidat tlačítko pro odeslání, vybrat ze seznamu a nakonfigurovat jeho výstup.

Tlačítko Odeslat

Výsledkem je následující kód.

Konečný kód CF7

Nastavení odesílání dopisu

Změna nastavení e-mailu

1. Značky polí vytvořené dříve
2. Poštovní adresa, na kterou budou zasílány dopisy
3. Od a předmět, vyplňte podle potřeby
4. Další záhlaví, zcela vymazáno
5. Do těla dopisu napíšeme, co chceme po odeslání emailem obdržet. Například jsem napsal Mail a vložil odpovídající značku naproti tomuto slovu.
6. V dolní části klikněte na Uložit

Zachování

Vyzkoušejte zbývající karty oznámení a nastavení, můžete změnit text zobrazený v různých situacích.

Vložení formuláře na web

V horní části stránky byl vygenerován krátký kód, zkopírujte jej.

Shortcode

Přejděte na libovolný záznam a vložte jej.

Vložte shortecode do stránky

Po kliknutí na tlačítko Zobrazit se přenese na stránku zobrazující provedenou práci.

Finální verze

Dobrá věc na vývojářích témat WordPress je vytvořit produkt, který podporuje CF7 předem, což usnadňuje život a nevyžaduje registraci CSS styly do kódu webu. Moje téma podporuje plugin a zobrazuje velmi pěkný obrázek. Pokud nejste spokojeni, pak byla každému poli přiřazena třída, použijte ji ke změně designu. Zkontroloval jsem téma a e-maily přicházejí rychle. Pro další metody si přečtěte odkaz.

Ke všemu materiálu přiložím videonávod ukazující nejen postup tvorby, ale i jak dělat krásný design formuláře, protože celý proces nelze textově popsat.

Udělejte pole vodorovně v řadě

Podíval jsem se na internet a byl jsem zděšen, kolik manipulací se dělá. Nebudu vám ukazovat, jak si plně přizpůsobit design, to je téma každého velkého manuálu. Jdeme upravit formulář a zabalíme pole, která chceme seřadit vodorovně do div s třídou, podívejme se na kód.

Chci seřadit pole Jméno, Pošta a Telefon do řádku. Nezapomeňte uložit změny.

Zabalte to do div

Přihlaste se do administrační oblasti WordPress Vzhled> Editor motivů > style.css píšeme styly pro zadní stranu Komunikace WordPress na konec souboru.

Flex-form(display:flex;) @media only screen a (max-width: 655px)(.flex-form(display:block;))

Předepisování stylů

Ze stylů můžete vidět, že divs s třídou flex-form byla přiřazena vlastnost display:flex, která určuje uspořádání prvků v řádku, bez dodatečné parametry prostor je rozdělen rovnoměrně.

Druhá položka ukazuje, když rozlišení obrazovky dosáhne 655 pixelů, formulář změní svou vlastnost z flex na blok a formulář se začne zobrazovat jako dříve s poli pod sebou. Tento limit 655 se liší individuálně podle stylu mobilní zařízení zpětná vazba vypadala dobře.

Vyskakovací formulář zpětné vazby

Pozitivní akce při přijímání žádostí z CF7. Plugin pro zobrazení vyskakovacího okna bude Popup Maker. Nebudu to popisovat, odkaz na materiál se nachází v tomto odstavci. Navíc z toho článku.

Jak přidat do elementoru

Pro vložení formuláře do elementoru musíte použít sekci shortcode. Formulář byl vytvořen podle výše uvedených pokynů, což znamená, že existuje krátký kód z CF7. Pojďme k vytvoření stránky v Elementoru a vyhledejte krátký kód ve vyhledávání prvků.

Hledání prvku v elementoru

Elementor požadavek zpracoval

Pomocí nastavení motivu

Většina šablon WordPress nemá nástroje pro vytváření automatické zpětné vazby. Ale naše šablony z WPShop mají vestavěnou funkci, která se zobrazuje pomocí krátkého kódu. Podívejme se na příklad Root. Přejdu k vytvoření stránky a pak se podívám na snímek.

Doplněk v ROOTu

• Zadejte text [ kontaktní formulář ] (bez mezer v závorkách)
• Klikněte na náhled

Otevře se stránka s již upraveným, označeným a rozvrženým formulářem, prostřednictvím kterého může návštěvník získat zpětnou vazbu od administrátora.

Práce vestavěné funkce ROOT

Zpětná vazba prostřednictvím widgetů

Vkládání zpětné vazby do widgetů je snadné. Pomůže textový widget, přesuňte jej do aktivní zóny a napište do něj shortcode.

Použití textového widgetu

Nastavíme nadpis, zadáme konfiguraci do textové oblasti, přejdeme na blog a uvidíme, jak je zpětná vazba zpracována.

Formulář ve widgetu

Zpětná vazba bez pluginu

Pokud preferujete metody bez pluginu, tak jsou výborné návody, našel jsem je na internetu, pokud se objeví majitel kódu, rád poskytnu odkaz.

Otevřete soubor function.php k úpravě, úplně dole napište kód, jak jej používat.

/*kód zpětné vazby*/ add_shortcode("art_feedback", "art_feedback"); funkce art_feedback() ( ob_start(); ?>

Vytvořili jsme formulář v značce WordPress HTML a propojili jsme jej s krátkým kódem. Myslím, že tento přístup bude pohodlný, protože blok lze zobrazit kdekoli.

Přejděte na vytvoření stránky na panelu WordPress, napište , klikněte na zobrazit.

V Gutenbergovi vložíte řádek do libovolného textového bloku.

Záznam výstupu

Při přechodu na web uvidíme nevygenerovaný formulář, pole fungují, ale dopis nebude odeslán, protože není připojen obslužný program PHP.

Špatný vzhled

Nyní upravíme vzhled, vložte tento kód do souboru style.css aktivního motivu.

#add_feedback ( margin: 20px 0 0; position: relativní; ) #art_name, #art_email, #art_subject, #art_comments ( padding: 10px 5px; display: inline-block; width: 49,548%; border-radius: 3px; border: 1px solid #ddd; font-size: 0.9em ) #art_subject ( šířka: 100 %; margin: 5px 0; ) #art_comments ( šířka: 100 %; ) #add_feedback .button ( border: none; padding: 10px 20px; barva: #fff; velikost písma: 10px 0 0 0; border-radius: #2f94ce; input:focus, #add_feedback textarea:focus ( color: #444; box-shadow: 0 0 3px rgba(68); , 68, 68, 0,2); .error-text ( pozadí: #F59E9E; padding: 15px 0px; text -align: center; color: #fff; ) .error-name, .error-email, .error-comments ( display: inline-block; font-size: 11px; position: absolute; top: -30px; color: white ; border: 1px full red; padding: 5px 10px; background: red; box-shadow: 0 0 3px 0px rgba (0, 0, 0, 0,3); ) .error-name:after, .error-email:after, .error-comments:after ( content: ""; position: absolute; left: 20px; bottom: -10px; border: 5px solid transparent; border-top: 5px plná červená ) .chybové komentáře ( nahoře: 16 %; vlevo: 0; ) .název chyby ( vlevo: 0; ) .chyba-e-mail ( vpravo: 4 %; ) .zpráva-úspěch ( pozadí: rgba() 0, 128, 0, 0,5); barva: #fff; okraj-poloměr: 3px; ) #art_name:focus::-moz-placeholder, #art_name:focus:-moz-placeholder, #art_name:focus :-ms-input-placeholder, #art_email:focus::-webkit-input-placeholder, #art_email: focus::-moz-placeholder, #art_email:focus:-moz-placeholder, #art_email:focus:-ms- input-placeholder, #art_comments:focus::-webkit-input-placeholder, #art_comments:focus::- moz-placeholder, #art_comments:focus:-moz-placeholder, #art_comments:focus:-ms-input-placeholder, #art_subject:focus::-webkit-input-placeholder, #art_subject:focus::-moz-placeholder, #art_subject:focus:-moz-placeholder, #art_subject:focus:-ms-input-placeholder ( barva: průhledná )

Aktualizujeme style.css na serveru a uvidíme, jak se změnila zpětná vazba na stránce.

Dispoziční blok

Vytvořte soubor feedback.js a vložte do něj kód. Nahrajte na hosting do složky js aktivního motivu.

JQuery(document).ready(funkce ($) ( var add_form = $("#add_feedback"); // Resetování hodnot polí ​​$("#add_feedback input, #add_feedback textarea").on("blur", function () ( $("#add_feedback input, #add_feedback textarea").removeClass("error"); $(".error-name,.error-email,.error-comments,.message-success").remove( ); $("#submit-feedback").val("Odeslat zprávu" )); // Odeslat hodnoty pole var options = ( url: feedback_object.url, data: ( action: "feedback_action", nonce: feedback_object); .nonce ), typ: "POST", dataType: "json", beforeSubmit: function (xhr) ( // Při odesílání změňte popisek na tlačítku $("#submit-feedback").val("Submit.. ."); ), úspěch: funkce (požadavek, xhr, stav, chyba) ( if (request.success === true) ( ​​// Pokud jsou všechna pole vyplněna, odešlete data a změňte štítek na add_form.after(" tlačítko

js složky na serveru

Nyní načteme druhou část kódu do function.php.

/*druhá část*/ add_action("wp_enqueue_scripts", "art_feedback_scripts"); function art_feedback_scripts() ( // Zpracování polí wp_enqueue_script("jquery-form"); // Zahrnout soubor skriptu wp_enqueue_script("feedback", get_stylesheet_directory_uri() . "/js/feedback.js", array("jquery"), 1.0 , true); // Nastavení dat objektu ajax wp_localize_script("feedback", "feedback_object", array("url" => admin_url("admin-ajax.php"), "nonce" => wp_create_nonce("feedback-] nonce" ),)); ) add_action("wp_ajax_feedback_action", "ajax_action_callback"); add_action("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); function ajax_action_callback() ( // Pole chyb $err_message = array(); // Zkontrolujte nonce. Pokud kontrola selže, zablokujte odesílání if (! wp_verify_nonce($_POST["nonce"], "feedback-nonce") ) ( wp_die("Data byla odeslána z nesprávné adresy"); // Kontrola spamu. Pokud je skryté pole vyplněno nebo je kontrola zrušena, zablokujte odesílání, pokud (false === $_POST["art_anticheck"] | prázdný($_POST[ "art_submitted"])) ( wp_die("Toto je spam"); ​​​​) // Zkontrolujte pole jména, pokud jsou prázdná, pak napište zprávu do pole chyb if (empty($_POST) ["art_name"]) ||. isset($_POST ["art_name"])) ( $err_message["name"] = "Zadejte své jméno."; ) else ( $art_name = sanitize_text_field($_POST["art_name). "]); ) // Zkontrolujte pole pošty, pokud jsou prázdná, pak zapíšeme zprávu do pole chyb if (empty($_POST["art_email"]) || ! isset($_POST["art_email"])) ( $err_message["email"] = "Zadejte svou e-mailovou adresu mail." ) elseif (! preg_match("/^[[:alnum:]]*@+\.(2,4)$/i", $ _POST["art_email"])) ( $err_message["email "] = "E-mailová adresa je nesprávná."; ) else ( $art_email = sanitize_email($_POST["art_email"]); ) // Zkontrolujte pole předmětu e-mailu, pokud jsou prázdná, napište výchozí zprávu, pokud (empty($_POST["art_subject"]) || ! isset ( $_POST["art_subject"])) ( $art_subject = "Zpráva z webu"; ) else ( $art_subject = sanitize_text_field($_POST["art_subject"]); ) // Zkontrolujte pole zprávy, pokud jsou prázdná, pak zapište zprávu do pole chyb if (empty($_POST["art_comments"]) || ! isset($_POST["art_comments"])) ( $err_message["comments"] = "Zadejte svou zprávu."; ) else ( $ art_comments = sanitize_textarea_field($_POST["art_comments"] ) // Zkontrolujte pole chyb, pokud není prázdné, odešlete zprávu. V opačném případě odešleme dopis if ($err_message) ( wp_send_json_error($err_message); ) else ( // Určete adresáta $email_to = ""; // Pokud není adresát uveden, převezměte data z nastavení webu, pokud (! $email_to) ( $email_to = get_option("admin_email"); ) $body = "Jméno: $art_name \nE-mail: $art_email \n\nZpráva: $art_comments"; $headers = "Od: " . $art_name. "<" . $email_to . ">" . "\r\n" . "Odpovědět: " . $email_to; // Odeslat dopis wp_mail($email_to, $art_subject, $body, $headers); // Odeslat zprávu o úspěšném odeslání $message_success = "Zpráva odeslána. Brzy se vám ozvu."; wp_send_json_success($message_success); ) // Pro každý případ znovu zabijte proces ajax wp_die(); )

Zkontrolujeme funkčnost formuláře. Problém může nastat, pokud jste správně nenačetli soubor js do motivu WordPress a cesta k němu není správně zadána, konkrétně v druhém kódu v sekci // Zahrnout soubor skriptu.

Vyplňte a odešlete dopis

Takový dopis přijde poštou se zpětnou vazbou.

Co následuje po odeslání

Skvělé, dokázali jsme to, dokázali jsme vytvořit formulář zpětné vazby ve WordPress pomocí tří různých metod, pokud máte nějaké dotazy, ptejte se, vyřešíme to. Hodně štěstí!

Líbí se mi to nelíbí

Od autora: Zdravím vás, milí čtenáři. Pokud jste potřebovali formulář zpětné vazby pro váš web WordPress, pak je tento článek právě pro vás. Po přečtení článku se naučíte, jak vytvořit formulář zpětné vazby na WordPress a udělat to snadno, rychle a efektivně.

K vyřešení tohoto problému tedy použijeme plugin formuláře zpětné vazby s názvem Contact Form 7. Nevím, proč autor zvolil toto jméno, nebo spíše sériové číslo v názvu, možná je to jeho šťastné číslo

Ať je to jakkoli, plugin Contact Form 7 pro WordPress je jedním z nejoblíbenějších pluginů mezi pluginy pro vytváření formuláře pro zpětnou vazbu WordPress a mezi všemi ostatními. A skutečně, více než milion instalací – toto číslo mluví samo za sebe. Hodnocení pluginu je poměrně vysoké – 4,5 hvězdičky, což eliminuje veškeré pochybnosti o jeho použití. Kromě toho je plugin již rusifikován, takže nemusíte překládat pole formulářů a zprávy do ruštiny.

INSTALACE ZÁSUVKU KONTAKTNÍHO FORMULÁŘE 7 PRO WORDPRESS

Pojďme si projít standardní instalační proces. Mimochodem, pokud jste ještě nikdy neinstalovali pluginy, pak si určitě přečtěte článek “WordPress. Instalace pluginů“, kde najdete všechny možné způsoby instalace pluginů.

Na panelu správce webu přejděte do sekce Pluginy - Přidat nový a do vyhledávacího pole zadejte název pluginu - „kontaktní formulář 7“. První nalezený plugin formuláře zpětné vazby je možnost, kterou potřebujeme.

Klikněte na tlačítko Instalovat a aktivujte plugin. Po instalaci se v nabídce objeví nová sekce Kontaktní formulář 7 s několika položkami.

První položka Formuláře obsahuje seznam aktuálních formulářů na vašem webu a umožňuje vám je spravovat: upravovat nebo mazat. Hotový formulář není nic jiného než krátký kód (krátký kód), který lze vložit do příspěvku, stránky nebo dokonce widgetu. Tento krátký kód bude na stránce rozbalen do úplného kódu. Plugin již přichází s příkladem formuláře zpětné vazby, zkopírujeme jeho shortcode a vložíme jej například na kontaktní stránku. Poté přejděte na stránku a prohlédněte si na ní připravený funkční formulář zpětné vazby WordPress.

Formulář můžeme zkusit vyplnit a odeslat, dopis bude doručen na emailovou adresu uvedenou v nastavení profilu administrátora. Upozorňujeme, že plugin Contact Form 7 nenabízí pouze obvyklý standardní kontaktní formulář. Ne, plugin umožňuje jeho flexibilní konfiguraci. Formulář je navíc odeslán bez opětovného načítání stránky, což je další plus. A samozřejmě validace polí formuláře, možnost specifikovat požadovaná pole, je další obrovské plus.

NASTAVENÍ FORMULÁŘE ZPĚTNÉ VAZBY PRO WORDPRESS

No, použili jsme hotový formulář. Co to změnit? Je to možné a je to snadné? Odpověď je ano na obě otázky. Například chci z formuláře odstranit pole Předmět, jak to mohu udělat? Přejděme k úpravě formuláře v nabídce pluginu Forms a podívejte se na následující obrázek.

K odstranění tématu stačí odstranit 2 odpovídající řádky zakroužkované na snímku obrazovky. Zde je zajímavý druhý řádek: . Jak možná tušíte, nejedná se o nic jiného než o krátký kód, který je nasazen v poli formuláře. V tomto případě se jedná o pole typu text s hodnotou atributu name - your-subject.

Pokud například mluvíme o textové oblasti níže, pak její krátký kód vypadá takto: . Zde textarea je značka textarea formuláře a your-message je název tohoto prvku formuláře. Je to jednoduché.

Zde si můžete položit zcela logickou otázku: co dělat s ostatními formulářovými prvky? Jak zjistit, který shortcode je zodpovědný za, řekněme, rozevírací seznam? Ani zde není nic složitého. Nad polem šablony editovatelného formuláře jsou tlačítka, na která do formuláře přidáme potřebné prvky.

Pokud potíže přetrvávají, pomůže vám dokumentace k pluginu, kde najdete mnoho příkladů.

Takže jako příklad odebereme předmět zprávy a přidáme seznam s možnostmi výběru předmětu zprávy. Chcete-li vytvořit rozevírací seznam, klikněte na tlačítko rozbalovací nabídky. V modálním okně, které se otevře, vyplňte formulář. Klíčové je pole Možnosti, do kterého zadáváme možnosti pro rozevírací seznam. Každá možnost je na novém řádku. Ostatní pole formuláře by měla být intuitivní. Pokud například zaškrtneme políčko Typ pole (Povinné pole), vytvoříme u vytvořeného pole formuláře povinné vyplnění. Zaškrtávací políčko Povolit více výběrů umožňuje vytvořit seznam s možností vybrat více možností a zaškrtávací políčko Vložit prázdnou položku jako první vytvoří první prázdnou možnost v seznamu. Pole Id a Class mluví za vše – jedná se o pole pro přidání atributů id a class, které umožňují pole dále navrhovat.

Po vytvoření seznamu s požadovanými možnostmi se v šabloně formuláře objeví nové pole.

Šablonu uložíme a pokusíme se otestovat nový formulář zpětné vazby. Na webu se opravdu změnil formulář, místo textového pole tématu je nyní rozbalovací seznam s možnostmi výběru motivu.

Zkusme vyplnit a odeslat formulář. Formulář je odeslán, ale jejda... přijatý email nemá vybranou možnost předmětu. Jak to? Jak toto nedorozumění napravit? Nebojte se, je snadné to opravit. Přejděte k úpravě formuláře a přepněte se na kartu Dopis.

Na této kartě nakonfigurujete formát dopisu, který přijde na e-mail z formuláře zpětné vazby. Na snímku obrazovky v první zakroužkované oblasti vidíme seznam krátkých kódů (názvů polí formuláře), které se používají v našem formuláři zpětné vazby. Jsou to hodnoty těchto polí, které jsou nahrazeny do šablony dopisu. V druhé označené oblasti vidíme, že pole Předmět si zachovává název z předchozího pole. Pole Text zprávy také obsahuje stejný krátký kód. Nahraďme je příslušnou značkou ze seznamu výše - . Mimochodem, zde můžeme také změnit e-mail příjemce, je napsán v poli Komu. Níže můžeme také změnit další nastavení, všechna jsou podepsaná a jasná.

Uložíme změny a pokusíme se dopis odeslat znovu. Nyní formulář zpětné vazby funguje podle očekávání – na váš e-mail je odeslán e-mail s vybraným předmětem.

V další záložce Oznámení o odeslání formuláře můžeme nakonfigurovat hlášení o úspěchu nebo chybách, které se objevují při odesílání formuláře.

ZABEZPEČENÍ FORMULÁŘE ZPĚTNÉ VAZBY

Co spam, můžete se zeptat, je rozumná otázka? I o to se postaral autor pluginu. V sekci nastavení pluginu je položka Integrace.

Zde můžeme nastavit službu Google reCAPTCHA. Chcete-li to provést, budete muset následovat zadaný odkaz na příslušnou službu Google a poté podle pokynů získat potřebný klíč a integrovat captcha s vaším webem.

Pro ty, kteří nechtějí používat službu reCAPTCHA, nabízí plugin ochranu před roboty ve formě pole otázka/odpověď. Chcete-li přidat toto pole do šablony formuláře, klikněte na tlačítko kvíz a vyplňte formulář stejným způsobem, jako jsme to udělali pro rozevírací seznam. Zadejte otázku a odpověď pomocí svislé čáry.

Poté se ve formuláři zpětné vazby objeví nové pole s jednou z možností pro otázky, které jste zadali. Nyní, aby byl formulář odeslán, musíte uvést správnou odpověď na otázku.

Jak vidíte, vytvoření formuláře zpětné vazby na WordPress je stejně snadné jako loupání hrušek. Plugin Contact Form 7 vám umožňuje vytvořit formulář pro téměř jakýkoli účel. Může to být formulář zpětné vazby, formulář žádosti atd. Ano, jak jsem uvedl výše, formulář lze vložit nejen do příspěvku nebo stránky, ale také do widgetu postranního panelu. Chcete-li to provést, stačí vytvořit widget Text a vložit do něj krátký kód požadovaného formuláře. Nové formuláře, jak jste uhodli, lze vytvořit v nabídce pluginu Přidat nový.

To je z mé strany vše. Pohrajte si s pluginem Contact Form 7 pro WordPress, vyzkoušejte vytváření různých formulářů, věřte, že stále existuje spousta možností k prozkoumání. Pokud máte nějaké dotazy, čekám na ně jako vždy v komentářích. Hodně štěstí!

Online formulář je nepostradatelným nástrojem pro naprosto jakýkoli web. Jedná se o nejdůležitější zdroj komunikace s návštěvníky vašeho webu. Formuláře vám umožňují shromažďovat zpětnou vazbu, provádět průzkumy, vytvářet odběry e-mailů, vybírat platby od zákazníků a mnoho dalšího. Pokud umíte programovat, můžete snadno vytvořit formulář pro web. Jinak existuje mnoho dobrých pluginů, které lze snadno nainstalovat na web a použít k vytváření formulářů.

stepFORM

stepFORM - WordPress plugin pro vytváření formulářů jakékoli složitosti na základě vizuálního návrháře. Má vestavěnou ochranu proti spamu, sběr odpovědí na e-mail a CRM, integraci s Google Analytics a Yandex.Metrica, výpočet nákladů pomocí vzorců, přijímání plateb přes PayPal, Wallet One, Yandex.Money a Yandex.Cash, pomocí formuláře přes odkaz na sociálních sítích a mnoho dalšího.

uCalc

uCalc je populární plugin WordPress pro vytváření výpočtových formulářů různého stupně složitosti. Plugin se skvěle hodí pro formuláře, ve kterých je potřeba nejen přijímat informace od návštěvníků stránek, ale také provádět automatické výpočty pomocí vzorců nebo přijímat platby zákazníků za prodej zboží či služeb. Plugin lze připojit na pár kliknutí a nevyžaduje znalosti programování. Kalkulační formulář je přidán při úpravě stránky nebo publikace.

Kontaktní formulář 7

Contact Form 7 je jedním z nejoblíbenějších pluginů pro vytváření formulářů na WordPressu. Pomocí tohoto pluginu můžete velmi flexibilně upravovat obsah formulářů a konfigurovat zasílání dat e-mailem. Formuláře zahrnují odeslání ajaxu, stejně jako Captcha a Akismet proti spamu.

WPForms

WPForms vám umožňuje vytvářet krásné kontaktní formuláře, formuláře předplatného, ​​platební formuláře a další formuláře pro váš web během několika minut. WPForms budou vypadat skvěle na všech zařízeních (mobil, tablet, notebook i desktop).

Ninja Forms

Ninja Forms vám pomůže vytvořit online formuláře pro WordPress během několika minut pouhým přesouváním polí formuláře pomocí myši. Pro vývojáře můžete použít vestavěné háčky, filtry a vlastní šablony polí, abyste mohli dělat vše, co potřebujete, v jakékoli fázi vytváření nebo odesílání formuláře pomocí Ninja Forms jako základu.

Form Maker

Form Maker vytváří responzivní formuláře pro WordPress prostřednictvím jednoduchého a intuitivního rozhraní. Plugin umožňuje vytvářet různé dotazníky s libovolnými poli, možnostmi otázek a odpovědí. Vytvoření formulářů zabere jen několik kliknutí a několik minut je přizpůsobit dostupnými motivy, styly a možnostmi zobrazení.

Forma Caldera

Caldera Form je bezplatný a výkonný plugin pro WordPress, který vytváří responzivní formuláře pomocí jednoduchého vizuálního editoru. Plugin má mnoho bezplatných, pohodlných doplňků pro začátečníky i webové vývojáře. Antispam, AJAX, e-maily s upozorněním a sledování záznamů v databázi jsou ve výchozím nastavení povoleny.

Visual Form Builder

Visual Form Builder je plugin, který vám umožňuje vytvářet a spravovat všechny druhy formulářů pro váš web na jednom místě. Vytvoření plně funkčního kontaktního formuláře zabere jen pár minut a nemusíte psát ani kapku PHP, CSS nebo HTML.

Tento seznam obsahuje nejoblíbenější pluginy WordPress pro vytváření online formulářů. Pokud používáte další zajímavé pluginy, které nejsou v tomto seznamu, napište do komentářů.

Téměř pokaždé, když webmaster vyvíjí nový web, musí si vybrat ten nejlepší (pro konkrétní potřeby) WordPress plugin pro kontaktní a zpětnovazební formuláře. Obvykle se to děje proto, že klientovi ne vždy vyhovuje jednoduchý kontaktní formulář a někdy je potřeba více formulářů na jednom webu najednou.

Formulář zpětné vazby je jedním z nejdůležitějších prvků webu WordPress, protože bez něj ztrácíte velkou šanci být vždy v kontaktu se svými čtenáři, partnery a zákazníky. Navíc přicházíte o spoustu příležitostí, jak přilákat nové zákazníky. Plugin pro kontaktní formulář WordPress usnadňuje přidání kontaktního formuláře na váš web. To ani nemluvím o různých firemních a prodejních stránkách, kde jsou někdy potřeba velmi specifické formuláře nejen pro jednoduché kontakty.

V tomto článku uvedu nejoblíbenější pluginy ve zcela náhodném pořadí. Článek bude jistě časem doplněn o nejlepší řešení.

Kontaktní formulář 7 je nejoblíbenější (aktuálně přes 12 000 stažení a stále přibývá) plugin pro kontaktní formulář WordPress. Plugin se může pochlubit odesíláním AJAX, vestavěným , filtrem nevyžádané pošty Akismet a schopností nahrávat soubory. Plugin je zcela zdarma a lze jej snadno přizpůsobit pomocí jednoduchého HTML.

Klady: Pokud potřebujete jednoduchý kontaktní formulář, tento plugin je to, co hledáte, protože se snadno instaluje a konfiguruje pomocí jednoduché stránky nastavení. Pomocí jediného řádku kódu můžete vložit kontaktní formulář do jakéhokoli příspěvku nebo stránky.

Nevýhody: Technicky tento plugin nevyžaduje žádnou práci, ale bylo by hezké mít několik na výběr. Pokud chcete změnit vzhled formuláře, budete si muset pohrát s CSS.

Fast Secure Contact From je další populární plugin, který byl stažen již více než 3,5 milionukrát. Umožňuje majitelům blogů snadno vytvářet a přidávat kontaktní formuláře na weby WordPress. Pomocí formuláře můžete také odeslat žádosti o pozvání na běžný hovor nebo videohovor.

Plugin má administrátorské rozhraní, pomocí kterého můžete vytvářet neomezené množství formulářů a prohlížet jejich náhledy. Pomocí captcha a formuláře Akismet Fast Secure blokuje útoky na základě nejoblíbenějších spamových taktik.

Klady: Na rozdíl od jiných podobných pluginů neumožňuje formulář Fast Secure uživatelům zaregistrovat si profil, ale nabízí další skvělé funkce, jako je plánování, online schůzky, podpora více e-mailových adres atd.

Zápory: Současná verze pluginu postrádá jednoduché rozhraní, ale autor pluginu nedávno vydal beta verzi, ve které je rozhraní mnohem lepší. Problém rozhraní tedy není tak akutní.

Kontaktní formulář pomocí Contact ME

Contact Form je bezplatný plugin se základními funkcemi, ale vyžaduje registraci na contactme.com. Registrace je zcela zdarma a nevyžaduje od vás žádné úsilí. Vývojáři pluginu tvrdí, že je o řád lepší než mnoho oblíbených pluginů pro kontaktní formuláře, včetně kontaktního formuláře 7!

Plusy: plugin má některé užitečné funkce - možnost posílat upozornění do vaší poštovní schránky a smartphonu, možnost přidat libovolný kód nebo skripty do formuláře a skutečnost, že umístí logo na kartu, kontaktní informace společnosti a dokonce i odkazy ve formuláři na profily na sociálních sítích a mnoho dalšího.

Nevýhody: Abyste mohli plugin používat, budete si muset vytvořit profil na webu Contact Me. I když je registrace jednoduchá a bezplatná, stejně vás neudělá šťastným, když jste nuceni něco udělat.

Zpočátku byl plugin FormCraft vytvořen a vyvíjen pouze v prémiové verzi. Relativně nedávno autoři vytvořili samostatnou, bezplatnou verzi - FormCraft - Form Builder.

Stejně jako v prémiové verzi vám FormCraft - Form Builder umožňuje snadno a rychle navrhovat různé formuláře ve speciálním a velmi pohodlném editoru drag & drop. Možností je zde samozřejmě méně, ale pro běžné uživatele to bude stačit.

Prémiová verze FormCraft se může pochlubit nastavením logiky skriptů, automatickým ukládáním, více než 20 dalšími vlastními poli, vyskakovacími a vkládacími formuláři, exportem do CSV a dalšími radostmi.

Jeden z nejlepších pluginů současnosti, v prémiové i bezplatné verzi.

Rozhraní Visual Form Builder vás příjemně překvapí, jelikož plugin umožňuje vytvářet a spravovat všechny typy formulářů na vašem webu z jednoho místa. Jedním kliknutím můžete přidat nová pole, reorganizovat stávající a použít antispamové řešení. Chcete-li změnit pořadí polí, můžete použít technologii drag & drop.

Výhody: Přestože je Visual Form Builder podobný ostatním zde uvedeným pluginům pro kontaktní formuláře, má své vlastní zajímavé funkce – možnost přeskupit prvky jednoduchým přetažením, export vstupních dat do souboru CSV, přizpůsobitelné potvrzovací zprávy, formulář pro odeslání, který podporuje zadávání více e-mailů.

Nevýhody: Pokud je váš web WordPress velmi velký, může být lepší použít jiný plugin, protože tento ukládá vstupní formulář do vaší databáze WordPress.

nForms – WordPress Form Builder

Drag and Drop Builder vám poskytuje jednoduchou šablonu kontaktního formuláře s více sloupci s odesíláním a ověřováním Ajaxu. Formulář můžete dokonce zobrazit pomocí vyskakovacího pluginu. Formulář je možné zobrazit pomocí krátkého kódu, běžné PHP funkce nebo widgetu.

Pokud potřebujete více než jen kontaktní formulář, pak nForms je plugin, který můžete použít.

Gravity Forms je nejúplnější řešení pro přidání kontaktního formuláře na váš web. Díky své sadě skvělých funkcí lze tento plugin nazvat nejprogresivnějším a nejpokročilejším prémiovým pluginem WordPress, který je v současné době k dispozici. Vizuální editor můžete použít k vytvoření složitých formulářů zpětné vazby pro váš web. K dispozici je také praktická funkce, která usnadňuje používání dlouhých formulářů, umožňuje je vložit na více stránek a jak je formulář úplný, zobrazuje indikátor naplnění.

Klady: Gravity Forms vám může nabídnout zcela exkluzivní funkce, které nejsou dostupné v jiných podobných zásuvných modulech, jako je možnost vytvářet objednávkové formuláře (včetně kalkulace nákladů v reálném čase), závislá pole pro skrytí nebo zobrazení polí, sekcí, stránek nebo dokonce tlačítko Odeslat dle výběru uživatele.

Klady: Ve srovnání s jinými zde prezentovanými pluginy je tento na drahé straně, ale opět Gravity Forms nabízí mnohem více než jen kontaktní formulář. Pokud hledáte jednoduchý formulář zpětné vazby, pak nemá smysl utrácet peníze za tento plugin.

Mapovaný kontaktní formulář Pro WordPress používá k zobrazení formuláře na vašem webu jiný algoritmus. Toto je skvělé řešení pro firmu nebo společnost, protože jej lze použít k označení poboček nebo kanceláří na místě. Plugin je také ideální pro ty, kteří používají mapy na svých webových stránkách.

Pro každé místo, které se objeví v kontaktním formuláři, můžete zadat svou adresu. Plugin se snadno používá a lze jej umístit na jakýkoli příspěvek nebo stránku pomocí jednoduchého krátkého kódu.

Další populární tvůrce formulářů v poslední době. Velmi výkonný, s vynikajícím, intuitivním editorem (jako placené pluginy), ve kterém si můžete vytvořit svůj formulář jednoduše přetažením potřebných bloků a jejich přizpůsobením. Má celou sadu předem připravených polí a bloků. Všechna pole se po vytvoření v jazyce, který potřebujete, okamžitě upraví. Ve výchozím nastavení má pouze standardní kontaktní formulář pro zpětnou vazbu a odpovídající krátký kód.

Pro: Výborná funkčnost. Při vytváření nového formuláře můžete použít pohodlný přepínač pro rychlý náhled a testování vašich „návrhů“.

Nevýhody: Mnoho nastavení bloků může být pro nováčky skličující. Kromě hlavní funkčnosti má spoustu zásuvných prémiových modulů pro práci s různými službami pro přijímání plateb, pošty a dalších věcí. I když, to lze samozřejmě považovat za plus.

Ninja Kick: Kontaktní formulář WordPress

Nejoriginálnější kontaktní formulář z celé kolekce. Liší se tím, že se zobrazuje jako samostatný panel – posuvník na levé nebo pravé straně webu. Vypadá to nesmírně působivě. Má mnoho nastavení, ale hlavně ohledně jeho vzhledu. Nastavování samotných polí je zde minimální. Můžete však použít krátký kód z populárního kontaktního formuláře 7 a bude fungovat.

Zajímavý plugin a samotná forma. Více si můžete přečíst v.

Pojďme si to shrnout

Nyní je čas vybrat to správné rozšíření pro váš web. Kontaktní formulář 7 nebo FormCraft - Form Builder jsou pravděpodobně nejlepší řešení pro běžný blog, ale pro velké weby nabízející různé služby bych doporučil použít Gravity Forms nebo Ninja Forms. Pro ty, kteří rádi „vynikají“, je Ninja Kick: Contact Form perfektní.

Miluji jednoduché a krásné věci. Potřeboval jsem krásný formulář zpětné vazby pro svůj blog WordPres, ale kontaktní formuláře, které jsem použil (nejoblíbenější kontaktní formulář 7 a kontaktní formulář Jetpack), jsou bohužel ošklivé. A nechci ztrácet čas jejich designem. Proto jsem se rozhodl najít hotový stylový formulář zpětné vazby a musí mít captcha, jinak se zaplní spamem. Měl jsem tedy velmi jednoduchý cíl – najít WordPress kontaktní formulář, který splňuje následující požadavky:

• přítomnost captcha,
• volný, uvolnit,
• stylové, krásné.

Pro vytvoření formuláře zpětné vazby jsem vybral všechny oblíbené pluginy WordPress s velkým počtem pozitivních recenzí a aktivních instalací. Zároveň jsem se ujistil, že byly nedávno aktualizovány. Musím se přiznat, že jsem instalací a studiem jednoho pluginu s kontaktním formulářem nestrávil více než 5 minut, a pokud jsem nemohl hned vytvořit krásný formulář zpětné vazby, přešel jsem na další kontaktní formulář. Proto se přiznám, že jsem možná přehlédl dobrý plugin s kontaktním formulářem splňujícím všechny požadavky, jehož nastavení není hned zřejmé. Níže můžete vidět snímky obrazovky všech formulářů zpětné vazby, které jsem zkontroloval.

WpForms Lite

Populární, bezplatný, srozumitelný, ale ošklivý formulář zpětné vazby, příliš jednoduchý a neexistují žádné další hotové návrhy. Existuje Recapcha Google. Placená verze, která začíná na 49 USD, vám umožňuje integrovat kontaktní formulář do e-mailových marketingových služeb, jako je Aweber, přijímat platby a mnoho dalšího. Tento kontaktní formulář je americký, ale neřekl bych to.

Caldera Forms

Náročnější na nastavení než WpForms, ale hezčí. Je tam captcha, ale neobjevila se mi. Design formuláře zpětné vazby je průměrný.

Kontaktní formulář Jetpack

Formulář zpětné vazby od tvůrců WordPressu po aktivaci se v editoru objeví tlačítko Přidat kontaktní formulář. Žádné captcha, spousta spamu! Škaredý.

Kontaktní formulář 7

Nejoblíbenější a nejpropracovanější formulář zpětné vazby, bohatý na funkce a nastavení, ale ošklivý - musíte věnovat čas designu.

Rychlý bezpečný kontaktní formulář

Nelíbil se mi design tohoto formuláře zpětné vazby – je ošklivý!

Form Maker od WD

Zdarma, existuje mnoho krásných šablon formulářů zpětné vazby. Skutečný kandidát! Ale nemohl jsem nastavit ReCaptcha, takže jsem ji nepoužil.

Ošklivý formulář zpětné vazby! Velmi omezená funkčnost - nic...

Kontaktní formulář od BestWebSoft

Škaredý! Velmi omezená funkčnost formuláře zpětné vazby - není tam nic...

Ninja Forms

Toto je běžný formulář zpětné vazby se standardním designem, ale něco mě na něm zaujalo, pokud nenajdu nic slušného, ​​mohu to zkusit použít. Existuje integrace Google ReCaptcha.

Obrovské IT formuláře

Pro stejný kontaktní formulář můžete změnit motivy návrhu s různými vzory. Designy jsou pěkné, je tam captcha. Pouze v mém administračním panelu se rozvržení pluginu plížilo, pokud tomu nevěnujete pozornost, pak je to hodný uchazeč.

Impozantní formy

Tento formulář zpětné vazby nemá přepychové vzory, ale základní provedení je víceméně přijatelné, tak jsem ho začal používat.

Tabulka s přehledem pluginů formuláře pro zpětnou vazbu WordPress

Výsledky mého hledání formuláře zpětné vazby jsou shrnuty v tabulce níže.

Závěry: nejlepší formulář pro zpětnou vazbu WordPress

Abych byl upřímný, nenašel jsem to, co jsem hledal. Z jedenácti nejoblíbenějších recenzovaných formulářů zpětné vazby mají pouze dva kontaktní formuláře krásné šablony návrhu: Form Maker od WD a Huge-IT Forms. Ale na prvním jsem neměl nainstalovaný captcha a na druhém se rozvržení v panelu administrátora rozpadalo. Zdá se, že vývojáři se nestarají o design, a proto všechny ostatní formuláře zpětné vazby přicházejí bez návrhu a jsou proto ošklivé a budete si muset design upravit sami úpravou CSS.

Přesto jsem zvolil formulář zpětné vazby Formidable Forms, protože má stále alespoň základní (vývojář ho trochu upravil!), ale stylový design, má reCaptcha a je zdarma. Všechno mi hned fungovalo!

Pokud znáte bezplatný a krásný formulář zpětné vazby pro WordPress s captcha, podělte se o něj v komentářích.