События DOM
Отслеживая события DOM, вы можете сделать что-либо в нужный момент при работе с формой. К примеру, после успешной отправки формы сказать "Спасибо" в всплывающем окне или перенаправить пользователя на другую страницу.
Список событий формы
Wpcf7invalid Срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена , потому что были поля с недопустимым вводом. wpcf7spam Срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена , поскольку обнаружена возможная активность спама. wpcf7mailsent Срабатывает, когда форма успешно была отправлена на сервер и почта отправлена адресату. wpcf7mailfailed Срабатывает, когда форма успешно была отправлена на сервер, но отправить почту не удалось . Это может быть в следствии того, что на хостинге не работает почтовый сервер. wpcf7submit Срабатывает, когда форма успешно была отправлена на сервер, независимо от других инцидентов. Нажали кнопку "Отправить" - сработало этой действие. wpcf7beforesubmit Срабатывает раньше события wpcf7submit , что позволяет провести любые манипуляции с formData - данными формы, которые будут отправлены на сервер. Событие добавлено в CF7 v4.9.
Код из примеров ниже нужно использовать там, где выводится форма. Если форма у вас выводится на всех страницах сайта, то хорошим решением будет разместить код в файле footer.php , так как этот шаблон используется на всех страницах сайта.
Примеры для события wpcf7submit
Код ниже - простой пример регистрации обработчика события. В этом примере функция прослушивает событие wpcf7submit у контейнера с классом wpcf7 и просто выдает предупреждение при его возникновении, то есть при клике по кнопке "Отправить" сразу вызывает сообщение "Опачки, меня пытаются отправить... в Магадан!". Заметьте, что элемент с классом wpcf7 - это DIV с формой внутри, всё это плагин генерирует самостоятельно. Если у вас на странице несколько форм, код отработает только для первой найденной формы . Конечно, вы замените ненужный alert() на более полезное действие, к примеру, красивой анимацией отправки формы.
// Ищем блок с формой, имеющий класс wpcf7 (его имеют все div с формой) var wpcf7Elm = document.querySelector(".wpcf7"); // Мониторим событие wpcf7submit у выбранного блока wpcf7Elm.addEventListener("wpcf7submit", function(event) { alert("Опачки, меня пытаются отправить... в Магадан!"); // Либо что-то более полезное }, false);
Если вам захочется мониторить какую-то определенную форму (ниже по статье будут альтернативные решения, более рациональные), то укажите ID контейнера:
// Ищем уникальный блок с формой по его ID var wpcf7Elm = document.querySelector("#wpcf7-f92-p95-o1"); // Тут мониторинг события wpcf7submit , как в предыдущем примере.
Примеры выше рассчитаны на работу с одной формой. Если на странице несколько форм и надо мониторить событие wpcf7submit (или другие) у всех, то вешаем событие не на отдельный блок, а на весь document:
Document.addEventListener("wpcf7submit", function(event) { alert("Кто-то отправил форму! Какую именно? Пока не знаю."); }, false);
Как отследить введенные данные в поля
Пользовательские данные передаются обработчику события как свойство detail.inputs объекта события. Структура данных detail.inputs представляет собой массив объектов, и каждый объект имеет свойства имени и значения. Допустим у формы 4 поля. Используем код:
Document.addEventListener("wpcf7submit", function(event) { var inputs = event.detail.inputs; console.log(inputs); }, false);
При нажатии кнопки "Отправить" в консоле браузера отобразится структура данных:
Нам доступны имя каждого поля формы (имя поля указывается в админке в теге поля и является обязательным атрибутом) и его значение.
Перебрать каждое поле и отреагировать на определенное можно так:
Document.addEventListener("wpcf7submit", function(event) { var inputs = event.detail.inputs; // Ищем поле с именем your-name и злоупотребляем alert"ом при нахождении поля for (var i = 0; i < inputs.length; i++) { if ("your-name" == inputs[i].name) { alert(inputs[i].value); break; } } }, false);
Существуют и другие свойства объекта события, которые вы можете использовать в обработчике.
Detail.contactFormId ID контактной формы. Данный ID можно увидеть в админке в адресной строке при редактировании формы или в самом шоткоде формы. detail.pluginVersion Версия плагина Contact Form 7. detail.contactFormLocale Языковой код формы. К примеру, ru_RU . detail.unitTag Юнит-тег контактной формы. У каждой формы свой, к примеру wpcf7-f92-p95-o1 . detail.containerPostId ID поста, в контенте которого размещена форма.
Просмотреть все данные можно так:
Document.addEventListener("wpcf7submit", function(event) {
console.log(event.detail);
}, false);
Как обработать определенную форму
Например, если вы хотите что-то сделать только с определенной формой контакта (ID = 123), используйте свойство detail.contactFormId, как показано ниже:
Document.addEventListener("wpcf7submit", function(event) { if ("123" == event.detail.contactFormId) { alert("Контактная форма с ID = 123."); // Делаем ещё что-нибудь } }, false);
Борьба со спамом с помощью AkismetКак бороться со спамом в плагине Contact Form 7? Предусмотрено несколько механизмов, но лишь пара являются популярными: reCAPTCHA и Akismet.
Как установить и настроить Akismet? При установке WordPress плагин Akismet устанавливается автоматически, остаётся его лишь активировать. Если по каким-то причинам его нет, то эти ссылки Вам помогут:
После активации плагина появится сообщение с предложением активировать вашу учётную запись:
При нажатии по кнопке вас перекинет на страницу настроек плагина:
Чтобы Akismet заработал, надо в настройках плагина указать API-ключ. Если его нет, то нажимайте кнопку "Получить API-ключ" и следуйте инструкциям:
- Регистрация на офф. сайте плагина с использованием аккаунта wordpress.com
- Выбор тарифного плана (есть бесплатный)
- Добавление сайта в админ-панель сервиса по нажатию кнопки "Activate this site"
Это простой и быстрый процесс. После активации сайта произойдёт редирект обратно в админку вашего сайта с уже готовыми настройками, их нужно сохранить:
Чтобы Akismet начал проверять поле, нужно при его генерации указать по какому правилу делать проверку, например:
Akismet:author
Добавьте такой параметр в поле для ввода имени пользователя.
Пример:
akismet:author_email
Добавьте такой параметр в поле для ввода email пользователя.
Пример:
akismet:author_url
Добавьте такой параметр в поле для ввода ссылки от пользователя.
Пример:
Рекомендуется использовать параметр akismet:значение ко всем полям, которые предусматривают такую проверку. По собранным данным Akismet примет решение, спам это или нет, поэтому их полнота играет важное значение.
В Contact Form 7 есть несколько видов оформления извещений:
Зеленая рамка у извещения Сообщение отправлено успешно Жёлтая рамка у извещения Некоторые поля заполнены с ошибкой, валидацию поле не прошло Оранжевая рамка у извещения Сообщение отмечено как спам Красная рамка у извещения Отправка сообщения провалена
Теперь можно протестировать работу формы с Akismet защитой, вписав вместо имени пользователя "viagra-test-123". Сообщение с такими данными будет помечено как спам и отослано на почту не будет.
Ограничение доступа к панели администрированияИзначально, вкладка с формами Contact Form 7 доступна всем пользователям с ролью участника (contributor) и выше. Редактировать формы могут только редакторы и администраторы. Как изменить права доступа к формам?
Параметры доступа изменяются с помощью констант, которые прописываются в корне движка в файле wp-config.php , например:
Define("WPCF7_ADMIN_READ_CAPABILITY", "manage_options"); define("WPCF7_ADMIN_READ_WRITE_CAPABILITY", "manage_options");
Право manage_options по умолчанию имеют администраторы и супер администраторы сайта. Поэтому данный пример даст доступ к списку форм и возможность их редактировать только пользователям с этими ролями. Другие роли не увидят вкладку плагина.
WPCF7_ADMIN_READ_CAPABILITY
Минимальная роль или возможность для доступа к админке, то есть отображения меню и списка форм.
По умолчанию: edit_posts
WPCF7_ADMIN_READ_WRITE_CAPABILITY
Минимальная роль или возможность для редактирования форм. Этот параметр должен быть строже или такой же, как WPCF7_ADMIN_READ_CAPABILITY. Объясняется это тем, что нельзя редактировать формы, не имея доступа к админ-панели.
По умолчанию: publish_pages
Чтобы лучше понимать, как это работает, взгляните на код (CF7 v4.9.1, файл capabilities.php) с использованием этих констант:
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_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_read_contact_forms" => WPCF7_ADMIN_READ_CAPABILITY, "wpcf7_delete_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_manage_integration" => "manage_options", "wpcf7_submit" => "read",); $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]; } return $caps; }
Из кода видно, что массив возможностей проходит через фильтр wpcf7_map_meta_cap , и содержит следующие данные:
По умолчанию Array ( => publish_pages => publish_pages => edit_posts => publish_pages => manage_options => read) После изменения, к примеру, с помощью констант Array ( => manage_options => manage_options => manage_options => manage_options => manage_options => read)
Благодаря фильтру wpcf7_map_meta_cap , мы может изменить данный массив. Этот способ избавляет нас от редактирования файла wp-config.php , но придется писать код, к примеру, в файле functions.php:
Add_filter("wpcf7_map_meta_cap", "change_wpcf7_map_meta_cap"); function change_wpcf7_map_meta_cap($meta_caps) { // Новые значение возможностей $replace_caps = array("wpcf7_edit_contact_form" => "manage_options", "wpcf7_edit_contact_forms" => "manage_options", "wpcf7_read_contact_forms" => "manage_options", "wpcf7_delete_contact_form" => "manage_options",); return array_replace($meta_caps, $replace_caps); }
Оформление чекбоксов и радиокнопокContact Form 7 по умолчанию оформляет чекбоксы и радиокнопки в линию. Но это можно изменить с помощью настроек тега этих полей и простых CSS правил.
Так выглядят чекбоксы по умолчанию:
Но если передать в тег чекбокса параметр label_first , отображение лейбла относительно флажка измениться на обратное:
Чтобы выстроить чекбоксы в столбик, добавьте строку стилей в CSS файл темы:
Span.wpcf7-list-item { display: block; }
Чтобы выстроить чекбоксы как таблицу, добавьте строку стилей в CSS файл темы (дополнительно использовался параметр label_first):
Span.wpcf7-list-item { display: table-row; } span.wpcf7-list-item * { display: table-cell; }
По умолчанию Contact Form 7 загружает JavaScript и CSS на всех страницах сайта, независимо где используется форма. Технически плагин не может работать иначе, но ему можно «подсказать».
Пример 1 - полное отключение JavaScript и CSS и включение где нужно Шаг 1 - отключение JavaScript и CSS на всех страницах сайтаСуществует константа WPCF7_LOAD_JS со значением по умолчанию true , которая определена в коде плагина и отвечает за загрузку JavaScript на всех страницах сайта. Её можно переопределить, вставив в файл wp-config.php код:
Define("WPCF7_LOAD_JS", false);
Этот код отменит загрузку скриптов плагина.
И такая же константа есть для стилей WPCF7_LOAD_CSS , которая работает по тому же принципу - отменяет загрузку стилей плагина:
Define("WPCF7_LOAD_CSS", false);
С версии плагина 3.9 и выше, можно отменить загрузку JavaScript и CSS через хуки в functions.php:
Add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false");
Но теперь у нас появилась другая проблема - на странице с формой стили и скрипты плагина не подгружаются, а функциональность и внешний вид испорчены. Нужен механизм, который бы решал проблему.
Шаг 2 - загрузка файлов на страницах с формамиНапример, у нас есть страница "Контакты" с формой. За вывод страницы отвечает файл contact.php . Тогда, воспользуемся кодом:
If (function_exists("wpcf7_enqueue_scripts")) { wpcf7_enqueue_scripts(); } if (function_exists("wpcf7_enqueue_styles")) { wpcf7_enqueue_styles(); }
Эта конструкция должна быть размещена в файле contact.php до вызовы функции wp_head() . Это рекомендация разработчика плагина.
Пример 2 - отключение скриптов и стилей везде где НЕ нужноЕсть более гибкий метод, позволяющий указать, на каких страницах подключать скрипты. Данный код нужно вставить в functions.php:
1 вариант: ## Отключаем стили, скрипты плагина везде кроме страницы contacts 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"); } } 2 вариант: ## Отключаем стили, скрипты плагина везде кроме страницы contacts add_action("wp_print_styles", "my_deregister_javascript", 100); function my_deregister_javascript(){ if(! is_page ("contacts")){ wp_deregister_script("contact-form-7"); // отключаем скрипты плагина wp_deregister_style("contact-form-7"); // отключаем стили плагина } } Пример 3 - включение скриптов только при использовании шорткода формыСначала отменяем подключение JS и CSS, а затем подключаем обратно только тогда, когда срабатывает шорткод формы. Тем самым файлы подключатся только на тех страницах, где есть шорткод формы.
Function wpcf7_remove_assets() { add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); } add_action("wpcf7_init", "wpcf7_remove_assets"); function wpcf7_add_assets($atts) { wpcf7_enqueue_styles(); return $atts; } add_filter("shortcode_atts_wpcf7", "wpcf7_add_assets");
Код можно оформить как плагин или вставить в function.php темы.
Отслеживание форм с помощью Google AnalyticsЕсть простой способ отслеживать события формы через Google Analytics.
Во-первых, убедитесь в наличии кода от Google Analytic, выглядит он примерно так:
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||).push(arguments)},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("create", "UA-XXXXX-Y", "auto"); ga("send", "pageview");
Если код Аналитики есть или после его установки, в систему можно отправлять данные, за которыми затем можно следить в админке Google Analytics. Подробнее об этом читайте в официальной документации об отслеживании событий .
К примеру, нужно отследить отправку форму, для этого нужно выполнить такой код:
Ga("send", "event", "Contact Form", "submit");
Последним шагом является вставка этого фрагмента в код JavaScript в заголовок HTML ( ) каждой страницы. Вы можете для этого отредактировать шаблон header.php вашей темы, или вы можете использовать на хуке wp_head functions.php.
document.addEventListener("wpcf7mailsent", function(event) { ga("send", "event", "Contact Form", "submit"); }, false);
А так можно отслеживать успешную отправку каждой отдельной формы:
Document.addEventListener("wpcf7mailsent", function(event) { if ("123" == event.detail.contactFormId) { ga("send", "event", "Contact Form 123", "submit"); } if ("253" == event.detail.contactFormId) { ga("send", "event", "Contact Form 253", "submit"); } }, false);
Теперь, при успешной отправке формы вы будите видеть это событие в админке Google Analytics (Поведение -> События -> Обзор). Возможно, данные появятся там не сразу после совершения события, а после 24-48 часов.
Выбор адресата в формеПредставим, что у вас небольшая веб-студия с персоналом: сеошник, продажник и техподдержка. Как с помощью одной формы отправить информацию кому-то из них лично? На помощь придёт поле select (выпадающий список)! Задача решается в два этапа.
1 этап - добавление тега в шаблон формы:
2 этап этап - вставка в поле "Кому" тег , который при отправке письма будет брать из нашего выпадающего списка выбранную пользователем почту и подставлять в поле.
У этого способа есть серьезный недостаток. Взгляните на код, получаемый после преобразование нашего тега выпадающего списка:
[email protected] [email protected] [email protected]
Как видно, адреса электронной почты "хранятся" в открытом виде. Этим могут воспользоваться вездесущие спамеры. Но не после маленькой хитрости... Модернизируем наш тег так:
Здесь мы передавали параметр через так называемую трубу (прямой слеш) по правилу имя|значение. В итоге получили следующую html структуру на выходе:
Сеошник Продажник ТехПоддержка
Как видим, в форме пользователь выбирает один из пунктов, а плагин при отправке письма сам берет значение на основе названия выбранного пункта.
Усложним задачу еще...
Представим ситуацию, когда надо отправить письмо выбранному адресату, к примеру сеошнику, и еще копию письма менеджеру сайта для контроля.
В предыдущих статьях мы рассмотрели, что Contact Form 7 может отправлять два письма, причем для каждого адресата можно задать отдельный шаблон.
Итак, первая копия приходит сеошнику и тот понимает о чем речь в сообщении. А вот менеджер не понимает, какому специалисту было адресовано письмо, ведь он может не до конца разбираться в теме или не помнить все почтовые адреса специалистов. Возникает потребность в шаблоне письма использовать не только значение поля (в нашем случае адреса электронной почты), но и заголовок пункта (название специалиста)? Для этого плагин предоставляет нам тег [_raw_{field name}] , где {field name} - название нашего поля. Подытожим употребление тегов:
Значение поля, которое в шаблоне письма преобразуется в значение выбранного пункта (адрес электронной почты в нашем примере, то есть [email protected]) [_raw_your-recipient] имя поля, которое в шаблоне письма преобразуется в имя (заголовок) выбранного пункта (название специалиста в нашем примере, то есть Сеошник)
Если данный функционал не нужен, то его можно отключить, вписав следующий код в файл wp-config.php:
Define("WPCF7_USE_PIPE", false);
Добавление Cc, Bcc и других заголовков письма
Contact Form 7 во вкладке с настройкой шаблона письма имеет поле для отправки дополнительных заголовков (Additional Headers) по правилу название-заголовка: значение. Каждый заголовок должен идти с новой строки.
Рассмотрим самые популярные - Reply-To , Cc и Bcc , об остальных читайте на Википедии .
Reply-To Имя и адрес, куда следует адресовать ответы на это письмо. К примеру, вы в форме попросили пользователя указать его email. Используйте его, чтобы почтовый клиент сразу знал, на какой email надо отправить ответ. Cc (от англ. carbon copy) содержит имена и адреса вторичных получателей письма, к которым направляется копия. Bcc (от англ. blind carbon copy) содержит имена и адреса получателей письма, чьи адреса не следует показывать другим получателям.
Contact Form 7 на вашем языкеContact Form 7 автоматически использует перевод того языка, который вы используете в админке. Меняется язык в Настройки -> Общие -> Язык сайта (выпадающий список). Но так изменится язык для всего сайта. А что делать, когда у вас авторы говорят на разных языках?
Для этого разработчики предлагают использовать плагин Bogo , который для каждого пользователя даёт возможность переключать язык админки. После активации в тулбоксе рядом с вашим ником появится переключение языков.
Специальные теги письмаContact Form 7 поддерживает несколько специфических тегов, которые могут понадобиться при работе с формой. Например, в письме указать IP отправителя и ссылку страницы, где была форма заполнена. Специальные теги можно использовать в шаблоне письма или других полях формы.
Теги отправки [_remote_ip] Этот тег будет заменен на IP пользователя. [_user_agent] Этот тег будет заменен на User Agent браузера пользователя. User Agent - это строка, которую используют веб-браузеры в качестве своего имени, она содержит не только имя браузера, но и версию операционной системы и другие параметры. [_url] Этот тег будет заменен на адрес страницы, с которой была отправлена форма. [_date] Будет заменен на дату отправки формы. [_time] Будет заменен на время отправки формы. [_invalid_fields] Этот тег заменяется количеством полей формы с недопустимым вводом. Используйте в шаблонах уведомлений. [_serial_number] Будет заменен на порядковое число сохраненного сообщения. Должен быть установлен плагин Flamingo 1.5+, о нем рассказано ниже. Теги постаДанные теги будут работать только в контенте поста. Если форма в модальном окне, в сайдбаре, футере или хедере, встроена в шаблон темы, то есть вне контента поста - они не сработают.
[_post_id] Будет заменен на ID поста, в контенте которого отображена форма. [_post_name] Будет заменен на имя (slug) поста, с которого была отправлена форма. [_post_title] Будет заменен на название (заголовок) поста, с которого была отправлена форма. [_post_url] Будет заменен на ссылку (url) поста, с которого была отправлена форма. [_post_author] Будет заменен на имя автора поста, с которого была отправлена форма. [_post_author_email] Будет заменен на email автора поста, с которого была отправлена форма.
Теги сайта[_site_title] Будет заменен названием сайта (указывается в Общих настройках). [_site_description] Будет заменен описанием сайта (указывается в Общих настройках). [_site_url] Будет заменен адресом сайта (указывается в Общих настройках). [_site_admin_email] Будет заменен на адрес e-mail сайта (указывается в Общих настройках).
Теги пользователяЭти теги предоставляют информацию о текущем зарегистрированном пользователе .
Теги [_user_*] работают только тогда, когда Отправитель имеет учетную запись и авторизовался. Если форму отправит неавторизованный пользователь, то эти теги вернут пустой результат и смысла от них не будет. Рекомендуется включить режим " ", чтобы форма отображалась только для зарегистрированных пользователей.
Если нужно использовать эти теги, и при этом не нужно использовать опцию "только для подписчиков" (subscribers_only: true), вам нужно включить nonce опцию. Если всего этого не сделать, данные авторизованных юзеров будут сброшены через WP REST API и указанный тег будет пропущен (заменен на пустую строку).
[_user_login] Будет заменен на логин пользователя. [_user_email] Будет заменен на email пользователя. [_user_url] Будет заменен на URL сайта пользователя. [_user_first_name] Будет заменен на имя пользователя. [_user_last_name] Будет заменен на фамилию пользователя. [_user_nickname] Будет заменен на ник пользователя. [_user_display_name] Будет заменен на отображаемое имя пользователя.
Сохранение отправленных сообщений с помощью Flamingo // Можно тоже самое сделать с помощью фильтра add_action("wpcf7_autop_or_not", "__return_false"); WPCF7_USE_PIPE Когда значение константы false (по умолчанию true), Contact Form 7 начинает воспринимать | как обычный символ. WPCF7_ADMIN_READ_CAPABILITY Минимальная роль или возможность для доступа к админке.По умолчанию: edit_posts . WPCF7_ADMIN_READ_WRITE_CAPABILITY Минимальная роль или возможность для редактирования форм. По умолчанию publish_pages . Этот параметр должен быть строже или такой же, как WPCF7_ADMIN_READ_CAPABILITY. Это объясняется тем, что Нельзя редактировать формы, не имея доступа к панели администрирования. WPCF7_CAPTCHA_TMP_DIR Определение этой константы переопределит путь к папке для временных файлов CAPTCHA. WPCF7_CAPTCHA_TMP_URL Определение этой константы переопределит ссылку к папке для временных файлов CAPTCHA. WPCF7_UPLOADS_TMP_DIR Определение этой константы переопределит путь к временной папке для загруженных файлов. WPCF7_VERIFY_NONCE
Указывает плагину, проверять nonce (защитный код) или нет. С версии плагина 4.9 эта константа стала иметь значение false , то есть "не проверять". Вернуть проверку можно установив значение константы в true или с помощью хука
Add_filter("wpcf7_verify_nonce", "__return_true");
Перенаправление на другой адрес после отправки формыКогда нужно после успешной отправки формы переадресовать пользователя на какую-то страницу, к примеру, с благодарностью или подарком, воспользуйтесь JavaScript хуком:
document.addEventListener("wpcf7mailsent", function(event) { location = "http://example.com/"; }, false);
Смотрите пункт "События DOM", чтобы разобраться, как это работает.
Черный список спама от WordPress для фильтрации формЕсли вы страдаете от наплыва спама или нежелательных сообщений, а CAPTCHA или Akismet не справляются, то выручить может встроенный в движок функционал "Черный список".
Черный список находится в админке по пути Настройки -> Обсуждение.
Если сообщение, отправляемое через Contact Form 7, содержит какие-либо из этих слов в своём тексте, имени автора, URL, адресе e-mail или IP - оно будет помечено, как спам, и отправлено не будет. Каждое слово или IP с новой строки. Используется поиск по подстроке, то есть по слову «купи» будет найдено «купить».
Как узнать IP-адрес, с которого приходит спам через форму Contact Form 7? Самый простой способ заключается в использовании специального тега [_remote_ip] . Данный тег вставляется в шаблон письма и будет заменен на IP-адрес отправителя при отправке письма.
Дизайн форм Contact Form 7Я часто привожу html код того или иного поля в Contact Form 7 . Вы можете наблюдать, какие классы по умолчанию добавляет плагин полям. А сейчас мы вкратце пробежимся, как задать свои классы полям формы.
Какой CSS редактировать чтобы изменить внешний вид формы?
Все стили, которые отвечают за внешний фид форм, хранятся в файле плагина contact-form-7/includes/css/styles.css . Изменять этот файл - плохая идея, так как при обновлении плагина файл заменится и вы потеряете все изменения. Тоже самое относится и к публичным темам, которые также обновляются, как и плагины.
Поэтому чтобы изменить стили, нужно выбрать файл стилей, который не будет обновляться. Это может быть файл стилей дочерней темой . Или можно воспользоваться настройками темы, которые позволяют вставлять CSS код в специальное поле.
Если у вас своя тема, то можно изменить (перебить) стили Contact Form 7 в стилях темы.
Стили полей в Contact Form 7
Плагин поддерживает множество типов полей, но самый распространенный тип поля - текстовый. Чтобы задать такому полю стиль, нужно обратиться к нему по типу:
Wpcf7 input{ background-color: #fff; color: #000; width: 50%; }
В форме мы часто используем не одно поле, потому давайте пропишем свойства сразу нескольким:
Wpcf7 input, .wpcf7 input, .wpcf7 textarea{ background-color: #fff; color: #000; width: 50%; }
Вышеперечисленные стили будут применены ко всем полям и формам плагина Contact Form 7 на это указывает селектор.wpcf7 . Подробнее о селекторах .
Стиль для определенного поля
При создании любого поля можно задать ему идентификатор или класс:
Теперь в CSS, благодаря идентификатору, мы можем обратиться только к этому полю:
#very-special-field{ color: #f00; border: 1px solid #f00; }
Стиль формы
Про стили полей поговорили, а как добавить оформление самой форме? Воспользуемся уже известным нам классом wpcf7 , который добавляется ко всем формам плагина:
Wpcf7{ background-color: #f7f7f7; border: 2px solid #0f0; }
Настройка сообщений об ошибкахПри отправке формы, если обязательное поле не заполнено или не прошло првоерку, Contact Form 7 отобразит сообщение об ошибке. Эти сообщения можно настроить.
Изменение текста
Текст той или иной ошибки, уведомления можно изменить. Например, при отправке формы с незаполненным обязательным полем появляется сообщение "Поле обязательно." Чтобы изменить текст этого сообщения, откройте редактирование формы, вкладку "Уведомления при отправке формы ". Если нужно изменить текст ошибки для каждого поля в отдельности, то стоит обратить внимание на плагин Contact form 7 Custom validation .
Статическое или плавающее сообщение?
Как говорят, лучше один раз увидеть, чем сто раз услышать, потому смотрите:
Статический стиль сообщений
Сообщения об ошибках отображаются ниже поля и не исчезают, пока форма не будет успешно отправлена.
Плавающий стиль сообщений
Сообщения об ошибках отображаются ниже поля в стиле подсказки. Подсказка исчезает при наведении на неё или при фокусе в поле, к которому эта подсказка относится.
Плавающий стиль для нужного поля
Чтобы задать плавающий стиль определенному полю, нужно обернуть его в блок с классом use-floating-validation-tip:
Плавающий стиль для всех полей
Чтобы не оборачивать каждое поле в блок с классом use-floating-validation-tip , можно "попросить" плагин сделать это за нас, указав в шорткоде формы атрибут html_class со значением use-floating-validation-tip:
Если используется не Ajax отправка (с перезагрузкой страницы), то независимо от настроек, будет использоваться статический стиль отображения ошибок.
Менеджер длинных листов с ListoДопустим, нам нужно сделать контактную форму, где пользователю предлагают с помощью выпадающего списка выбрать его местоположение. Есть около 200 стран мира и создание такого списка выльется в мучение.
Например:
Управлять такой "колбасой" сложно и вероятность допустить ошибку высока.
Для решения такой нелепицы есть плагин Listo , который предоставляет следующие списки:
- Страны - data:countries , data:countries.olympic
- Структурные подразделения США - data:us_subdivisions.states , data:us_subdivisions.districts
- Валюты - data:currencies
- Временные зоны
Contact Form 7 умеет работать с Listo (или наоборот этого никто не знает), который в свою очередь работает с полями: выпадающий список, чекбоксы и радио-кнопки. Благодаря такой связке не придётся болезненно редактировать длинные списки, а можно будет использовать короткие предопределенные параметры.
Как управлять параметрами длинного списка
К примеру, мы решили вывести список стран, для этого понадобится тег выпадающего списка :
Список пока пустой, мы не передали никаких параметров. Добавим их:
Всего один параметр и мы стали веганами - никакой "колбасы" с перечислением стран - за нас это сделал Listo.
Дополнительные настройкиКаждой форме можно указать доп. параметры во вкладке "Дополнительные настройки". Рассмотрим все такие настройки:
Режим "Только для подписчиков"
Subscribers_only: true
Данный режим (доступен с CF7 v7 4.9) позволяет отобразить форму только для зарегистрированных пользователей. Незарегистрированные пользователи увидят сообщение "Эта форма доступна только для зарегистрированных пользователей." и, соответственно, не смогут заполнить и отправить форму. Отличный способ избавиться от спама, если вам нужно принимать письма только от авторизованных пользователей.
Демо режим
Demo_mode: on
При использовании этого кода форма перейдёт в демонстрационной режим. В этом режиме контактная форма пропустит процесс отправки почты и просто отобразит «завершено успешно» в качестве ответного сообщения.
Пропустить письмо
Skip_mail: on
Параметр skip_mail работает почти так же, как demo_mode , но skip_mail пропускает только отправку сообщений. В отличие от demo_mode, skip_mail не влияет на другие действия, такие как сохранение сообщений с помощью Flamingo.
Принудительная проверка полей
Acceptance_as_validation: on
По умолчанию, такие поля, как чекбоксы не выдают ошибок. Данный параметр позволяет применять к чекбоксам правила валидации, такие же как для других полей. К примеру, если вы создали чекбокс, в котором пользователь должен поставить флажок, какого он пола, а пользователь ничего не выбрал - плагин выдаст общую ошибку "Не все поля заполнены". Если же применить этот параметр, то в дополнение к общему сообщению, пользователь увидит сообщение индивидуально для данного чекбокса.
Запрет сохранения сообщений
Do_not_store: true
Этот параметр сообщает модулям хранения сообщений, таким как Flamingo , чтобы те не сохраняли сообщения через эту форму контакта.
Выполнение JavaScript кода
Этот функционал пригодится, когда нужно отслеживать поведение пользователей. К этим хукам можно прикрепить отслеживание через Google Analytics или другие системы статистики (об этом говорится выше).
on_sent_ok: "alert("sent ok");" on_submit: "alert("submit");" on_sent_ok переданный JavaScript будет выполнен после успешной отправки формы. on_submit переданный JavaScript будет выполнен при нажатии на кнопку "Отправить". Скрытие формы Contact Form 7 после успешной отправки сообщенияУ нас есть настроенная и рабочая форма. И нужно, чтобы когда пользователь нажимает на кнопку "Отправить" и нам уходит письмо, форма пропадала, а на её месте появлялся текст "Отправлено!".
Делается это просто: для этого в дополнительных настройках плагина добавьте такую строку:
Document.addEventListener("wpcf7mailsent", function(event) { jQuery("#contactform").hide(); }, false);
где contactform - это ID формы которую нужно скрыть. Вместо #contactform можно указать другой селектор HTML элемента (формы), который нужно скрыть.
Как в теге select объединить похожие option в отдельные группы? Данный функционал может обеспечить html тег optgroup, но по умолчанию плагин Contact Form 7 это не умеет. Рассмотрим способы решения этой нестандартной для плагина задачи.
Способ 1 с использованием JavaScriptДанный способ подсмотрен на codepen.io и немного переработан. Суть способа в том, что JavaScript "считывает структуру тега select и преобразовывает в нужный формат. В примере будет рассмотрено поле для выбора движка:
Шаблон формы:
Имя поля выбрано engines , потому в шаблоне письма используем тег , чтобы на почту пришло выбранное пользователем значение.
Добавляем JavaScript
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(); });
Данный код реализован на jQuery. Вставлять его следует в js файл темы или создать новый js и подключить . Так как имя тега было engines , то в этом коде указываем именно его, то есть select .
Оригинальный html код поля select
optgroup-Бесплатные движки Wordpress Joomla! Drupal Grav endoptgroup optgroup-Платные движки 1С-Битрикс DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop endoptgroup
Обработанный html код поля select
Wordpress Joomla! Drupal Grav 1С-Битрикс DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop
Если у пользователя отключен JavaScript , то поле будет отображать все option. То есть даже те option, что должны были быть преобразованы в тег optgroup, станут видны как обычные option.
Пытается отправить форму на сервер.
Стоимость
Если вы решили использовать элементы для создания кнопок в своей форме, имейте это в виду: если внутри есть только одна , эта кнопка будет обрабатываться как кнопка «отправить». Поэтому у вас должно быть привычка явно указывать, какая кнопка - кнопка отправки.
Простая кнопка отправкиНачнем с создания формы с простой кнопкой отправки:
Let"s submit some text
Это делает так:
Попробуйте ввести текст в текстовое поле, а затем отправьте форму.
После отправки пары имя / значение данных отправляется на сервер. В этом случае строка будет "text= usertext " , где «usertext» - это текст, введенный пользователем, закодированный для сохранения специальных символов. Где и как данные передаются, зависит от конфигурации ; см. « Отправка данных формы» для получения более подробной информации.
Добавление сочетания клавиш отправкиЯрлыки клавиш, также называемые клавишами доступа и эквивалентами клавиатуры, позволяют пользователю запускать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить комбинацию клавиш к кнопке отправки - так же, как и с любым для которого это имеет смысл, вы используете глобальный атрибут accesskey .
В этом примере s указывается как ключ доступа (вам нужно нажать s плюс специальные ключи-модификаторы для вашей комбинации браузера / ОС. Чтобы избежать конфликтов с собственными комбинациями клавиш пользовательского агента, используются разные клавиши-модификаторы для ключи доступа, чем для других ярлыков на главном компьютере. Дополнительные сведения см. в разделе доступа.
Вот предыдущий пример с добавленным ключом доступа s:
Let"s submit some text
Например, в Firefox для Mac нажатие кнопки Control - Option - S вызывает кнопку отправки, в то время как Chrome в Windows использует Alt + S.
Проблема с приведенным выше примером заключается в том, что пользователь не будет знать, что такое ключ доступа! Это особенно верно, поскольку модификаторы обычно нестандартны, чтобы избежать конфликтов. При создании сайта обязательно указывайте эту информацию таким образом, чтобы это не мешало дизайну сайта (например, предоставляя легкодоступную ссылку, указывающую на информацию о том, какие ключи доступа к сайту). Добавление всплывающей подсказки к кнопке (с использованием атрибута title) также может помочь, хотя это не полное решение для целей доступности.
Отключение и включение кнопки отправкиЧтобы отключить кнопку отправки, просто укажите на ней disabled глобальный атрибут, например:
Вы можете включать и отключать кнопки во время выполнения, просто disabled значение true или false ; в JavaScript это выглядит как btn.disabled = true или btn.disabled = false .
ПроверкаКнопки отправки не участвуют в проверке ограничений; они не имеют реальной ценности для ограничения.
ПримерыМы включили простые примеры выше. Больше нечего сказать о кнопках отправки. Причина такого рода контроля иногда называется «простой кнопкой».
Attribute contains a DOMString which is displayed as the button"s label. Buttons do not have a true value otherwise.
If you don"t specify a value , the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of "Submit" or "Submit Query." Here"s an example of a submit button with a default label in your browser:
Additional attributes formenctype
A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:
Application/x-www-form-urlencoded This, the default value, sends the form data as a string after URL encoding the text using an algorithm such as . multipart/form-data Uses the FormData API to manage the data, allowing for files to be submitted to the server. You must use this encoding type if your form includes any elements of type file (). text/plain Plain text; mostly useful only for debugging, so you can easily see the data that"s to be submitted.
If specified, the value of the formenctype attribute overrides the owning form"s action attribute.
formmethodA string indicating the HTTP method to use when submitting the form"s data; this value overrides any method attribute given on the owning form. Permitted values are:
Get A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark ("?") character, then appending the form"s data, encoded as described by formenctype or the form"s enctype attribute. This URL is then sent to the server using an HTTP request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value. post The form"s data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP post request. This method supports complex data and file attachments. dialog This method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all.
formnovalidateA Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element"s owning form.
formtargetA string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or . A value specified here overrides any target given by the target attribute on the that owns this input.
In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:
Self Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified. _blank Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent . _parent Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self . _top Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self .
Using submit buttonsbuttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use , or better still, a element.
If you choose to use elements to create the buttons in your form, keep this in mind: if there"s only one inside the , that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.
A simple submit buttonWe"ll begin by creating a form with a simple submit button:
Let"s submit some text
This renders like so:
Try entering some text into the text field, and then submitting the form.
Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be text=usertext , where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the ; see Sending form data for more details.
Adding a submit keyboard shortcutKeyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button - just as you would with any for which it makes sense - you use the accesskey global attribute.
In this example, s is specified as the access key (you"ll need to press s plus the particular modifier keys for your browser/OS combination. In order to avoid conflicts with the user agent"s own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.
Here"s the previous example with the s access key added:
Let"s submit some text
For example, in Firefox for Mac, pressing Control - Option - S triggers the Send button, while Chrome on Windows uses Alt + S .
The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn"t interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it"s not a complete solution for accessibility purposes.
Disabling and enabling a submit buttonTo disable a submit button, simply specify the disabled global attribute on it, like so:
You can enable and disable buttons at run time by simply setting disabled to true or false ; in JavaScript this looks like btn.disabled = true or btn.disabled = false .
ValidationSubmit buttons don"t participate in constraint validation; they have no real value to be constrained.
ExamplesWe"ve included simple examples above. There isn"t really anything more to say about submit buttons. There"s a reason this kind of control is sometimes called a "simple button."
Specifications| HTML Living Standard The definition of "" in that specification. |
Living Standard | |
| HTML5 The definition of "" in that specification. |
Recommendation |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile | ||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android Safari on iOS Samsung Internet | ||
| Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 |
В настоящее время я пытаюсь сделать html submit, но используя вспомогательный метод MVC ActionLink, поскольку я не хочу, чтобы это была кнопка, я хочу, чтобы это была подчеркнутая ссылка, как и остальные на моей странице. Это то, что у меня есть сейчас
Это возвращается к моему действию, но все домены, которые были удалены для удаления, не отправляются обратно. (если я использую это, он отлично работает, поэтому я знаю, что это не что-то неправильно с отправкой или извлечением флажков)
Вот что я до сих пор...
Domain List
| | **Delete Selected** |
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 ответов
Используя jQuery, вы можете написать
Delete Selected $(".DeleteLink").click(function() { $(this).closest("form").submit(); });
Добавляя в SLaks, вы можете убедиться, что ваш код jQuery запускается в соответствующее время (независимо от местоположения на странице), используя следующее:
$(document).ready(function(){ $(".DeleteLink").click(function() { $(this).closest("form").submit(); }); });
Обернув код в $(document).ready(...) , вы убедитесь, что код не будет запущен до того, как страница будет загружена.
Вы можете легко использовать jQuery , используя отправить метод на селектор, который выбирает форму:
Submit form // Assuming you have jQuery loaded. $(document).ready(function() { // Can load the results of the selector // for the form here. // No need to load it every time in the // event handler. // Even though more often than not the // form will cause a reload of the page // if you are using the jQuery form validation // plugin, you could end up calling the click // event repeatedly. var myForm = $("#myForm"); // Add the event handler for the link. $("#myFormSubmit").click(function() { // Submit the form. myForm.submit(); // Return false, don"t want // default click action to take place. return false; }); });
Большинство ответов, которые я видел, полагаются на jQuery или некоторые причудливые ajax submit, чего я не хотел. Поэтому я написал метод расширения HtmlHelper, который создает обычную форму со скрытыми вводами и кнопками. Он работает в процессе... все еще может справиться с этой задачей. Вот класс:
Public static class HtmlHelperExt { public static HtmlString PostLink(this HtmlHelper html, string text, string action, object routeValues) { var tbForm = new TagBuilder("form"); tbForm.MergeAttribute("method", "POST"); tbForm.MergeAttribute("action", action); var inputDict = HtmlHelper.ObjectToDictionary(routeValues); var inputs = new List(); foreach (var key in inputDict.Keys) { const string inputFormat = @""; var input = String.Format(inputFormat, key, html.Encode(inputDict)); inputs.Add(input); } var submitBtn = ""; inputs.Add(String.Format(submitBtn, text)); var innerHtml = String.Join("\n", inputs.ToArray()); tbForm.InnerHtml = innerHtml; // return self closing return new MvcHtmlString(tbForm.ToString()); } }
Чтобы использовать его, в Razor вы пишете:
@Html.PostLink("ButtonText", "/Controller/Action", new { id = item.Id, hello="world" })
И как результат, в HTML вы получаете:
Я попытался использовать подход Summit выше в Razor, но должен был внести некоторые изменения. Включение имени контроллера в ссылку действия заставило страницу обойти JQuery и напрямую отправить форму. Итак, я попробовал следующее.
Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.
Пример 1. Отправка данных формы
HTML5 IE Cr Op Sa Fx
Данные формы
В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.
Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.
Какой метод используется легко определить по адресной строке браузера. Если в ней появился вопросительный знак и адрес стал похож на этот, то это точно GET.
http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8
Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.
Ниже перечислены типовые области применения этих методов на сайтах.
GETПередача небольших текстовых данных на сервер; поиск по сайту.
Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.
POSTПересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.
Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега (пример 2).
Пример 2. Открытие формы во фрейме
HTML5 IE Cr Op Sa Fx
Использование фрейма
В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .
Элементы формы традиционно располагаются внутри тега , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).
Пример 3. Связывание формы с полями
HTML5 IE Cr Op Sa Fx
Форма
В этом примере тег однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.
Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы ( и ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.
Пример 4. Отправка формы
HTML5 IE Cr Op Sa Fx
Отправка формы
Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.