Форма заявки на сайт фотографа: пример от кода до заявки в кабинете

Форма заявки на сайт фотографа обычно отправляет письмо на почту, где оно тонет среди рассылок. Здесь иначе: заявка сразу становится клиентом в кабинете. Ниже реальный прогон инструмента «Форма заявки на сайт фотографа»: что задали в форме, какие два фрагмента кода вернулись через 0,2 секунды, куда их вставлять на Tilda и WordPress, почему обязательных полей только два и почему инструмент работает только вошедшему.

Что задали и что вернулось

Прогон сделан из личного кабинета. В форме инструмента заполнено: имя или студия — Анна Петрова; заголовок формы — «Узнать стоимость съёмки»; надпись на кнопке — «Узнать стоимость»; варианты «что снимаем» — три строки: портрет, семейная, свадьба; спрашивать желаемую дату — да; спрашивать бюджет — нет; текст после отправки — «Спасибо! Заявка получена, отвечу в течение часа.»; цвет кнопки — #6C4CF1; адрес сайта, куда ставится форма, — для справки в кабинете.

Ответ пришёл за 0,2 секунды. В нём номер формы — 2, ключ формы из шестнадцати знаков (в статье он заменён на «ваш-ключ»: это ключ конкретного кабинета), адрес приёма заявок на fotoassistent.ru, два фрагмента кода для вставки, адрес отдельной страницы формы и копия настроек, чтобы сверить, что сохранилось. На странице результат показан сразу: два блока с кодом и кнопкой «Скопировать» у каждого, ниже — сводка настроек словами.

Первый фрагмент — HTML с небольшим скриптом. Это тег form класса fa-lead с двумя служебными атрибутами: data-fa-key хранит ключ формы, data-fa-url — адрес, куда уходит заявка. Внутри — заголовок «Узнать стоимость съёмки», поле «Ваше имя» (обязательное), поле «Телефон или мессенджер» (обязательное), выпадающий список «Что снимаем» с тремя вариантами из настроек, поле желаемой даты, поле для пары слов и кнопка «Узнать стоимость» фиолетового цвета. Поля бюджета нет — оно было выключено. После кода формы идёт короткий скрипт, который отправляет заявку и показывает текст благодарности вместо формы.

Второй фрагмент — iframe, встроенное окно без скриптов. Оно указывает на страницу формы по адресу fotoassistent.ru/zayavka/ с параметром key, равным вашему ключу, шириной сто процентов, высотой 520 точек и ограничением ширины 460 точек, чтобы на широком экране форма не растягивалась в полосу. Та же страница открывается и напрямую по ссылке — её можно отправить клиенту в мессенджере, если сайта пока нет.

Куда вставлять: Tilda, WordPress, всё остальное

Оба фрагмента — обычный код для вставки, и путь у него на каждой площадке один: найти блок, который принимает произвольный HTML, и вставить туда содержимое целиком.

• На Tilda — блок «HTML-код» из раздела «Другое» (в библиотеке блоков он идёт под номером T123). Вставить первый фрагмент, опубликовать страницу.
• В WordPress — блок «Произвольный HTML» в редакторе страницы или виджет «Произвольный HTML» в боковой колонке. Скрипт внутри блока разрешён владельцу сайта.
• В конструкторах, которые запрещают скрипты (часть тарифов Wix, некоторые лендинг-сервисы), — второй фрагмент, iframe. Он работает везде, где есть хоть какая-то вставка HTML.
• В сообществе ВКонтакте или в описании канала, где вставить код нельзя вовсе, — прямая ссылка на страницу формы с ключом.

Когда брать iframe, а когда HTML со скриптом? HTML встраивается в дизайн страницы: форма наследует шрифт и отступы сайта, её можно подправить своими стилями, а после отправки текст благодарности появляется на месте формы. Iframe — отдельное окно с оформлением витрины: проще вставить, невозможно сломать, но выглядит как вставка, и высота 520 точек фиксирована. Если площадка позволяет скрипты — берите HTML; если сомневаетесь — iframe, он не откажет.

Почему обязательных полей только два

В коде, который вернул инструмент, атрибут обязательности стоит только у двух полей: имя и контакт. Жанр, дата и комментарий — по желанию посетителя. Это не упрощение ради простоты. На странице инструмента и в аудите сайта фотографа одна и та же цифра: каждое лишнее обязательное поле отнимает от 10 до 50 процентов заявок. Посетитель, который хотел просто узнать цену, не будет вспоминать бюджет и точную дату — он закроет вкладку и напишет следующему фотографу, у которого форма короче.

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

Текст после отправки — «Спасибо! Заявка получена, отвечу в течение часа» — тоже часть конверсии. Обещание срока успокаивает посетителя и удерживает его от параллельной заявки конкуренту. Но обещание обязывает: ставьте срок, который выдержите. Час — реалистично днём, если телефон под рукой; для ночных заявок честнее «отвечу утром».

Почему инструмент работает только из кабинета

Гостю страница инструмента сразу показывает предупреждение: этот инструмент работает из личного кабинета, войдите или зарегистрируйтесь. Остальные инструменты витрины считают без регистрации, и это различие объясняется устройством формы. Заявка должна попасть к конкретному фотографу — в его список клиентов, а не в общую кучу. Владельца формы ставит сервер в момент создания, по учётной записи, из которой сделан запрос; из браузера владельца подменить нельзя. Поэтому форма без входа физически не может знать, чья она.

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

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

Что происходит после нажатия кнопки

Посетитель на вашем сайте вводит имя и телефон, выбирает «семейная», ставит дату и нажимает «Узнать стоимость». Скрипт отправляет данные по адресу из атрибута data-fa-url на витрину, витрина проверяет ключ и записывает заявку владельцу. Посетитель видит «Спасибо! Заявка получена, отвечу в течение часа». Вы открываете кабинет — в разделе «Заявки с сайта» лежит новая строка с именем, контактом, жанром и датой, а в списке клиентов появился новый человек, которому можно сразу поставить бронь и привязать документы.

Уведомлений на почту и в мессенджер в этой версии нет — это сказано на странице инструмента честно, и заявки надо проверять в кабинете. Поэтому обещание «в течение часа» разумно давать, только если кабинет открыт в течение дня. Отключить форму можно, убрав код с сайта; удаление ключа из кабинета появится позже.

Что дальше

Заявка пришла — начинается первый час, который решает, будет ли заказ. Ответ на «сколько стоит» берётся из шаблонов переписки, к нему прикладывается смета в PDF, а дальше по датам включается воронка писем — от подтверждения до просьбы об отзыве. Все три инструмента заполняются теми же данными, что уже лежат в карточке клиента.

Сам инструмент — «Форма заявки на сайт фотографа», работает из кабинета, регистрация бесплатная. Если сайта, на который ставить форму, ещё нет или он не приводит заявок, сайтами и продвижением фотографов занимается агентство Креатифф; а чтобы заявок было за что благодарить, снимать учат на Фотофакультете.