Как персонализировать страницу «Спасибо» после подписки через форму Getreponse

Недавно выполняла заказ на оформление рассылки в Getresponse и встала необходимость на странице «Спасибо» указать Имя подписчика, а также поставить ссылку на домен Email адреса.

Домен Email адреса должен быть оформлен в виде ссылки на адрес сайта почты с текстом «Проверить почту» (т.е. если у подписчика Email адрес с gmail.com, то на странице Спасибо появляется ссылка на сайт Gmail.com, если подписчик указал Email в mail.ru, то соответственно ссылка на странице на mail.ru).

В этой статье расскажу пошагово, что нужно сделать, чтобы на странице Спасибо появилось Имя подписчика, и ссылка на сайт email почты.

Видеоинструкция

В статье я не использую скриншоты. Но я записала подробное видео для вас. Смотрите видео инструкцию и используйте те коды, которые я даю в статье ниже.

Также будет полезно все-таки прочитать статью, для большего понимания, что нужно сделать.

Шаг 1. Создать страницу Спасибо

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

Шаг 2. Включить настройки передачи данных (Forward data)

Дальше необходимо включить передачу данных на сайте Getresponse.

Здесь будут отличия в зависимости как вы вставили вашу форму и какой шаблон (тему оформления) используете.

Если вы создавали форму в Getresponse с помощью Мастер Форм

Если вы оформляли форму подписки на самом Getresponse с помощью Мастер Форм, а затем копировали код и вставляли его на свой сайт или выводите форму с помощью плагина интеграции, то нужно сделать следующее:

• Зайдите в свой аккаунт, откройте форму, которую вы создали для вашего сайта
• Нажмите на значок настройки
• Во всплывшем окне укажите адрес страницы «Спасибо»
• В самом низу выберите «Методом Get» из списка «Передача данных контактов в качестве параметров»
• Сохраните изменения и форму

Если вы создавали форму в Getresponse с помощью HTML редактор

Обычно этот способ выбирают разработчики. Такие формы не сохраняются в списке форм.

Вам нужно будет добавить в свою форму 2 строки:

<input type="hidden" name="thankyou_url" value="ЗДЕСЬ_УКАЗАТЬ_URL_СТРАНИЦЫ_СПАСИБО/>
<input type="hidden" name="forward_data" value="" />

Добавьте эти 2 строки перед закрывающим тегом form.

Вместо ЗДЕСЬ_УКАЗАТЬ_URL_СТРАНИЦЫ_СПАСИБО укажите адрес страницы «Спасибо»

Да, и еще, если у вас в форме уже есть строка с ссылкой на страницу Спасибо, то вставлять ее второй раз, конечно, не нужно .

Если у вас шаблон AB-Inspiration

В коде форм в шаблоне AB-Inspiration данная строка не вставлена, поэтому вам нужно сделать следующее:

Установите и активируйте плагин Header and Footer.

Далее в настройках плагина откройте вкладку вставки в footer и вставьте следующий код:

<script>
jQuery(function($) {
    $( "div.form form" ).append( '<input type="hidden" name="forward_data" value="get">' );
    $( "div#form-background form" ).append( '<input type="hidden" name="forward_data" value="get">' ); 
    $( "div.form-post-bottom form" ).append( '<input type="hidden" name="forward_data" value="get">' ); 
    });
</script>

Шаг 3. Проверка

На этом этапе, проверим правильность работы настройки передачи данных.

Для этого, подпишитесь на рассылку через ваш форму подписки (используйте Email, которого еще нет в вашей базе данных) и когда вас перекинет на страницу «Спасибо» обратите внимание на адрес станицы. Он должен выглядеть так:

https://адрес-вашего-сайта.ru/спасибо/?name=ИМЯ+ПОДПИСЧИКА&email=EMAILПОДПИСЧИКА@gmail.com&pass_data=get

Все что идет после знака вопрос и есть те данные, которые передала форма.

Шаг 3. Отредактировать файл wp_config

Скорее всего на этом этапе страница Спасибо выдала ошибку 404. Это известная ошибка, возникает при передачи переменной name.

Исправить просто:

• Зайдите на хостинг
• Откройте файл wp_config.php
• Вставьте строчку ниже в файл wp_config.php ближе к концу файла

unset($_GET['name']);

• Сохраните wp_config.php
• Поверьте еще раз страницу «Спасибо» с параметрами из формы

После этих исправлений страница Спасибо должна открыться

Шаг 4. Вставить скрипт вывода данных

Дальше нам необходимо использовать скрипт, который поможет вывести необходимые данные на странице.

Я не буду рассказывать как и что в этом скрипте. Просто скопируйте его и вставьте в область head. Лучше всего если этот код будет выводиться в области head только на странице Спасибо.

