UP TITLE
Своя страница регистрации в Тильде
Введение
Регистрация на веб-сайте – первый шаг пользователя в виртуальный мир. Однако, как сделать этот процесс не только простым, но и неповторимым? В этой статье мы рассмотрим возможности создания своей уникальной страницы регистрации в нулевом блоке Tilda. Стандартный функционал tilda publishing в этом плане максимально ограничен. Поэтому на помощь, как всегда, приходят модификации для тильды. Давайте создадим страницу регистрации в зеро блоке с помощью скриптов и узнаем, как своя страница регистрации в Тильде может улучшить опыт пользователя, подчеркнуть бренд, и собрать ценные данные.
Преимущества своей страницы регистрации в Тильде
Улучшенный опыт пользователя
Своя страница регистрации в zero block создает привлекательное визуальное впечатление, делая процесс регистрации более приятным для посетителя. Индивидуальный дизайн и визуальные элементы могут сделать этот шаг интересным и запоминающимся.
Укрепление идентичности бренда
Tilda zero block предоставляет широкие возможности для внедрения корпоративного стиля в страницу регистрации. Логотипы, цветовые схемы и шрифты помогут усилить узнаваемость бренда, подчеркивая его уникальность и стиль.

Больше доверия от пользователей
  • Уникальный дизайн и персонализированный подход создают впечатление заботы о пользователе. Это способствует установлению доверительных отношений, что важно для удержания посетителей и формирования лояльности к вашему бренду.
Своя страница регистрации в zero block. Шаг за шагом
Приступим к делу. Для того, чтобы страница регистрации вообще появилась на вашем сайте, сначала необходимо создать и настроить личный кабинет. Подробнее об этом вы можете узнать в нашей предыдущей статье Создание и настройка личного кабинета в Тильде.
А в этой статье мы предлагаем вам пошаговую инструкцию по созданию кастомной страницы регистрации в tilda zero block:
  1. Создайте отдельную страницу на вашем тильда сайте и назовите её, например, «Регистрация»
  2. В настройках страницы в поле «АДРЕС СТРАНИЦЫ» пропишите ссылку на стандартную страницу регистрации. Её можно найти в личном кабинете. Если вы хотите настроить общую регистрацию на сайте, то в адресе страницы нужно прописать «members/signup»
  3. Если вы хотите настроить регистрацию в конкретную группу, то откройте эту группу в личном кабинете и скопируйте ссылку из «Ссылка для регистрации в эту группу». Пример: «members/signup/group/nvvkddd6blbpsxr-podpisciki»
  4. На своей странице регистрации создайте зеро блок. Вы можете стилизовать его по своему усмотрению
  5. В зеро блоке нажмите на кнопку «+» и выберите «Add HTML». В этом html элементе будет находиться форма регистрации (имя, почта, пароль). Ширина и расположение полей ввода равны ширине и расположению html элемента
  6. Откройте html элемент и скопируйте в него первую часть скрипта (Скрипт найдете в конце этой главы)
  7. В этом скрипте можно полностью стилизовать поля ввода под дизайн вашего сайта
  8. После этого нажмите на кнопку «+» и выберите «Add Button»
  9. Стилизуйте кнопку, нажмите на нее правой кнопкой мыши и выберите «Add CSS Class Name»
  10. В появившемся поле пропишите класс «signup-button»
  11. Закройте зеро блок и добавьте после него HTML блок «Т123»
  12. Скопируйте в него вторую часть скрипта (Скрипт найдете в конце этой главы)
  13. Сохраните изменения и опубликуйте страницу
Вы создали и настроили свою кастомную страницу регистрации в зеро блоке Тильды.
<!--Первая часть кода-->

<style>
/*Стили полей ввода*/
input {
    width: 100%;  /* Ширина полей (лучше не менять) */
    box-sizing: border-box;
    height: 40px; /* Высота */
    margin-bottom: 30px; /* Отступ снизу */
    padding: 0 20px; /* Внутренний отступ слева и справа по 20px */
    border: 1px solid white; /* Размер границы, тип и цвет */
    border-radius: 30px; /* Радиус скруглений границ */
    background-color: transparent; /* Фоновый цвет */
    color: white; /* Цвет текста */
    font-size: 18px; /* Размер шрифта */
    outline: none;
}
/*Стили подсказок внутри полей ввода*/
input::placeholder {
    color: white; /* Цвет подсказки */
    font-size: 18px; /* Размер шрифта */
}
/*Стили кнопки регистрации*/
.signup-button {
    cursor: pointer; /* Тип курсора */
}
/*Стили сообщений об ошибке*/
.tlk-input-error_show, .tlk-input-error_error {
    width: 100%; /* Ширина сообщения (лучше не менять) */
    margin: 0; /* Внешние отступы */
    padding: 10px 20px; /* Внутренние отступы сверху и снизу, слева и справа */
    color: white; /* Цвет сообщения */
    font-size: 18px; /* Размер шрифта */
    background-color: red; /* Цвет фона */
    text-align: center; /* Расположение текста */
}

</style>

<form method="post" id="form-signup" action="/">
                
    <input type="text" name="name" placeholder="Ваше имя" class="" required=""> <!-- Вместо "Ваше имя" можно прописать свою подсказку-->
    
    <input type="email" name="login" placeholder="Ваш Email" class="" required=""> <!-- Вместо "Ваш Email" можно прописать свою подсказку-->
                
    <input type="password" name="password" placeholder="Создайте пароль" class="" required=""> <!-- Вместо "Создайте парль" можно прописать свою подсказку-->
            
    <div class="tlk-input-error tlk-input-error_all"></div>
    <button type="submit" class="oldbutton" style='display:none !important;'><span class="tlk-loadicon"></span></button>
</form>



<!--Вторая часть кода-->

<style>
    .oldbutton {
    visibility: hidden !important;
}
.tlk-password-toggle {
    display: none;
}
#app {
    display:none;
}
#form-signup {
    width: 100%;
}
</style>
<script src="https://members2.tildacdn.com/frontend/js/tilda-members-init.min.js?t=1706628590" id="tilda-membersarea-js"></script><script src="https://members2.tildacdn.com/frontend/js/tilda-members-sign-dict.min.js"></script><script src="https://members2.tildacdn.com/frontend/js/tilda-members-sign.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {var signUpButton = document.querySelector('.signup-button');signUpButton.addEventListener('click', function() {var oldButton = document.querySelector('.oldbutton');if (oldButton) {oldButton.click();}});});
</script>
Заключение
  • Создание своей страницы регистрации в нулевом блоке Tilda – это не просто возможность, а стратегическое решение для повышения эффективности вашего веб-присутствия. Персонализация, динамичность и внимание к деталям не только улучшают опыт пользователя, но и укрепляют бренд, делая его более узнаваемым и доверенным. Используя эти принципы, вы можете не только привлечь больше пользователей, но и удержать их, предоставляя уникальный и запоминающийся онлайн-опыт. Персонализируйте, улучшайте, и создавайте ценность – это ключ к успешной регистрации и взаимодействию с вашим веб-сайтом.

© Mark Lungrin
Made on
Tilda