Как добавить поле выбора даты в Contact Form 7

Contact Form 7 — один из самых популярных плагинов для создания форм обратной связи в WordPress. Иногда при разработке формы возникает необходимость добавить поле выбора даты, например, для записи на прием или бронирования. В этой статье подробно рассмотрим, как добавить и правильно настроить поле выбора даты (date picker) в Contact Form 7, а также как улучшить пользовательский опыт с помощью дополнительных настроек и кастомного кода.

Что такое поле выбора даты в Contact Form 7 и зачем оно нужно

Поле выбора даты — это элемент формы, позволяющий пользователю удобно выбрать дату из календаря, а не вводить ее вручную. Это снижает вероятность ошибок и упрощает заполнение формы. В Contact Form 7 для этого предусмотрен тег [date], который можно использовать для создания таких полей.

Пример простого поля выбора даты:

[date* your-date]

Звездочка * означает, что поле обязательное для заполнения.

Однако стандартное поле date в Contact Form 7 поддерживается не во всех браузерах одинаково, и иногда его функционал хочется расширить, например, добавить ограничения по дате, формат отображения, или использовать более удобный календарь с помощью JavaScript.

Добавление простого поля выбора даты в Contact Form 7

Самый простой способ — добавить в форму тег [date]. Для этого:

1. Откройте настройки вашей формы в Contact Form 7.
2. В нужном месте формы вставьте тег [date your-date].
3. Сохраните изменения.

Вы можете сделать поле обязательным, добавив звездочку, например, [date* your-date].

Если хотите задать минимальную или максимальную дату, в Contact Form 7 можно использовать атрибуты min и max, например:

[date* your-date min:"2024-01-01" max:"2024-12-31"]

Это ограничит выбор дат текущим годом.

Расширение функционала поля выбора даты с помощью JavaScript и jQuery UI Datepicker

Если стандартное поле [date] не устраивает, можно подключить jQuery UI Datepicker — популярный календарь с широкими возможностями настройки.

Для этого нужно:

• Подключить jQuery UI и CSS.
• Инициализировать datepicker для нужного поля.

Пример подключения и инициализации:

function contactform7ru_enqueue_datepicker() {
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-ui-css', 'https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css');
}
add_action('wp_enqueue_scripts', 'contactform7ru_enqueue_datepicker');

function contactform7ru_add_datepicker_script() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $("input.wpcf7-date").datepicker({
            dateFormat: 'dd.mm.yy',
            minDate: 0, // нельзя выбирать даты до сегодняшнего дня
            maxDate: '+1Y' // можно выбирать дату в пределах года
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'contactform7ru_add_datepicker_script');

В форме Contact Form 7 используйте тег [date your-date], поле автоматически получит класс wpcf7-date.

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

Локализация Datepicker на русский язык

Чтобы календарь отображал дни недели и месяцы на русском, можно добавить локализацию:

jQuery(function($){
    $.datepicker.regional['ru'] = {
        closeText: 'Закрыть',
        prevText: 'Назад',
        nextText: 'Вперед',
        currentText: 'Сегодня',
        monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь',
        'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн',
        'Июл','Авг','Сен','Окт','Ноя','Дек'],
        dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
        dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
        dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
        weekHeader: 'Нед',
        dateFormat: 'dd.mm.yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''};
    $.datepicker.setDefaults($.datepicker.regional['ru']);
});

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

Пример кастомной валидации даты в Contact Form 7 на PHP

Иногда нужно проверить дату не только на клиенте, но и на сервере. Например, запретить выбирать выходные или даты в прошлом.

Для этого используйте фильтр wpcf7_validate_date*:

add_filter('wpcf7_validate_date*', 'contactform7ru_custom_date_validation', 20, 2);
function contactform7ru_custom_date_validation($result, $tag) {
    $name = $tag->name;
    $value = isset($_POST[$name]) ? sanitize_text_field($_POST[$name]) : '';
    
    if ($name == 'your-date') {
        $timestamp = strtotime($value);
        if (!$timestamp) {
            $result->invalidate($tag, 'Неверный формат даты.');
            return $result;
        }
        $day_of_week = date('N', $timestamp); // 1 - понедельник, 7 - воскресенье
        if ($timestamp < strtotime('today')) {
            $result->invalidate($tag, 'Дата не может быть в прошлом.');
        } elseif ($day_of_week >= 6) {
            $result->invalidate($tag, 'Выберите будний день, выходные недоступны.');
        }
    }
    return $result;
}

Этот код проверит поле your-date, не позволит отправить форму, если дата в прошлом или выпадает на субботу/воскресенье.

Советы по улучшению UX при работе с датами в Contact Form 7

Чтобы пользователю было удобно выбирать дату, рекомендуем:

• Использовать календарь с подсветкой доступных дат.
• Добавлять подсказки и placeholder, например, placeholder="ДД.ММ.ГГГГ".
• Ограничивать выбор дат с помощью атрибутов min и max или через скрипты.
• Автоматически подставлять текущую дату или ближайший рабочий день.
• Добавлять локализацию календаря на русский язык для удобства.

Для создания более сложных многошаговых форм с календарями можно использовать плагины, например, Expert Review, который позволяет делать расширенную логику и кастомизацию.

Заключение

Добавление поля выбора даты в Contact Form 7 — простая задача, если использовать встроенный тег [date]. Для более продвинутых решений стоит применять jQuery UI Datepicker с локализацией и дополнительной валидацией на PHP. Это повысит удобство для пользователей и снизит количество ошибок при заполнении форм. Пример кода и советы из этой статьи помогут быстро внедрить поле даты с нужными вам ограничениями и форматом.