СОЗДАНИЕ ФОРМ ДЛЯ САЙТА НА WORDPRESS

Всем привет на связи обучающий прект ЗАПИСКИ ВЕБМАСТЕРА!

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

Другими словами – если у Вас нет формы контактирования с клиентами, то у Вас и нет продаж.

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

Итак, а как же всё таки на wordpress создать качественную форму сбора контактных данных?

Об этом вы как раз и узнаете из этой публикации.
Для создания формы мы будем использовать плагин WPFORMS.

Давайте мы его установим. Для этого в консоли редактирования наводим курсор на вкладку плагины и выбираем добавить новый

После чего в открывшемся окне в области поиска плагина в каталоге wordoress вводим wpforms

Далее система выводит нам все плагины с похожими названиями. Мы выбираем вот этот, на аватаре которого изображен медведь и в области разработчика написано wpformю

 

Обязательно при установки проверяйте того ли автора разработчика вы устанавливаете плагин, который Вам рекоммендовали к использованию. Для установки кликаем соответственно установить, а затем по активировать. Если Вы всё сделаете правильно, то перед Вами откроется вот такое окно, а на панели консоли появится вкладка вэпэ форм, давайте кликнем по ней и перейдём в раздел настроеек формы. Для создания формы кликаем по кнопке новая форма. Теперь давайте Введём название формы например обратная связь, этот параметр нигде не отображается и нужен лишь для того что-бы отлечить одну форму от другой. Далее нам нужно выбрать один из 4 вариантов создания формы – создать с чистого листа, создать простую форму, форму рассылки и форму предложенний. Я продемонстрирую, как создать форму с чистого листа поэтому навожу курсор на первый вариант и кликаю по появившейся кнопке. Итак мы создадим форму из трех полей – имя, телефон, емэйл, выбор вариантов связи и область для вопроса!
Для того что-бы создать перове поле имя в каталоге выбора полей кликаем по кнопке имя. Как вы видите вправой демонстрационной области, в котоой отображается текущий внешний вид формы появилось соданное нами первое пооле, для его настройки нужно кликнуть лкм мыши вот сюда, после чего откроется панель настроеек. Итак давайте изменим формат поле имя, то есть уберём Фамилия и имя, а оставим только имя для этого из раскрывающегося списка формат выбираем просто. Также можно изменить название поле имя например на Ваше имя, для этого в вот это поле вводим новое название. Также можно настроить подсказку под полем для пользователей – например написать – Введите свое имя, для этого в вот это поля вводим фразу Введите Свое Имя. И как Вы видите изменения сразу отобразились в демонтрационной части. Для того что-бы сделать данное поля не обязательным к заполнению просто уберите галочку в вот этом месте, и как вы виде теперь поле стало не обязательным к заполнению, если же надо наоборот сделать поле обязательным, то просто устанавливаем галочку. Теперь давайте перейдем в расширенные опции. Здесь можно изменить размер поля – давайте сделаем его во всю длину, для этого в раскрывающимся списке размер поля выбираем большой икак вы видите размер поля сразу занял всё пространство. Также для поля можно настроить подсказку котора исчезнит тогда когда пользователь начнет вводить свои данные, например давайте настроим подсказку Обязательно заполните это поле. Для этого в разделе имя в области замещающий текст вводим фразу обязательно заполните это поле и как вы видите подсказка появилась в месте ввод инфрормации. Также можно скрывать названия поля или подзаголовки, для этого необходимо установить флажки в вот этой областе или снять их если вы хотите отображать названия и заголовки. Также поле можно дублиировать и удалять прямо из демонстрационного окна. Для того что бы скопировать поле кликаем вот по этому значку, а для удаления вот по этому. Теперь давайте добавим поле телефон. Для этого возвращаемся в панель добавления полей и выбираем строка теста. Далее переходим в панель настроек, где нам нужно определить следующие параметры: установить название поля телефон и определить его обязательным. Затем переходим в расширенные настройки и устанавливаем размер поля большой. Теперь возвращаемся в панель добавления полей и выбираем эмэйл, почле чего переходим в панель настройки поля, устанавливаем дополнительную область – подтверждения емэйл, то есть теперь пользователь воизбежании ошибок должен ввести адрес своей почты 2 раза. Далее мы возвращаемся в панель добавления полей. Сейчас мы добавим поле для ввода сообщения от наших пользователей для этого нам нужно кликнуть по текст. Теперь переходим в панель настроеек поля и устанавливаем в качестве заголовка поля фразу Введите ваш вопрос, далее определяем поле обязательным. После чего добавляем в нашу форму поле, где пользователь будет выбирать вид связи сним. Итак переходим во вкладку добавления полей и выбираем радио-кнопки. Далее переходим в настройки поля радиокнопок. Для начала давайте введём название поля – Выберите способ связи, для этого его нужно ввести вот сюда. Итак у нас будет две опции эмайл и телфон, поэтому третию область ввода варианта выбора мы удалим для этого кликнем по значку минус в вот этой областе, если же нам нужно было добавить ещё одну четвертую область, то мы кликнули бы по значку плюс соответственно. Теперь давайте введём для первой радиокнопки значение телефон, а для другой емэйл. Для этого их необходимо ввести в вот эти области. Вот так! Также если вы хотите вместо значений исползовать изображения, то есть иконки, то для этого вам нужно поставить галочку вот в этой областе, а затем загрузить соответствующие иконки. Иконки можно взять с сайта айконбирд, ссылка на него в описании. Далее определяем поле, как обязательное к заполнению. После чего переходим в расширенные опции, где Вы можете определить порядок вывода вариантов видов связи, я определю случайный выод поставив галочку в соответствующей областе. А также здесь можно отобразить варианты в один, два или три столбика, либо горизонтально в строчку, для этого нужно просто выбрать соответствующее значение из раскрывающегося списка. Пожалуй я размещу варианты в строчку. Так ну вот у нас почти всё готова. Осталось лишь поместить поле выбора вариантов связи над полем ввода вопроса, то есть перенести его выше. Для этого наводим курсор мыши на название поля выбора вариантов связи пока не появится рука и просто перенесем её в нужное место. Вот так! Теперь сохраняем изменения. Сейчас нам нужно перейти во вкладку настройки данного плагина и мы автоматически попадаем в первый раздел Общие. Здесь нас будет интерессовать лишь вот это поле. Итак для стилизации кнопки отправки данных мы введем сюда button1. К данному свойству мы вернемся позже. Далее переходим во вкладку уведомления. Здесь настраиваются параметры сообщения, которое прийдет на вашу почту с данными клиента. Во первых Вы можете поменять адрес эл. Почты, на которое будет приходить уведомление. По умолчанию здесь стоит тот адрес, который был указан при регистрации вашего доменного имени на хостинге, итак Вам нужно просто ввести адрес. Если вы хотите внести изменения в название письма, то необходимо произвести корректировки в этой областе. Также можно изменить имя адресата от которого приходит письмо с контактами, например давайте изменим на Контакты с сайта. ТЕПЕРЬ ДАВАЙТЕ ПЕРЕЙДЁМ В РАЗДЕЛ ПОДТВЕРЖДЕНИЕ. Здесь нам нужно будет настроить то, что будет выводится на экран клиенту после удачной отправки своих данных. Существует три варианта — ему может выводится сообщение о у спешной отправке, их можно перенаправлять на какую-либо страницу, либо можно перенаправлять на страницу сайта. Итак для выбора действия нужно выбрать соответствующий параметр из раскрывающегося списка. Если вы выбираете показать страницу, то в снизу в появившемся раскрывающимся списке выбираете название созданной страницы на этом сайте. Если же вы хотите что-бы пользователь перенаправлялся на конкретный сайт или сервис, то в раскрывающимся списке тип подтверждениея выбираете перенаправлять на юэрэл, а в появившейся снизу области вводит ссылку, ведущую на страницу или сервис в форматеhttp//:.ru
Ну а я выберу третий вариант, нашим клиентам будет выводится сообщения. Итак я выбираю из раскрывающегося списка сообщение, а затем в появившейся областе ввожу текст данного сообщения. Далее сохраняем изменения! У этого плагина есть и платная версия. Платная версия позволяет настраивать воронку продаж и приём платежей через пэй пал и подключать различные тематические поля. Но подключать полный функционал впринципе не имеет никакого смысла, так как бесплатная версия позволяет решать 95% задач. Итак после сохранения всех измененний мы закрываем панель плагина. Итак у нас создана страница для формы консультация, если вы впринципе не знаете как работать с панелью вордпресс, то посмотрите мой видеоурок об этом, ссылка в описании. Итак переходим в режим редактирования страницы консультация. Теперь устанавливаем курсор по середине и кликаем по кнопке Добавить форму, после чего в открывшемся окне из раскрывающегося списка выбираем название созданой нами формы, в нашем случае это обратная связь. Также здесь имеется возможность отображение название формы и описания. Для этого нужно установить галочки в соответствующих областях. Давайте отобразим название формы. Для добавления формы на страницу кликаем по кнопке добавить форму. Как вы видите шорт-код кнопки добавился на страницы. Теперь сохраняем изменения и переходим на страницу для просмотра результатов. КАК-ТО ВЫГЛЯДИТ НЕ ОЧЕНЬ ! Давайте настроим внешний вид, то есть стили для неё посредством сиэсэс свойств. У Вас под видео есть ссылка на файл — настройка стилей для формы, вам нужно скопировать весь имеющийся там код, затем перейти в панель настроить во вкладку дополнительные свойства, игнорируем все предупреждения, устанавливаем курсор посредством клика лкм по свободной области и вставляем код . После чего сохраняем изменения и выходим из панели. Пожалуйста, посмотрите у нас всё получилось! Форма выглядит просто шикарно. Если Вы хотите для своего сайта выбрать другие решения по дизайну формы, то также в описании к этому видео есть ссылка на инструкцию по настройки стилей для формы, где всё подробно описано где и что нужно менять в коде что бы достичь нужного эффекта, там всё просто вы заменяете одни слова другими и форма вашей мечты уже готова! Действительно Я перебрал множество решенний по созданию форм на вордпресс и использование именно этого плагина это реально лучший вариант. Если у Вас есть всои мысли на этот счет, то пишите свои комментарии будет интересно почитать, ну а если вам нужна помощь при разработке сайта, то в описании будет ссылка на мой аккаунт вконтакте, можете смело задавать вопросы и я вам помогу. А на сегодня у меня всё ! С Вами был бучающий проект записки вебмастера! До встречи на волнах наших эфиров!