🎯 Как добавить и настроить форму приёма заявок

Помимо базовых настроек полей и email'а для получения заявки вы можете настроить внешний вид своей формы и добавить свою политику конфиденциальности.

Чтобы добавить форму на слайд, в редакторе сайта выберите элемент «Форма»:

Слева появится меню базовых настроек формы:

1 – удаление формы

2 – текст, который отображается НА кнопке-форме

3 – поле для почты, на которую будут приходить уведомления о новых заявках

4 – галочки полей формы, можно выбрать минимум одно поле, которое будет указывать человек в форме. Например, Имя и Email:

5 – высота кнопки в пикселях

6 – ширина кнопки (в пропорциях к экрану)

7 – настройки расположения кнопки на слайде в пропорциях к экрану. Если хотите разместить кнопку справа и снизу, то меняйте только правое и нижнее значения.

8 – загрузка собственной кнопки в формате PNG или GIF.

Только в мобильной версии конструктора можно также настроить цвет кнопки.

Настройки внешнего вида форм

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

После подключения тарифа к сайту зайдите в раздел «Мои сайты», наведите мышку на картинку сайта и внизу появится ссылка «Настройки»:

Вам нужно будет установить код скрипта в поле «Вставка прочих скриптов в <body>».

Далее выбирайте, что вам нужно изменить во внешнем виде форм.

Название формы

Замените в скрипте текст внутри кавычек 'Заявка' на свой и вставьте в <body> сторилендинга.

<script>
$(document).ready(function () {
$('.c-modal-content h3').html('Заявка');
});
</script>

Когда нужно настроить индивидуально заголовок для каждой формы, то пригодится этот код:

<script>
$(document).ready(function () {
$('.c-modal-content h3').each(function (index) {
if (index == 0 || index == 2 || index == 4)
{
$(this).html('Заголовок 1');
}
if (index == 6)
{
$(this).html('Заголовок 2');}
})
})
</script>

'index == 0' – это указатель 1-й формы на сайте

'index == 2' – это указатель 2-й формы на сайте

и т.д. с шагом 2.

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

'index == 1' – это указатель заголовка сообщения после отправки формы для 1-й формы на сайте

'index == 3' – это указатель заголовка сообщения после отправки формы для 1-й формы на сайте

Таким образом возможно настроить заголовок экрана после отправки формы.

Замена политики конфиденциальности

Замените в скрипте ссылку внутри кавычек "https://app.storyland.mobi/privacy" на свою и вставьте в <body> сторилендинга.

<script>
$(document).ready(function () {
$('.c-modal-content .form-info div p').html('text');
});
</script>
<script>
$(document).ready(function () {
var text = `
Заменить на свой текст. `
$('.c-modal-content .form-info div p').html('<p>'+ text + '</p>' + '<p>Отправляя данные Вы соглашаетесь с<a href="https://app.storyland.mobi/privacy" target="_blank" class="privacy" tabindex="-1">политикой конфиденциальности</a></p>');
});
</script>

Изменение текста после отправки заявки

Замените в скрипте текст внутри кавычек

'title' - заголовок

'p1' - первый абзац

'p2' - второй абзац

'click' - текст кнопки

на свой и вставьте в <body> сторилендинга.

<script>
var title = 'title'
var p1 = 'p1'
var p2 = 'p2'
var a = 'click'
$('.t-y').each(function() {
$(this).css('width', '100%')
$(this).find('h3').html(title)
$(this).find('p').eq(0).html(p1)
$(this).find('p').eq(1).html(p2)
$(this).find('a').html(a)
})
</script>

Редирект после отправки заявки

Замените в скрипте текст внутри кавычек 'https://storyland.mobi' на свой и вставьте в <body> сторилендинга.

<script>
var url = 'https://storyland.mobi';
$('.form-submit').each(function() {
this.addEventListener('click', function() {
       var stopRedirect = false
       var formData = $(this).parent().parent()
       var nameInput = formData.find('.user-name-input')
       var isNameHide = nameInput.data('hide')
       var phoneInput = formData.find('.user-phone-input')
       var isPhoneHide = phoneInput.data('hide')
       var emailInput = formData.find('.user-email-input')
       var isEmailHide = emailInput.data('hide')
       var name = nameInput.val()
       var phone = phoneInput.val()
       phone = (phoneInput.parent().find('.iti__selected-dial-code').text().trim() + ' ' + phone.split('-').join('').trim())
       var email = emailInput.val()
       var firstLevelValidate = true
       if (name.trim() == '' && !isNameHide) {
       firstLevelValidate = false
       }
       if (phone.trim().length < 17 && !isPhoneHide) {
       firstLevelValidate = false
       }
       if (email.trim() == '' && !isEmailHide) {
       firstLevelValidate = false
       }
       if (!isEmail(email) && !isEmailHide) {
       firstLevelValidate = false
       }
       if (!firstLevelValidate) {
       return;
       }
       window.open(url,'_blank');
  })
})
</script>

ВСЁ! Сохраните изменения, переопубликуйте сайт
и ваша форма настроена.

Работает на