Все для начинающих интернет-предпринимателей

Как добавить в контактную форму поле выбора даты

vibor-dati

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

Создание конт актной формы WordPress с полем выбора даты 

Для этого урока мы будем использовать WPForms. Вам нужно скачать, установить и активировать плагин WPForms на своем сайте. После того, как вы активировали плагин, перейдите в «WPForms» — «Новая форма».

vibor-dati-1

Появится конструктор WPForms. Сначала введите имя для вашей формы. Затем наведите курсор мыши на шаблон и нажмите кнопку, чтобы выбрать его. Мы собираемся использовать простую контактную форму.

vibor-dati-2

WPForms автоматически создаст для вас форму, используя этот шаблон. Вот простая контактная форма по умолчанию.

vibor-dati-3

Теперь вы можете редактировать форму любым удобным вам способом. Давайте добавим поле выбора даты. В конструкторе форм вы увидите все поля, которые вы можете добавить в форму, в правом столбце. Прокрутите вниз до раздела «Сложные поля», и вы увидите поле «Дата / Время».

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

vibor-dati-4

Далее нажмите на поле, чтобы редактировать его. Это откроет вкладку «Параметры поля» в левой части экрана. Вы можете изменить метку поля, которая по умолчанию установлена на «Дата / Время». Мы собираемся использовать «Предпочтительное время для телефонного звонка» для нашего поля.

Вы также можете изменить формат поля, используя раскрывающийся список Формат. Например, вы можете использовать только дату, а не время, например, для поля даты рождения. Вы также можете установить флажок «Обязательно», если хотите сделать это поле обязательным. Это означает, что пользователь должен будет выбрать дату и время, прежде чем он сможет отправить форму.

vibor-dati-5

Вы также можете добавить любые другие новые поля, которые вы хотите использовать. Просто нажмите вкладку «Добавить поля», затем перетащите нужное поле на свое поле. Чтобы редактировать поле, просто нажмите на него.

Настройка дополнительных параметров для выбора даты

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

Возможно, вы захотите изменить способ выбора даты. Это легко сделать в WPForms. На вкладке «Параметры поля» прокрутите вниз до «Расширенные опции». Затем нажмите стрелку, чтобы открыть этот раздел.

vibor-dati-6

Здесь вы можете сделать много изменений. Например, вы можете изменить формат даты. По умолчанию используется мм / дд / гггг.

vibor-dati-7

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

vibor-dati-8

Вы также можете изменить время выбора. По умолчанию используется 12-часовое время, но вы можете переключиться на 24-часовое время, если хотите. Вы также можете изменить интервалы до 15 минут или 1 часа вместо 30 минут.

vibor-dati-9

Когда вы довольны своей формой, вы можете сохранить ее, нажав кнопку «Сохранить» в правом верхнем углу.

Добавление вашей формы на сайт

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

vibor-dati-10

vibor-dati-11

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

vibor-dati-12

Примечание. Стиль формы будет зависеть от используемой темы WordPress.

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

Вы можете внести изменения в свою форму, перейдя в «WPForms» — «Все формы». Затем просто нажмите на название вашей формы или ссылку «Изменить» под заголовком, чтобы отредактировать ее.

vibor-dati-13

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

С уважением Вячеслав и Валерия!

Понравился материал? Поделитесь с друзьями!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *