форма обратной связи bootstrap в модальном окне

Верстка формы обратной связи используя Bootstrap

На прошлом уроке мы научились с вами создавать простую HTML форму обратной связи без всякого оформления и PHP обработчик данных этой формы. Сейчас я покажу вам, как сделать верстку формы обратной связи средствами CSS, используя знаменитый фреймворк Bootstrap.

Нам не надо создавать свой файл стилей CSS, он уже создан разработчиками. Все что вам надо, это подключить к нашему файлу form.php ссылку на ../bootstrap.min.css на официальном сайте Bootstrap. Открываете Getbootstrap, копируете саму верхнюю ссылку на файл стилей в разделе Bootstrap CDN и вставляете ее на страничку с формой между тегами head. Смотрите ниже скриншот:

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

Заходим в раздел «getbootstrap.com/css/#forms» и в качестве основы берем образец базовой формы. Затем копируем код и вставляем его к себе на страницу form.php, выше нашей ранее созданной формы (ее пока оставим на месте в качестве примера), а чтобы форма не расползалась на всю ширину браузера, обертываем ее в контейнер:

Используя класс col-md-4 с помощью Grid System (сеточной системы), разделим страницу на 3 части и поместим нашу форму в средний блок.

Добавим еще одно поле, путем копирования div блока и все что внутри него.

Сейчас у формы три поля, пописываем им названия как в нашей исходной форме и добавляем четвертое широкое поле для ввода сообщений textarea, поместив его в блок div.

Источник

Создаем форму обратной связи на bootstrap 3. Три вида форм и модальное окно для блога

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

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

Формы. Какие они бывают?

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

Все они могут использовать встроенные типы текстовых полей, в которые входят: text, date, email, search, color, time и т.д. С их помощью осуществляется валидация введенной информации и при некорректном ее написании пользователю выводится сообщение с указанием на ошибки.

А теперь давайте подробнее разберем каждый тип форм.

Vertical Forms

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

В качестве примера я создал базовую форму с проверкой полей ввода при помощи встроенных типов.

Источник

Модальное окно

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

Как это работает

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

Далее – использование и примеры.

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding ), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.

Modal title

Modal body text goes here.

«Живое» демо

Изменяйте (скрывайте\показывайте) рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.

Modal title

Woohoo, you’re reading this text in a modal!

Прокрутка длинного содержимого

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

Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Источник

Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Структура файлов и папок

Мы создадим корневой каталог и добавим в него следующие файлы и папки:

Нам нужно будет подключить некоторые front-end библиотеки:

С учетом этих библиотек структура файлов будет выглядеть следующим образом:

Создание формы

Откройте файл index.html и скопируйте в него следующую базовую структуру AJAX формы обратной связи :

Без борьбы не бывает победы

Дальше нужно вставить следующий код внутри тегов :

Типографика

Класс form-control применяется для каждого элемента ввода, чтобы он занимал всю ширину контейнера ( ширина 100% ). Этот класс также добавляет различные стили, которые позволяют создать легко читаемый элемент формы ( большой размер, четкие края и т.д. ).

После этих столбцов мы включаем тело сообщения. Мы оборачиваем его в form-group и применяем те же стили, что и для меток и для текстовых полей.

Призыв к действию

После кнопки мы включили div с идентификатором #msgSubmit и применили следующие классы: « h3 text-center hidden «. Класс h3 помогает создать больший заголовок, text-center устанавливает выравнивание текста по центру, а hidden — задает display: none и visible: hidden :

Добавление функционала отправки данных

Откройте файл scripts.js и скопируйте в него следующий код:

event.preventDeafult() останавливает отправку данных формы при обновлении страницы без выбора действия в форме. И в конце этот код запрашивает функцию submitForm(); :

Далее мы создаем функцию submitForm(); следующим образом:

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

Подключение к функции PHP Mail

Наводим блеск

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

Также для валидации формы мы используем некоторые инструменты:

Структура проекта теперь должна выглядеть следующим образом:

Валидация формы

Давайте начнем с установки валидатора после ввода данных формы обратной связи AJAX PHP. Перейдите в файл scripts.js и отредактируйте первый фрагмент кода, который вызывает функцию SubmitForm() после того, как данные формы отправлены.
Его нужно изменить следующим образом:

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

Теперь, если мы нажмем кнопку отправки данных формы, не заполнив все поля, пустые будут выделяться красным цветом:

Внутри каждой form-group под полем ввода данных нужно разместить следующий HTML-код :

Теперь при повторной отправке данных AJAX JQuery формы будет выводиться сообщение об ошибке, если поля формы не были заполнены: “ Please fill in this field. ”. Добавив data-атрибут для вводимых данных под названием “ data-error ”, можно включить пользовательское сообщение об ошибке.

Добавление анимации обратной связи

Мы добавили функционал для индикации незаполненных полей формы. Но было бы неплохо добавить в форму дополнительную анимацию и несколько сообщений, которые дадут пользователю знать, что происходит. В настоящее время при успешной отправке данных формы появляется сообщение « Message Submitted! «, но как насчет ошибок?

Чтобы задействовать существующий код, мы изменим существующее сообщение об успешной отправке данных. Первым делом удалим текст « Message Submitted! » из HTML-разметки и оставим пустой div :

Теперь нужно создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в нижнюю часть файла scripts.js :

Теперь, если вы не заполнили все поля, будет выводиться сообщение об ошибке “ Did you fill in the form properly? »

Последний шаг для этой новой функции submitMSG — вызвать ее, когда данные формы отправлены успешно. Обновите функцию formSuccess() следующим образом:

Встряхнемся

Давайте добавим ко всей форме анимацию ошибки, универсальная анимация “ тряски ” должна подойти!

Создайте сразу после функции formSuccess() новую и назовите ее formError() :

Теперь, когда пользователь попытается отправить данные формы, не заполнив все поля, она будет трястись, чтобы он понял, что что-то не так.

Больше валидации

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

И последний этап — нужно принять новое сообщение в AJAX и вывести его в форме. Нам нужно обновить объект AJAX в файле scripts.js следующим образом:

Заключение

Дайте знать, что вы думаете по данной теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!

Источник

Компоненты

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Модальное окно

Модальные окна Имеют обтекаемую форму, но гибкая, диалоговое окно с минимальным набором функций и по умолчанию.

Содержание

autofocus атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Размещение разметки модального окна

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

Предостережения для мобильных устройств

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

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

Modal title

Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.

Название модального окна

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

Подсказки в модальном окне

Эта ссылка и эта ссылка должна иметь подсказку при наведении.

Переполняя текст для отображения прокрутки;

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Сделать модальности можно

Встраивание видео YouTube

Встраивание видео YouTube в модальности требует дополнительных JavaScript не в Bootstrap чтобы автоматически остановить воспроизведение и многое другое. Ознакомиться с этой полезной переполнение стека пост для получения дополнительной информации.

Опционные размеры

Источник