Форма обратной связи

Стилизация CSS

Также написал комментарии по CSS-коду.

/* Подключение шрифта Roboto */ @import url("https:/*fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); /* Убираем все отступы */ * < margin: 0; padding: 0; box-sizing: border-box; >*, *::after, *::before < box-sizing: inherit; >/* При расчете размеров инпутов учитываем внутренние отступы и границы */ input, textarea < box-sizing: border-box; >/* В body устанавливаем шрифт, ширину и высоту, а также фон */ body < font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.2; width: 100%; min-height: 100vh; background: linear-gradient(45deg, #fff1eb, #ace0f9); display: flex; justify-content: center; /* чтобы контейнер */ align-items: center; /* был по центру */ >/* Ограничиваем контейнер по ширине 1000px */ .container < width: 100%; max-width: 1000px; padding: 0 20px; >/* Стили самой формы */ .content < display: flex; /* делаем колонки в ряд */ align-items: center; /* выравниваем по центру */ justify-content: space-between; /* колонки растянутся на всю ширину */ background: #fff; padding: 40px; border-radius: 5px; box-shadow: 4px 4px 8px 0 rgba(34, 60, 80, 0.2); >/* Стили левой колонки */ .left-side < width: 25%; /* занимает 25% общей ширины */ height: 100%; /* растягиваем на всю высоту */ position: relative; /* позиционирование относительное (для ::before) */ display: flex; flex-direction: column; /* внутри элементы располагаем в колонку */ >/* Стили разделительной линии между левой и правой колонкой */ .left-side::before < content: ""; /* контент нам не нужен */ position: absolute; /* позиционируем относительно .left-side */ height: 70%; /* высота 70% от .left-side */ width: 2px; /* ширина 2px */ background: #afafb6; right: -15px; /* позиционируем справа + отступ 15px (справа) */ top: 50%; /* выравниваем по центру */ transform: translateY(-50%); /* выравниваем по центру */ >/* Стили правой колонки */ .right-side < width: 75%; /* занимает 75% общей ширины */ margin-left: 75px; >/* Элементы левой колонки: адрес, телефон, email */ .details < margin-bottom: 15px; text-align: center; >/* Общие стили для иконок */ .details i < font-size: 25px; /* задаем размер */ color: #3e2093; /* задаем цвет */ margin-bottom: 10px; >/* Стили для заголовков левой колонки */ .topic < font-size: 18px; font-weight: 500; margin-bottom: 7px; /* отступ снизу 7px */ >/* Стили для текста левой колонки */ .text-one, .text-two < font-size: 14px; color: #afafb6; >/* Заголовок правой колонки */ .topic-text < font-size: 23px; font-weight: 600; color: #3e2093; margin-bottom: 10px; >/* Текст правой колонки */ .right-side p < margin-bottom: 20px; >/* Контейнер для input'ов формы */ .input-box < height: 50px; /* по сути задаем высоту input'а */ width: 100%; /* ширина на всю ширину правой колонки (с учетом padding) */ margin-bottom: 20px; /* отступаем снизу 20px */ >/* Стили для input и textarea (поле сообщение) */ .input-box input, .input-box textarea < height: 100%; /* растягиваем на всю высоту контейнера 50px */ width: 100%; /* растягиваем на всю ширину */ border: none; /* убираем внешние края */ border-radius: 5px; /* скругляем края */ background: #f0f1f8; /* задаем цвет фона */ padding: 0 20px; /* отступ справа и слева 20px */ >/* Отдельно стилизуем поле сообщение */ .input-box textarea < resize: none; /* чтобы нельзя было менять высоту */ padding: 20px; font-family: "Roboto", sans-serif; >/* Это контейнер для поля сообщение */ .message-box < min-height: 110px; /* минимальная высота 110px */ >/* Стили для контейнера кнопки */ .button < display: inline-block; /* делаем блочно-строчный элемент */ >/* Стили для самой кнопки */ .button input[type="button"] < color: #fff; font-size: 18px; background: #3e2093; outline: none; border: none; padding: 10px 20px; border-radius: 7px; transition: 0.2s; /* чтобы плавно менялся цвет при наведении (:hover) */ >/* Меняем цвет фона при наведении на кнопку */ .button input[type="button"]:hover

Адаптация под мобильную версию

Эти стили можете вставить в конце style.css, либо создать отдельно файл для стилей мобильной версии (mobile.css)

/* Меняем стили при ширине экрана меньше 800px */ @media (max-width: 800px) < /* Теперь форма (правая колонка) будет сверху, а элементы (левая колонка) снизу */ .content < height: 100%; flex-direction: column-reverse; /* располагаем в колонку и реверсивно */ >/* Внутри левой колонки внутренние элементы располагаем в ряд */ .left-side < margin-top: 50px; flex-direction: row; /* располагаем элементы (адрес, телефон, email) в ряд */ width: 100%; /* левая колонка на всю ширину */ justify-content: center; flex-wrap: wrap; /* перенос элементов, если не хватит места */ >.details < margin-right: 20px; >.details:last-child < margin-right: 0; >/* Убираем разделительную линию */ .left-side::before < display: none; >/* Правая колонка теперь на всю ширину и не имеет отступа слева */ .right-side < width: 100%; margin-left: 0; >>

Собственно, должно получиться в итоге так:

Исходный код

Все исходники мы можете скачать с моего GitHub.

Надеюсь вам помогла эта статья. На связи и до новых встреч!

Источник

85 Stylish CSS forms

Here is a collection of some of the most stylish CSS forms made with just HTML and CSS.

You may also like

• CSS Contact Forms
• 75 CSS Text Animations You Can Use
• 15 Amazing CSS Animated Background for you to try
• 57 Beautiful CSS Cards examples to improve your UI
• 19 Cool CSS Loading Animation to inspire you
• 17 Fancy CSS Search Boxes
• 21 Modern CSS menu examples
• 23 Fantastic CSS Hover Effects
• 19 CSS Border Animations you can implement
• 15 Stylised CSS Tables
• 13 Pure CSS Dropdown Menus
• 15 Creative CSS Filter Examples
• 35 Unique CSS Text Effects
• 15 CSS Sliders you can use
• 21 New Bootstrap Login Forms for you
• 19 Bootstrap Profiles you can use for yourself
• 13 Material Design Login Forms
• 35 Cool CSS Select Boxes
• 15 CSS Range Sliders you can use today
• 35 Creative use of CSS clip-path examples
• 29 Unique CSS Toggle Switches
• 41 Beautiful CSS Animation Examples

Animated Login Form

Dev: Alvaro Montoro

Animated Login Form

Dev: Alex Cornejo

Simple Login Form Animated

Dev: Himanshu C

Animated-Login-Form

See the Pen Animated-Login-Form by Swarup Kumar Kuila (@uiswarup) on CodePen.

Dev: Swarup Kumar Kuila

Animated Login Form

Dev: Stack Findover

Animated Login Form

Dev: Torben Colding

Neumorphic form

Dev: Pratham

Neumorphic form

Dev: Philip Lahner

Simple Sign In Form

Dev: John Bowie

Minimal Sign-In Form With Bulma.io

Dev: Paul Barker

Login Screen Animation

Dev: Johan Fagerbeg

Placeholders

Dev: Mikael Ainalem

See the Pen Subscribe by Omar Dsooky (@linux) on CodePen.

Dev: Omar Dsooky

Day 001 Login Form

Dev: Mohan Khadka

See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.

Dev: Tyler Fry

Card component with floating labels

Dev: Håvard Brynjulfsen

Login form. Svg animation

Dev: @BrawadaCom

Abstract Sign Up Form – Day 2 – 100 DAYS – 2020

Dev: Ricky Eckhardt

Login Form with floating placeholder and light button

Dev: Soufiane Khalfaoui HaSsani

Log In / Sign Up – Pure CSS

Dev: Ivan Grozdic

See the Pen Login by Marco Biedermann (@marcobiedermann) on CodePen.

Dev: Marco Biedermann

Animated Login Form

Dev: Munsif Mujtaba

Placeholders

See the Pen Placeholders by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Neumorphism Login Form

Dev: Ricardo Oliva Alonso

Dev: Mike Young

Login form using HTML5 and CSS3

Dev: Brad Bodine

Sleek Login Form

Dev: Tony Banik

CSS Newsletter with Animated Floating Input Labels

Dev: Bilal.Rizwaan

Newsletter Form Dribble to HTML

Red Newsletter Form

Dev: Sazzad

See the Pen form by Arefeh hatami (@arefeh_htmi) on CodePen.

Dev: Arefeh hatami

Pupassure Sign Up Form

Dev: Ricky Eckhardt

Less annoying form

See the Pen Less annoying form by Andy Fitzsimon (@andyfitz) on CodePen.

Dev: Andy Fitzsimon

Transparent Material Login Form

Dev: alphardex

POP ART Button

Dev: Ahmad Nasr

Login form UI Design

Dev: Chouaib Belagoun

Sign-Up/Login Form

Multi Step Form with Progress Bar using jQuery and CSS3

Dev: Atakan Goktepe

Credit Card Form

Dev: Muhammed Erdem

Snake highlight

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Material Login Form

Dev: Andy Tran

Login Form – Modal

Dev: Andy Tran

Google Material Design Input Boxes

Dev: Chris Sev

Log in/Sign up screen animation

Dev: Josh Sorosky

Interactive Sign Up Form

See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.

Dev: Riccardo Pasianotto

Double slider Sign in/up Form

Dev: Florin Pop

Credit Card Payment Form

Dev: Adam Quinlan

Slide Sign In/Sign Up form

Dev: Danielkvist

Flat Login Form

Dev: Andy Tran

Material Design Login Form

Dev: Josh Adamous

Form fields with material design and video background, in pure CSS

Dev: Jon Uhlmann

RESPONSIVE MATERIAL DESIGN CONTACT FORM

Dev: Nikhil Krishnan

Material VCard

See the Pen Material VCard by Rian Ariona (@ariona) on CodePen.

Dev: Rian Ariona

Registration Form

Dev: afirulaf

Login/Registration Form Transition

Dev: Nikolay Talanov

Expanding Contact Form

Dev: Joe Harry

Responsive Signup/Login form

Dev: Mohamed Hasan

Interactive Form

See the Pen Interactive Form by Emmanuel Pilande (@epilande) on CodePen.

Dev: Emmanuel Pilande

Log in / Sign up

Dev: @BrawadaCom

Login/signup form animation

Dev: Shayan

Step by step register form

Dev: Jerome Renders

Elegant Login Form

See the Pen Elegant Login Form by Victor Hugo Matias (@reidark) on CodePen.

Dev: Victor Hugo Matias

MINIMALISTIC FORM

Dev: Matheus Marsiglio

Credit Card Checkout

Dev: Fabio Ottaviani

Form Design

See the Pen Form Design by Timurtek Bizel (@Timurtek) on CodePen.

Dev: Timurtek Bizel

One line Signup

Dev: Vineeth.TR

Animated Login Form

Spectre sign up form

Dev: Alex Devero

No Questions Asked Form & Magic Focus

Dev: Michal Niewitala

Obnoxious errors

Dev: Maria cheline

Flexbox Form

See the Pen Flexbox Form by Katherine Kato (@kathykato) on CodePen.

Dev: Katherine Kato

Invision login – dribbble remake

Dev: Mikael Ainalem

Emoji Form Validation

Dev: Marco Biedermann

Sign Up Form

Dev: Johnny Bui

CSS Snackables

Credit Card Payment Form

Dev: Jade Preis

Signup form UI

Dev: Tyler Johnson

Step by Step Form Interaction

Dev: balapa

Step By Step Form

Dev: DevTips

Step By Step Form

See the Pen Step by step form by Jonathan H (@Dunner) on CodePen.

Dev: Jonathan H

Single input 3D form

See the Pen Single input 3D form by Son Tran-Nguyen (@sntran) on CodePen.

Dev: Son Tran-Nguyen

Step by step form [KO]

See the Pen Step by step form [KO] by Thays Dos Santos Neves (@thayssn) on CodePen.

Dev: Thays Dos Santos Neves

Step by step form

See the Pen step by step form by Senhor Sulaiman (@zenu) on CodePen.

Dev: Senhor Sulaiman

Contact Form

See the Pen Contact Form by Aina Requena (she/her) (@ainarela) on CodePen.

Dev: Aina Requena

Источник

Создание простой формы на HTML, CSS и JavaScript

От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.

Автор: Павел Карабило

Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1.

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

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.

Напишем в наш файл следующий HTML-код:

Источник