Události DOM

Posloucháním událostí DOM můžete při práci s formulářem něco dělat ve správný čas. Například po úspěšném odeslání formuláře řekněte „Děkuji“ ve vyskakovacím okně nebo přesměrujte uživatele na jinou stránku.

Seznam událostí formuláře

Wpcf7invalid Spustí se, když byl formulář úspěšně odeslán na server, ale e-mail nebyl odeslán, protože obsahovala pole s neplatným vstupem. wpcf7spam Spustí se, když byl formulář úspěšně odeslán na server, ale nebyl odeslán žádný e-mail, protože byla zjištěna možná spamová aktivita. wpcf7mailsent Spustí se, když byl formulář úspěšně odeslán na server a pošta byla odeslána příjemci. wpcf7mailfailed Spustí se, když byl formulář úspěšně odeslán na server, ale odeslání pošty se nezdařilo. To může být způsobeno tím, že hostitelský poštovní server nefunguje. wpcf7submit Spustí se, když byl formulář úspěšně odeslán na server, bez ohledu na jiné incidenty. Klikněte na tlačítko "Odeslat" - tato akce fungovala. wpcf7beforesubmit Spustí se před událostí wpcf7submit, která umožňuje jakoukoli manipulaci s formData - daty formuláře, která budou odeslána na server. Událost přidána v CF7 v4.9.

Kód z níže uvedených příkladů by měl být použit tam, kde je formulář zobrazen. Pokud se váš formulář zobrazuje na všech stránkách webu, pak by bylo dobrým řešením umístit kód do souboru footer.php, protože tato šablona se používá na všech stránkách webu.

Příklady události wpcf7submit

Níže uvedený kód je jednoduchý příklad registrace obslužné rutiny události. V tomto příkladu funkce naslouchá události wpcf7submit kontejneru s třídou wpcf7 a jednoduše vydá varování, když k ní dojde, to znamená, že když kliknete na tlačítko „Odeslat“, okamžitě vyvolá zprávu „Jejda, oni“ snažíš se mě poslat... do Magadanu!" Vezměte prosím na vědomí, že prvek s třídou wpcf7 je DIV s formulářem uvnitř; plugin to vše generuje nezávisle. Pokud máte na stránce několik formulářů, kód bude fungovat pouze pro první nalezený formulář. Zbytečnou výstrahu () samozřejmě nahradíte užitečnější akcí, například krásnou animací odeslání formuláře.

// Hledáme blok s formulářem, který má třídu wpcf7 (mají ji všechny divs s formulářem) var wpcf7Elm = document.querySelector(".wpcf7"); // Monitorujte událost wpcf7submit pro vybraný blok wpcf7Elm.addEventListener("wpcf7submit", function(event) ( alert("Kluci, snaží se mě poslat... do Magadanu!"); // Nebo něco užitečnějšího ), nepravda);

Pokud chcete sledovat konkrétní formulář (níže v článku budou alternativní, racionálnější řešení), zadejte ID kontejneru:

// Hledáme jedinečný blok s formulářem podle jeho ID var wpcf7Elm = document.querySelector("#wpcf7-f92-p95-o1"); // Zde sledujeme událost wpcf7submit, jako v předchozím příkladu.

Výše uvedené příklady jsou navrženy pro práci s jedním formulářem. Pokud je na stránce několik formulářů a potřebujete sledovat událost wpcf7submit (nebo jiné) pro všechny, pak událost nepřipojíme k samostatnému bloku, ale k celému dokumentu:

