Наша форма заявки CSS шаблон

В центре контактной формы в узкую вертикальную колонку выстроены поля для ввода эл. почты, имени и сообщения, за которыми следует кнопка «Отправить». Для создания выразительного контраста в блоке используются сине-бирюзовый фон, белый текст формы и подчеркивание полей ввода. Белая кнопка во всю ширину служит главным визуальным акцентом и четко обозначает зону действия. Под формой расположена плоская иллюстрация на тему делового сотрудничества, задающая контекст, а рядом с изображением сохраняется строка с указанием авторства Freepik. Щедрые вертикальные отступы зрительно разделяют форму и иллюстрацию.

Сине-бирюзовый контраст упорядочивает форму и иллюстрацию

Сине-бирюзовый фон задает основное визуальное поле блока, а белый цвет текста обеспечивает легкую читаемость подписей к полям эл. почты, имени и сообщения. Подчеркивание полей ввода придает трем элементам единый графический ритм, избавляя от тяжелых рамок вокруг каждого поля. Такое сдержанное решение удерживает внимание на запрашиваемой информации и сохраняет узкую центральную колонку главным визуальным центром.

Белая кнопка «Отправить» во всю ширину создает четкий контраст в завершении последовательности полей. При стилизации через CSS ее цвет, ширину, отступы и оформление текста можно легко корректировать без ущерба для исходного назначения формы. Расположенная ниже иллюстрация по центру выстраивает иное визуальное взаимодействие: она образно дополняет содержание, не споря с зоной интерактивного отклика. Строка с указанием авторства должна оставаться разборчивой, но визуально подчиненной иллюстрации и форме. Настройка цвета фона, контрастности текста, начертания линий, вертикальных отступов и акцента на кнопке позволяет сформировать гармоничный облик всей секции без изменения полей контакта и без усложнения логики. Итог — цельная визуальная система из одной формы, одной поясняющей иллюстрации и их сбалансированного расположения внутри блока.

Настроить с помощью Nicepage

При использовании Конструктор шаблонов CSS вы сможете настраивать цвета, шрифты, верхний и нижний колонтитулы, макет, столбцы и другие элементы дизайна, а также контент и изображения.

Скачать

Редактировать шаблон в автономном режиме

1. Загрузите и установите приложение Nicepage для Windows и Mac. Или плагины WordPress и Joomla из страница загрузки
2. Создайте новую страницу или выберите существующую.
3. Нажмите "Добавить новый блок", найдите идентификатор 953777 и нажмите "Ввод".

Редактировать шаблон онлайн

Запустите Онлайн-конструктор чтобы редактировать этот шаблон на нашем хостинге

Создавайте потрясающие сайты

WordPress

Windows App

Joomla

Mac OS App

HTML5

Online

Бесплатный конструктор Nicepage Builder

Более 15 000 шаблонов

Легкое перетаскивание

Без программирования

Адаптивность

Ключевые слова

Настройка этого шаблона с помощью CSS

Управление стилем для каждой страницы

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

Добавление пользовательского CSS при необходимости

Для требований к стилю, выходящих за рамки стандартных параметров редактора, используйте Пользовательский CSS для добавления целевых правил. CSS может применяться к отдельным элементам, конкретным страницам или всему веб-сайту в зависимости от масштаба настройки, а классы CSS могут использоваться для связи пользовательских правил с выбранными элементами.

Экспорт минимального CSS для каждой страницы

Для проектов, где важны размер CSS и производительность страницы, Nicepage может экспортировать минимальный CSS для каждой страницы. Вместо использования одного большого общего файла стилей, каждая страница может использовать отдельный CSS-файл, содержащий только необходимые для этой конкретной страницы правила стиля. Согласно документации Nicepage, эти CSS-файлы, специфичные для каждой страницы, могут быть примерно в десять раз компактнее, что помогает уменьшить количество ненужного CSS и улучшить скорость загрузки страницы.

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