Как интегрировать AddressFinder с контактной формой 7 (несколько стран)

Обновите формы Wordpress, чтобы собирать проверенные адреса из Новой Зеландии и Австралии

Это руководство покажет вам, как собрать подтвержденные адреса для ОБЕИХ Новой Зеландии и Австралии. Если вы хотите включить виджет только для одной страны, см. Этот пост.

Если вы читаете это, мы предполагаем, что у вас есть сайт на Wordpress и вы хотите собирать адреса. Самый простой вариант настройки - добавить AddressFinder в бесплатный плагин - Contact Form 7.

Контактная форма 7 - это настраиваемый создатель контактной формы, который помогает вам собирать данные от ваших пользователей. AddressFinder - это виджет автозаполнения адресов, который упрощает использование ваших форм и обеспечивает полноту, точность и достоверность собранных адресов.

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

Приступим!

  1. Убедитесь, что у вас установлен Плагин Contact Form 7, выбрав Плагины → Установленные плагины в меню администратора Wordpress и поискав его в списке. Иметь это? - Переходите к шагу 3.
  2. Если у вас нет контактной формы 7, добавьте ее, нажав кнопку «Добавить» вверху страницы, выполнив поиск и нажав «Установить сейчас ', затем нажмите кнопку' Активировать '. Активация контактной формы 7 добавит новую опцию: «Контакт» на боковую панель администратора Wordpress.
  3. На боковой панели администратора Wordpress нажмите Контакт → Контактные формы.
  4. Нажмите «изменить» в форме, в которую вы хотите добавить AddressFinder.
  5. Скопируйте и вставьте приведенный ниже код в текстовое поле «форма». Это создаст HTML (показан под кодом ниже). Если в текстовом поле уже есть код, вы можете удалить его или вставить ниже. Поля «Имя», «Адрес электронной почты» и «Телефон» при желании можно удалить или изменить - они не нужны для работы AddressFinder.

HTML

<label> Name (required)
    [text* your-name] </label>
<label> Email Address (required) 
    [email* your-email] </label>
<label> Phone (required)
    [tel tel-435] </label>
<label> Country
 <select id='countryInput'>
   <option value='NZ'>New Zealand</option>
   <option value='AU'>Australia</option>
 </select>
</label>
<label> Address
 [text addressLine1Input id:addressLine1Input]</label>
[submit 'Send']

6. Затем скопируйте и вставьте следующий код (ниже) в текстовое поле под кодом HTML (что вы сделали на шаге 5).

<script>
  (function(d){
    var addressField = d.getElementById('addressLine1Input'),
    countrySelect = d.getElementById('countryInput'),
    AFAPIkeys = {
      AU: 'ADDRESSFINDER_DEMO_KEY',
      NZ: 'ADDRESSFINDER_DEMO_KEY'
    },
    widgets = {
      AU: null,
      NZ: null
    };
    function disableWidgets(){
      widgets['AU'].disable();
      widgets['NZ'].disable();
    }
    function setWidgetState(){
      disableWidgets();
      var countryCode = countrySelect.options[countrySelect.selectedIndex].getAttribute('value');
     if (countryCode) {
       widgets[countryCode].enable();
     }
    }
    function initAF(){
      widgets['AU'] = new AddressFinder.Widget(
        addressField,
        AFAPIkeys['AU'],
        'AU',
        {}
      );
      widgets['NZ'] = new AddressFinder.Widget(
        addressField,
        AFAPIkeys['NZ'],
        'NZ',
        {}
      );
      setWidgetState();
      countrySelect.addEventListener('change', setWidgetState);
    }
    function addScript(){
      var s = d.createElement('script');
      s.src = 'https://api.addressfinder.io/assets/v3/widget.js';
      s.async = 1;
      s.onload = initAF;
      d.body.appendChild(s);
    }
    addScript();
  })(document);
</script>

7. Настроить виджет.

  • Сначала добавьте лицензионный ключ AddressFinder вместо ADDRESSFINDER_DEMO_KEY. Если у вас еще нет лицензионного ключа, вы можете получить его, зарегистрировав бесплатную учетную запись. Используйте один и тот же ключ для Австралии и Новой Зеландии.
AFAPIkeys = {
      AU: 'ADDRESSFINDER_DEMO_KEY',
      NZ: 'ADDRESSFINDER_DEMO_KEY'
    },
  • Раздел {} можно использовать для добавления настраиваемых параметров. Например, чтобы изменить сообщение, которое видит пользователь, когда адреса не найдены, вы можете использовать опцию empty_content. Вы можете выбрать разные варианты для Новой Зеландии и Австралии. Чтобы увидеть полный список возможных опций, загляните в раздел опций нашей документации по виджетам.
widgets['AU'] = new AddressFinder.Widget(
        addressField,
        AFAPIkeys['AU'],
        'AU',
        {empty_content: 'no addresses found mate'}
      );
      widgets['NZ'] = new AddressFinder.Widget(
        addressField,
        AFAPIkeys['NZ'],
        'NZ',
        {empty_content: 'no addresses found bro'}
      );

8. Нажмите "Сохранить".

9. В верхней части страницы Контактная форма 7 предоставит вам код, похожий на этот:

[contact-form-7 id="124" title="contact_form_1"]

Скопируйте и вставьте этот код на страницу или в сообщение, на котором вы хотите видеть свою форму.

10. Перейдите на эту страницу и проверьте контактную форму 7 и AddressFinder в действии!

Попался

  1. Убедитесь, что в вставленном коде javascript нет пробелов. Я знаю, что это выглядит немного запутанным / уродливым, но Контактная форма 7 добавляет дополнительные элементы html за кулисами, когда видит пустые строки, что вызывает ошибку. Если вам это действительно не нравится, вы можете добавить: define( 'WPCF7_AUTOP', false ); в свой файл wp-config.php
  2. Если вы скопируете и вставите код, убедитесь, что вы не удалили никаких речевых знаков и что они выглядят правильно («привет», а не «привет»). Иногда стиль влияет на речевые метки, что может привести к неверным значениям.

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

Я надеюсь, что это руководство было полезным, и вы с радостью собираете адреса! Если это так, пожалуйста, дайте нам знать в комментариях или «хлопая в ладоши», что поможет другим читателям найти историю! Спасибо!