Добавление дополнительных полей в лайтбокс регистрации в Responsys

Важно! Эта функция доступна только в том случае, если она включена для учетной записи и используется Oracle Maxymiser.

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

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

  1. В схеме списка Responsys проверьте имена полей, которые необходимо добавить в лайтбокс, так как они должны совпадать с именами полей в лайтбоксе Oracle Maxymiser. В этом примере используются следующие имена полей:

    1. FIRST_NAME

    2. LAST_NAME
  2. Создание лайтбокса регистрации Oracle Responsys.
  3. Щелкните Редактор кода.

    4. Примечание. Если вручную отредактировать код лайтбокса в редакторе кода, а затем переключиться обратно на панель "Взаимодействия" для внесения изменений, выполненные вручную изменения функции formSubmit будут перезаписаны панелью "Взаимодействия".

  4. Внутри тега <form>:
    1. Выполните поиск тега <input> для поля emailaddress:
      2. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-email-input" name="EMAIL_ADDRESS_" type="text" style="display: block; margin: 47px auto 0px; height: 28px; width: 280px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Email address..." title="Enter Email address." required="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}">
    2. После указанного выше тега добавьте новый тег <input> для имени:
      3. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-firstname-input" name="FIRST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="First name..." title="Enter First name." required="" pattern="^[a-zA-Z]+$">
    3. Измените атрибуты <input> следующим образом:
      • Идентификатор. Уникальный идентификатор, состоящий из идентификатора лайтбокса, а также имени и типа поля ввода. Например: lightbox1565788422675-lightbox-firstname-input.

        • Примечание. При создании лайтбокса ему присваивается уникальный идентификатор, который можно найти в качестве атрибута внешних тегов DIV лайтбокса или части атрибута ID для описанного выше поля электронной почты.

      • Имя. Поле имени в таблице Responsys из шага 1.
      • Прототип. Текст подсказки, который появляется, когда текстовое поле пусто.
      • Шаблон. Регулярное выражение, определяющее, какие символы можно вводить в текстовое поле. В этом примере разрешены символы в диапазоне от a до z или от A до Z, но можно разрешить другие символы, такие как дефисы или пробелы.
    4. Добавьте и измените другой тег <input> для фамилии:
      5. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-lastname-input" name="LAST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Last name..." title="Enter Last name." required="" pattern="^[a-zA-Z]+$">
  5. При отправке формы убедитесь, что новые поля ввода добавлены в URL-адрес отправки:
    1. Найдите функцию window.onFormSubmit и следующую строку кода в ней: 
      2. var emailInput = document.getElementById(id + '-lightbox-email-input');
    2. Ниже этой строки добавьте следующие строки, чтобы сохранить имя и фамилию в переменных:
      3. var firstnameInput = document.getElementById(id + '-lightbox-firstname-input');
      var lastnameInput = document.getElementById(id + '-lightbox-lastname-input');

    Значения, сохраняемые в этих переменных, используются при проверке ошибок и отправке формы.

  6. Код проверки ошибок должен быть обновлен для проверки содержимого полей имени и фамилии.
    1. Для этого примера мы заменим существующий код:
      2. var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;
      if (!re.test(emailInput.value)) {
      oops.style.display = 'block';
      emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      return;
      }
    2. Следующим кодом:
      3. var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;
      var reName = /^[a-zA-Z]+$/;
      emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
      firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
      lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
       
      if (!re.test(emailInput.value) || !reName.test(firstnameInput.value) || !reName.test(lastnameInput.value)) {
      	oops.style.display = 'block';
      	if (!re.test(emailInput.value)) {
      		emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      	if (!reName.test(firstnameInput.value)) {
      		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      	if (!reName.test(lastnameInput.value)) {
      		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      return;
      }
  7. To ensure the new values get submitted when the visitor clicks the Subscribe button, find the following code:
    8. parameters.push(encodeURIComponent('EMAIL_ADDRESS_') + '=' + encodeURIComponent(emailInput.value));
  8. После этого кода добавьте следующие строки, чтобы добавить имя и фамилию в URL-адрес отправки формы:
    9. parameters.push(encodeURIComponent('FIRST_NAME') + '=' + encodeURIComponent(firstnameInput.value));
    parameters.push(encodeURIComponent('LAST_NAME') + '=' + encodeURIComponent(lastnameInput.value));
  9. Переключитесь на панель Предварительный просмотр, чтобы протестировать вновь созданные поля в лайтбоксе.

См. также

Настройка интеграции Oracle Maxymiser

Запуск интегрированной кампании Maxymiser-Responsys

Создание лайтбокса регистрации с помощью Oracle Maxymiser

Интеграция Oracle Responsys (справочный центр Oracle Maxymiser)

Интеграция Maxymiser, лайтбокс, формы регистрации электронной почты