Настройка SDK-формы
Введение
AIO SDK позволяет загружать и настраивать форму на ваших лендингах. Достаточно поставить в HTML макрос {{form}}: после загрузки скрипта форма встраивается в это место со стилями и поведением, заданными в SDK.
Из этого руководства вы узнаете:
- Как настраивать стили, параметры и поведение формы глобально или локально.
- Как менять структуру формы, её шаги и элементы управления.
Как работает форма
- Form Loading: поставьте макрос
{{form}}в HTML-код лендинга. При загрузке страницы AIO SDK заменит этот макрос на готовую форму. - Default Behavior & Styles: по умолчанию форма использует стили и поведение, заданные в AIO SDK. Их можно переопределить глобально (для всех лендингов) или локально (для отдельных лендингов).
Пример кода в HTML лендинга:
{{form}}Когда AIO SDK загружен, этот макрос заменяется на реальную форму.
Глобальная и локальная настройка
- Global: используйте AIO SDK Macros Collection в Settings → Macros, чтобы задать стили и параметры формы по умолчанию (глобальные), которые применяются ко всем лендингам.
- Local: вставьте блоки
<style>или<script>прямо в HTML лендинга, чтобы переопределить или дополнить настройки для этой конкретной страницы.
Примеры настройки формы
Настройка стилей
Полный список доступных настроек стилей формы приведён в конце этого руководства.
Ниже пример блока <style> с изменёнными переменными, которые переопределяют стили по умолчанию:
Пример скрипта: переопределение стилей по умолчанию
<style>
.aio-sdk-form {
--aio-sdk-form-padding: 30px 30px 20px;
--aio-sdk-input-bg: white;
--aio-sdk-input-font-size: 1em;
--aio-sdk-input-border: #ced4da;
--aio-sdk-input-border-radius: 0px;
--aio-sdk-input-padding: 15px 20px;
--aio-sdk-input-color: black;
--aio-sdk-submit-bg: #60359b;
--aio-sdk-submit-padding: 15px 20px;
--aio-sdk-submit-border: transparent;
--aio-sdk-submit-border-radius: 0px;
--aio-sdk-submit-color: white;
--aio-sdk-submit-font-size: var(--aio-sdk-input-font-size);
}
</style>Как настроить глобальные стили
- Перейдите в Settings→Macros и найдите AIO SDK Macros Collection. Нажмите на него правой кнопкой мыши и выберите “Edit Macros”.
- Добавьте скрипт с настройками стилей в окно Code.
- После добавления эти настройки автоматически применятся ко всем лендингам, использующим SDK-форму.
Как настроить локальные стили
Если конкретный лендинг нужно оформить или настроить иначе, вставьте собственный блок <style> в HTML этой страницы. Локальные стили переопределят глобальные для этой страницы.
- Перейдите в Landings. Нажмите правой кнопкой мыши на нужный лендинг и выберите “Manage Landing”.
- В блоке Code вставьте блок
<style>в HTML лендинга, чтобы переопределить или настроить стили формы.
Настройка поведения формы
Полный список доступных настроек поведения формы с описаниями приведён в конце этого руководства.
Расширенное поведение и функциональность формы тоже можно настроить, изменяя параметры SDK: локально через push-скрипт или глобально через макросы.
Ниже примеры локального push-скрипта и глобального скрипта AIO SDK:
Как настроить глобальное поведение
- Перейдите в Settings→Macros и найдите AIO SDK Macros Collection. Нажмите на него правой кнопкой мыши и выберите “Edit Macros”.
- Добавьте скрипт поведения формы. Глобальная конфигурация поведения формы вставляется как дополнительный блок
form: {}. - После добавления эти настройки автоматически применятся ко всем лендингам, использующим SDK-форму.
Пример скрипта: скрипт AIO SDK Macros Collection с блоком form: {}
<script src="/aio-static/sdk/main.js?v=1.0.12"></script>
<script>
window.aioBus = window.aioBus || [];
window.aioBus.push({
type: "config",
config: {
features: {
backFix: true,
fbCapi: true,
fbPixel: true,
form: true,
browserTimezone: true,
landed: true,
scrolling: true,
sessionRecords: true,
timeOnLandings: true,
windowDimensions: true,
},
backFix: {
enabledBackFix: () => ['xxx', 'yyy', 'ddd'].includes(aio.landing.lander_type_uuid),
enableStrangeUrlParameters: true,
pathName: '27f97629ddf7499c',
localStorageKey: '_____utm',
link: '{{link}}&backfix=true',
},
form: {
"url": "/",
"selector": ".aio-form",
"defaultCss": true,
"successTimeoutSeconds": 5,
"language": "navigator.language.slice(0, 2)",
"defaultCountryCode": "GB",
"stepsShowing": true,
"collectDataEvent": "blur",
"rejectedMessage": "We cant register you at this time.",
"intlParameters": {
"nationalMode": true,
"autoPlaceholder": "aggressive"
}
}
}
});
</script>
Как настроить локальное поведение
Если поведение формы нужно настроить для конкретного лендинга, вставьте локальный push-скрипт <script> в HTML страницы после тега {{aio}}. Локальные скрипты переопределяют глобальные настройки формы для этой страницы.
NOTE: Local push script must be inserted after the {{aio}} tag to correctly override global Form settings.
- Перейдите в Landings. Нажмите правой кнопкой мыши на нужный лендинг и выберите “Manage Landing”.
- В блоке Code вставьте push-скрипт в HTML лендинга, чтобы переопределить или настроить поведение формы.
Example script: Local push script with the form: {} block
<script>
window.aioBus.push({
type: "config",
config: {
form: {
// In this example, we:
// change form language to always be EN
// modify timeout from 5 to 10 seconds
// change message on reject text
language: "en",
successTimeoutSeconds: 10,
rejectedMessage: "You've been rejected.",
}
}
});
</script>
Полезные примеры
Пример 1: локальная подстройка под цветовую тему лендинга
Допустим, у вас есть лендинг в зелёной цветовой гамме, и вы хотите подстроить форму под эту тему (чтобы она не выглядела чужеродно).
С доступными CSS-переменными это делается легко: можно изменить цвета кнопок, рамки полей и многое другое.
- Форма по умолчанию: так форма может выглядеть до применения локальных переопределений:
- Тема лендинга: на этом лендинге основной цвет зелёный, поэтому все остальные кнопки зелёные и немного отличаются формой и стилем:
- Переопределяем переменные: меняем цвет кнопки отправки на зелёный, чтобы он соответствовал общей теме. Для этого вставляем следующий блок
<style>в HTML лендинга через Landing Editor:Пример тега style
<style> .aio-sdk-form { --aio-sdk-submit-bg: green; --aio-sdk-submit-border-radius: 12px; } </style>
- Результат: после этого простого изменения форма соответствует зелёной цветовой схеме и смотрится гораздо органичнее:
Пример 2: глобальная настройка поведения формы
- Глобальная форма по умолчанию: по умолчанию наша форма настроена так:
- Показывает сообщение “We can't register you at this time”, если Destination отклоняет визит.
- Выдерживает паузу 5 секунд перед отправкой лидов в Destination после успешной регистрации.
- Автоматически переводит форму на язык визита.
- Скрипт макроса: чтобы изменить поведение глобально для всех лендингов, отредактируйте скрипт AIO SDK Macros Collection. Например, настройте форму так, чтобы она:
- Показывала "You've been rejected." для отклонённых лидов.
- Выдерживала паузу 10 секунд.
- Всегда использовала EN как язык по умолчанию.
- Результат: лендинг с этими настройками теперь будет применять обновлённую конфигурацию.
Пример скрипта AIO SDK Macros Collection
<script src="/aio-static/sdk/main.js?v=1.0.12"></script> <script> window.aioBus = window.aioBus || []; window.aioBus.push({ type: "config", config: { features: { backFix: true, fbCapi: true, fbPixel: true, form: true, browserTimezone: true, landed: true, scrolling: true, sessionRecords: true, timeOnLandings: true, windowDimensions: true, }, backFix: { enabledBackFix: () => ['xxx', 'yyy', 'ddd'].includes(aio.landing.lander_type_uuid), enableStrangeUrlParameters: true, pathName: '27f97629ddf7499c', localStorageKey: '_____utm', link: '{{link}}&backfix=true', }, form: { language: "en", successTimeoutSeconds: 10, rejectedMessage: "You've been rejected.", } } }); </script>
Полный список настроек по умолчанию, которые можно переопределить
Все стили по умолчанию
Ниже полный список CSS-переменных по умолчанию, которые можно переопределить глобально или локально:
--aio-sdk-form-padding: 30px 30px 20px;
--aio-sdk-form-layout-gap: var(--aio-sdk-input-margin);
--aio-sdk-form-steps-gap: 60px;
--aio-sdk-form-steps-margin: 15px;
--aio-sdk-form-step-diameter: 35px;
--aio-sdk-form-step-font-size: var(--aio-sdk-input-font-size);
--aio-sdk-form-step-line-color: var(--aio-sdk-input-bg);
--aio-sdk-form-step-bg: var(--aio-sdk-input-bg);
--aio-sdk-form-step-border: var(--aio-sdk-submit-bg);
--aio-sdk-form-step-color: var(--aio-sdk-input-color);
--aio-sdk-form-step-active-bg: var(--aio-sdk-submit-bg);
--aio-sdk-form-step-active-border: var(--aio-sdk-submit-bg) ;
--aio-sdk-form-step-active-color: var(--aio-sdk-submit-color);
--aio-sdk-input-label-color: black;
--aio-sdk-input-label-font-size: 1em;
--aio-sdk-input-label-margin : 3px;
--aio-sdk-input-margin: 15px;
--aio-sdk-input-bg: white;
--aio-sdk-input-font-size: 1em;
--aio-sdk-input-border: #ced4da;
--aio-sdk-input-border-radius: 0px;
--aio-sdk-input-padding: 15px 20px;
--aio-sdk-input-color: black;
--aio-sdk-input-textarea-size: 100px;
--aio-sdk-input-checkbox-gap: 5px;
--aio-sdk-submit-bg: #60359b;
--aio-sdk-submit-padding: var(--aio-sdk-input-padding);
--aio-sdk-submit-border: transparent;
--aio-sdk-submit-border-radius: 0px;
--aio-sdk-submit-color: white;
--aio-sdk-submit-font-size: var(--aio-sdk-input-font-size);Все настройки поведения формы
Это JSON-конфигурация формы по умолчанию. Любое из этих свойств можно переопределить:
{
"form": {
"url": "/",
"selector": ".aio-form",
"defaultCss": true,
"successTimeoutSeconds": 5,
"language": "navigator.language.slice(0, 2)",
"beforeSubmitPromises": [],
"defaultCountryCode": "GB",
"stepsShowing": true,
"collectDataEvent": "blur",
"rejectedMessage": "We cant register you at this time.",
"activeStepClass": "aio-sdk-step-container-active",
"availableStepClass": "aio-sdk-step-container-available",
"hiddenClass": "aio-sdk-form-hidden",
"intlParameters": {
"nationalMode": true,
"autoPlaceholder": "aggressive"
},
"templates": {
"steps": "<div class='aio-sdk-steps-container'>%steps%</div>",
"step": "<div class='aio-sdk-step-container' data-step='%step%'>%step%</div>",
"layout": "<div class='aio-sdk-layout-container'>%layout-rows%</div>",
"layout-row": "<div class='aio-sdk-row-container'>%layout-columns%</div>",
"layout-column": "<div data-form-item-key='%form-item-key%' class='aio-sdk-column-container'></div>",
"hidden": "<div><input type='hidden' data-step-rule='%key%' name='%key%' value='%value%'/></div>",
"text": "<div class='aio-sdk-input-container'><input type='text' data-step-rule='%key%' class='aio-sdk-input' placeholder='%placeholder%' name='%key%' value='%value%'/></div>",
"number": "<div class='aio-sdk-input-container'><input type='number' data-step-rule='%key%' class='aio-sdk-input' placeholder='%placeholder%' name='%key%' value='%value%'/></div>",
"textarea": "<div class='aio-sdk-input-container'><textarea class='aio-sdk-input' data-step-rule='%key%' placeholder='%placeholder%' name='%key%'>%value%</textarea></div>",
"select": "<div class='aio-sdk-input-container'><select class='aio-sdk-input' data-step-rule='%key%' name='%key%'/>%select-options%</select></div>",
"select-option": "<option value='%option-value%' %selected%>%option-label%</option>",
"select-option-placeholder": "<option hidden value=''>%placeholder%</option>",
"phone": "<div class='aio-sdk-input-container'><input type='tel' data-step-rule='%key%' class='aio-sdk-input' placeholder='%placeholder%' name='%key%' value='%value%'/></div>",
"email": "<div class='aio-sdk-input-container'><input type='email' data-step-rule='%key%' class='aio-sdk-input' placeholder='%placeholder%' name='%key%' value='%value%'/></div>",
"date": "<div class='aio-sdk-input-container'><input type='date' data-step-rule='%key%' class='aio-sdk-input' placeholder='%placeholder%' name='%key%' value='%value%'/></div>",
"checkbox": "<div class='aio-sdk-input-container aio-sdk-input-checkbox-container'><input data-step-rule='%key%' type='checkbox' class='aio-sdk-input-checkbox' name='%key%' id='%key%' value='%value%'/><label for='%key%'>%placeholder%</label></div>",
"submit": "<div class='aio-sdk-input-container'><input value='%placeholder%' data-value='%placeholder%' data-loading='%loading%' data-success='%success%' data-step='%step%' type='submit'/></div>"
}
}
}Как настроить SubmitPromises и BeforeSubmitPromises, читайте в руководстве AIO SDK Form: Submit Promises и Before Submit Promises.
