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

Говорят, что если программист может написать форму обратной связи, он может написать всё.

Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.

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

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

Чтобы сделать у себя на сайте такое, нам понадобится:

• сервер, который умеет работать с PHP-скриптами,
• страница, где разместим форму,
• скрипт на PHP — он будет отвечать за отправку сообщения.

Сервер для PHP

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

ФОРМА ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА — ЛЕГКО! Используем html и php

Сервер для PHP можно запустить на вашем компьютере, но без дополнительной настройки он будет виден только лично вам. Это нормальная ситуация при разработке продукта, но для реальной боевой задачи нужно будет поднять сервер где-то в интернете.

Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:

Готовим страницу с формой

Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.

Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :

/*Задаём общие параметры для всей страницы: шрифт и отступы*/ body < /*text-align: center;*/ margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/* Настраиваем внешний вид полей ввода*/ input < display: inline-block; margin: 10px auto; border: 2px solid #eee; padding: 10px 20px; font-family: Verdana, Arial, sans-serif; font-size: 16px; >textarea

Чтобы сделать форму на странице, мы будем использовать такие теги:

— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.

— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.

Ещё мы воспользуемся тегом — он мысленно собирает наши поля в одну форму и помогает управлять ими из одного места. У каждой формы есть свой метод, по которому она работает с данными. Форма может или отправлять данные (post), или получать их (get). Так как нам надо отправить сообщение в PHP-скрипт, будем использовать метод post.

Как настроить форму обратной связи на сайте? С привязкой в VK!

Сразу пропишем путь к скрипту на сервере — по этому адресу мы зальём нужный файл на следующем этапе. Этот скрипт, который мы позже напишем, и есть обработчик формы.

Оформим всё в виде кода:

Текст сообщения

Пишем обработчик формы на PHP

Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:

1. Браузер соберёт введённые нами данные и скомпонует таким образом, чтобы их можно было передать в программу на PHP. Как бы упакует в посылку.
2. В нашей PHP-программе мы сможем получить доступ к этим данным, как бы засосать их в память и хранить в переменных. Можно представить, что мы распакуем посылку и сможем пользоваться её содержимым.
3. Скрипт PHP что-то сделает с полученными данными, а потом выплюнет пользователю какой-то ответ. Этот ответ будет отображён в виде веб-страницы в браузере.

Логика работы PHP-программы будет такая:

• получаем значения переменных из тех данных, которые получил обработчик;
• готовим сообщение, где укажем все поля в форме;
• отправляем это сообщение и смотрим на результат выполнения функции отправки;
• если письмо ушло по нужному адресу — пишем, что всё хорошо, если нет — говорим, что что-то не так;
• через 10 секунд после вывода сообщения автоматически переходим на сайт «Кода»

Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную $email в функции send() на свой настоящий адрес, чтобы самим получать письма из формы.

// Если письмо не ушло — выводим сообщение об ошибке else ?>

Отправляем PHP-скрипт на сервер

Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.

Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:

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

Что дальше

Дальше как обычно — улучшаем.

1. Например, сейчас, если не заполнить поле с темой или адресом, то будет ошибка и письмо не уйдёт. При этом пользователь не будет знать, что же именно он сделал не так. Можно организовать проверку на заполнение полей и выводить нужные сообщения, если что-то не заполнено.
2. Всегда можно улучшить безопасность и защитить скрипт от многократных запросов — чтобы никто не абьюзил сервис и не делал из нас спамеров.
3. А ещё при отправке мы переходим на страницу обработчика, а потом вообще на другой сайт. Чтобы сделать как у всех, чтобы форма отправлялась без перезагрузки страницы, можно использовать Ajax. Когда-нибудь доберёмся и до него. Подписывайтесь, чтобы не пропустить.

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Источник: thecode.media

Создаем лид-форму в новом кабинете VK Рекламы — пошаговая инструкция

Объявление с лид-формой — это один из форматов VK Рекламы, который позволяет собирать контакты заинтересованных пользователей, не переводя их на сайт. Разбираемся, чем он может быть вам полезен и как создать лид-форму, чтобы запустить такую рекламу.

В лид-форме пользователи заполняют поля и оставляют контакты. Для бизнеса это способ получить лиды, чтобы вести их дальше по воронке. Для клиента — возможность обменять контакт на что-то полезное: материал, услугу, скидку. С помощью лид-форм можно организовать:

• регистрацию на образовательное мероприятие: вебинар, мастер-класс, пробное занятие;
• запись на тест-драйв;
• запись на зрелищное событие — например, театральный или кинопоказ;
• предоставление консультации;
• запрос расчета стоимости товара, который делается на заказ;
• вызов мастера для замера, например, оконного проема или ниши под встроенную мебель;
• конкурс на любую тематику;
• обмен контакта на пользу — например, скидку или информационный материал.

Вся интернет-реклама — в eLama

Один кабинет и кошелек для оплаты 12+ рекламных систем и сервисов, единый пакет закрывающих документов, бесплатное обучение и помощь на всех этапах работы.

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

А вот сама лид-форма.

Почему запускать кампании с лид-формой — это удобно

Есть минимум пять причин использовать этот формат в VK Рекламе.

1. Универсальность. Форму можно настроить под разные цели: подписку на рассылку, регистрацию на событие, заказ обратного звонка и так далее.
2. Гибкость настроек. Можно добавить вопросы или отказаться от них, запросить данные по умолчанию (имя и телефон) или добавить к ним, например, email.
3. Минимум лишних движений. Пользователи совершают целевое действие, не покидая соцсеть, рекламодателю не нужно создавать отдельную посадочную страницу.
4. Простота заполнения для пользователя. Данные из аккаунта автоматически подтягиваются в нужные поля формы, а значит, вероятность отправки контактов повышается.
5. Возможность использовать собранные данные. Например, для email-рассылок и ретаргетинговых кампаний.
6. Лид-форму для рекламной кампании нужно подготовить заранее. Для этого перейдите в одноименный раздел в левом меню VK Рекламы и нажмите на кнопку «Создать лид-форму».

