По просьбам читателей WordPress-book.ru привожу подробную инструкцию по настройке плагина формы обратной связи - Contact Form 7. Плагин часто обновляется, подавляющее большинство материала в сети по его настройке уже устарело, и, следовательно, пост будет актуален.

Контактная форма для WordPress

Повышенный интерес к расширению не случаен:

  • - плагин полностью валиден;
  • - переведен на множество языков, в том числе и на русский;
  • - прост в настройке;
  • - способен создавать формы для разных целей;
  • - поддерживает функцию отправки файла, защиты от спама, …;
  • - постоянно обновляется.

Содержание:

 Добавление простой контактной формы на сайт

Настройка Contact Form 7

Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта.

Я уже писал про подобный и очень простой Плагин формы обратной связи WP-ContactForm. Но, к сожалению, по сравнению с Contact Form 7, его возможности слишком ограничены, поэтому пришлось от него отказаться в пользу последнего.

Итак, начнем. Скачать плагин можно с его страницы официального депозитария WordPress здесь. После стандартной процедуры установки и активации, в левой части панели администратора появится новая вкладка – "Contact Form 7". Если навести на нее курсор, откроются три ссылки - "Формы", "Добавить новую" и "Integration".

Ссылка "Формы" откроет созданные формы для редактирования, которые у вас появятся позже, а сейчас перейдите по ссылке "Добавить новую" и в открывшемся окне нажмите на кнопку "Добавить новую".

Добавить новую форму в Contact-Form-7

Язык выбирать не надо, он уже выбран русским по умолчанию.

После нажатия вышеуказанной кнопки откроется уже готовая стандартная форма обратной связи, которая подойдет для большинства сайтов и блогов. Она включает в себя поля - "Ваше имя", "Ваш Email", "Тема", "Сообщение" и кнопку "Отправить".

Форма контактов в Contact-Form-7

Обратите внимание, все шорткоды и их названия заключены в тэги <p>…</p>. Тэг <p> определяет текстовый абзац, а <br/> отвечает за перенос строки.

  1. В это поле введите название своей новой контактной формы, например - "Моя форма контактов".
  2. Нажмите кнопку "Сохранить".
  3. После последнего действия будет доступен код формы. Просто скопируйте его и вставьте в то место страницы или записи, где должна быть ваша контактная форма.

Вот как она будет выглядеть на странице сайта.

Стандартная контактная форма

Вам остается либо оставить все как есть, либо откорректировать форму, либо добавить необходимые шорткоды, либо вообще кардинально изменить форму в зависимости от поставленной задачи.

Настройка Contact Form 7

Тут нам придется разобраться в четырех вкладках - "Шаблон формы", "Письмо", "Уведомления при отправке формы" и "Дополнительные настройки". Рассмотрим каждую в отдельности.

Шаблон формы

Пожалуй, самая важная из вкладок настроек плагина. Шаблон формы представляет из себя редактор кодов плагина. Тут уже находятся существующие короткие коды стандартной контактной формы. Можно их удалять или добавлять новые. Рассмотрим назначение всех кодов, доступных в редакторе.

Тэги Contact-Form-7

1. text - текстовое поле для ввода короткого текста в одну стоку (имя, тема сообщения и т.д.).

2. email – поле для ввода адреса email. Письмо с некорректным адресом не удастся отправить, именно этим и отличается поле от простого текстового. (Оба этих поля обычно обязательны к заполнению, что исключает рассылку анонимных сообщений).

3. URL - адрес сайта или страницы.

4. tel - номер телефона, не надо объяснять что это такое.

5.1 number - число (spinbox), количество чего-либо, например заказываемого товара.

5.2 number - число (slider), что это за шляпа, я так и не понял. Скажу спасибо тому, кто мне объяснит в комментариях его назначение.

6. date  - дата в формате дд.мм.гггг.

7. text area - текстовое поле, вмещает в себя текст большого объема, собственно само сообщение.

8. drop-down menu -  выпадающее меню, создаст выпадающее меню.

9. Checkboxes – генерирует "чекбоксы". Пользователь выбирает нужное установкой галочек.

10. Radio buttons – в буквальном переводе "радиокнопки". Настройка, как и в выпадающем меню. Пользователь выбирает нужный вариант из предложенных.

11. Acceptance – по принципу "С правилами ознакомлен и согласен". Пока пользователь не поставит галочку, кнопка отправки сообщения будет не активна.

