Contact form 7 цвет кнопки. CAPTCHA не работает, изображение не появляется
Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.
Документация и поддержка
Скриншоты
Установка
- Загрузите всю папку contact-form-7 в директорию /wp-content/plugins/ .
- Активируйте плагин на странице «Плагины» в панели управления WordPress.
В меню консоли WordPress вы найдёте вкладку ‘Обратная связь’.
Чтобы узнать как правильно пользоваться плагином вы можете посетить его домашнюю страницу .
Участники и разработчики
«Contact Form 7» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
УчастникиЖурнал изменений
Для получения дополнительной информации смотрите Релизы .
5.1.3
- Исправлена ошибка, приводившая к невозможности отменить выбор параметра во вкладке Почта.
5.1.2
- Постоянный контакт: Представлен селектор списка контактов.
- Постоянный контакт: Представлена дополнительная настройка constant_contact.
- reCAPTCHA: представлены перехватчики фильтров wpcf7_recaptcha_actions и wpcf7_recaptcha_threshold.
5.1.1
- reCAPTCHA: Изменяет реакцию на пустые токены ответа.
5.1
- Представлен модуль интеграции Постоянный контакт.
- Обновлён модуль reCAPTCHA для поддержки reCAPTCHA v3.
- Добавляет правила стиля Тёмного режима.
5.0.5
- Исправлена проблема несоответствия между get_data_option() и get_default_option() в классе WPCF7_FormTag.
- Глушит ошибки PHP, возникающие при вызовах unlink().
- Представлена wpcf7_is_file_path_in_content_dir() для поддержки константы UPLOADS.
5.0.4
- Явно устанавливает аргумент power_type в вызове register_post_type(), для исправления проблемы, связанной с несанкционированным повышением привилегий.
- Вложение локального файла — запрещено указывать абсолютные пути к файлам, расположенным вне директории wp-content.
- Валидатор конфигурации — добавляет тестовый элемент для обнаружения некорректных настроек файлов вложений.
- Исправлена ошибка в функции обратной совместимости JavaScript для устаревших браузеров, которые не поддерживают атрибут-заполнитель HTML5.
- Чекбокс согласия — отключает функцию do-not-store форм-тэга.
5.0.3
- CSS: Applies the «not-allowed» cursor style to submit buttons in the «disabled» state.
- Acceptance Checkbox: Revises the tag-generator UI to encourage the use of better options in terms of personal data protection.
- Introduces wpcf7_anonymize_ip_addr() function.
- Представлена опция consent_for:storage для всех типов форм-тэгов.
5.0.2
- Added the Privacy Notices section to the readme.txt file.
- Updated the Information meta-box content.
- Use get_user_locale() instead of get_locale() where it is more appropriate.
- Acceptance Checkbox: Reset submit buttons’ disabled status after a successful submission.
5.0.1
- Fixed incorrect uses of _n().
- Config validation: Fixed incorrect count of alerts in the Additional Settings tab panel.
- Config validation: Fixed improper treatment for the [_site_admin_email] special mail-tag in the From mail header field.
- Acceptance checkbox: The class and id attributes specified were applied to the wrong HTML element.
- Config validation: When there is an additional mail header for mailboxes like Cc or Reply-To, but it has a possible empty value, “Invalid mailbox syntax is used” error will be returned.
- Explicitly specify the fourth parameter of add_action() to avoid passing unintended parameter values.
- Check if the target directory is empty before removing the directory.
5.0
- Additional settings: on_sent_ok and on_submit have been removed.
- New additional setting: skip_mail
- Flamingo: Inbound channel title changes in conjunction with a change in the title of the corresponding contact form.
- DOM events: Make an entire API response object accessible through the event.detail.apiResponse property.
- HTML mail: Adds language-related attributes to the HTML header.
- File upload: Sets the accept attribute to an uploading field.
- Introduces the WPCF7_MailTag class.
- Позволяет прервать попытку отправки почты, используя перехватчик действия wpcf7_before_send_mail. Кроме того, вы можете установить пользовательский статус и сообщение через перехватчик действия.
- Acceptance checkbox: Allows the specifying of a statement of conditions in the form-tag’s content part.
- Acceptance checkbox: Supports the optional option.
- New special mail tags: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], and [_user_display_name]
- Новые перехватчики фильтров: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_{$type}, and wpcf7_mail_tag_replaced_{$type}
- New form-tag features: zero-controls-container and not-for-mail
Добрый день дорогие читатели блога. Продолжаем тему форм обратной связи на WordPress. И раз реч зашла о них, предлагаю сегодня поговорить о плагине WP Contact Form 7. Далее я раскажу вам пошаговую настройку плагина, а также вкратце опишу дополнения для этого плагина.
Навигация по странице:
Описание WordPress Contact Form 7
2) Активировать плагин Contact Form 7 в админке WordPress.
3) Перейти на новую созданную вкладку, как показано на рисунке:
4) Нажать вкладку "Добавить новую" и указать язык формы по умолчанию, или выбрать нужный
5) Указываем имя контактной формы и нажимаем сохранить.
6) Теперь у нас появился шорткод, который уже можно скопировать и вставить в пост или сайдбар для того, чтобы вывести форму - contact-form-7 id="1252" title="Форма номер 1" (надо взять в квадратные скобки как на рисунке).
7) Вот как то так выглядит наша форма:
Конечно не очень красиво, но никто не мешает создать свои стили или сделать свою форму и туда вносить вставки.
Как вывести Contact Form 7 в произвольное место шаблона
В п.6 пошаговой настройки я показывал вам, как можно взять шорткод кода CF7 и далее описал что этот код можно выводить в виджет или в пост, страницу. В дополнение, хочу сказать, что вы можете вывести Contact form 7 в любое произвольное место шаблона. Для этого следует вставить вот такой несложный код:
Вот и все, если вы все сделали правильно, то получите вывод Contact Form 7 в произвольное место шаблона WordPress.
Настройка полей ввода Contact Form 7
Благодаря ему, у вас дополнительно появятся такие боксы как:
Настройка ответа reply-to для contact form 7
В новой версии плагина CF7 4.4 и выше, разработчик рекомендует вводить в поле from (вот оно на скине ниже)
правильный адрес, который соответствует вашему домену. Видно со скина, и эта рекомендация создает проблему:
Как сделать ответ пользователю с почтовика?
Если просто нажать ответить, то отвечать мы будем на свою же почту, по сути, ответим сами себе. Это очень не удобно, ведь нам нужно руками копировать адрес пользователя вставлять в почтовик и только потом отвечать.
Решение этой проблемы есть и как всегда простое. Вам нужно в поле Additional Headers добавить код:
Reply-To:
Разумеется your-email-sh нужно заменить на свой шорткод почты. Смотрите скин ниже:
Теперь, когда вам придет письмо с обратной связи вордпресс, вы сможете нажать в почтовике ответить и ваш ответ будет отправлен на правильный e-mail.
Если после этий действий вы столкнулись с проблемой - стоить прочесть пост перейдя по ссылке. Там описанные основные проблемы и причины траблов в плагине Contact Form 7.
На этом все. Надеюсь вам стало понятно как делается настройка плагина и его макетов.
Хотите отображать поля формы обратной связи сделанной при помощи плагина Contact Form 7 в несколько колонок? Это простое руководство позволит вам сделать это за пару минут.
Вставьте этот CSS код любым удобным способом. Как вариант, это может быть: файл style.css вашей темы, дополнительные стили в настройщике активной темы или дополнительный плагин для вставки CSS.
One-half, .one-third, .two-third, .one-fourth { position: relative; margin-right: 4%; float: left; margin-bottom: 10px; } .two-third { margin-right: 2.5%; } .one-half { width: 48%; } .one-third { width: 30.66%; } .two-third { width: 66%; } .one-fourth {width: 22%;} .last { margin-right: 0 !important; clear: right; } @media only screen and (max-width: 1024px) { .one-fourth { width: 100%; margin-right: 0; } } @media only screen and (max-width: 767px) { .one-half, .one-third, .two-third { width: 100%; margin-right: 0; } } .wpcf-wrap { min-height: 90px; } div.wpcf7-response-output { width: 100%; clear: both; margin: 0; } .wpcf-accept { clear: both; } .wpcf7-acceptance > .wpcf7-list-item { margin: 0; } .wpcf-accept > .wpcf7-form-control-wrap { display: inline-block !important; }
Поля Contact Form 7 в 2 колонки
Чтобы сделать поля формы в 2 колонки, необходимо использовать подобную конструкцию, которую нужно вставить в основное поле создания формы Contact Form 7:
Поля имя и email выстроятся в две колонки, а текстовая область для сообщения будет под ними.
Поля Contact Form 7 в 3 колонки с подтверждением
Если же вы хотите сделать горизонтальную форму, где все поля и кнопка отправки будут находится в одну линию, а поле подтверждения согласия на обработку данных под ними, то используйте подобную конструкцию.
Поля Contact Form 7 в 3 колонки без подтверждения
Если же вы считаете, что подтверждение о согласии на обработку персональных данных для слабаков, то вот вариант без него:
Поля Contact Form 7 в 4 колонки
Ну и на дорожку, поля и кнопка Contact Form7 в 4 колонки. С подтверждением:
И без подтверждения:
Как убрать автоматическую вставку тега P в Contact form 7
По умолчанию Contact Form 7 вставляет тег
Когда создаёт свою разметку. Это частенько приводит к неприятным сюрпризам и если вы столкнулись с таковым, то нужно сделать следующее.
- Найдите в корневой папке вашего сайта файл wp-config.php;
- Прокрутите файл до конца и отыщите комментарий /* Это всё, дальше не редактируем. Успехов! */ или /* That"s all, stop editing! Happy blogging. */ ;
- Вставьте этот код define("WPCF7_AUTOP", false); НАД надписью из пункта 2;
- Сохраните файл.
Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.
Каждому владельцу сайта хочется иметь контактную форму для отправки сообщений от пользователей и получения их на свою почту. Это, так называемая форма обратной связи. Тоесть, посетитель может отправить свое письмо веб-мастеру прямо с сайта, не открывая свой почтовый ящик. Лучший плагин для реализации этой функции Contact Form 7 не отправляет письма. В моей статье описана правильная настройка плагина Contact Form 7 , чтобы все работало корректно.
Принцип действия плагина Contact Form 7
Данная форма располагается на любой странице вашего сайта (нужно лишь скопировать строчку и вставить ее в нужное место). Посетитель сайта заполняет обязательные поля (к примеру, свое имя, e-mail, сообщение), и плагин через один почтовый ящик (назовем его «отправитель» ) посылает письмо на другой ящик («получатель» ).
Тоесть, вы должны зарегистрировать 2 почтовых ящика – отправитель и получатель . Отправитель лучше создать в Яндекс почте, а получатель – это официальный ящик вашего сайта.
С некоторых пор плагин Contact Form 7 перестал работать — не отправлял письма, а просто крутил загрузку. Я нашел выход — установил другой бесплатный плагин WPForms Lite. Очень прост в настройках, не требует установки дополнительных плагинов для настройки отправки сообщений, но я заметил, что он работает не с каждой электронкой. На одну мне не приходили письма, а на другую отправляются.
Настройка плагина Contact Form 7. Инструкция
1) Регистрируем ящик отправитель на Яндекс почте (любой, без разницы какой, его название не важно для работы плагина и не будет видно посетителям). Он будет служить перевалочным пунктом для писем.
2) Настраиваем контактную форму плагина Contact Form 7. Нажмите «Изменить» и далее «Шаблон формы» . Вот пример, как она должна выглядеть с обязательными полями: имя пользователя, его почта, сообщение и кнопка «отправить»:
Ваше имя (обязательно)
Ваш e-mail (обязательно)
Сообщение
3) Вкладка «Письмо» отвечает за внешний вид писем, которые вы получаете.
Кому – адрес ящика получатель
От кого – <адрес ящика отправитель>
Тема –
Тело письма –
Итак, вы получаете письмо, где будут указаны все заполненные поля формы обратной связи. На этом настройка плагина Contact Form 7 завершена .
Внимание! Чтобы плагин Contact Form 7 отправлял письма, необходимо установить еще один плагин WP-Mail-SMTP. Именно он будет связывать два почтовых адреса отправитель и получатель и выполнять системные функции по отправке писем.
Настройка плагина WP-Mail-SMTP. Инструкция
From Email – адрес ящика отправитель
From Name – к примеру, название вашей организации или ваше имя
Mailer – функция отправки писем. Выберите «Send all WordPress emails via SMTP»
SMTP Host – для Яндекс почты smtp.yandex.ru
SMTP Port – для Яндекс почты 465
Encryption – Use SSL encryption
Authentication – Yes: Use SMTP authentication
Username – логин на вашей почте отправитель
Password – пароль на вашей почте отправитель
Настройка завершена. Сохраните изменения.
Как разместить форму обратной связи Contact Form 7 на странице
В настройках контактной формы обратите внимание на строчку наверху:
Ее нужно скопировать и вставить на любой странице. Все готово.
Не создает никаких трудностей, особенно по моей инструкции. Все работает исправно и письма отправляются. Также предлагаю ознакомиться со статьей о лучших для WordPress. Там вы найдете много чего интересного.