Подключаем всплывающие подсказки по адресам и ФИО к любому сайту на WordPress

Бесплатно, за 10 минут, без программиста
и навыков веб-разработки.

Мы уже показывали, как подключить подсказки к сайту в WordPress на теме WooCommerce. Теперь расскажем, как настроить автодополнение вне зависимости от темы.

Формы в WordPress настраивают с помощью плагинов: «родных» блоков в конструктор не добавили. Из сотен расширений мы выбрали самое популярное — «Contact Form 7». В статье расскажем, как подключить подсказки к форме, собранной с его помощью. А в конце объясним, как настроить автодополнение в других плагинах.

Другие инструкции по интеграции подсказок к сайту:

Приготовления. Мы создали сайт на WordPress, подключили плагин «Contact Form 7» и собрали форму заказа из трех полей: ФИО, а́дреса и емейла. Предполагаем, что подобная форма уже работает на вашем сайте. Если нет, ее легко сделать по инструкции.

Собрать такую форму в «Contact Form 7» — минутное дело

К форме подключим всплывающие подсказки «Дадаты». С ними покупатели вводят контакты быстро, без ошибок и в едином формате. Достаточно указать первые буквы а́дреса или ФИО, и форма подскажет варианты. Останется выбрать нужные.

1. Получить API-ключ «Дадаты»

Чтобы «Подсказки» «Дадаты» работали в WordPress, понадобится API-ключ — это такой пароль, который получают зарегистрированные пользователи. Без ключа ничего не выйдет.

Если вы уже регистрировались в «Дадате», то получали API-ключ. Теперь стоит войти в аккаунт на сайте. Это пригодится на следующих шагах инструкции: авторизованным пользователям легче подключить подсказки.

Чтобы войти в аккаунт, понадобится почта и пароль

Если аккаунта нет, нужно его создать — кликнуть на кнопку «Войти» на сайте «Дадаты» и заполнить форму регистрации. Вместе с аккаунтом вы получите API-ключ, но делать с ним пока ничего не нужно.

Регистрация бесплатная, занимает минуту

После регистрации «Дадата» будет работать в демо-версии — на бесплатном тарифе. Его достаточно, чтобы спокойно настроить и протестировать сервисы. Для коммерческого использования рекомендуем один из трех платных тарифов — от 9000₽ в год (≈25 ₽ в день). Выбрать тариф

2. В WordPress открыть конструктор формы, к которой вы будете подключать «Подсказки»

В боковом меню административной панели WordPress выберите «Contact Form 7». Так вы попадете в настройки плагина. Затем кликните на заголовок формы, к которой подключаете «Подсказки». Откроется конструктор:

Каждая часть от <label> до </label> — одно из полей формы. [submit: …»] — кнопка, по которой отправляют заявки

2. Вставить код «Подсказок по ФИО» в конструктор формы

Разработчики «Дадаты» подготовили шаблон кода, который запускает «Подсказки по ФИО». Скопировать текст шаблона можно из инструкции на сайте.

Чтобы код заработал, вместо параметра «token» в тексте должен стоять ваш API-ключ. Если вы вошли в личный кабинет, как мы советовали на первом шаге инструкции, это случится автоматически. Не придется ничего менять в шаблоне, достаточно скопировать текст, выделенный на скриншоте ниже.

Первая строка в примере добавит в форму еще одно поле «ФИО». Такое поле уже есть, поэтому эту строку копировать не нужно

Теперь вставьте текст шаблона в конструктор формы «Contact Form 7», который открыли на предыдущем шаге. Место вставки не важно, но для порядка предлагаем добавить код «Подсказок» в конце.

Отлично, вы подключили «Подсказки по ФИО» к форме. Но чтобы сервис заработал, его нужно настроить. Дальше покажем, как это сделать.

3. Вставить код «Подсказок по адресам»

Скопируйте текст шаблона со страницы «Подсказок по адресам». Так же, как делали для «Подсказок по ФИО».

Достаточно скопировать только выделенную часть кода. Верхнюю часть вы уже добавили на страницу вместе с шаблоном «Подсказок по ФИО». Лучше ее не дублировать

Теперь вставьте код «Подсказок по адресам» сразу после кода «Подсказок по ФИО»:

Готово, вы подключили «Подсказки по адресам». Теперь настроим сервис, чтобы автодополнение заработало.

4. Заменить названия полей в коде подключения «Подсказок» — в конструкторе «Contact Form 7»

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

Сперва выясните, как называются поля в нашей WordPress-форме. Для этого посмотрите на части кода между квадратными скобками «[ ]». Названия полей обозначены словом «id».

Поле ФИО назвали «fio», поле адреса — «dom»

Если вы не задали ID полей, когда создавали форму, пропишите их сейчас — как на скриншоте выше. Можно прописать любые названия, хоть [text address id:12345].

Во вставленном коде «Подсказок» тоже заданы названия полей, только пока неправильные — «fullname» и «address»:

