Здравствуйте, уважаемые посетители блога! Меня зовут Денис Чернятинский, мы с вами продолжаем освоение возможностей блога на движке wordpress. В этой статье мы обсудим, как можно организовать вывод форм обратной связи на своем ресурсе. Форма может выводиться на любых страницах вашего блога, в любом месте. Количество созданных форм не ограничено.
Плагин создания форм Contact Form 7
Как вы уже догадались, в этом нам поможет специальный плагин. Авторизуемся в административном разделе вашего блога, переходим в раздел плагины, нажимаем кнопку добавить новый. Потом ищем по названию нужный нам плагин, в нашем случаем он называется Contact Form 7, нажимаем установить и активировать плагин.
Обращаю ваше внимание на то, что после активации у нас появился в левом меню админки раздел, соответствующий названию плагина. Заходим в него, видим основные пункты данного плагина для создания форм.
Как раз для нашего удобства, «Контактная форма 1″ уже была создана при установке плагина. Мы можем рассматривать её в качестве наглядного примера, увидеть, как в ней все работает. Заходим в редактирование этой формы, нажав на ссылку редактировать.
Поставим перед собой задачу, создать у себя на блоге специальную страницу обратной связи с автором ресурса. Для реализации этого, нам нужно создать страницу, чтоб она выводилась в главное меню блога, назвать её «Контакты». Оттуда люди смогут с вами связываться напрямую.
Если мы просто создадим страницу, она будет пустой. Для того, чтоб страница играла роль обратной связи, нам нужна форма, созданная нашим плагином или точнее, нужна специальная строка, идентификатор этой формы. Строку с идентификатором мы сможем вставить в любую страницу нашего блога или любую запись на сайте.
Ниже строки с идентификатором созданной формы расположен шаблон форм. В нашем примере выводятся следующие поля:
- Ваше имя
- Ваш e-mail
- Тема
- Сообщение
- Отправить
Contact Form 7 имеем свой конструктор, через него мы можем добавлять дополнительные другие поля к нашей форме или создавать полностью новую форму. Например, сделать прикрепление определенных файлов и изображений. Далеко забегать не будем, чуть ниже вы увидите эти возможности.
Еще ниже расположены настройки адресата. В них указан электронный почтовый ящик, куда будут приходить данные, отправленные с помощью этой формы. В поле «отправитель» будет указано, кто отправил эту форму, данные будут браться с поля ввода «Ваше имя» — здесь лучше ничего не менять. Другие поля тоже не трогаем, они пока нам не нужны.
Далее идут тексты, которые выдает плагин Contact Form 7 при ошибках или после удачно отправленного сообщения, можете подредактировать под себя. В принципе, эти тексты хорошо переведены, советую оставить их как есть, ничего менять, трогать не нужно. Пока на этом этапе все, сохраняем внесенные изменения.
Копируем строку с названием и идентификатором формы. Идем в раздел страницы, добавить новую, назовем её «Контакты», пишем текст страницы, вставляем скопированный нами ранее код, который генерировал плагин при создании формы, нажимаем опубликовать. Если у вас в ссылках страниц выводятся русские символы, к примеру — test.ru/контакты, почитайте эту статью как настроить вывод красивых ссылок WordPress, чтобы все красиво настроить.
Перейдем на лицевую часть блога, у вас должна появиться страница контакты. Заходим на страницу и видим эту форму обратной связи. Если вы введете свои данные в поля формы, нажмете отправить, система вам выдаст «Ваше сообщение было отправлено успешно, Спасибо». Самое удобное, что после отправки сообщения, не происходит перезагрузки страницы, так как используется технология ajax.
Загляните в свой почтовый ящик, сообщение приходит в течении нескольких минут, вы увидите отправленное сообщение. Все лаконично и красиво, отлично работает.
Рассмотрим такой момент данного плагина, прикрепление файлов. Многие пользователи задаются вопросом, как сделать прикрепление определённых файлов при отправке сообщения.
Этот функционал реализуется следующим образом, обратно заходим в редактор форм, нажимаем ссылку редактировать. Переходим к шаблону форм и после блока сообщение, добавим еще одно поле с названием «ваше фото». Берем пример с предыдущего блока и делаем абзац с переносом строки (ваше фото до 3 Мb, jpg), выставляем формат фото, ограничения на размер фото, чтобы пользователь видел какой размер файла доступен для загрузки.
Нам осталось добавить с помощью генератора форм сам блок «Отправка файла», справа от шаблона формы есть кнопочка генерировать тэг и выбираем отправка файла. Можем его настроить под себя, выставить будет ли поле обязательным, самое главное, указать лимит размера файла 3mb, если его не поставить, то лимит будет равен 1mb. Не забываем указать разрешенные типы файлов, в нашем примере это jpg, если у вас много форматов файлов, то необходимо их указывать через вертикальный слэш jpg|png|gif и так далее.
Как нам предлагают ниже, копируем код этого блока и вставим его в шаблон слева. Ещё чуть ниже есть специальное поле с кодом, где написано вставьте следующий код в поле «Прикрепленные фалы ниже», копируем его, спускаемся ниже и вставляем. Теперь файлы будут прикрепляться к письму.
Contact Form 7 — форматы файлов
К сведению, если в поле типы файлов ничего не указать, то по умолчанию там будут разрешены следующие форматы файлов — jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv.
Все с прикреплением файлов мы закончили, нажимаем сохранить. Переходим обратно на лицевую часть блога к странице контакты, нажимаем обновить страницу, появится кнопочка с прикреплением вашего фото. Еще разок заполните для проверки поля формы и прикрепите изображение, нажмите отправить.
Получаем уведомление об успешной отправке, открываем почтовый ящик ждем письма с сайта. Через секунд 30 письмо получено, оно уже имеет прикрепленный файл картинки.
Такой способ может использоваться не только для отправки фотографий с вашего сайта, но и других форматов файлов. Этим же способом можно расширять функционал форм другими полями, которые есть в генераторе тэгов.
Мысль статьи
Используете ли вы формы на своем блоге? Напишите, какие варианты обратной связи вы задействуете.
На этом у меня все. Увидимся на страницах моего блога, всем успехов и пока!