12. quiz - вопрос, защита от спам-роботов. Перед отправкой сообщения необходимо ответить на однозначный вопрос, который вы зададите в настройках. Перед вертикальным слешем пишется вопрос, а за ним правильный ответ.

13. reCaptcha – тоже защита от спама, но с помощью генерируемой картинки с символами, которые необходимо ввести в поле перед отправкой сообщения. (Спам через контактную форму рассылается очень редко. Советую не использовать защиту, чтобы не раздражать отправителя).

14. file - отправка файла, генерирует код для создания кнопки выбора файла и прикрепления его к письму.

15. submit - кнопка отправки, сама кнопка, нажатием на которую, сообщение отправляется.

!!! Для наглядности, ближе к концу статьи, я размещаю форму, созданную из всех вышеперечисленных тегов, кроме каптчи. Можете оценить их в действии. Ни одно поле в форме необязательно к заполнению! Разрешаю вам наслать мне разных анонимных сообщений 🙂 🙂 :-). Цензура отсутствует.

Для примера рассмотрим процедуру добавления кода прикрепления файла "file" в контактную форму. Процесс этот довольно прост. Выполните следующие действия:

  • - Поставьте курсор в то место редактора, куда должна встать кнопка прикрепления файла к письму.
  • - Нажмите на кнопку "file" в верхней панели редактора шаблона формы. Откроется следующее окно.

добавление кнопки прикрепления файла к письму в контактной форме

  1. Если поставить тут галочку, пользователь не сможет отправить сообщение без прикрепленного файла. Обратите внимание, в коде кнопки за file появится звездочка. Эту опцию можно назначить любому полю вашей контактной формы.
  2. Тут итак все понятно. Скопируйте надпись в этом поле, вам она обязательно понадобится на следующей вкладке "Письмо". Иначе прикрепленный файл просто не дойдет до адресата.
  3. Сюда впишите разрешенный размер файла. Если оставить поле пустым, то по умолчанию ограничитель будет равен 1 mb . Допускается вписывать только целые числа просто в байтах, в mb или в kb.
  4. Разрешенные типы файлов вписывайте через вертикальный слэш. Если ничего не писать, то по умолчанию будут разрешены файлы с расширениями jpg, jpeg, png, gif,pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, wmv.
  5. Если не знаете для чего нужны поля Id attribute и Class attribute, то и заполнять их не следует. А завершающим действием останется только нажатие кнопки "Insert Tag".

В редакторе формы можно дописать над кодом "Прикрепить файл", чтобы посетители не ломали голову о назначении этой кнопки. И не забудьте вставить теги абзаца и переноса строки, о которых я упоминал выше.

Приступим к рассмотрению следующей вкладки - "Письмо".

Письмо

Итак, после создания своей контактной формы перейдите на вкладку "Письмо". Эта часть настроек отвечает за доставку, внешний вид и информативность писем, пришедших адресату, то есть Вам.

