Booking

Как создать форму веб-бронирования с помощью скрипта Smart Forms

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

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

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

Зачем использовать умные формы?

Прежде чем мы углубимся в тему, я хотел бы объяснить, почему я выбрал Smart Forms для этой задачи.

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

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

Что мы будем строить

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

Начиная

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

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

Чтобы помочь вам понять все основы, мы создадим нашу форму бронирования с нуля.

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

Разметка страницы формы бронирования должна выглядеть примерно так в начале.

Smart Forms использует Font Awesome для добавления всех значков в форму, поэтому вам нужно загрузить оба CSS-файла.

Теперь перейдем к содержанию нашей формы бронирования. Среда Smart Forms разделяет форму на три части: заголовок формы, тело формы и нижний колонтитул формы.

Верхний раздел заголовка формы используется для отображения заголовка формы в презентабельной форме. Для формы бронирования вы можете сказать что-то вроде « Забронировать номер онлайн» или « Забронировать номер за несколько минут» .

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

Раздел нижнего колонтитула формы содержит кнопки для отправки или отмены формы. Это отображается заметно внизу формы.

Добавьте Smart Form Boilerplate

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

Make Room Reservations in Minutes

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

Создание компонентов формы

Давайте добавим наши фактические элементы формы в форму бронирования сейчас. Это разметка, которая вам нужна для этого. Он будет идти внутри тега div с классом form-body .

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

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

Важно помнить, что вы должны быть осторожны при внесении изменений в некоторые атрибуты элементов формы, поскольку это повлияет на общий вид или поведение формы. Например, вы можете изменить ширину различных элементов, изменив классы colm . Если два входных элемента в строке имеют классы colm8 и colm4 , их ширина будет в соотношении 2: 1. Если цифры не составляют до 12, вы также увидите некоторое пустое место в этой строке.

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

Добавление проверки в нашу форму бронирования

Среда Smart Forms опирается на ядро ​​jQuery и многие другие плагины, связанные с jQuery, чтобы предоставить вам различные функции, такие как выбор месяца и времени или возможность перетаскивания файлов. Всего существует 22 различных файла JavaScript, которые вы можете использовать для улучшения функциональности формы.

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

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

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

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

Вы можете передать несколько параметров при инициализации выбора даты. Они будут определять пользовательский интерфейс календаря, например количество отображаемых месяцев или дату, с которой должны отображаться календари. Например, установка defaultDate на +100w откроет календари через 100 недель.

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

Последние мысли

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

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

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

Источник

How to make a booking form using html and css

Today I will show you have to make this booking form using HTML and CSS. This will not be a long tutorial so stick with me. I have added the video underneath if you rather want to watch a video then a written tutorial. You can download source code from the bottom of the website.

First, we need to set up an HTML. At the top of the HTML file, we need to include a path to the CSS and to the font.

After that, we need to add a visible part of HTML document. It’s consists of two parts. The first part is .container-time(black) and second is .container-form. We have put them in the main div with a class of container.

In the container time div, we have a few headings and paragraphs tags, while in the container-form div is a form with required fields.

You can grab a complete HTML document under this text.

         
 
Time Open
 
Monday-Friday
 
7am - 11am (breakfast)
 
11am - 10pm (lunch/dinner)
 
Saturday and sunday
 
9am - 1am (breakfast)
 
1am - 10pm (lunch/dinner)
 
Call Us: (123) 45-45-456
 
 
 
Reservation Online
 
Your Name
 
Your email
 
Date
 
Time
 
How many people?
 1 person 2 persons 3 persosn 4 persons 5 persons 5+ persons  
 Submit  
 
  

CSS code

In the body, we have basic styles, font-family, font-weight, color, and letter spacing. Font size is 16px by default.

Our main container has a slightly darken background color then our body element so we can see the difference. We have added a 200px margin for space from all sides. If you want you can center it using margin: 0 auto.

To get the effect of the offset element, we added a shadow to the container and to put our container-time and container-form elements horizontally we set the display to the grid.

The black part is 40% of the container and grey is 60% for that we have used grid template columns.

container-time has a black background.

We have added padding to this element to make some room for the elements inside.

For the border, we have used an outline CSS property not a border.

To move the outline inside we use outline-offset CSS property and we have aligned text to the center.

Our next step is to increase the font size, change colors, and transform our headings to uppercase.

.heading < font-size: 35px; text-transform: uppercase; >.heading-days < color:#998100; font-size: 30px; >.heading-phone

Our form container has a padding 20px to the top and bottom, and 0 for the right and left.We have centered it setting margin 0 from top and bottom and auto from the right and left.

Inside our form, we have heading element and div’s with a class of form-field, to make space between these elements we set the form display to grid and grid-row-gap to 20px.

form-field have a paragraph and input field, to make them be at the ends and to be a blank space between, we used flexbox properties.

To make some space we add padding to input and select fields.

form < display: grid; grid-row-gap: 20px; >form p < font-weight: 600; >.form-field < display: flex; justify-content: space-between; >input,select

Last is our button element.

Apart from self-explanatory CSS property, border-radius is set to high number to accomplish the pretty curved border.

Same as on the container element we have added a shadow to accomplish the effect of offset element. Transition is how fast will our grow when we hover on it. On the hover state, we increase the size of our button using the transform property.

The box-shadow is slightly lighter as well.

I hope you have enjoyed our content for more content like this please subscribe to our website and youtube channel.

Источник