Качественная форма обратной связи для WordPress с полем для прикрепления файла

Здравствуйте, друзья!

В данной статье я покажу, как делается качественная форма обратной связи WordPress с помощью плагина Contact form 7.

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

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

Делаем форму обратной связи с помощью плагина Contact form 7

Сперва устанавливаем плагин, скачав его с официальной страницы. Затем приступаем к самому процессу создания формы.

После установки плагина в админ-панели WordPress появляется новый пункт, который называется точно также,как и плагин - Contact form 7.

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

Имеет она название "Контактная форма 1". Я же предлагаю создать новую форму, чтобы увидеть весь процесс наглядно. Тогда не составит труда редактировать уже существующие формы. Поэтому, мы жмем на пункт "Добавить новую" и попадаем в редактор форм, где сразу же нужно выбрать нужный вам язык.

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

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

Меня, естественно, интересует вариант по умолчанию. Поэтому я жму на кнопку "Добавить новую" и попадаю на страницу со всеми настройки формы.

Первым делом нас интересует заголовок формы. Я рекомендую назначить уникальное имя для формы. Это нужно для того, чтобы при создании новых форм вы не путались. Чтобы вы четко знали где какая форма и могли отредактировать нужную.

Так как форму я буду размещать на странице, то примерно так ее и назвал - "Форма обратной связи для страницы Контакты".

Далее нас интересует следующий блок настроек - "Шаблон формы". Это тот шаблон, в котором будут выводиться необходимые поля, которые нужно будет заполнить и их названия.

Как видим, имеются все самые необходимые поля:

  • поле для ввода имени;
  • для ввода e-mail;
  • для ввода темы сообщения;
  • для ввода самого сообщения;
  • кнопка для отправки.

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

Это поле для прикрепления файла к сообщению. Представьте, что у вас тематика сайта, как у меня. Техническая тематика, где очень сложно понять суть проблемы без каких-то графических данных. Чтобы в таком случае лучше взаимодействовать с читателями, необходимо давать им возможность объяснять свои проблемы по максимуму, так как от этого зависит качество вашего ответа и помощи в целом.

Чтобы реализовать это поле, сначала нужно в стандартный шаблон добавить еще одно поле. Делаем это следующим образом. Копируем 2 предпоследние строки, то есть код вывода поля сообщения, и дублируем их. Должно получиться, как на скриншоте ниже.

Теперь необходимо изменить название поля. Изменяем фразу "Сообщение" на "Прикрепить файл".

Далее в этом же коде нужно заменить вторую часть "[textarea your-message]" на код, который будет выводить поле для выбора файла с компьютера. Сначала необходимо сгенерировать такой код. Для этого справа шаблона формы имеется специальная функция генерации тега. Жмем на нее и выбираем из всего списка пункт "Отправка файла".

Далее появится блок настроек для поля прикрепления файла. Нам нужно в нем 2 небольших кода.

Первым кодом мы заменяем ранее указанную часть кода в шаблоне формы.

Вторую часть мы вставляем в поле "Прикрепленные файлы", которое находится в блоке "Адресат".

Теперь можно сохранять созданную форму, нажав на кнопку вверху страницы справа от названия формы.

Под названием формы появится код, который будет выводить форму обратной связи на странице. Его и нужно вставить в редактор страницы в текстовом режиме.

Создаем новую страницу. Назову ее "Контакты". В текстовый редактор размещаю этот код.

Теперь можем перейти на страницу. Должны увидеть саму контактную форму со всеми полями. У меня все получилось и форма имеет следующий вид.

Далее я предлагаю проверить форму, чтобы убедиться, что письма доходят.

Для этого мы заполняем все поля и для примера можно прикрепить какой-то графический файл (картинку).

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

Но действительно ли это так? Переходим в почту и видим, что сообщение действительно пришло.

Перейдя в него, увидим содержание самого обращения с данными об отправителе и прикрепленным файлом.

Сообщение пришло. Также файл прикрепился. Значит, сделали все правильно. Если у вас также, то можете спать спокойно. Но я предлагаю проделать еще одно действие. Нужно проверить работоспособность формы на проверку ошибок при заполнении.

Бывают такие формы обратной связи, которые некорректно проверяют заполнение обязательных полей. Случайно забыл вписать поле e-mail и отправил сообщение. Форма написала, что сообщение успешно отправлено, но на самом деле обращение не будет доставлено владельцу сайта. А мы ждем ответа и ждем.

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

Форма прекрасно работает, что и следовало сделать.

Если возникли какие-то неясности то прошу смотреть мой подробный видео-урок. В нем будет более наглядно все описано.

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

Такая реализация сейчас у меня на блоге. Можете посмотреть на странице "Написать мне".

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

На этом с вами прощаюсь. Пишите свои комментарии, предложения, идеи и все, что душа пожелает. До скорой.

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 14
  • Спасибо, долго не мог понять, почему не отправлялись файлы с формы.

  • благодарю! пошагово воспользовавшись инструкцией, благополучно установила форму на сайт)))

  • Спасибо! Все получилось, все работает без ошибок.

  • Подскажите пожалуйста, как установить эту форму посредине странички?!

    • Здравствуйте. Дайте ссылку на страницу, где она установлена, и я скажу вам, что и где нужно прописать.

  • Добрый день! Устанавливала плагин по инструкции. Тем не менее файл-вложение не приходит на почту. Все приходит, а файл нет (почта без вложения). Что делать? И если отправлять файл в виде картинки, пишет, что файл слишком большой. спасибо

    • Здравствуйте. У меня такая же проблема. Все сделал правильно на новой версии плагина, но файл не приходит. Поэтому пока ничего не могу сказать по этой проблеме.

  • Если все установила, выходит сообщение об отправке письма, но письмо на почту не приходит, какие могут быть варианты ошибок?

    • Может проверяете не ту почту, или не та почта указана в самом плагине(настройках сайта), я на всех сайтах еще не сталкивался с проблемой, чтобы плагин не отправлял сообщение.

      • В современном варианте Вторую часть кода надо вставлять в поле "Прикрепленные файлы", которое надо искать не в блоке «Шаблон формы», а в блоке "Письмо" в самом низу.

  • Отличная статья - помогла. Спасибо!

  • Лучше бы рассказали как на AJAX без перезагрузки CF7 сделать, а не перепечатывали мануалы((((

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

    • Без понятия. Всегда отправляю только кириллические имена

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

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