Интеграция с сервисом Dadata.ru для реализации выпадающего списка с адресами

Добавьте колонку в группу, в которую Вы хотите, чтобы добавлялись контакты с формы.

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

После того, как мы создали нужную колонку создадим форму.

Добавим в форму наше поле с городом и копируем полученный исходный код для вставки на сайт.

Получается вот такая форма с таким кодом. (В коде опущены секции style и script т.к. в данном примере они не нужны)

Электронная почта *
Город
 
<form class='vendosoft-form' id='vendosoft-form' onsubmit='vendoSoftSubscribe(); return false;'>
<div class='vendosoft-form-line'>
<span class='vendosoft-form-label'>Электронная почта</span>
<input type='email' class='vendosoft-form-text' name='Электронная почта' required/>
*</div>
<div class='vendosoft-form-line'>
<span class='vendosoft-form-label'>Город</span>
<input type='text' class='vendosoft-form-text' name='Город'/>
</div>
<div class='vendosoft-form-line'>
<span class='vendosoft-form-label'>&nbsp;</span>
<button type='submit'>Подписаться</button>
</div>
</form>

Для создания списка со всеми возможными адресами воспользуемся сервисом https://dadata.ru/

После успешной регистрации необходимо перейти в личный кабинет.

Сгенерировать api ключ.

И перейти по адресу https://dadata.ru/suggestions/usage/#address и скопировать код плагина, который будет иметь примерно такой вид:

Вставим наш код после формы и слегка поправим его, чтобы в поле "Город" автоматически подставлялся населенный пункт без каких-либо других адресов.

Было
$("#address").suggestions({
serviceUrl: "https://dadata.ru/api/v2",
token: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
type: "ADDRESS",
count: 5,
/* Вызывается, когда пользователь выбирает одну из подсказок */
onSelect: function(suggestion) {
console.log(suggestion);
}
});
Стало
$("#address").suggestions({
serviceUrl: "https://dadata.ru/api/v2",
token: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
type: "ADDRESS",
count: 5,
bounds: "city",
/* Вызывается, когда пользователь выбирает одну из подсказок */
onSelect: function(suggestion) {
$("#address").val(suggestion.data.city);
}
});

Поправим наше поле для ввода города и добавим ему атрибут id со значением address.

Было
<div class='vendosoft-form-line'>
<span class='vendosoft-form-label'>Город</span>
<input type='text' class='vendosoft-form-text' name='Город'/>
</div>
Стало
<div class='vendosoft-form-line'>
<span class='vendosoft-form-label'>Город</span>
<input id="address" type='text' class='vendosoft-form-text' name='Город'/>
</div>

Итоговая форма теперь имеет вид.

Электронная почта *
Город
 
<link href="https://dadata.ru/static/css/lib/suggestions-15.7.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--[if lt IE 10]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js"></script>
<![endif]-->
<script type="text/javascript" src="https://dadata.ru/static/js/lib/jquery.suggestions-15.7.min.js"></script>
<form class='vendosoft-form' id='vendosoft-form' onsubmit='vendoSoftSubscribe(); return false;'>
<div class='vendosoft-form-line'>
<span class='vendosoft-form-label'>Электронная почта</span>
<input type='email' class='vendosoft-form-text' name='Электронная почта' required/>
*</div>
<div class='vendosoft-form-line'>
<span class='vendosoft-form-label'>Город</span>
<input id="address" type='text' class='vendosoft-form-text' name='Город'/>
</div>
<div class='vendosoft-form-line'>
<span class='vendosoft-form-label'>&nbsp;</span>
<button type='submit'>Подписаться</button>
</div>
</form>
<script>
$("#address").suggestions({
serviceUrl: "https://dadata.ru/api/v2",
token: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
type: "ADDRESS",
count: 5,
bounds: "city",
/* Вызывается, когда пользователь выбирает одну из подсказок */
onSelect: function(suggestion) {
$("#address").val(suggestion.data.city);
}
});
</script>
aaa