Собственная кнопка формы нужна, когда штатное оформление не подходит макету: например, действие должно выглядеть как отдельная иллюстрация. При этом посетитель ожидает обычную отправку данных, проверку обязательных полей и понятный ответ. Изображение со ссылкой само по себе этих действий не выполняет. Начинайте с работающей формы и меняйте только её внешний способ запуска.
Что подготовить до эксперимента
Сделайте копию страницы, запишите адрес исходной версии и сохраните собственные вставки отдельно. В учебном примере используем форму записи на знакомство со студией: имя, электронная почта и сообщение. Это вымышленный сценарий для проверки, а не реальное обещание консультации. Для теста достаточно контакта, который принадлежит проверяющему; чужие персональные данные не нужны.
В руководстве Zero Block описаны элементы формы и подключение сервисов. Сначала отправьте данные штатной кнопкой. Проверьте не только сообщение на экране, но и запись в выбранном приёмнике. Если этого результата нет, собственная кнопка лишь добавит ещё одну возможную причину ошибки.
Как разобрать существующий пример
- Откройте материал «Своя кнопка для формы в Zero Block». Рассмотрите его как конкретный пример, а не универсальную настройку всех форм.
- Сопоставьте код с вашей страницей: какой элемент получает нажатие, какая форма вызывается и где находится её штатная кнопка отправки.
- Проверьте ограничения примера. Опубликованная инструкция рассчитана на одну форму; перенос на несколько форм требует отдельной адаптации и тестирования.
- Используйте идентификатор своего блока. Идентификатор из чужого примера указывает на чужую структуру и не определяет нужную форму на вашем сайте.
- Добавьте изменение на копии и опубликуйте её для проверки. Предпросмотр редактора не заменяет исполнение собственных вставок на опубликованной странице.
Не скрывайте штатный запуск окончательно до успешной проверки. Если декоративный элемент умеет только переходить по ссылке, отдельно убедитесь, что обработчик превращает нажатие именно в отправку нужной формы, а не в прокрутку или скачок страницы.
Механизм примера с одной формой
В исходном демонстрационном решении собственная кнопка получает ссылку #myform. Обработчик отменяет переход по этой ссылке и вызывает нажатие штатной кнопки внутри выбранного блока. Ниже показана та же схема с условным идентификатором. Замените rec123456789 идентификатором вашего Zero Block. Это пример привязки к опубликованной разметке, а не отдельный поддерживаемый API Tilda.
<script>
$(document).ready(function () {
$('a[href="#myform"]').on('click', function (event) {
event.preventDefault();
$('#rec123456789 .t-submit').click();
});
});
</script>
Добавьте блок T123 из категории «Другое», вставьте код и опубликуйте тестовую страницу. Этот способ вставки подтверждён официальной инструкцией HTML. В примере предполагается, что на странице доступна используемая библиотека, нужная форма содержит штатную кнопку с указанным классом и такая ссылка одна. Если эти условия не соблюдены, код нужно адаптировать, а не объявлять рабочим. Сначала оставьте штатную кнопку видимой и сравните обе отправки. Убирайте её визуальное оформление только после проверки; нельзя лишать человека единственного доступного способа отправки.
Учебная проверка по состояниям
Сначала нажмите кнопку с пустым обязательным полем: посетитель должен увидеть, что исправить, а введённые сведения не должны беспричинно пропасть. Затем заполните поля и отправьте тест. Сравните значения в форме и приёмнике, включая сообщение с несколькими строками. Отметьте время теста, чтобы отличить его от предыдущего обращения.
Проверьте кнопку клавишей Tab и предусмотренным способом активации. Если вместо неё используется изображение, одной красивой картинки недостаточно: действие должно иметь понятное название и управляться без мыши. На телефоне проверьте нажатие пальцем, положение относительно полей и отсутствие декоративного слоя поверх области действия.
Как локализовать ошибку
- Нет реакции: проверьте загрузку вставки и соответствие селектора опубликованному блоку.
- Страница прокручивается: возможно, срабатывает обычная ссылка, а обработчик не подключился.
- Отправляется другая форма: проверьте области действия селекторов и повторяющиеся имена ссылок.
- Появляется успех, но данных нет: вернитесь к проверке приёмника; визуальное сообщение не доказывает доставку.
- Нажатие работает только мышью: пересмотрите сам интерактивный элемент, а не только его цвет.
Когда вернуть штатную кнопку
Откат нужен, если собственное решение нарушает проверку полей, повторяет отправку или не работает на одном из устройств. Уберите только добавленный обработчик, восстановите штатное оформление и повторите тот же тест. Сохранённый исходник позволяет вернуть рабочий сценарий без восстановления всей страницы наугад.
Для диагностики изучите проверку неотправляющейся формы, а для структуры собственного элемента — различие кнопки и ссылки. Если хотите освоить такие задачи последовательно, посмотрите программу курса Perkova&Perkova и уточните подходящий уровень практики.
