Пошаговая форма, квиз на вебфлоу. Форма опросник. Уроки webflow на русском

• Видео начинается с объяснения того, что такое пошаговая форма, также известная как "que es".  

• Она состоит из нескольких этапов, каждый из которых имеет свой прогресс-бар, который заполняется по мере заполнения формы.  

• Это помогает пользователям легче вносить информацию, так как они видят, что уже сделано, и знают, что осталось сделать.  

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

• В видео демонстрируется создание пошаговой формы, которая включает в себя использование анимации и различных элементов, таких как чекбоксы и картинки.  

• Каждый этап формы имеет свой прогресс-бар и подсвечивается, когда пользователь выбирает вариант.  

• После заполнения формы, пользователь получает отчет о том, что он выбрал на каждом этапе.  

• Форма полностью адаптивна и может быть использована для создания подобных форм для других заказчиков.  

• В видео автор объясняет, как создать форму опроса на сайте, используя HTML и CSS.  

• Он начинает с создания секции, которая будет содержать всю форму.  

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

• Автор также добавляет сетку, которая будет использоваться для организации элементов формы.  

• Автор добавляет различные элементы формы, такие как форма, кнопка отправки и ошибки.  

• Он также объясняет, как удалить ненужные элементы и настроить их внешний вид.  

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

• Он также обсуждает, как задать цвет и шрифт для кнопки.  

• Автор обсуждает настройку шрифта и кнопок в своем дизайне.  

• Он объясняет, как правильно работать с шестами и как настроить минимальную ширину для текста и райтера.  

• Затем автор настраивает кнопку "назад" и делает ее инвертированной по цвету предыдущего фона.  

• Автор добавляет анимацию и логику для кнопок, чтобы они работали плавно и не были резкими.  

• Он также добавляет задержку для анимации при наведении и при нажатии на кнопку.  

• Автор создает форму и контент для каждого слайда, используя grid-вид и задавая определенные отступы и высоту.  

• Он также обсуждает использование разных шрифтов и цветов для разных элементов.  

• Автор завершает работу над дизайном, добавляя последний пункт "стоимость" и редактируя текст.  

• Он обсуждает, как перезагрузить страницу и включить режим редактирования, чтобы продолжить работу над дизайном.  

• В видео автор объясняет, как добавить прогресс барр в слайде.  

• Он добавляет блок "прогресс линия" под основной блок "grid" и задает его высоту и цвет.  

• Затем он добавляет новый блок "онлайн линия" и задает его цвет и непрозрачность.  

• Автор подчеркивает, что важно задать правильную непрозрачность, чтобы эффект был виден.  

• Автор добавляет эффект наведения на активный пункт и меняет цвет текста.  

• Он также добавляет эффект прозрачности, чтобы фон нижней части прогресс барра был виден.  

• Автор объясняет, что важно сделать фон нижней части прогресс барра того же цвета, что и фон основной секции.  

• Автор добавляет кнопки "назад" и "вперед" в прогресс барр, но скрывает их, когда нет возможности двигаться вперед.  

• Он также добавляет второй слайд в прогресс барр, чтобы сделать его более понятным.  

• Создание дизайна с использованием блоков и стилей.  

• Добавление текста, пояснительного текста и пунктов.  

• Стилизация и настройка checkbox.  

• Добавление анимации и эффектов.  

• Добавление пунктов и настройка высоты и отступов.  

• Создание второго слайда и редактирование первого.  

• В видео автор объясняет, как создать чекбокс в презентации.  

• Он начинает с добавления галочки вместо проблемы и изменения стиля на "checked".  

• Затем он добавляет текст и цифры, чтобы показать, как это работает.  

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

• Он также объясняет, как использовать grid-танк блок для создания двух рядов элементов.  

• Автор завершает работу над чекбоксом, добавляя радио-кнопку и настраивая параметры для анимации и текста.  

• Он также обсуждает, как сделать текст синим и оранжевым при наведении.  

• Автор обсуждает создание дизайна, включая создание фоновой заливки и добавление текста.  

• Он также упоминает о необходимости сделать белую заливку и добавить текст.  

• Автор проверяет, как выглядит дизайн при наведении, и корректирует его, если необходимо.  

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

• Автор обсуждает центрирование конструкции и редактирование текста.  

• Он подчеркивает, что нельзя использовать "Lorem ipsum" или другие подобные тексты в дизайне, так как это может отпугнуть заказчиков.  

• Автор завершает работу над дизайном, включая создание следующего слайда и редактирование текста.  

• Он также обсуждает, как будет выглядеть дизайн после публикации сайта.  

• Автор объясняет, что будет делать викторину с четырьмя ячейками.  

• Он настраивает интервал между ячейками и центрирует их.  

• Затем он добавляет чекбоксы и скрывает их, чтобы сосредоточиться на создании фона.  

• Автор настраивает фон, устанавливает его размеры и делает его вертикальным.  

• Он добавляет картинку и текст, настраивает их размеры и положение.  

• Автор настраивает анимацию для элементов, включая изменение цвета, обводку и положение при наведении.  

• Он также настраивает анимацию для чекбоксов, чтобы они работали при нажатии.  

• Автор добавляет еще один чекбокс и настраивает его положение.  

• Он завершает работу над викториной, настраивая ее внешний вид и делая ее кликабельным элементом.  

• Создание формы для привлечения клиентов на сайте, выбор названия и основных элементов.  

• Добавление полей для ввода информации, настройка размеров и отступов.  

• Добавление анимации и обводки для формы, настройка размеров и отступов.  

• Создание кнопки отправки формы и настройка ее стиля.  

• Проверка работы формы, исправление ошибок и публикация сайта.  

• Автор обсуждает адаптацию адаптивного дизайна, где он делает слайдер меньше, чтобы он не занимал слишком много места на экране.  

• Он также обсуждает, как сделать доступ меньше на некоторых слайдах, чтобы они лучше вписывались в экран.  

• Автор обсуждает, как центрировать текст и кнопки на слайдах, чтобы они были более удобными для пользователей.  

• Он также говорит о том, как уменьшить размер текста и кнопок, чтобы они лучше вписывались в пространство.  

• Автор обсуждает, как адаптировать дизайн для мобильных устройств, таких как телефоны и планшеты.  

• Он говорит о том, как важно учитывать размеры экрана и как это влияет на дизайн.  

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

• Он также говорит о том, что дизайн может быть использован для создания различных форм, таких как викторины и другие интерактивные элементы.