Document.addEventListener("wpcf7submit", function(event) ( alert("Někdo odeslal formulář! Který? Ještě nevím."); false);

Jak sledovat data zadaná do polí

Vlastní data jsou předána obsluze události jako vlastnost detail.inputs objektu události. Datová struktura detail.inputs je pole objektů a každý objekt má vlastnosti názvu a hodnoty. Řekněme, že formulář má 4 pole. Používáme kód:

Document.addEventListener("wpcf7submit", function(event) ( var inputs = event.detail.inputs; console.log(inputs); ), false);

Po kliknutí na tlačítko "Odeslat" v konzole prohlížeče se zobrazí datová struktura:

Máme přístup k názvu každého pole formuláře (název pole je uveden v admin panelu ve značce pole a je povinný atribut) a jeho význam.

Můžete projít každé pole a reagovat na konkrétní pole takto:

Document.addEventListener("wpcf7submit", function(event) ( var inputs = event.detail.inputs; // Hledejte pole s názvem your-name a zneužijte výstrahu při hledání pole pro (var i = 0; i< inputs.length; i++) { if ("your-name" == inputs[i].name) { alert(inputs[i].value); break; } } }, false);

Existují další vlastnosti objektu události, které můžete použít v obslužné rutině.

Detail.contactFormId ID kontaktního formuláře. Toto ID lze vidět v administračním panelu adresní řádek při editaci formuláře nebo v samotném zkráceném kódu formuláře. detail.pluginVersion Verze pluginu Kontaktní formulář 7. detail.contactFormLocale Kód jazyka formuláře. Například ru_RU. detail.unitTag Značka jednotky kontaktního formuláře. Každý formulář má svůj vlastní, například wpcf7-f92-p95-o1. detail.containerPostId ID příspěvku, jehož obsah obsahuje formulář.

Všechna data můžete zobrazit takto:

Document.addEventListener("wpcf7submit", function(event) ( console.log(event.detail); ), false);

Jak zpracovat konkrétní tvar

Pokud například chcete něco udělat pouze s konkrétním kontaktním formulářem (ID=123), použijte vlastnost detail.contactFormId, jak je uvedeno níže:

Document.addEventListener("wpcf7submit", function(event) ( if ("123" == event.detail.contactFormId) ( alert("Kontaktní formulář s ID = 123."); // Udělejte něco jiného ) ), false) ;

Bojujte proti spamu s Akismet

Jak bojovat proti spamu v pluginu Contact Form 7? Existuje několik dostupných mechanismů, ale pouze pár je populární: reCAPTCHA a Akismet.

Jak nainstalovat a nakonfigurovat Akismet? Při instalaci WordPress plugin Akismet se nainstaluje automaticky, stačí jej pouze aktivovat. Pokud tam z nějakého důvodu není, pomohou vám tyto odkazy:

Po aktivaci pluginu se zobrazí zpráva s výzvou k aktivaci účtu:

Po kliknutí na tlačítko budete přesměrováni na stránku nastavení pluginu:

Aby Akismet fungoval, musíte v nastavení pluginu zadat klíč API. Pokud tam není, klikněte na tlačítko „Získat klíč API“ a postupujte podle pokynů:

• Registrace pro off. webová stránka pluginu pomocí účtu wordpress.com
• Vyberte si tarif (je k dispozici zdarma)
• Přidání webu na panel správce služby kliknutím na tlačítko „Aktivovat tento web“.

Je to jednoduchý a rychlý proces. Po aktivaci webu dojde k přesměrování zpět na administrátorský panel vašeho webu s hotovými nastaveními, je třeba je uložit:

Aby Akismet začal kontrolovat pole, musíte při jeho generování určit, podle jakého pravidla se má kontrolovat, například:

Akismet:author Přidejte tento parametr do pole uživatelského jména.
Příklad: akismet:author_email Tento parametr přidejte do pole pro zadání emailu uživatele.
Příklad: akismet:author_url Přidejte tento parametr do pole pro zadání odkazu od uživatele.
Příklad:

Pro všechna pole, která vyžadují tuto kontrolu, se doporučuje použít parametr akismet:value. Na základě nasbíraných dat Akismet rozhodne, zda se jedná o spam či nikoliv, proto je důležitá jeho úplnost.

Kontaktní formulář 7 má několik typů oznámení:

Zelený rámeček pro upozornění Zpráva byla úspěšně odeslána Žlutý rámeček pro upozornění Některá pole byla vyplněna s chybou, pole neprošlo validací Oranžový rámeček pro upozornění Zpráva je označena jako spamČervený rámeček zprávy Odeslání zprávy se nezdařilo

Nyní můžete otestovat formulář s ochranou Akismet zadáním „viagra-test-123“ místo uživatelského jména. Zpráva s takovými údaji bude označena jako spam a nebude odeslána e-mailem.

Omezení přístupu k administračnímu panelu

Zpočátku je karta s formuláři Kontaktního formuláře 7 dostupná všem uživatelům s rolí přispěvatel a vyšší. Formuláře mohou upravovat pouze redaktoři a administrátoři. Jak změnit přístupová práva k formulářům?

Přístupové parametry se mění pomocí konstant, které jsou zapsány v kořenovém adresáři motoru v souboru wp-config.php, například:

Define("WPCF7_ADMIN_READ_CAPABILITY", "manage_options"); define("WPCF7_ADMIN_READ_WRITE_CAPABILITY", "manage_options");

Ve výchozím nastavení mají správci webu a superadministrátoři právo manage_options. Proto tento příklad poskytne přístup k seznamu formulářů a možnost je upravovat pouze uživatelům s těmito rolemi. Ostatní role kartu pluginu neuvidí.

WPCF7_ADMIN_READ_CAPABILITY Minimální role nebo schopnost přístupu k panelu správce, tj. zobrazení nabídky a seznamu formulářů.
Výchozí: edit_posts WPCF7_ADMIN_READ_WRITE_CAPABILITY Minimální role nebo schopnost upravovat formuláře. Toto nastavení musí být přísnější nebo rovno WPCF7_ADMIN_READ_CAPABILITY. To je vysvětleno skutečností, že nemůžete upravovat formuláře bez přístupu k panelu správce.
Výchozí: publikovat_stránky

Abyste lépe porozuměli tomu, jak to funguje, podívejte se na kód (CF7 v4.9.1, soubor schopností.php) pomocí těchto konstant:

Add_filter("map_meta_cap", "wpcf7_map_meta_cap", 10, 4); function wpcf7_map_meta_cap($caps, $cap, $user_id, $args) ( $meta_caps = array("wpcf7_edit_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_edit_contact_forms" => WPCF7_edit_contact_forms" => WPCF7_edit_contact_forms" => WPCF7_read_contact_forms" => WPCF7 contact_forms" => WPCF7_ADMIN_READ_CAPABILITY, "wpcf7_delete_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, " wpcf7_manage_integration" => "manage_options", "wpcf7_submit" => "číst",); $meta_caps = apply_filters("wpcf7_map_meta_cap", $meta_caps); $caps = array_diff($caps, array_keys($meta_caps)); if ( isset ($meta_caps[$cap])) ( $caps = $meta_caps[$cap]; ) vrátit $caps; )

Z kódu můžete vidět, že pole schopností prochází filtrem wpcf7_map_meta_cap a obsahuje následující data:

Ve výchozím nastavení Array ( => publish_pages => publish_pages => edit_posts => publish_pages => manage_options => čtení) Po změně například pomocí konstant Array ( => manage_options => manage_options => manage_options => manage_options => manage_options = > číst)

Díky filtru wpcf7_map_meta_cap můžeme toto pole změnit. Tato metoda nás ušetří úpravy souboru wp-config.php, ale budeme muset napsat kód například do souboru functions.php:

Add_filter("wpcf7_map_meta_cap", "change_wpcf7_map_meta_cap"); function change_wpcf7_map_meta_cap($meta_caps) ( // Nové hodnoty příležitosti ​​$replace_caps = array("wpcf7_edit_contact_form" => "manage_options", "wpcf7_edit_contact_forms" => "manage_options", "wpcf7_read_form_formages",_contact_forms"_forms"_contact => " manage_options",); return array_replace($meta_caps, $replace_caps); )

Návrh zaškrtávacích políček a přepínačů

Kontaktní formulář 7 ve výchozím nastavení uspořádá zaškrtávací políčka a přepínače do řádku. To však lze změnit pomocí nastavení značek pro tato pole a jednoduchých pravidel CSS.

Takto vypadají výchozí zaškrtávací políčka:

Pokud však předáte parametr label_first značce checkbox, zobrazení štítku vzhledem k zaškrtávacímu políčku se obrátí:

Chcete-li uspořádat zaškrtávací políčka ve sloupci, přidejte do souboru CSS motivu řádek stylu:

Span.wpcf7-list-item ( display: block; )

Chcete-li zaškrtávací políčka uspořádat jako tabulku, přidejte do souboru CSS motivu řádek stylu (navíc byl použit parametr label_first):

Span.wpcf7-list-item ( display: table-row; ) span.wpcf7-list-item * ( display: table-cell; )

Načtěte JavaScript a CSS podle potřeby

Kontaktní formulář 7 standardně načítá JavaScript a CSS na všech stránkách webu bez ohledu na to, kde je formulář použit. Technicky plugin nemůže fungovat jinak, ale lze jej „vyzvat“.

Příklad 1 - úplné vypnutí JavaScript a CSS a případně povolení Krok 1 – zakázání JavaScriptu a CSS na všech stránkách webu

Existuje konstanta WPCF7_LOAD_JS s výchozí hodnotou true , která je definována v kódu pluginu a je zodpovědná za načítání javascriptu na všech stránkách webu. Lze jej přepsat vložením následujícího kódu do souboru wp-config.php:

Define("WPCF7_LOAD_JS", false);

Tento kód zruší načítání skriptů pluginu.

A stejná konstanta existuje pro styly WPCF7_LOAD_CSS, která funguje na stejném principu – ruší načítání stylů pluginů:

Define("WPCF7_LOAD_CSS", false);

Od verze pluginu 3.9 a vyšší můžete zakázat načítání JavaScriptu a CSS pomocí háčků ve functions.php:

Add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false");

Teď tu ale máme další problém – na stránce s formulářem se nenačtou styly a skripty pluginu a kazí se funkčnost a vzhled. K vyřešení problému potřebujeme mechanismus.

Krok 2 – Nahrání souborů na stránky formuláře

Máme například stránku Kontakt s formulářem. Za zobrazení stránky je zodpovědný soubor contact.php. Pak použijme kód:

If (function_exists("wpcf7_enqueue_scripts")) ( wpcf7_enqueue_scripts(); ) if (function_exists("wpcf7_enqueue_styles")) ( wpcf7_enqueue_styles(); )

Tato konstrukce musí být umístěna do souboru contact.php před voláním funkce wp_head(). Toto je doporučení vývojáře pluginu.

Příklad 2 – deaktivace skriptů a stylů všude tam, kde NENÍ potřeba

Existuje flexibilnější metoda, která vám umožní určit, na kterých stránkách se mají skripty zahrnout. Tento kód je třeba vložit do functions.php:

Možnost 1: ## Zakázat styly a skripty pluginů všude kromě stránky kontaktů add_filter("wp", "cf7_disable_css_js"); function cf7_disable_css_js())( if(! is_page("contacts"))( add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); ) ) Možnost 2: ## Zakázat styly, plugin skripty všude kromě stránky kontaktů add_action("wp_print_styles", "my_deregister_javascript", 100); function my_deregister_javascript())( if(! is_page ("kontakty"))( wp_deregister_script("contact-form-7"); // deaktivace skriptů pluginů wp_deregister_style("contact-form-7"); // zakázání stylů pluginů) ) Příklad 3 - Povolte skripty pouze při použití formuláře shortcode

Nejprve odpojíme JS a CSS a poté se připojíme zpět, až když se spustí krátký kód formuláře. Soubory tedy budou připojeny pouze na těch stránkách, kde je zkratka formuláře.

Funkce wpcf7_remove_assets() ( add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); ) add_action("wpcf7_init", "wpcf7_remove_assets"); funkce wpcf7_add_assets($atts) ( wpcf7_enqueue_styles(); return $atts; ) add_filter("shortcode_atts_wpcf7", "wpcf7_add_assets");

Kód může být navržen jako plugin nebo vložen do function.php tématu.

Sledování formuláře s pomocí Google Analytics

Existuje snadný způsob, jak sledovat události formuláře prostřednictvím Google Analytics.

Nejprve se ujistěte, že máte kód Google Analytics, vypadá asi takto:

(function(i,s,o,g,r,a,m)(i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function())( (i[r].q = i[r].q||).push(argumenty)),i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o);a . async=1;a.src=g;m.parentNode.insertBefore(a,m) )(window,document,"script","//www.google-analytics.com/analytics.js","ga" ); ga("vytvořit", "UA-XXXXX-Y", "auto"); ga("odeslat", "zobrazení stránky");

Pokud máte kód Analytics nebo po jeho instalaci, můžete do systému odesílat data, která pak můžete sledovat v administračním panelu Google Analytics. Přečtěte si o tom více v oficiální dokumentaci sledování událostí.
Například potřebujete sledovat odeslání formuláře, k tomu musíte spustit následující kód:

Ga("odeslat", "událost", "Kontaktní formulář", "odeslat");

Posledním krokem je vložení tohoto úryvku JavaScriptu do hlavičky HTML ( ) každé stránky. K tomu můžete upravit šablonu header.php vašeho tématu nebo můžete použít wp_head functions.php na háku.

document.addEventListener("wpcf7mailsent", funkce(událost) ( ga("odeslat", "událost", "Kontaktní formulář", "odeslat"); ), false);

A tímto způsobem můžete sledovat úspěšné odeslání každého jednotlivého formuláře:

Document.addEventListener("wpcf7mailsent", function(event) ( if ("123" == event.detail.contactFormId) ( ga("send", "event", "Contact Form 123", "submit"); ) if ("253" == event.detail.contactFormId) ( ga("odeslat", "událost", "Kontaktní formulář 253", "odeslat"); ) ), false);

Nyní, když je formulář úspěšně odeslán, uvidíte tuto událost na panelu administrátora Google Analytics (Chování -> Události -> Přehled). Je možné, že se tam údaje neobjeví hned po události, ale až po 24-48 hodinách.

Výběr příjemce ve formuláři

Představme si, že ano malé webové studio s personálem: SEO specialista, prodejce a technická podpora. Jak mohu použít jeden formulář k odeslání informací jednomu z nich osobně? Výběrové pole (rozbalovací seznam) přijde na záchranu! Problém je řešen ve dvou fázích.

Fáze 1 – přidání značky do šablony formuláře:

Fáze 2 - vložení štítku do pole „Komu“, který při odesílání dopisu vezme uživatelem vybranou poštu z našeho rozbalovacího seznamu a vloží ji do pole.

Tato metoda má vážnou nevýhodu. Podívejte se na kód, který získáme po transformaci naší rozbalovací značky:

[e-mail chráněný] [e-mail chráněný] [e-mail chráněný]

Jak vidíte, adresy E-mailem„uložené“ v otevřené podobě. Všudypřítomní spameři toho mohou využít. Ale ne po malém triku... Pojďme si náš tag zmodernizovat takto:

Zde jsme parametr předali tzv. rourou (dopředným lomítkem) podle pravidla jméno|hodnota. V důsledku toho jsme dostali následující html struktura na východě:

SEO specialista na prodej TechSupport

Jak vidíte, ve formuláři uživatel vybere jednu z položek a při odeslání dopisu nabývá hodnotu samotný plugin na základě názvu vybrané položky.

Pojďme si úkol ještě zkomplikovat...

Představme si situaci, kdy potřebujete poslat dopis vybranému příjemci, například SEO, a také kopii dopisu správci webu pro kontrolu.

V předchozích článcích jsme diskutovali o tom, že Kontaktní formulář 7 může odeslat dva dopisy a pro každého příjemce můžete nastavit samostatnou šablonu.

Takže první kopie přijde k SEO a on pochopí, o čem zpráva je. Manažer ale nerozumí, kterému specialistovi byl dopis adresován, protože tématu nemusí úplně rozumět nebo si nemusí vše pamatovat poštovní adresy specialisté. Je potřeba šablona dopisu, která by používala nejen hodnotu pole (v našem případě e-mailovou adresu), ale také název položky (jméno specialisty)? K tomu nám plugin poskytuje tag [_raw_(název pole)], kde (název pole) je název našeho pole. Shrňme si použití značek:

Hodnota pole, která se v šabloně dopisu převede na hodnotu vybrané položky (v našem příkladu e-mailová adresa, tzn. [e-mail chráněný]) [_raw_your-recipient] název pole, který se v šabloně dopisu převede na název (nadpis) vybrané položky (v našem příkladu jméno specialisty, tedy SEO specialisty)

Pokud tato funkce není potřeba, lze ji deaktivovat zadáním následujícího kódu do souboru wp-config.php:

Define("WPCF7_USE_PIPE", false);

Přidání hlaviček kopie, skrytá kopie a dalších e-mailů

Kontaktní formulář 7 v záložce nastavení šablony dopisu má pole pro odeslání dalších záhlaví (Additional Headers) podle pravidla title-header: value. Každá hlavička musí obsahovat nový řádek.

Podívejme se na ty nejoblíbenější - Reply-To, Cc a Bcc, o zbytku si přečtěte na Wikipedii.

Reply-To Jméno a adresa, na které by měly být adresovány odpovědi na tento dopis. Například jste požádali uživatele, aby ve formuláři uvedl svůj e-mail. Použijte jej k tomu, aby e-mailový klient okamžitě věděl, na jaký email má být odpověď zaslána. Kopie (z anglického uhlíková kopie) obsahuje jména a adresy sekundárních příjemců dopisu, kterým je kopie zaslána. Skrytá kopie (z anglického skrytá kopie) obsahuje jména a adresy příjemců dopisů, jejichž adresy by se neměly zobrazovat ostatním příjemcům.

Kontaktní formulář 7 ve vašem jazyce

Kontaktní formulář 7 automaticky používá překlad jazyka, který používáte v oblasti pro správu. Změňte jazyk v Nastavení -> Obecné -> Jazyk webu (rozbalovací seznam). Tím se ale změní jazyk celého webu. Co dělat, když vaši autoři mluví různými jazyky?

Vývojáři k tomu navrhují použít plugin Bogo, který každému uživateli umožňuje přepínat jazyk správce. Po aktivaci se v panelu nástrojů vedle vaší přezdívky objeví přepínač jazyka.

Speciální značky zpráv

Kontaktní formulář 7 podporuje několik specifických značek, které mohou být potřebné při práci s formulářem. Například v dopise uveďte IP odesílatele a odkaz na stránku, kde byl formulář vyplněn. V šabloně e-mailu nebo v jiných polích formuláře lze použít speciální značky.

Odesílání značek [_remote_ip] Tato značka bude nahrazena IP uživatelem. [_user_agent] Tato značka bude nahrazena uživatelským agentem prohlížeče uživatele. User Agent je řetězec, který webové prohlížeče používají jako svůj název, obsahuje nejen název prohlížeče, ale také verzi operační systém a další parametry. [_url] Tato značka bude nahrazena adresou stránky, ze které byl formulář odeslán. [_date] Bude nahrazeno datem odeslání formuláře. [_time] Bude nahrazeno časem odeslání formuláře. [_invalid_fields] Tato značka je nahrazena počtem polí formuláře s neplatným vstupem. Použijte v šablonách oznámení. [_serial_number] Bude nahrazeno sériovým číslem uložené zprávy. Musí být nainstalován plugin Flamingo 1.5+, je popsán níže. Značky příspěvku

Tyto značky budou fungovat pouze v obsahu příspěvku. Pokud je formulář v modální okno, v postranním panelu, zápatí nebo záhlaví, zabudované do šablony motivu, tedy mimo obsah příspěvku – nebudou fungovat.

[_post_id] Bude nahrazeno ID příspěvku, v jehož obsahu je formulář zobrazen. [_post_name] Bude nahrazeno názvem (slug) příspěvku, ze kterého byl formulář odeslán. [_post_title] Bude nahrazeno názvem (titulkem) příspěvku, ze kterého byl formulář odeslán. [_post_url] Bude nahrazeno odkazem (url) příspěvku, ze kterého byl formulář odeslán. [_post_author] Bude nahrazeno jménem autora příspěvku, ze kterého byl formulář odeslán. [_post_author_email] Bude nahrazen e-mailem autora příspěvku, ze kterého byl formulář odeslán.

Značky webu

[_site_title] Bude nahrazeno názvem webu (zadaným v Obecných nastaveních). [_site_description] Bude nahrazeno popisem webu (zadaným v Obecných nastaveních). [_site_url] Bude nahrazena adresou webu (zadanou v Obecných nastaveních). [_site_admin_email] Bude nahrazeno e-mailovou adresou webu (zadanou v Obecných nastaveních).

Uživatelské značky

Tyto značky poskytují informace o aktuálně registrovaném uživateli.

Tagy [_user_*] fungují pouze v případě Odesílatel má účet a je přihlášen. Pokud formulář odešle neoprávněný uživatel, tyto značky vrátí prázdný výsledek a nebudou mít žádný význam. Doporučuje se povolit režim " ", aby se formulář zobrazoval pouze registrovaným uživatelům.

Pokud potřebujete použít tyto značky a nepotřebujete použít možnost „subscribers_only: true“, musíte povolit možnost nonce. Pokud toto vše neuděláte, data oprávněných uživatelů budou resetována přes WP REST API a zadaný tag bude přeskočen (nahrazen prázdným řetězcem).

[_user_login] Bude nahrazeno přihlašovacím jménem uživatele. [_user_email] Bude nahrazen e-mailem uživatele. [_user_url] Bude nahrazeno adresou URL webu uživatele. [_user_first_name] Bude nahrazeno uživatelským jménem. [_user_last_name] Bude nahrazeno příjmením uživatele. [_user_nickname] Bude nahrazeno přezdívkou uživatele. [_user_display_name] Bude nahrazeno zobrazovaným jménem uživatele.

Ukládání odeslaných zpráv pomocí Flaminga // Totéž můžete udělat pomocí filtru add_action("wpcf7_autop_or_not", "__return_false"); WPCF7_USE_PIPE Když je hodnota konstanty false (ve výchozím nastavení true), kontaktní formulář 7 začne přijímat | jako běžný symbol. WPCF7_ADMIN_READ_CAPABILITY Minimální role nebo schopnost přístupu k panelu administrátora.
Výchozí: edit_posts. WPCF7_ADMIN_READ_WRITE_CAPABILITY Minimální role nebo schopnost upravovat formuláře. Výchozí hodnota je publikovat_stránky . Toto nastavení musí být přísnější nebo rovno WPCF7_ADMIN_READ_CAPABILITY. Je to proto, že nemůžete upravovat formuláře bez přístupu k administračnímu panelu. WPCF7_CAPTCHA_TMP_DIR Definování této konstanty přepíše cestu ke složce pro dočasné soubory CAPTCHA. WPCF7_CAPTCHA_TMP_URL Definováním této konstanty přepíšete odkaz na složku pro dočasné soubory CAPTCHA. WPCF7_UPLOADS_TMP_DIR Definování této konstanty přepíše dočasnou cestu ke složce pro nahrané soubory. WPCF7_VERIFY_NONCE

Řekne pluginu, aby zkontroloval nonce ( bezpečnostní kód) nebo ne. Od verze pluginu 4.9 začala mít tato konstanta hodnotu false , tedy „nekontrolovat“. Kontrolu můžete vrátit nastavením hodnoty konstanty na true nebo pomocí háku

Add_filter("wpcf7_verify_nonce", "__return_true");

Po odeslání formuláře přesměrujte na jinou adresu

Když po úspěšném odeslání formuláře potřebujete uživatele přesměrovat na nějakou stránku, například s poděkováním nebo dárkem, použijte háček JavaScript:

document.addEventListener("wpcf7mailsent", function(event) ( location = "http://example.com/"; ), false);

Podívejte se na události DOM, abyste pochopili, jak to funguje.

WordPress spam Blacklist pro filtrování formulářů

Pokud trpíte přívalem spamu nebo nechtěných zpráv a CAPTCHA nebo Akismet si s tím neporadí, pak vám může pomoci funkce Blacklist zabudovaná v enginu.

Černá listina se nachází v admin panelu podél cesty Nastavení -> Diskuze.

Pokud zpráva odeslaná prostřednictvím kontaktního formuláře 7 obsahuje ve svém těle některé z těchto slov, jméno autora, adresu URL, emailová adresa nebo IP - bude označena jako spam a nebude odeslána. Každé slovo nebo IP je na novém řádku. Používá se vyhledávání podřetězců, to znamená, že pomocí slova „koupit“ bude nalezeno „koupit“.

Jak zjistím IP adresu, ze které přichází spam prostřednictvím kontaktního formuláře 7? Nejjednodušší způsob je použít speciální tag [_remote_ip]. Tato značka je vložena do šablony dopisu a při odesílání dopisu bude nahrazena IP adresou odesílatele.

Návrh formuláře kontaktního formuláře 7

Často poskytuji html kód pro jedno nebo druhé pole v kontaktním formuláři 7. Můžete vidět, které třídy plugin ve výchozím nastavení přidává do polí. Nyní se rychle podíváme na to, jak přiřadit vlastní třídy k polím formuláře.

Které CSS bych měl upravit, abych změnil vzhled formuláře?

Všechny styly, které jsou zodpovědné za externí zdroj formuláře, jsou uloženy v souboru pluginu contact-form-7/includes/css/styles.css . Změna tohoto souboru je špatný nápad, protože při aktualizaci pluginu bude soubor nahrazen a vy přijdete o všechny změny. Totéž platí pro veřejná témata, která se také aktualizují jako pluginy.

Chcete-li tedy změnit styly, musíte vybrat soubor stylu, který nebude aktualizován. Může to být šablona stylů podřízeného motivu. Nebo můžete použít nastavení motivu, které vám umožní vložit CSS kód do speciálního pole.

Pokud máte vlastní motiv, můžete změnit (přepsat) styly kontaktního formuláře 7 ve stylech motivů.

Styly polí v kontaktním formuláři 7

Plugin podporuje mnoho typů polí, ale nejběžnějším typem pole je text. Chcete-li nastavit styl pro takové pole, musíte k němu přistupovat podle typu:

Vstup Wpcf7( barva pozadí: #fff; barva: #000; šířka: 50 %; )

Ve formuláři často používáme více než jedno pole, takže přiřaďme vlastnosti několika najednou:

Vstup Wpcf7, vstup .wpcf7, textová oblast .wpcf7( barva pozadí: #fff; barva: #000; šířka: 50 %; )

Výše uvedené styly budou aplikovány na všechna pole a formuláře pluginu Contact Form 7, jak je uvedeno v selector.wpcf7. Další informace o selektorech.

Styl pro konkrétní obor

Při vytváření libovolného pole mu můžete dát identifikátor nebo třídu:

Nyní v CSS máme díky ID přístup pouze k tomuto poli:

#very-special-field( barva: #f00; okraj: 1px plný #f00; )

Styl formuláře

Mluvili jsme o stylech polí, ale jak přidat design do samotného formuláře? Použijme již známou třídu wpcf7, která je přidána do všech forem pluginu:

Wpcf7( barva pozadí: #f7f7f7; ohraničení: 2px plné #0f0; )

Přizpůsobení chybových zpráv

Pokud při odesílání formuláře není povinné pole vyplněno nebo není ověřeno, kontaktní formulář 7 zobrazí chybovou zprávu. Tyto zprávy lze přizpůsobit.

Změna textu

Text konkrétní chyby nebo upozornění lze změnit. Pokud například odešlete formulář s nevyplněným povinným polem, zobrazí se zpráva „Pole je povinné“. Pro změnu textu této zprávy otevřete editaci formuláře, záložka "Upozornění při odeslání formuláře". Pokud potřebujete změnit text chyby pro každé pole zvlášť, pak byste měli věnovat pozornost pluginu Contact form 7 Custom validation.

Statická nebo plovoucí zpráva?

Jak se říká, je lepší jednou vidět, než stokrát slyšet, takže sledujte:

Styl statické zprávy

Chybové zprávy se zobrazují pod polem a nezmizí, dokud není formulář úspěšně odeslán.

Plovoucí styl zprávy

Chybové zprávy se zobrazují pod polem ve stylu popisku. Popisek zmizí, když na něj najedete myší nebo když se zaměříte na pole, ke kterému popisek patří.

Plovoucí styl pro požadované pole

Chcete-li určitému poli přiřadit plovoucí styl, musíte jej zabalit do bloku pomocí třídy use-floating-validation-tip:

Plovoucí styl pro všechna pole

Abychom se vyhnuli zabalení každého pole do bloku třídou use-floating-validation-tip, můžeme plugin „požádat“, aby to udělal za nás zadáním atributu html_class s hodnotou use-floating-validation-tip ve formuláři shortcode :

Pokud se použije odesílání bez Ajaxu (s opětovným načtením stránky), bude bez ohledu na nastavení použit styl zobrazení statické chyby.

Manažer dlouhé listy s Listem

Řekněme, že potřebujeme vytvořit kontaktní formulář, kde je uživatel požádán, aby pomocí rozevíracího seznamu vybral svou polohu. Na světě je asi 200 zemí a vytvoření takového seznamu bude mít za následek mučení.

Například:

Zvládnout takovou „klobásu“ je obtížné a pravděpodobnost, že uděláte chybu, je vysoká.

K vyřešení této absurdity existuje plugin Listo, který poskytuje následující seznamy:

• Země - data:země , data:země.olympijské
• Strukturální divize USA - data:us_subdivisions.states, data:us_subdivisions.districts
• Měny - data:měny
• Časová pásma

Kontaktní formulář 7 může pracovat s Listo (nebo naopak, nikdo neví), který zase pracuje s poli: rozevírací seznam, zaškrtávací políčka a přepínače. Díky této kombinaci nebudete muset bolestivě upravovat dlouhé seznamy, ale budete moci používat krátké, předdefinované parametry.

Jak spravovat možnosti dlouhého seznamu

Rozhodli jsme se například zobrazit seznam zemí; k tomu potřebujeme značku rozbalovacího seznamu:

Seznam je stále prázdný, nepředali jsme žádné parametry. Pojďme je přidat:

Stačil jeden parametr a stali jsme se vegany – žádné „klobásové“ země se seznamem – Listo to udělal za nás.

Další nastavení

Každý formulář lze specifikovat dodatečně. parametry v záložce "Pokročilá nastavení". Podívejme se na všechna tato nastavení:

Režim „Pouze předplatitelé“.

Subscribers_only: true

Tento režim (dostupný od CF7 v7 4.9) umožňuje zobrazit formulář pouze pro registrované uživatele. Neregistrovaným uživatelům se zobrazí zpráva "Tento formulář je dostupný pouze registrovaným uživatelům." a proto nebude moci vyplnit a odeslat formulář. Skvělý způsob, jak se zbavit spamu, pokud potřebujete přijímat pouze e-maily od autorizovaných uživatelů.

Demo režim

Demo_mode: zapnuto

Když použijete tento kód, formulář přejde do demo režimu. V tomto režimu kontaktní formulář přeskočí proces odesílání e-mailu a jako zprávu s odpovědí jednoduše zobrazí „úspěšně dokončeno“.

Přeskočit e-mail

Skip_mail: on

Volba skip_mail funguje v podstatě stejně jako demo_mode , ale skip_mail pouze vynechává odesílání zpráv. Na rozdíl od demo_mode neovlivňuje skip_mail další akce, jako je ukládání zpráv pomocí Flaminga.

Ověření silového pole

Acceptance_as_validation: on

Ve výchozím nastavení pole, jako jsou zaškrtávací políčka, negenerují chyby. Tento parametr umožňuje aplikovat ověřovací pravidla na zaškrtávací políčka, stejně jako na jiná pole. Pokud jste například vytvořili zaškrtávací políčko, ve kterém musí uživatel zaškrtnout políčko s uvedením pohlaví, ale uživatel nic nevybral, plugin vygeneruje obecnou chybu „Ne všechna pole jsou vyplněna“. Pokud použijete tento parametr, pak kromě obecné zprávy uvidí uživatel zprávu samostatně pro toto zaškrtávací políčko.

Zabránění ukládání zpráv

Do_not_store: true

Toto nastavení říká modulům pro ukládání zpráv, jako je Flamingo, aby neukládaly zprávy prostřednictvím tohoto kontaktního formuláře.

Spouštění kódu JavaScript

Tato funkce se hodí, když potřebujete sledovat chování uživatelů. K těmto háčkům můžete připojit sledování prostřednictvím Google Analytics nebo jiných statistických systémů (probráno výše).

on_sent_ok: "alert("odesláno v pořádku");" on_submit: "alert("submit");" on_sent_ok předaný JavaScript bude spuštěn po úspěšném odeslání formuláře. on_submit předaný JavaScript bude spuštěn po kliknutí na tlačítko "Odeslat". Skrytí kontaktního formuláře 7 po úspěšném odeslání zprávy

Máme nakonfigurovaný a funkční formulář. A je nutné, aby když uživatel klikne na tlačítko „Odeslat“ a dopis nám je odeslán, formulář zmizel a na jeho místě se objevil text „Odesláno!“.

To se děje jednoduše: pro tento účel v další nastavení plugin přidejte tento řádek:

Document.addEventListener("wpcf7mailsent", funkce(událost) ( jQuery("#contactform").hide(); ), false);

kde contactform je ID formuláře, který je třeba skrýt. Místo #contactform můžete zadat jiný selektor pro HTML element (formulář), který chcete skrýt.

Jak zkombinovat podobné možnosti do vybrané značky samostatné skupiny? Tato funkce může poskytnout html tag optgroup, ale ve výchozím nastavení to plugin Contact Form 7 neumí. Podívejme se na způsoby, jak vyřešit tento nestandardní úkol pro plugin.

Metoda 1 pomocí JavaScriptu

Tato metoda byla nalezena na codepen.io a mírně přepracována. Podstatou metody je, že JavaScript „přečte strukturu značky select a převede ji na požadovaný formát. Příklad se podívá na pole pro výběr motoru:

Šablona formuláře:

Název pole byl vybrán jako motory , takže značku použijeme v šabloně e-mailu, aby se na e-mail odeslala hodnota vybraná uživatelem.

Přidání JavaScriptu

JQuery(document).ready(function($)( var selectEngines = $("select"); var foundin = $("option:contains("optgroup-")", selectEngines); $.each(foundin, function( value)( var updated = $(this).val().replace("optgroup-",""); $(this).nextUntil("option:contains("endoptgroup")").wrapAll("") ; )); $("option:contains("optgroup-"), option:contains("endoptgroup")", selectEngines).remove(); ));

Tento kód je implementován v jQuery. Měli byste jej vložit do souboru js motivu nebo vytvořit nový js a zahrnout . Vzhledem k tomu, že název značky byl motory, v tomto kódu označujeme přesně to, tj. vyberte .

Původní html kód vybraného pole

optgroup-Free Wordpress Joomla motory! Drupal Grav endoptgroup optgroup-placené motory 1C-Bitrix DLE ( DataLife Engine) Endoptgroup UMI.CMS NetCat ImageCMS Shop

Zpracovaný html kód pole select

Wordpress Joomla! Drupal Grav 1C-Bitrix DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop

Pokud má uživatel vypnutý JavaScript, pole zobrazí všechny možnosti. To znamená, že i ty možnosti, které měly být převedeny na značku optgroup, budou viditelné jako běžné možnosti.

Atribut obsahuje DOMString, který je zobrazen jako popisek tlačítka. Tlačítka jinak nemají skutečnou hodnotu.

Pokud nezadáte hodnotu, tlačítko bude mít výchozí štítek vybraný uživatelským agentem. Tento štítek bude pravděpodobně něco ve smyslu „Odeslat“ nebo „Odeslat dotaz“. Zde je příklad tlačítko odeslat s výchozím štítkem ve vašem prohlížeči:

Další atributy formenctype

Řetězec, který identifikuje metodu kódování, která se má použít při odesílání dat formuláře na server. Existují tři povolené hodnoty:

Application/x-www-form-urlencoded Tato výchozí hodnota odesílá data formuláře jako řetězec poté, co URL zakóduje text pomocí algoritmu, jako je . multipart/form-data Používá rozhraní FormData API ke správě dat, což umožňuje odesílání souborů na server. Vy musí použijte tento typ kódování, pokud váš formulář obsahuje jakékoli prvky typu file(). text/prostý prostý text; většinou užitečné pouze pro ladění, takže můžeš snadno zobrazit data, která mají být odeslána.

Pokud je zadán, hodnota atributu formenctype přepíše atribut akce vlastníka formuláře.

formulářová metoda

Řetězec označující metodu HTTP, která se má použít při odesílání dat formuláře; tato hodnota přepíše jakýkoli atribut metody uvedený ve vlastnickém formuláři. Povolené hodnoty jsou:

Get A URL je vytvořeno tak, že začíná URL danou atributem formace nebo action, připojí se znak otazníku ("?") a poté se připojí data formuláře, zakódovaná podle popisu formenctype nebo atributu enctype formuláře. Tato adresa URL je poté odeslána na server pomocí požadavku HTTP. Tato metoda funguje dobře pro jednoduché formuláře, které obsahují pouze znaky ASCII a nemají žádné vedlejší účinky. Toto je výchozí hodnota. post Data formuláře jsou zahrnuta v těle požadavku, který je odeslán na adresu URL zadanou atributem formatction nebo action pomocí požadavku HTTP post. Tato metoda podporuje komplexní data a přílohy souborů. dialog Tato metoda se používá k označení, že tlačítko jednoduše zavře dialog, ke kterému je vstup přiřazen, a vůbec nepřenáší data formuláře.

formnovalidat

Booleovský atribut, který, pokud je přítomen, určuje, že formulář by neměl být před odesláním na server ověřován. Tím se přepíše hodnota atributu novalidate ve formuláři, který prvek vlastní.

formtarget

Řetězec, který určuje název nebo klíčové slovo, které označuje, kde se má zobrazit odpověď obdržená po odeslání formuláře. Řetězec musí být název kontextu procházení (tj. karta, okno nebo . Zde zadaná hodnota přepíše jakýkoli cíl daný atributem target na stránce, která vlastní tento vstup.

Kromě skutečných názvů karet, oken nebo vložených rámců existuje několik speciálních klíčových slov, která lze použít:

Self Načte odpověď do stejného kontextu procházení jako ten, který obsahuje formulář. Tím nahradíte aktuální dokument přijatými daty. Toto je výchozí hodnota použitá, pokud není zadána žádná. _blank Načte odpověď do nového, nepojmenovaného kontextu procházení. Obvykle se jedná o novou kartu ve stejném okně jako aktuální dokument, ale může se lišit v závislosti na konfiguraci uživatelského agenta. _parent Načte odpověď do nadřazeného kontextu procházení aktuálního. Pokud neexistuje žádný nadřazený kontext, chová se stejně jako _self . _top Načte odpověď do kontextu procházení nejvyšší úrovně; toto je kontext procházení, který je nejvyšším předkem aktuálního kontextu. Pokud je aktuální kontext nejvyšší kontext, chová se stejně jako _self .

Pomocí tlačítek pro odeslání

tlačítka slouží k odeslání formulářů. Li ty chceš k vytvoření vlastního tlačítka a následnému přizpůsobení chování pomocí JavaScriptu musíte použít , nebo ještě lépe, prvek.

Pokud se rozhodnete použít prvky k vytvoření tlačítek ve formuláři, mějte na paměti toto: pokud je uvnitř pouze jedno, bude toto tlačítko považováno za tlačítko „odeslat“. Měli byste tedy mít ve zvyku výslovně specifikovat které tlačítko je tlačítko pro odeslání.

Jednoduché tlačítko pro odeslání

Začneme vytvořením formuláře s jednoduchým tlačítkem Odeslat:

Předložíme nějaký text

Toto se vykresluje takto:

Zkuste zadat nějaký text do textového pole a poté formulář odeslat.

Po odeslání se na server odešle dvojice název/hodnota dat. V tomto případě bude řetězec text= uživatelský text, kde "usertext" je text zadaný uživatelem, zakódovaný pro zachování speciálních znaků. Kde a jak jsou data předávána, závisí na konfiguraci ; Další podrobnosti naleznete v části Odesílání dat formuláře.

Přidání klávesové zkratky pro odeslání

Klávesové zkratky, známé také jako přístupové klávesy a ekvivalenty klávesnice, umožňují uživateli spustit tlačítko pomocí klávesy nebo kombinace kláves na klávesnici. Chcete-li přidat klávesovou zkratku k tlačítku pro odeslání – stejně jako ke všem, pro které to dává smysl – použijte globální atribut accesskey.

V tomto příkladu je jako přístupová klávesa specifikována s (budete muset stisknout s plus konkrétní modifikační klávesy pro kombinaci vašeho prohlížeče a operačního systému. Aby se předešlo konfliktům s vlastními klávesovými zkratkami uživatelského agenta, jsou různé modifikační klávesy používá se pro přístupové klávesy než pro jiné klávesové zkratky na hostitelském počítači. Další podrobnosti viz přístupová klávesa.

Zde je předchozí příklad s přidaným přístupovým klíčem:

Předložíme nějaký text

Například ve Firefoxu pro Mac se stisknutím Control - Option - S spustí tlačítko Odeslat, zatímco Chrome ve Windows používá Alt + S .

Problém s výše uvedeným příkladem je, že uživatel nebude vědět, co je přístupový klíč! To platí zejména proto, že modifikátory jsou obvykle nestandardní, aby se předešlo konfliktům. Při vytváření webu se ujistěte, že poskytujete tyto informace způsobem, který nenarušuje design webu (například poskytnutím snadno dostupného odkazu, který ukazuje na informace o tom, jaké jsou přístupové klíče webu). Přidání popisku do může také pomoci tlačítko (pomocí atributu title), i když to není úplné řešení pro účely usnadnění.

Zakázání a povolení tlačítka Odeslat

Chcete-li zakázat tlačítko Odeslat, jednoduše na něm zadejte vypnutý globální atribut, například:

Tlačítka můžete povolit a zakázat za běhu jednoduchým nastavením vypnuto na hodnotu true nebo false; v JavaScriptu to vypadá jako btn.disabled = true nebo btn.disabled = false .

Validace

Tlačítka Odeslat se neúčastní ověřování omezení; nemají žádnou skutečnou hodnotu, která by byla omezena.

Příklady

Výše jsme zahrnuli jednoduché příklady. O tlačítkách pro odeslání už vlastně není co říci. Existuje důvod, proč se tomuto druhu ovládání někdy říká „jednoduché tlačítko“.

Specifikace Specifikace Stav Komentáře

Životní standard HTML Definice "" v této specifikaci.	Životní úroveň
HTML5 Definice "" v této specifikaci.	Doporučení

Kompatibilita s prohlížečem

Tabulka kompatibility na této stránce je generována ze strukturovaných dat. Pokud byste chtěli přispět k datům, podívejte se na https://github.com/mdn/browser-compat-data a pošlete nám žádost o stažení.

Aktualizujte údaje o kompatibilitě na GitHubu

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Webové zobrazení Android Chrome pro Android Edge Mobile Firefox pro Android Opera pro Android Safari na iOS Samsung Internettype="submit"

Plná podpora Chrome 1	Plná podpora Edge Ano	Plná podpora Firefoxu 1

Pokusí se odeslat formulář na server.

Cena

Pokud se rozhodnete použít prvky k vytvoření tlačítek na vašem formuláři, mějte to na paměti: pokud je uvnitř pouze jedno, bude toto tlačítko považováno za tlačítko „odeslat“. Proto byste si měli vytvořit zvyk výslovně uvést, které tlačítko je tlačítkem pro odeslání.

Jednoduché tlačítko pro odeslání

Začněme vytvořením formuláře s jednoduchým tlačítkem Odeslat:

Předložíme nějaký text

Dělá to toto:

Zkuste zadat text do textového pole a poté formulář odeslat.

Jakmile je pár název/hodnota odeslán, jsou data odeslána na server. V tomto případě bude řádek "text= uživatelský text" kde "usertext" je text zadaný uživatelem, zakódovaný pro uložení speciální znaky. Kde a jak se data přenášejí, závisí na konfiguraci; Další podrobnosti naleznete v části Odeslání údajů formuláře.

Přidejte klávesovou zkratku pro odeslání

Klávesové zkratky, nazývané také přístupové klávesy a ekvivalenty klávesnice, umožňují uživateli spustit tlačítko pomocí klávesy nebo kombinace kláves na klávesnici. Chcete-li přidat kombinaci kláves k tlačítku pro odeslání – stejně jako u čehokoli, pro co to dává smysl, použijte atribut globálního přístupového klíče.

V tomto příkladu je jako přístupový klíč určeno s (je třeba stisknout s plus speciální modifikační klávesy pro kombinaci vašeho prohlížeče/operačního systému. Aby se předešlo konfliktům s vlastními kombinacemi kláves uživatelského agenta, používají se pro přístupové klíče jiné modifikační klávesy než pro jiné zkratky na hlavním počítači. dodatečné informace viz sekce přístup.

Zde je předchozí příklad s přidaným přístupovým klíčem:

Předložíme nějaký text

Například ve Firefoxu pro Mac stisknutím Control - Option - S vyvoláte tlačítko Odeslat, zatímco Chrome ve Windows používá Alt + S.

Problém s výše uvedeným příkladem je, že uživatel nebude vědět, jaký je přístupový klíč! To platí zejména proto, že modifikátory jsou obvykle nestandardní, aby se předešlo konfliktům. Při vytváření webu nezapomeňte tyto informace zahrnout způsobem, který nenarušuje design webu (například poskytnutím snadno dostupného odkazu směřujícího na informace o tom, jaké přístupové klíče k webu mají). Pomoci může také přidání popisku k tlačítku (pomocí atributu title), i když to není úplné řešení pro účely usnadnění.

Deaktivujte nebo povolte tlačítko Odeslat

Chcete-li zakázat tlačítko Odeslat, jednoduše na něj nastavte globální atribut vypnuto, například:

Tlačítka můžete povolit a zakázat za běhu jednoduchým nastavením vypnuto na hodnotu true nebo false; v JavaScriptu to vypadá jako btn.disabled = true nebo btn.disabled = false .

Zkouška

Tlačítka Odeslat se neúčastní kontroly omezení; nemají žádnou skutečnou omezující hodnotu.

Příklady

Výše jsme uvedli jednoduché příklady. O tlačítkách pro odeslání se toho moc říct nedá. Důvod pro tento druh ovládání se někdy nazývá „jednoduché tlačítko“.

Samotný formulář je obvykle určen k přijímání informací od uživatele pro jejich další odesílání na server, kde jsou data formuláře přijímána obslužným programem. Takový program lze napsat v libovolném jazyk serveru programování jako PHP, Perl atd. Adresa programu je uvedena v atributu action tagu, jak je znázorněno v příkladu 1.

Příklad 1: Odeslání dat formuláře

HTML5 IE Cr Op Sa Fx

Data formuláře

V tomto příkladu budou data formuláře označená atributem name (login a heslo) předána do souboru na adrese /example/handler.php. Pokud atribut action není zadán, dojde k přenosu na adresu aktuální stránky.

Přenos na server probíhá dvěma různými metodami: GET a POST. K nastavení metody v tagu se používá atribut method a jeho hodnotami jsou klíčová slova get a post . Pokud atribut metody není zadán, jsou data standardně odesílána na server pomocí metody GET. V tabulce Obrázek 1 ukazuje rozdíly mezi těmito metodami.

Která metoda je použita, lze snadno určit podle adresního řádku prohlížeče. Pokud se objevil otazník a adresa vypadá takto, pak je to určitě GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Jedinečná kombinace parametrů v adresním řádku jednoznačně identifikuje stránku, takže stránky s adresami ?q=node/add a ?q=node jsou považovány za odlišné. Tuto funkci využívají redakční systémy (CMS, Redakční systém) k vytváření mnoha webových stránek. Reálně se používá jeden soubor, který obdrží požadavek GET a podle něj vygeneruje obsah dokumentu.

Níže jsou uvedeny typické aplikace těchto metod na stránkách.

DOSTAT

Přenos malých textových dat na server; Vyhledávání na webu.

Vyhledávače a formuláře pro vyhledávání na stránkách jsou vždy odesílány pomocí metody GET, což vám umožňuje sdílet výsledky vyhledávání s přáteli, poslat odkaz poštou nebo jej zveřejnit na fóru.

POŠTA

Přenos souborů (fotografie, archivy, programy atd.); zasílání komentářů; přidávání a úprava zpráv na fóru, blogu.

Standardně se formulář zpracovává na aktuální záložce prohlížeče, při odesílání formuláře však můžete tento parametr změnit a otevřít obslužný program formuláře na nové záložce nebo rámu. Toto chování je specifikováno prostřednictvím „kontextového názvu“, což je hodnota cílového atributu značky. Oblíbené hodnoty jsou _blank pro otevření formuláře v novém okně nebo na kartě a název rámce, který je určen atributem name tagu (příklad 2).

Příklad 2: Otevření formuláře v rámci

HTML5 IE Cr Op Sa Fx

Použití rámu

V v tomto příkladu Po kliknutí na tlačítko "Odeslat" se výsledek odeslání formuláře otevře v rámci nazvaném area .

Prvky formuláře jsou tradičně umístěny uvnitř tagu, čímž definují data, která budou přenášena na server. HTML5 má zároveň schopnost oddělit formulář od jeho prvků. To se provádí pro pohodlí a všestrannost, takže složité rozvržení může obsahovat několik formulářů, které by se neměly vzájemně protínat, nebo například některé prvky jsou zobrazeny pomocí skriptů na jednom místě na stránce a samotný formulář je umístěn na jiném místě. . Ke spojení mezi formulářem a jeho prvky v tomto případě dochází prostřednictvím identifikátoru formuláře a prvky by měly být přidány atribut formuláře s hodnotou rovnou tomuto identifikátoru (příklad 3).

Příklad 3: Propojení formuláře s poli

HTML5 IE Cr Op Sa Fx

Formulář

V tomto příkladu je značka jednoznačně identifikována prostřednictvím identifikátoru auth a do polí, která by měla být odeslána prostřednictvím formuláře, se přidá form="auth". Chování prvků se v tomto případě nemění, po kliknutí na tlačítko se odešle login a heslo handler.php.

Přestože parametry odeslání formuláře jsou tradičně specifikovány v tagu, lze je také přenést do tlačítek pro odeslání formuláře ( a ). K tomu slouží sada atributů formation , formmethod , formenctype a formtarget, což jsou analogy odpovídajících atributů bez předpony formuláře. Příklad 4 ukazuje použití těchto atributů.

Příklad 4: Odeslání formuláře

HTML5 IE Cr Op Sa Fx

Odeslání formuláře

Všechny nové atributy formuláře nejsou podporovány některými prohlížeči, zejména Internet Explorer a Safari.

Momentálně se snažím odeslat html, ale používám pomocná metoda MVC ActionLink, protože nechci, aby to bylo tlačítko, chci, aby to byl podtržený odkaz jako ostatní na mé stránce. To je to, co teď mám

Toto se vrátí k mé akci, ale všechny domény, které byly odebrány za účelem smazání, nebudou odeslány zpět. (Pokud to použiji, funguje to dobře, takže vím, že to není něco špatného s odesláním nebo načtením zaškrtávacích políček)

Tohle mám zatím...

Seznam domén

| | **Smazat vybrané** |

dataKeys.Add(c => c.DomainId)).DataKeys(dataKeys => dataKeys.Add(c => c.Name)).Columns(columns => ( columns.Template(o => ( %> ( %>) o.DomainId); columns.Bound(o => o.Name); columns.Bound(o => o.SiteId); columns.Bound(o => o.ScrubAndRedirect); columns.Bound(o => o. ReportingSiteId); columns.Bound(o => o.TrafficCopClass); columns.Bound(o => o.SiteName); columns.Bound(o => o.FeedType); columns.Bound(o => o.Active) ; )).Sortable().Filterable().DataBinding(db => db.Server().Select("Index", "Domains")).Render();%>

| |

7 odpovědí

Pomocí jQuery můžete psát

Smazat vybrané$(".DeleteLink").click(function() ( $(this).closest("form").submit(); ));

Přidáním do SLak se můžete ujistit, že vaše kód jQuery běží ve vhodnou dobu (bez ohledu na umístění na stránce) pomocí následujícího:

$(document).ready(function())( $(".DeleteLink").click(function() ( $(this).closest("form").submit(); )); ));

Zabalení kódu do $(document).ready(...) zajistí, že se kód nespustí před načtením stránky.

jQuery můžete snadno použít pomocí metody odeslání na selektoru, který vybírá formulář:

Odeslat formulář // Za předpokladu, že máte načtený jQuery. $(document).ready(function() ( // Zde lze načíst výsledky selektoru // pro formulář. // Není nutné jej načítat pokaždé do // obsluhy události. // I když častěji než ne formulář // způsobí opětovné načtení strana// pokud ty jsi pomocí // pluginu pro ověření formuláře jQuery můžete skončit voláním události click // opakovaně. var myForm = $("#myForm"); // Přidejte obslužnou rutinu události pro odkaz. $("#myFormSubmit").click(function() ( // Odešlete formulář. myForm.submit(); // Vrátí hodnotu false, nechci // výchozí akci kliknutí. return false; )); ));

Většina odpovědí, které jsem viděl, se spoléhá na jQuery nebo nějaký fantazijní ajaxový odeslání, což není to, co jsem chtěl. Napsal jsem tedy metodu rozšíření HtmlHelper, která vytváří běžný formulář se skrytými vstupy a tlačítky. Je to nedokončená práce... stále může dokončit práci. Tady je třída:

Veřejná statická třída HtmlHelperExt ( public static HtmlString PostLink(tento htmlHtmlHelper, text řetězce, akce řetězce, objekt routeValues) ( var tbForm = new TagBuilder("form"); tbForm.MergeAttribute("method", "POST"); tbForm. MergeAttribute("action", action); var inputDict = HtmlHelper.ObjectToDictionary(routeValues); var inputs = new List(); foreach (klíč var v inputDict.Keys) (const string inputFormat = @""; var input = String. Format(inputFormat, klíč, html.Encode(inputDict)); inputs.Add(input); ) var submitBtn = ""; inputs.Add(String.Format(submitBtn, text)); var innerHtml = String.Join(" \n", inputs.ToArray()); tbForm.InnerHtml = innerHtml; // návrat samozavírací return new MvcHtmlString(tbForm.ToString()); ) )

Chcete-li to použít, v Razor napíšete:

@Html.PostLink("ButtonText", "/Controller/Action", new ( id = item.Id, hello="world" ))

A jako výsledek v HTML získáte:

Zkoušel jsem použít přístup Summit výše v Razor, ale musel jsem provést nějaké změny. Zahrnutí názvu řadiče do odkazu na akci způsobilo, že stránka obešla JQuery a odeslala formulář přímo. Zkusil jsem tedy následující.