Настройки вкладки "письмо" в Contact-Form-7

  1. Обязательно впишите сюда адрес своей электронной почты, на который будут приходить сообщения. Иначе, почта просто не дойдет.
  2. Два коротких кода "[your-name]" и "<[your-email]>" сообщат имя отправителя и его E-mail.
  3. Тема сообщения, с которой к вам обращается посетитель.
  4. -----
  5. Само тело сообщения. Вы можете использовать для информативности любые коды, которые использовали в шаблоне (они представлены в шапке вкладки, сразу под надписью "In the following fields, you can use these mail-tags:". Сопровождайте коды в теле сообщения понятными пояснениями, например От кого, Тема сообщения, Тело сообщения.
  6. Можно не получать пустые строки с полей, необязательных к заполнению, если отправитель их не заполнил. Попробуйте также опцию HTML  формата письма.
  7. В поле "File Attachments" обязательно вставьте код для вложения, если вы поставили кнопку прикрепления файла. Об этом я говорил выше.
  8. Опцию "Письмо 2" активируют в качестве дополнительного почтового шаблона для автоответчика. Об этой опции и как ей пользоваться я напишу немного позже.

Уведомления при отправке формы

Тут все переведено и понятно, даже скриншот делать не буду. Всплывающие сообщения, написанные в полях вкладки, получит отправитель при неправильном заполнении формы, успешном или неуспешном отправлении сообщения.

С переводом на русский язык тут пока проблем нет. Однако, с каждым обновлением плагина картина может меняться, как на других вкладках. Если это произойдет, сообщите в комментариях, переведем.

Дополнительные настройки

Эта часть статьи еще не готова к публикации. Скажу лишь, что тут вы можете настроить отслеживание заполнения форм пользователями, например в Яндекс метрике.

Можно еще изменить размер полей в контактной форме. Размер текстового поля в одну строчку задается числовыми значениями в конце тега перед закрывающейся квадратной скобкой. Например, вот тег для имени с новыми размерами -  [text* your-name 50/41]. Здесь 50 - длина текстового поля, а 41 - количество символов, которое можно в это поле прописать. Если ничего не прописывать, длина текстового поля по умолчанию равняется 40, а разрешенное количество символов до бесконечности.

Вот тег с измененными размерами для сообщения -  [textarea your-message 80x10]. Здесь 80 - длина поля в символах, а 10 - его высота в строчках. Экспериментируйте с этими циферками пока размеры полей вашей контактной формы не будут гармонично вписываться в дизайн страницы. Ниже картинка для наглядности со стандартной контактной формой.

Размер полей в Contact Form 7

Вот и все настройки плагина Contact Form 7.

    1. text - Текстовое поле (Имя или псевдоним)

    2. email - Поле E-Mail (не обязательно)

    3. URL

    4. tel - Номер телефона

    5.1 number - Число (spinbox)

    5.2 number - Число (slider)

    6. date - Дата

    7. text area - Текстовое поле

    8. drop-down menu - Выпадающее меню

    9. Checkboxes - Чекбоксы
    100 рублей
    200 рублей
    300 рублей

    10. Radio buttons - Радиокнопки
    Яндекс.ДеньгиWebMoney

    11. Acceptance - С правилами ознакомлен и согласен.

    12. quiz - Вопрос

    14. file - Отправка файла

    15. submit - Кнопка отправить


    Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта

    Ошибка при отправке сообщения

    Вот такое сообщение всплывает под формой Contact Form 7 в некоторых случаях после попытки отправить сообщение администратору сайта.

    1. Почти всегда ошибка кроется не в плагине, а в php функции mail() сервера. Либо эту функцию хостинг не поддерживает, либо функция не включена или работает с ошибками. Если функция php_mail() поддерживается хостингом, то очень часто причиной сбоя отправки сообщений является:

    • - Тестовый период хостинга. В этот период функция отправки почты выключена по умолчанию. Решение – оплатить услуги хостинга;
    • - Сбой функции на сервере. Решение – обратиться в службу поддержки хостинга. Часто, для восстановления функции, достаточно отлинковать домен, а затем прилинковать его обратно.

    2. Намного реже ошибки в отправке сообщений возникают из-за конфликта Contact Form 7 с другим плагином. В этом случае помогает поочередная деактивация плагинов. После деактивации которого Contact Form 7 заработает, тот и является конфликтным.

    3. проверяйте папку СПАМ вашего почтового ящика после отправки письма самому себе при тестировании работы плагина. Это самая распространенная причина "недоставки" писем адресату, особенно на gmail.

    Contact form 7 recaptcha настройка

    Заметил я на днях, что давненько не приходили мне письма с контактных форм от подписчиков и клиентов. После проверки папки «Спам», они все нашлись там. Оказалось, что, с контактных форм начал поступать спам и почтовик, не мешкая, все письма подряд пометил этим страшным ярлыком.

    Решение проблемы оказалось до безобразия простым. В своей панели администратора в меню «Contact Form 7» в разделе «reCAPTCHA» кликните по кнопке «Настройки интеграции».

    Настройка интеграции в Contact form 7

    В поля открывшейся формы введите «Ключ сайта» и «Секретный ключ».

    Настройка recaptcha в Contact form 7

    Ключи эти получить можно менее чем за минуту и как это сделать я описал в статье «Установка reCAPTCHA на сайт - лучшей капчи от Google».

    Сохраните изменения и все. Теперь можете забыть о спаме. Контактные формы будут использовать гугловскую рекаптчу для отделения писем, рассылаемых спам-ботами от писем реальных людей.

    Настройка Contact Form 7 - генератора форм обратной связи обновлено: 9 ноября, 2019 автором: Роман Ваховский
    Хороший человек всегда нажмет на кнопку!
    Комментарий > Моя благодарность > Ссылка на секретную страницу блога

    236 комментариев: Настройка Contact Form 7 - генератора форм обратной связи

                                                                                                                                                Добавить комментарий

                                                                                                                                                Ваш адрес email не будет опубликован. Обязательные поля помечены *

                                                                                                                                                Поиск по блогу
                                                                                                                                                подписка

                                                                                                                                                Все права защищены © 2011-2019 WordPress-book.ru

                                                                                                                                                Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.