В этом примере подключим подсказки DaData.ru к форме Contact Form 7. Пользователь сможет выбрать организацию, адрес и ФИО из списка, а связанные поля заполнятся автоматически.
Перед началом установите и настройте плагин «Подсказки» от DaData.ru. Для работы нужен API-ключ DaData.ru.
Подсказки в стандартных полях WooCommerce#
По умолчанию плагин поддерживает стандартные поля WooCommerce на странице оформления заказа (checkout). Дополнительно настраивать их не нужно.
К таким полям относятся:
- Имя и фамилия.
- Адрес — при выборе адреса могут заполниться город, регион и почтовый индекс.
- Email.
- Название компании — при выборе организации могут заполниться адрес, ИНН, КПП и ОГРН.
Добавление подсказок для нестандартных полей#
Чтобы добавить подсказки в произвольную форму, присвойте полю HTML-атрибут id из списка доступных идентификаторов. Значение id должно совпадать с идентификатором из документации полностью.
Рассмотрим пример формы обратной связи для поставщиков и подрядчиков. В ней нужны:
- Название компании;
- ИНН;
- Адрес;
- ФИО;
- E-mail;
- Номер телефона.
1. Создайте поля формы#
Саму форму можно создать любым удобным способом. Для Contact Form 7 вставьте в поле Форма такую разметку:
<label>Название компании
[text company id:dadata_custom_party]</label>
<label>ИНН
[text inn id:dadata_custom_party_inn]</label>
<label>Адрес
[text address id:dadata_custom_address]</label>
<label>ФИО
[text* full-name id:dadata_custom_fio]</label>
<label>E-mail
[email* email id:dadata_custom_email]</label>
<label>Телефон
[text phone id:dadata_custom_phone]</label>
[submit "Отправить"]В Contact Form 7 идентификатор можно задать явно параметром id::
[text* your-name id:dadata_custom_fio]2. Используйте связанные поля#
Поле с иконкой ⚡ в документации является основным. После выбора подсказки оно может заполнить связанные поля, отмеченные иконкой 🪄:
dadata_custom_party→ ИНН, КПП и ОГРН;dadata_custom_address→ индекс, регион, город, улицу, дом и квартиру;dadata_custom_fio→ фамилию, имя, отчество и пол.
Если нужно показывать пользователю только город, добавьте поле dadata_custom_address_city. Для автозаполнения связанных данных всё равно должно присутствовать основное поле соответствующего типа.
3. Проверьте форму#
Сохраните форму и откройте страницу с ней. Начните вводить текст и выберите вариант из выпадающего списка. После выбора организации, адреса или ФИО связанные поля должны заполниться автоматически.
Если подсказки не появляются#
Проверьте:
- API-ключ DaData.ru сохранён в настройках WordPress.
- Плагин активирован и обновлён до актуальной версии.
idполя написан без опечаток и полностью совпадает с идентификатором из документации.- На странице нет JavaScript-ошибок, блокирующих загрузку подсказок.
Для диагностики откройте консоль разработчика браузера. Если форма загружается динамически конструктором или темой, может потребоваться дополнительная настройка.
