Форма подписки Smartresponder на WP внутри стати

Автор: / Дата: в 3:19 3 комментария 2686

Некорректное отображение формы smart responder

Здравствуйте, уважаемые читатели. В этой статье я хочу поделиться с Вами очень полезной информацией. Буквально вчера я написал статью: «Как сделать 3D обложку своими руками», и в ней решил поставить форму подписки от сервиса smartresponder. Казалось бы, что может быть проще, копировать код и вставить?

На деле же оказалось, всё немного сложней и причина тому конфликт стилей, а если быть точнее, то таблица стилей блога не позволяет корректно отображаться форме. И это довольно-таки просто исправить, если перед носом будет инструкция, в ином же случае нужно иметь минимальные знания CSS. Собственно, именно эту инструкцию я и хочу предоставить 🙂

Просто посмотрите видеоинструкцию и примените её на практике.

Название программ:

  • Total commander
  • Notepad++

Форма подписки:

<link rel="stylesheet" href="https://imgs.smartresponder.ru/e1bbeb24091b44f1f4048bbc87edacd11278fd23/">
<script type="text/javascript" src="https://imgs.smartresponder.ru/52568378bec6f68117c48f2f786db466014ee5a0/"></script>
<script type="text/javascript">
    _sr(function() {
        _sr('form[name="SR_form_14_53"]').find('div#sr-preload_').prop('id', 'sr-preload_14_53');
        _sr('#sr-preload_14_53').css({'width':parseInt(_sr('form[name="SR_form_14_53"]').width() + 'px'), 'height':parseInt(_sr('form[name="SR_form_14_53"]').height()) + 'px', 'line-height':parseInt(_sr('form[name="SR_form_14_53"]').height()) + 'px'}).show();
        if(_sr('form[name="SR_form_14_53"]').find('input[name="script_url_14_53"]').length) {
            _sr.ajax({
                url: _sr('input[name="script_url_14_53"]').val() + '/' + (typeof document.charset !== 'undefined' ? document.charset : document.characterSet),
                dataType: "script",
                success: function() {
                    _sr('#sr-preload_14_53').hide();
                }
            });
        }
    });
</script>
<div id="outer_alignment" align="center">
    <form class="sr-box" method="post" action="https://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_14_53">
        <input type="text" name="field_name" class="sr-name">
         <div id="sr-preload_">Загрузка...</div>
        <ul class="sr-box-list"><li class="sr-14_53">
<label class="remove_labels"></label>
<input type="text" name="field_email" class="sr-required" value="Ваш E-mail">
            </li><li class="sr-14_53"><label class="remove_labels"></label><input id="smart-resp-pole" type="text" name="field_name_first" value="Ваше имя"></li><li class="sr-14_53"><table id="elem_table_subscribe"><tbody><tr><td id="elem_container_subscribe"><input id="smart-resp-knopka" type="submit" name="subscribe" value="ПОЛУЧИТЬ ССЫЛКУ"></td></tr></tbody></table></li></ul>
        <input type="hidden" name="uid" value="699867">
    <input type="hidden" name="tid" value="0"><input type="hidden" name="lang" value="ru"><input type="hidden" name="did[]" value="856439"><input name="script_url_14_53" type="hidden" value="https://imgs.smartresponder.ru/on/ab56041b1029cf05b0e72706e07a057c4c9014e3/14_53"></form>
</div>

Вставить в таблицу стилей:

/* смартреспондер */
#main_content_post ul li.sr-14_53:before {
   background: none;
}
#main_content_post ul li.sr-14_53 {
  text-align: center;
   border-radius: 0px;
   height: 50px;
   margin-bottom: 0px;
}
#sr-preload_14_53 {
  display: none;
  background-color: #f6f6f6;
  opacity: 0.5;
  position: absolute;
  z-index: 1200;
  text-align: center;
  font: bold 15px Arial;
}
#main_content_post .remove_labels {
    font-weight: normal;
    font-family: arial;
    color: rgb(98, 98, 99);
    font-size: 13px;
    font-style: italic;
    display: none;
}
#main_content_post .sr-box {
    width: 339px;
    height: 200px;
    border: 1px solid rgb(198, 176, 168);
    border-radius: 0px;
}
#main_content_post .sr-required {
   font-weight: normal;
   font-family: arial;
   color: rgb(102, 102, 102);
   font-size: 14px;
   font-style: italic;
   border: 1px solid rgb(222, 218, 187);
   border-radius: 0px;
   height: 34px;
   box-shadow: none;
   margin-top: 15px;
   background-image: none;
   background-color: rgb(255, 255, 255);
}
#smart-resp-pole {
  font-weight: normal;
  font-family: arial;
  color: rgb(102, 102, 102);
  font-size: 14px;
  font-style: italic;
  border: 1px solid rgb(222, 218, 187);
  border-radius: 0px;
  height: 34px;
  box-shadow: none;
  margin-top: 15px;
  background-image: none;
  background-color: rgb(255, 255, 255);
}
#main_content_post #elem_table_subscribe {
  border: 0px;
  cellspacing: 0px;
  cellpadding: 0;px
  display: inline-table;
  border-collapse: separate;
  margin-top: 22px;
  width: 100%;
}
#elem_container_subscribe {
  vertical-align: middle;
}
#smart-resp-knopka {
  font-weight: normal;
  font-family: georgia;
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-style: normal;
  border: 0px solid rgb(99, 129, 18);
  height: 45px;
  width: 100%;
  margin: 0px;
  box-shadow: none;
  background: #EA6E5E;
  border-radius: 5px;
}

Также, в ближайшее время я планирую научиться изменять форму подписки в сайт баре, чтобы читатели подписывались на обновления на FeedBurner, а Смартреспондер.

Уверен, что данная статья помогла Вам!

С вами был, Иванисов Сергей.

Начните искать в жизни хорошее, и она будет предлагать вам его все больше и больше!

hproshee-dayet-horoshee

Smartresponder на WP

Хочешь получать статьи этого блога на почту?
3 комментария
  • seoonly.ru

    Спасибо, сделал себе на нескольких сайтах такую форму-)

    2015-10-12 в 7:13 | Ответить
  • Игорь

    А что если я хочу добавить несколько форм? причем разных? Что тогда делать в стилях?

    2015-12-11 в 9:03 | Ответить
    • Divores

      Пока он не ответил скажу так: просто возьмите и пропишите дополнительные стили, в которых содержится код формы.

      2015-12-12 в 6:39 | Ответить