Как создать форму через Яндекс.Формы с UTM-меткой и URL ссылкой на сайт

Небольшое руководство, позволяющее создать в стандартной форме от Яндекса UTM-метку и URL ссылку на сайт.

ШАГ 1. Настройка формы в сервисе https://forms.yandex.ru

Настройка формы простая, указываем поля которые необходимы, а также добавляем скрытое поле "короткий текст" с идентификатором "utm_source".

 

В настройках формы всё стандартно.

 

ШАГ 2. Настройка формы на сайте

Также в коде я добавил строку ,которая позволяет скрыть копирайт Яндекс.Форм.

В предоставляемый код нужно добавить 2 элемента:

• &utm_source=zaplata.ru
• <p class="guggu2pp">.</p>

 

< script src="https://forms.yandex.ru/_static/embed.js"></ script><iframe src="https://forms.yandex.ru/u/16808aad390fa7b46c43041646c/?iframe=1&utm_source=zaplata.ru" frameborder="0" name="ya-form-16808aad390fa7b46c43041646c" width="650"></iframe>
<p class="guggu2pp">.</p>

Также добавляем стили к форме:

body .customfz{/* Стиль блока с формой */ display: table; background: #fff; border-radius: 20px; padding: 30px 20px 0; margin: 20px 0; border: 1px solid #e8ecf2;}
body .guggu2pp{/* Прикрываем копирайт */background: white; display: inline-block; line-height: 60px; padding: 0; width: 100%; border-radius: 0; top: -50px !important; position: relative; box-sizing: border-box; margin: 0; color: transparent;}
body .customfz, body .customfz iframe {/* На случай капчи */}

В коде CSS также добавлены стили на случай капчи (бывает такое).
Это позволяет вывести ее нормально, без прокрутки и белого экрана.

Пример капчи от Яндекс.Форм.

 

Пример письма, которое приходит на почту администратору сайта.

Сервис Яндекс.Формы позволяет легко создавать интерактивные формы для вашего сайта без программирования.

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

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

Плюс сервис полностью бесплатный и доступен любому пользователю после регистрации.

Как добавить свою ссылку в яндекс форму?

Можно использовать поле "Текст без вопроса"