Карта сайта Контакты Главная

Наши партнёры

Архив новостей

Март 2024 (2)
Февраль 2024 (1)
Декабрь 2023 (1)
Октябрь 2023 (2)
Сентябрь 2023 (2)
Август 2023 (3)

Друзья проекта

1  2  3  4  5  5  7  8 

Авторизация

Опрос

Мои среднемесячные расходы на хостинг

Больше 1001 руб.
От 501 до 1000 руб.
От 201 до 500 руб.
от 1 до 200 руб.
Пользуюсь бесплатным

Реклама

Реклама

Реклама

Реклама

Карта: 1, 2, 3, 4, 5, 6, 7, 8, 9

Счетчики


Яндекс.Метрика

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


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




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



Индивидуальная разработка


Кто разбирается в коде, тому достаточно всего нескольких минут для создания формы обратной связи. Как минимум нужно знать HTML и CSS, чтобы оформить внешний вид формы. Для отправки данных на email понадобится изучение серверного языка программирования (допустим, PHP). С его помощью вы сможете написать скрипт, который будет принимать отправляемые пользователем данные на сервер, а затем на почту. Добавить интерактивности элементам и различным полям, а также сделать отправку формы без перезагрузки страницы, поможет javascript (можно использовать любые вспомогающие библиотеки, например, jQuery или VueJS).


Готовые скрипты


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


Плагины для создания форм


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


Конструктор форм для сайта


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


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


Этот сервис выступает в роли конструктора позволяющего создавать универсальные формы любой сложности без программирования, которые можно использовать на любой платформе (CMS или конструкторе сайтов) и даже в email рассылке, социальных сетях ВКонтакте, Facebook, Twitter и мессенджерах Telegram, Viber, Facebook Messenger.


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



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


Форма может содержать самые различные элементы: чекбоксы, флажки, списки, слайдеры, числовые и текстовые поля, email, телефон, дату и время, файлы. Прежде всего добавим в форму небольшой и понятный заголовок, который даст понять, что это за форма. Для этого размещаем в форме виджет «Текст», нажимаем в его области и пишем:



Чтобы выбрать стиль текста, начертание и цвет, нужно выделить его:



Так как помещение может быть разное - квартира, офис, загородный дом, производственное помещение, то в форму нужно добавить опцию выбора типа помещения. Для выбора одного варианта добавим виджет «Одиночный выбор»:



Уборка помещения также может быть разной - генеральной, облегченной, после ремонта, послестроительной. Для этой опции тоже можно использовать виджет «Одиночный выбор»:



Теперь нужно добавить опцию, с помощью которой пользователь сможет указать площадь убираемого помещения. Давайте задействуем виджет «Ползунок», где зададим диапазон в пределах которого можно выбрать площадь:



Уборка может включать в себя дополнительные услуги, например чистку ковра или мойку пола. Чтобы пользователь мог выбрать несколько услуг, а не одну, будем использовать виджет «Множественный выбор»:



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



Ниже добавим кнопку и назовем ее «Заказать уборку», после чего пошагово перейдем в настройки: «Действия при клике» - «Уведомления» и активируем отправку нажав на «Отправлять мне»:



Нажмите пункт «На email» и вы перейдете к настройкам списка email, на которые будут приходить уведомления о заказах:



Нажмите «Настроить шаблон письма» и откроется редактор, где вы сможете указать, какие данные будут отправляться на email.







Аналогичным способом можно включить и настроить прием заявок на email клиента, который он заполнил в форме:



Теперь давайте немного приведем форму в порядок. Пока поля расположены друг под другом, но их можно расположить иначе, например, в 2 или 4 колонки, для этого просто потяните блок и отпустите в нужном месте:



Форма приобрела более красивый вид и стала меньше занимать места по высоте:



А теперь представьте, что кроме отправки данных нам нужно показывать клиенту примерную стоимость уборки. Думаете, это сложно сделать и займет много времени? Вовсе нет, ведь достаточно добавить виджет «Формула» и разместить его в любом месте формы:



Затем, в специальном редакторе формул, использовать значения вводимые пользователем или значения полей, которые можно задать каждому полю по умолчанию. Со значениями возможно производить основные математические операции: вычитание, сложение, умножение, деление, возведение в степень, вычисление процента, а также проверять разные действия с помощью логических операций (ЕСЛИ, И, ИЛИ, больше, меньше, не равно и т.п.):



Результат можно переместить чуть выше, например, над полями ввода имени и email, и добавить текст, чтобы клиент оформил заявку для получения окончательной стоимости:



Кроме того, вы можете вообще убрать результат из формы и отправлять итоговую цену только в заявке клиенту на email.


В довершение нашей формы, давайте добавим изображение, которое будет привлекать внимание:



Теперь можно сохранить форму и посмотреть, как она выглядит:



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



В итоге


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


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








Опубликовано: 23-05-2019, 20:46   Комментариев Категория: Лента новостей Просмотров Просмотров: 4100

Другие новости на эту тему:

Теги к статье:

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