Пропишете на их месте правильные ID полей — прописанные между квадратных скобок в конструкторе формы:

Теперь «Подсказки» понимают, в каких полях срабатывать.

5. Готово! Всплывающие подсказки работают в WordPress

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

На 300% быстрее люди вводят данные в форме с «Подсказками. В результате заполняют формы без раздражения и реже бросают

Если «Подсказки» не заработали

Порой «Подсказки» не работают из-за опечаток в частях кода, которые меняли при интеграции. Проверьте, чтобы названия полей в форме совпадали с названиями полей в коде «Подсказок»:

А еще убедитесь, что в коде «Подсказок» стоит ваш API-ключ. Его можно скопировать из личного кабинета на сайте «Дадаты».

Если у вас другой плагин

Плагин «Contact Form 7» разрешает пользователям добавлять сторонний код в конструктор (шаги 2 и 3 статьи). А еще — задавать и изменять ID полей формы (шаг 4). Инструкция выше подойдет, если ваше расширение тоже это умеет.

Другие плагины часто не разрешают добавлять в форму сторонний код и прописывать идентификаторы полей. Мы придумали, как обойти ограничения, но не даем гарантий: например, в плагинах «Ninja Forms» и «Forminator» «Подсказки» так и не заработали. 

Чтобы подключить «Подсказки» «Дадаты», нужно: 

1. Вставить код «Подсказок» напрямую в страницу сайта, где стоит форма. Для этого пригодится нативный блок «Произвольный html» в конструкторе WordPress:

2. В коде страницы найти названия полей, в которых будут работать «Подсказки». Плагины не разрешают изменять и задавать ID полям, но часто проставляют названия автоматически. Тогда ID полей видны в коде страницы, и чтобы их найти, нужно:

  • открыть в «Гугл Хроме» или другом браузере страницу сайта с формой, к которой вы подключаете «Подсказки»;
  • нажать Ctrl+Shift+I или Option+Cmd+I на «Маке». Сбоку или снизу откроется панель с кодом страницы;
  • нажать Ctrl+Shift+C или Cmd+Shift+C на «Маке» и кликнуть в поле ввода, в котором будут работать «Подсказки»;
  • браузер выделит часть кода синим цветом — там вы найдете ID.

Процедуру нужно повторить для всех полей, к которым вы подключаете автодополнение. Удобно выписать ID, чтобы потом быстро подставить в код «Подсказок». Об этом в следующем шаге.

3. Подставить найденные ID в код «Подсказок» — внутри блока «Произвольный html» на странице с формой в WordPress, который вы добавили на первом шаге.  После этого нужно опубликовать страницу.

Готово:

Без гарантий Мы протестировали способ на трех плагинах. «Подсказки» заработали в расширении «WPForms», а вот в «Ninja Forms» и «Forminator» ничего не получилось. Скрипты первого блокируют код «Подсказок» и не дают сервису работать. А второй изменяет ID при каждом обновлении страницы и для каждого пользователя. Прописываешь название в коде, а оно уже неактульное.

Что дальше

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

Но наш сервис умеет больше. Например:

  • по наименованию организации находить ее реквизиты и автоматически расставлять по полям в форме;
  • автоматически определять индекс для найденного адреса;
  • подсказывать адреса только в конкретном городе. Скажем, в Саратове.

Чтобы решать больше задач с «Подсказками», покажите программисту полное руководство по использованию сервиса. Человек с навыками веб-разработки за пять минут разберется в документации и все настроит. 

Главное за месяц
у вас на почте

Раз в месяц пришлем на почту лучшие статьи блога и главные обновления «Дадаты». Так вы не пропустите ничего важного. Без спама.
Читайте статьи там, где удобно

Статьи по теме

[Инструкция] Как подключить подсказки по адресам, ФИО, емейлам и компаниям к интернет-магазину на WordPress

Инструкции

[Инструкция] Как подключить подсказки по адресам, ФИО, емейлам и компаниям к интернет-магазину на WordPress

Разработчик-энтузиаст Антон Троянов сделал плагин, который подключает всплывающие подсказки к формам в Wordpress. Достаточно установить его в конструкторе сайтов, и на странице оформления заказа заработает автодополнение по ФИО, адресам и емейлам. В статье разберем процесс по шагам.

[Инструкция] Как к «Тильде» подключить подсказки по ФИО и адресам

Инструкцииосновы

[Инструкция] Как к «Тильде» подключить подсказки по ФИО и адресам

У «Тильды» нет интеграции с «Дадатой», поэтому человек без навыков программирования вряд ли подключил бы наш сервис к конструктору сайтов. Но наши разработчики сделали шаблон кода, который решает проблему. Достаточно скопировать текст шаблона на лендинг, заменить несколько слов, и «Подсказки» заработают.

[Инструкция] Как подключить «Подсказки» «Дадаты» без программиста

Инструкцииосновы

[Инструкция] Как подключить «Подсказки» «Дадаты» без программиста

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