Шаг №1: Оформляем лид-форму

В меню оформления:

• дайте ей название — вы будете видеть его в общем списке лид-форм, так что оно должно быть простым и понятным;
• загрузите логотип компании или выберите изображение из тех, что были ранее загружены в кабинет VK Рекламы;
• введите название компании, которое отобразится в центре лид-формы (до 30 знаков);
• добавьте вводный текст, который объяснит пользователю, чего вы от него хотите и зачем: заголовок до 25 символов и описание до 35 символов;
• выберите фоновый градиент формы из семи вариантов.

Окно предпросмотра справа покажет, как будет выглядеть будущая лид-форма.

Заполнив поля, нажмите «Продолжить».

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

Шаг 2. Добавляем вопросы

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

Кликните на «Добавить вопрос», чтобы вписать его текст и настроить: будет ли он открытым или с вариантами ответов, сколько будет вариантов (2-5), сколько из них можно будет выбрать.

Вопросы можно и не добавлять — тогда форма будет только собирать контактную информацию. По умолчанию это имя и номер телефона, но можно спрашивать еще и фамилию, email, возраст, день рождения, страну, город и адрес.

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

Чек-бокс согласия на обработку персональных данных будет добавлен к лид-форме автоматически.

Закончив с вопросами и контактами, жмите «Продолжить».

Шаг №3: Оформляем благодарность

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

Как только нужные поля заполнены — кликните на «Продолжить». Почти готово! Осталось подписаться на уведомления о новых заявках и указать адрес почты или сразу несколько адресов (до 10 штук), куда вы будете эти заявки получать.

Это может быть, например, email отдела продаж, с которого заявки отправляются в CRM-систему. Также вы можете дополнительно выбрать вариант с получением уведомлений о новых заявках в VK Messenger. Правда, сейчас эта опция недоступна для клиентов агентств, поэтому при работе через eLama ее использовать не получится.

Чтобы завершить создание лид-формы, укажите email компании, а также ИНН/ОГРН и адрес юридического лица — они необходимы для политики конфиденциальности. Когда всё готово — жмите «Сохранить». Новая лид-форма добавится в список в одноименном разделе левого меню кабинета.

На этом экране вы сможете увидеть количество лидов, которые привела лид-форма за время своего существования, а также скачать таблицу с лидами в CSV и XLSX. Формы из списка можно использовать в рекламной кампании. По тому, как ее создать и запустить, у нас есть отдельная пошаговая инструкция.

Несколько советов по использованию лид-форм

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

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

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

1. Тестируйте формы с разным количеством вопросов. В некоторых кейсах наилучшую конверсию показывают формы с одним вопросом, где-то лучше срабатывает блиц из трех.
2. Добавляйте поля сбора контактов только если вам действительно необходимы дополнительные данные. Например, если без адреса почты вы не сможете отправить пользователю обещанный прайс-лист или презентацию. Лишние поля в форме снижают конверсию. Дополнительную информацию у клиента можно будет получить при личном контакте.
3. Напишите на странице благодарности несколько слов о том, что ждет пользователя: придет ли ему письмо или поступит звонок, и в какие сроки.
4. Если через лид-форму вы собираете заявки, будьте готовы связаться с потенциальным клиентом быстро. Если заявка обрабатывается слишком долго, пользователь решит, что о нем забыли, и найдет другой вариант.

Успехов вам в продвижении!

eLama , специалист Службы Заботы

Источник: elama.ru

Отправка формы обратной связи сообщением Вконтакте

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

Вот моё простое решение. Нам понадобиться получить от VK access token, Установить AjaxForm и Formit. Как ставить 2 последних рассказывать не буду.

Получаем access token от VK

1. Создаем Тут приложение типа Standalone-приложение, с любым именем на ваш выбор. Из настроек приложения получаем ID приложения
2. Правим ссылку
   oauth.vk.com/authorize?client_id=0000000redirect_uri=https://oauth.vk.com/blank.htmlresponse_type=tokenhooks по мимо стандартного email (Который отвечает за отправку на почту) еще есть и vk-message. Вот его мы и создадим, он будет как раз отправлять нам форму в вк.

   Создаем сниппет vk-message

   getOption(‘formName’, $formit->config, ‘form-‘.$modx->resource->get(‘id’)); $values = $hook->getValues(); //Задаем нашим input переменные $name = $values[‘name’]; $phone = $values[‘phone’]; if($name) < $arr[«Имя»] = $name; >if($phone) < $arr[«Телефон»] = $phone; >// Собираем наш массив и добавляем в переменную messeges foreach($arr as $key => $value) < $messages .= $key.»:».$value. «n» ; >// Собираем нашу ссылку для запроса $vkurl=»https://api.vk.com/method/messages.send»; $params=[ ‘user_id’ => $user_id, ‘message’ => $messages, ‘v’ => $v, ‘access_token’ => $access_token ]; $sendmess = curl_init($vkurl); curl_setopt($sendmess, CURLOPT_HEADER, false); curl_setopt($sendmess, CURLOPT_RETURNTRANSFER, 1); curl_setopt($sendmess, CURLOPT_POST, 1); curl_setopt($sendmess, CURLOPT_POSTFIELDS, ($params)); curl_setopt($sendmess, CURLOPT_SSL_VERIFYPEER, false); $result = curl_exec($sendmess); $modx->log(MODX_LOG_LEVEL_ERROR, $result); curl_close($sendmess); return true;

   И всё должно заработать. Проверяем

   Источник: modx.ru