Форма для заявки на сайте — основной блок, который есть на вашей посадочной с странице.

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

Давайте разберем их подробнее.

Основная форма для заявки на сайте должна быть одна

«Все должно быть изложено так просто, как только возможно», — писал Альберт Эйнштейн.

Структура вашей страницы должна быть понятна и ясна, все элементы должны нести смысл и находиться на своем месте. Форма заявки на сайте является самым важным элементом, поэтому этот блок должен быть самым понятным.

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

КАК СДЕЛАТЬ ФОРМУ СБОРА ЗАЯВОК ВКОНТАКТЕ?

Не делайте много полей для заполнения

Отличие лендинга от полноценного сайта в том, что пользователь поверхностно знакомится с одним товаром или услугой бренда. Захочет ли он тратить больше времени на заполнение формы, чем на чтение преимуществ данной услуги? Мало того, велика вероятность, что пользователь перешел на вашу страничку с рекламного объявления. Когда форма для заполнения долгая и сложная, клиент может ее просто закрыть (в том же Instagram) и никогда не найти вновь…

Берите соглашение у пользователя

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

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

Добавить надпись под форму можно в разделе «Контент» > «Текст под формой».

Но одной фразы мало! Вам необходимо иметь ту самую политику на вашем сайте. Сделать ее можно здесь: https://tilda.cc/ru/privacy-generator/

Разместите ссылку на эту страницу в футере вашего сайта. Кроме того, можно сделать кликабельной фразу «политикой конфиденциальности» под формой — пусть она ведет на соответствующую страницу. Так вы вдвойне себя обезопасите.

Подводите пользователя к вашей форме

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

Дублируйте кнопку с призывом заказать услугу через некоторое количество блоков, добавьте кнопку, ведущую на форму в верхнее меню сайта… Только не переусердствуйте! Если будете навязывать заказ вашей услуги — пользователь вас покинет.

Источник: formula-project.ru

Форма обратной связи с отправкой письма в Вконтакте

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

Посмотрите ролик, в котором я достаточно подробно объясняю как это делается.

Ссылки, которые необходимы для создания формы:

Вот что вам нужно :

1. Скачать файл с готовым кодом или перенести вот это код себе в документ.

Для файла index.php

Document

Код для файла sendform.php

$id, // Кому отправляем ‘message’ => $message, // Что отправляем ‘access_token’ => ‘Сюда_вписываем_токен’, ‘v’ => ‘5.62’, ); $result = file_get_contents($url, false, stream_context_create(array( ‘http’ => array( ‘method’ => ‘POST’, ‘header’ => ‘Content-type: application/x-www-form-urlencoded’, ‘content’ => http_build_query($params) ) ))); > ?> Отправка формы

Всё ок!

Код для файла token.php

Document redirect_uri=https://oauth.vk.com/blank.htmlresponse_type=token>Получить токен

2) Далее нужно перейти на сайт Developer Вконтакте и создать там новое приложение.

3) Создав новое приложение мы меняем в нашем коде данные, которые были перечислены в видео: id приложения, token, id диалога в котором будут появляться сообщения из формы.

На этом всё. Если вам интересна данная тема , переходите по ссылки на мой канал, там есть много роликов по теме программирования и вёрстки. Там я пытаюсь все объяснить доступным для всех языком, а если не понятно, вы можете задать свои вопросы в комментариях.

На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime

Наши планы

• Написание материала для курса по разработке ботов на Telegram
• Разработка универсального парсера на PHP

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Источник: prog-time.ru

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

HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.

Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.

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

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

Тег — создание формы

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

Итак, наш первый код.

У тега есть два обязательных атрибута:

• action — ссылка на скрипт, обычно PHP, который будет обрабатывать форму. А точнее, который будет обрабатывать введенные форму данные.
• method — метод отправки данных на сервер (GET или POST).

Подробности вы сможете найти на этом сайте, но сейчас вернемся к самой форме.

Форма для ввода текста

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

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

Для вставки пояснительного текста используется атрибут placeholder тега .

Сделаем 100% ширину с помощью CSS.

textarea

Получим следующую форму.

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Ввод текста в input

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

Изменим нашу форму.

Уже лучше, давайте добавим поле с адресом электронной почты.

Все хорошо, но не хватает нормальной группировки элементов.

Группировка элементов управления в HTML-форме

Текстовые поля Ваше имя: Ваш email: Текст сообщения:

Давайте немного изменим форму, а именно:

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

form Текстовые поля Ваше имя: Ваш email: Текст сообщения:

Ну что же, уже лучше. Не хватает кнопок.

Кнопки в HTML-форме

Добавим две кнопки:

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Кнопка отправки формы

Кнопка отправки формы на сервер создается с помощью тега (от англ. button — кнопка) с типом submit (от англ. submit — разместить). Полный HTML-код кнопки отправки формы на сервер: Отправить .

Кнопка очистки формы

Тут по аналогии, только вместо submit мы пишем reset (от англ. reset — сбросить). Полный HTML-код кнопки очистки формы: Очистить .

Давайте дополним нашу форму.

form Текстовые поля Ваше имя: Ваш email: Текст сообщения: Отправить Очистить

Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

Проверка заполнения формы

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

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

form Текстовые поля Ваше имя: Ваш email: Текст сообщения: Отправить Очистить

Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

Другие популярные элементы

Продолжим дополнять нашу форму. Добавим несколько элементов.

Форма загрузки файлов

Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:

Дополним нашу форму. Создадим отдельную группу элементов.

form Текстовые поля Ваше имя: Ваш email: Текст сообщения: Отправить Очистить Иные элементы управления формой

Выбор даты

Выбрать дату можно с помощью типа date все того же input’а. Полный код: .

Добавим в нашу форму возможность выбора даты.

form Текстовые поля Ваше имя: Ваш email: Текст сообщения: Отправить Очистить Иные элементы управления формой Укажите дату —

Выпадающий список

Выпадающий список создается с помощью тега < select >, а элемент списка с помощью < option >. Давайте создадим в нашей форме возможность указать адресата.

form Текстовые поля Ваше имя: Ваш email: Текст сообщения: Отправить Очистить Иные элементы управления формой Укажите дату — Кому отправить — Директору В отдел продаж

Переключатели

Переключатели бывают зависимые — можно выбрать только один вариант и независимые.

Зависимый переключатель

Зависимый переключатель создается с помощью тега input и его атрибута type= «radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

form Текстовые поля Ваше имя: Ваш email: Текст сообщения: Отправить Очистить Иные элементы управления формой Укажите дату — Кому отправить — Директору В отдел продаж Отправить копию письма себе на почту?Да Нет Каким образом направить вам ответ >По электронной почте По почте на бумажном носителе Перезвонить по телефону

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.

Анатолий Бузов / об авторе

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник: abuzov.com