<script type="text/javascript">
var formData = function() {  var query_string = (location.search) ? ((location.search.indexOf('#') != -1) ? location.search.substring(1, location.search.indexOf('#')) : location.search.substring(1)) : '';  
var elements = [];  
if(query_string) {     
    var pairs = query_string.split("&");     
    for(i in pairs) {     
        if (typeof pairs[i] == 'string') {           
            var tmp = pairs[i].split("=");           
            var queryKey = decodeURI(tmp[0]);           
            queryKey = (queryKey.charAt(0) == 'c') ? queryKey.replace(/\s/g, "_") : queryKey;   
            elements[queryKey] = decodeURI(tmp[1]);      
             }    
       } 
 }  
return {     
    display: function(key) {         
        if(elements[key]) {           
             document.write(elements[key]);         
         } 
         else {         
               document.write("<!--If desired, replace everything between these quotes with a default in case there is no data in the query string.-->");          
          }     
  }   
} 
}
(); </script>

Для вставки этого когда в head вы можете воспользоваться плагином Header and Footer.

Шаг 5. Вывести данные на странице Спасибо

Для вывода данных из

Этот код выведет имя подписчика

<script type="text/javascript">formData.display("name")</script>

Этот код выведет Email подписчика

<script type="text/javascript">formData.display("email")</script>

Бонус. Как на странице Спасибо вывести ссылку на домен почтового сервиса подписчика

Ну и в качестве бонуса расскажу как на странице Спасибо вывести ссылку на адрес почтового сервиса подписчика.

Т.е. на странице Спасибо подписчик увидит не только свое имя, но и ссылку на свой почтовый адрес. Это круто. Подписчик просто кликает по ссылке и попадает на сайт своего почтового сервиса, т.е. то, что идет после знака @.

Для этого нужно будет отредактировать код скрипта из шага 4

В скрипт нужно вставить дополнительные строки:

var email = elements["email"];
var domain = email.replace(/.*@/, "");
var html = '<a href="//' + domain + '" target="_blank" style="text-decoration:underline">Проверить почту</a>';
var result = html;
  window.onload = function what(){
  document.getElementById('emailaddress').innerHTML = result;
  }  

Разъясню, что значит код:

var email = elements["email"];

Первая строка — переменная с элементом email

var domain = email.replace(/.*@/, "");

Вторая строка — переменная с адресом домена

var html = '<a href="//' + domain + '" target="_blank" style="text-decoration:underline">Проверить почту</a>';

Третья строка — переменная с ссылкой «Проверить почту» с адресом домена. Здесь вы можете заменить текст «Проверить почту»

var result = html;

Четвертая строка — вывод ссылки

  window.onload = function what(){
  document.getElementById('emailaddress').innerHTML = result;
  } 

Далее указание, что вывод ссылки происходит внутри тега с id emailaddress

Для удобства, код целиком. Просто замените старый код из шага 4 на этот:

<script type="text/javascript">
var formData = function() {  var query_string = (location.search) ? ((location.search.indexOf('#') != -1) ? location.search.substring(1, location.search.indexOf('#')) : location.search.substring(1)) : '';  
var elements = [];  
if(query_string) {     
    var pairs = query_string.split("&");     
    for(i in pairs) {     
        if (typeof pairs[i] == 'string') {           
            var tmp = pairs[i].split("=");           
            var queryKey = decodeURI(tmp[0]);           
            queryKey = (queryKey.charAt(0) == 'c') ? queryKey.replace(/\s/g, "_") : queryKey;   
            elements[queryKey] = decodeURI(tmp[1]);      
             }    
       }
var email = elements["email"];
var domain = email.replace(/.*%40|.*@/, "");
var html = '<a href="//' + domain + '" target="_blank" style="text-decoration:underline">Проверить почту</a>';
var result = html;
   window.onload = function what(){
  document.getElementById('emailaddress').innerHTML = result;
         
 }      
 }  
return {     
    display: function(key) {         
        if(elements[key]) {           
             document.write(elements[key]); 
         } 
         else {         
               document.write("<!--If desired, replace everything between these quotes with a default in case there is no data in the query string.-->");          
          }     
  }   
} 
}
(); </script>

Теперь нам нужно на странице «Спасибо» указать тот самый id для вывод ссылки.

Открываем страницу Спасибо для редактирования

В режиме html в нужном месте вставляем id=»emailaddress» в нужном теге. Должно получиться примерно так:

<p style="text-align:center;" id="emailaddress"></p>

Все, теперь остается проверить работу страницы Спасибо. Еще раз подпишитесь в форме подписки (используйте новый Email адрес), или обновите страницу Спасибо с данными (если вы ее еще не закрыли).

Если у вас возникли вопросы, не стесняйтесь задавайте в комментариях. Буду рада помочь.

Вернуться к содержанию видео уроков