Date Time Picker для Contact Form 7: настройка и решение проблем

Плагин Date Time Picker для Contact Form 7 добавляет удобные поля выбора даты и времени в формы. В этой инструкции — настройка классов, решение проблем во всплывающих окнах и готовые примеры кода.

Настройка Date Time Picker

Для добавления поля в форму Contact Form 7:

1. Установите плагин

2. Добавьте поле в форму

Date Time Picker добавление поля в форму
Используйте классы для разных типов полей:

  • Выбор только даты - walcf7-datepicker
  • Выбор только времени - walcf7-timepicker
  • Выбор и даты и времени - walcf7-datetimepicker
[text* event-date class:walcf7-datepicker placeholder "Выберите дату"]
[text* event-time class:walcf7-timepicker placeholder "Выберите время"]
[text* book-date class:walcf7-datetimepicker placeholder "Дата и время"]

💡 Важно! Не меняйте префикс walcf7- — это обязательная часть классов.

3. Добавьте тег вывода Даты и времени в тест письма

Пример добавления тега показан на скриншоте. Тег у вас будет отличаться в цифровом обозначении, имейте е это ввиду.
Не забудьте проверить работу форму и поля Date Time Picker, отправив тестовые письма.

Date Time Picker добавление тега времени и даты в тело письма

Решение проблем

Если Date Time Picker не работает во всплывающем окне

Для форм в Popup Maker добавьте этот CSS:

.xdsoft_datetimepicker {
  z-index: 10000000000 !important;
}

Вставьте код в:

  1. «Внешний вид» → «Дополнительные стили» (WordPress)
  2. Или в файл style.css вашей темы

Примеры использования

🏥 Запись на прием

Клиники, салоны красоты, консультации

🚚 Выбор даты доставки

Интернет-магазины, службы доставки

🎯 Бронирование времени

Вебинары, мероприятия, аренда оборудования

Заключение

Date Time Picker — простое решение для добавления выбора даты/времени в Contact Form 7. Основные преимущества:

  • Бесплатный и легкий в настройке
  • Гибкие варианты полей (дата, время или оба)
  • Совместим с большинством тем

Для сложных форм с условиями - попробуйте Conditional Fields.


Поделиться

Комментировать