Инструкция

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

Чекбокс, поле с выбором и скрытые пользовательские переменные

Стандартная форма и зачем собирать дополнительные данные

В Мейлганер есть шаблон статичной формы для сбора имейлов. Он находится в настройках списка в разделе «Сбор подписчиков» → «Формы на сайте».

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

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

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

Например, в заявке вы хотите собирать не только имейл-адрес, но ещё имя подписчика и название компании.

Имя будем собирать с помощью стандартной переменной {{name}} и пользовательской переменной {{company_name}}.

Чтобы добавить свои поля — разместите в теле формы новую часть кода для ввода (input) конструкцию по типу:

    <input name="name" placeholder="Введите ваше имя" />

Код ниже — пример на основе шаблона для получения формы с новыми полями для ввода: именем и названием компании.

<div id="mg-form">
  <div class="mg-email-form-wrap">
  <div class="mg-h1">Экономьте на покупках</div>
  <div class="mg-p">Подпишитесь на рассылку самых актуальных предложений.</div>
  <form onsubmit="return false;">
    <input id="mg-mailer-email" type="email" placeholder="Введите ваш email" />
    <input name="name" placeholder="Введите ваше имя" />
    <input name="company_name" placeholder="Название компании" />
    <button id="mg-mailer-email-button">Подписаться</button>
  </form>
  <div id="mg-form-error"></div>
  </div>
</div>

Вот так будет выглядеть готовая форма:

Как добавить ещё больше полей, блок с выбором и чекбокс

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

А в остальном — использовать стандартный код формы, дополнив его новым полями для ввода <input> разных типов:

text — для текста;
radio — для выбора;
checkbox — для галочки подтверждения подписки.

Ниже — пример части кода формы для анкеты программы лояльности:

<div id="mg-form">
	<div class="mg-email-form-wrap">
	<label>Имя</label>
	<input type="text" name="name">
	<label>Фамилия</label>
	<input type="text" name="surname">
	<label>Отчество</label>
	<input type="text" name="patronymic">
	<label>Телефон</label>
	<input type="tel" name="phone">
	<label>E-mail</label>
	<input id="mg-mailer-email" type="email">
	<label>Дата рождения</label>
	<input type="date" name="birthday">
	<label>Пол</label>
		<div class="mg-radiobutton">
			<input type="radio" name="gender" value="Женский">
			<label>Женский</label>
		</div>
		<div>
			<input type="radio" name="gender" value="Мужской">
			<label>Мужской</label>
		</div>
	<div class="mg-checkpoint">
	<input type="checkbox" name="confirmation">
		<p>Я принимаю условия Соглашения на обработку и хранение моих персональных данных и даю согласие на получение маркетинговых рассылок.</p>
		</div>
	<button id="mg-mailer-email-button">Зарегистрироваться</button>
		</form>
		<div id="mg-form-error"></div>
	</div>
</div>

Пример подобной формы:

Использование скрытой переменной

Например, у вас есть такая переменная, как «Статус клиента» и в базу она занесена как {{ status_klienta }}.

Допустим, у вас есть статичная форма на странице, которая предлагает всем новым подписавшимся пользователям VIP-статус (особые скидки и прочие привелегии).

Нужно, чтобы при подписке новому подписчику добавлялся VIP-статус в платформе. Чтобы эта переменная заработала в форме, но пользователь её не вводил/выбирал, нужно сделать её скрытой.

Добавьте в код следующую конструкцию:

<input type="hidden" name="status_klienta" value="vip" />

Выглядеть это будет так:

<div id="mg-form">
  <div class="mg-email-form-wrap">
  <div class="mg-h1">Экономьте на покупках</div>
  <div class="mg-p">Подпишитесь на рассылку самых актуальных предложений.</div>
  <form onsubmit="return false;">
    <input id="mg-mailer-email" type="email" placeholder="Введите ваш email" />
    <input type="hidden" name="status_klienta" value="vip" />
    <button id="mg-mailer-email-button">Подписаться</button>
  </form>
  <div id="mg-form-error"></div>
  </div>
</div>

Использование нескольких форм на одной странице
Как задать редирект после заполнения формы
Как изменить стандартный шаблон поп-апа

Если остались вопросы — напишите в поддержку через раздел «Мои обращения», в онлайн-чате или на support@mailganer.ru