БЛОГ АНТОНА
РУХЛИНА

Умное создание собственного сайта -
раскрутка и заработок в интернете

Как создать притягивающую форму обратной связи для собственного блога или сайта?

Автор: Антон Рухлин Дата: 06 марта 2018

Просмотры: 42

создать притягивающую форму обратной связи

НУ Ё МОЁ, ЧТО ЗА…!!! Здравствуйте друзья. Да, именно с таких слов я решил начать этот пост, иначе ни как не назовешь те четные попытки найти в интернете достойную форму для своего блога, которую можно было бы прикрутить без проблем и самое главное без плагина. И так поехали...

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

-вручную, используя код HTML, CSS, JS и PHP;

— с помощью генератора формы обратной связи;

— используя популярные фреймворки;

— плагины.

 

Генераторы формы обратной связи

формы обратной связи

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

1. formbuilder.online. Это сервис для визуальной сборки полей с экспортом HTML и CSS. Однако дополнительные стили придётся дорабатывать самостоятельно.

2.Генератор форм обратной связи 123formbuilder.com даёт возможность не только конструировать разметку, но и принимать данные пользователя непосредственно на ресурс и по email, отслеживать поведение. Для бесплатного аккаунта существует ряд несущественных ограничений. Они указаны на сайте. Благодаря предустановленным темам оформления меняется общий стиль. Капча также предоставляется.

3.Сервис jotform.com по функциям аналогичен предыдущему. Присутствуют темы и плагины, удобный личный кабинет. Задаётся фон и пошаговые запросы. После создания предоставляется ссылка на форму.

Это далеко не полный комплект конструкторов.

Несмотря на удобство в генерации форм имеются следующие недостатки:

 

— ограничения в стилизации и разметке;

— жёсткая привязка к сервисам некоторых конструкторов с включением ссылки;

— не всегда есть возможность включить произвольную функциональность.

 

Проекты и фреймворки для создания форм

На Github располагается немало проектов с готовыми формами. Остаётся их скачать, и внести требуемые изменения «под себя». Поправить разметку, отредактировать стили, чтобы сделать форму уникальной, но с акцентами темы. Как вариант, понравившуюся стилизацию можно клонировать с сайта-донора или из демо песочниц codepen/jsfiddle.

В создании формы обратной связи сильно помогают фреймворки Bootstrap или Foundation. Берём разметку, применяем только нужные JS, меняем переменные SCSS. Вычищаем неиспользуемые CSS uncss-online.com. Получается чистый код для интеграции на сайт.

 

Плагины для CMS

Пожалуй, не надо напоминать, как важны плагины в современных CMS. Они выполняют практически любые функции. Возьмём WordPress – площадку для личного блога. Для этого движка лучшее решение – плагин Contact Form 7, обладающий гибкими настройками. Он прекрасно вписывается как в шаблон сайта, так в редактор через шорткоды. C дополнением Flamingo становится доступно сохранение сообщений в базу данных.

 

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

 

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

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

форма связи

Какой вариант предпочтительнее

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

 

Собираем форму обратной связи с нуля

Для этого метода рекомендуются некоторые познания в основах вёрстки. Суть заключается в том, чтобы составить разметку формы, стилизовать её, а затем связать со скриптами JS и PHP, которые будут верифицировать и посылать данные на указанный e-mail.

В первую очередь нужно вписать необходимые поля внутрь тега <form>:

 

 

Атрибут class используется для стилизации элементов, а action указывает на скрипт для обработки. При желании внутрь формы добавляется поле для телефона input type=«phone», checkbox (для подтверждения каких-либо данных, например, согласие на обработку персональных данных), radio (выбор из вариантов) и select (выпадающий список). Обязательно указываем name для сбора информации с полей.

 

красивая форма обратной связи

 

Базовое оформление будет выглядеть примерно так:

 

 

Повесим шрифты, иконки и изображение. Результат доступен по этому адресу.

Шрифты предварительно подключаются в секции <head> (вместо @import):

 

 

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

Для JS-валидации существует готовый скрипт

 

 

Нужно подключить его и jQuery, а далее указать проверяемые поля, как приведено в примере. Библиотека marcelodolce.com позволит показывать форму в модальном окне.

Процедуру отправки проще осуществлять с github.com (имеется подробная документация). Не помешает reCAPTCHA – защита от спамеров, созданная Google.

Других скриптов для отправки форм достаточного много в публичном доступе. Есть также варианты для загрузки полей напрямую в Google Tables. Кстати, неплохую форму обратной связи легко сконструировать через Google Forms.

 

Простой алгоритм добавления формы обратной связи на php без плагина

форма обратной связи
Вообще простая форма обратной связи состоит из четырех основных фрагментов, это:

 

html код — отвечает за отображение формы на самой странице

php код — обрабатывает данные отправленные при помощи размещенной формы и отправляет эти данные на Ваш электронный адрес.

- js код — подключает необходимые библиотеки.

css код — отвечающий за визуальное оформление всей формы

 

Вставка формы обратной связи в html код

Здесь все просто — вставляете этот код в любую страницу или запись в  вашей админки WordPress в режиме html:

 

Форма обратной связи


 

Обработчик этой формы вставляем в php — то есть создаем такой файл в директории вашего шаблона темы и называем его, к примеру, mail.php :

 

 

Здесь Вы уже догадались, что строчку

 

 

редактируете под себя т.е. прописываем свой e-mail.

 

JS код для подключения jQuery библиотек вставляем в файл functions.php вашей темы:

 

 

Но перед тем как его вставить создайте файл contact.js со следующим содержимым:

 

 

 

Здесь обратите внимание на 6-ую строчку где надо прописать свой путь к файлу mail.php.

Завершающим маневром этого действия будет вставка самого скрипта в шаблон нашей темы — его можно запихнуть например в footer.php, чтоб не сразу грузил наш блог.

 

 

 

Код CSS для вставки в стили — последний штрих в нашем оформлении:

 

И вуаля форма обратной связи на вашем блоге готова.

Теперь, на этом месте буду с Вами прощаться, надеюсь информация была полезной.

 

Искренне Ваш, Антон Рухлин.




2 комментариев к записи “Как создать притягивающую форму обратной связи для собственного блога или сайта?”

  • Ответ Администратора
    akkselerator 2018-06-14 14:03:12

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

    Ответить
  • Juliejoxia 2018-03-17 02:06:01

    День добрый. Спасибо за ресурс.

    Ответить

Оставить комментарий

Правила комментирования ?