форма подписки sendpulse

[Сосновская Анастасия 0]

Добрый день. Нужно вставить форму подписки sendpulse. Вставляется ок, но выглядит так: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
Кликаешь на надпись, всплывает форма. А хотелось бы нормальную кнопку. В форме сендпульса есть приписка:

• Вы можете добавить код sp-show-form="117167" к тому элементу страницы (например, кнопке или ссылке), по клику на который необходимо показывать форму.

Есть ли возможность это сделать в мюзе? Если нет, то есть ли еще какие-то варианты, как сделать красивую кнопку со всплывающей формой сендпульса?

И да, спасибо огромное, что отвечаете на наши идиотские вопросы. Вы меня не один раз здорово выручили.

[Павел Хомерики 3360]

59 минут назад, Сосновская Анастасия сказал:

Есть ли возможность это сделать в мюзе? Если нет, то есть ли еще какие-то варианты, как сделать красивую кнопку со всплывающей формой сендпульса?

Предоставьте код для вставки -  посмотрим.
 

1 час назад, Сосновская Анастасия сказал:

Вы можете добавить код sp-show-form="117167" 

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

[Сосновская Анастасия 0]

Скрипт, который использую и который появляется в виде кликабельной надписи "Показать форму":
<button sp-show-form="117167">Показать форму</button>
<script src="//static-login.sendpulse.com/apps/fc3/build/loader.js" sp-form-id="6203e38e3818c809a57d905bd0514f525caffa1b5ef0d61d6b650665719804e6"></script>

Есть еще HTML, но с ним я вообще не понимаю что делать:

<!-- Subscription Form -->
 <style >.sp-force-hide { display: none;}.sp-form[sp-id="117167"] { display: block; background: #ffffff; padding: 10px; width: 300px; max-width: 100%; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; font-family: Arial, "Helvetica Neue", sans-serif; background-repeat: no-repeat; background-position: center; background-size: auto;}.sp-form[sp-id="117167"] input[type="checkbox"] { display: inline-block; opacity: 1; visibility: visible;}.sp-form[sp-id="117167"] .sp-form-fields-wrapper { margin: 0 auto; width: 280px;}.sp-form[sp-id="117167"] .sp-form-control { background: #ffffff; border-color: #cccccc; border-style: solid; border-width: 1px; font-size: 15px; padding-left: 8.75px; padding-right: 8.75px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; height: 35px; width: 100%;}.sp-form[sp-id="117167"] .sp-field label { color: #444444; font-size: 13px; font-style: normal; font-weight: bold;}.sp-form[sp-id="117167"] .sp-button { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color: #FF453A; color: #ffffff; width: auto; font-weight: 700; font-style: normal; font-family: Arial, sans-serif; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}.sp-form[sp-id="117167"] .sp-button-container { text-align: left;}.sp-popup-outer { background: rgba(0, 0, 0, 0.5);}</style><div class="sp-form-outer sp-popup-outer sp-force-hide" style="background: rgba(0, 0, 0, 0.5);"><div id="sp-form-117167" sp-id="117167" sp-hash="6203e38e3818c809a57d905bd0514f525caffa1b5ef0d61d6b650665719804e6" sp-lang="ru" class="sp-form sp-form-regular sp-form-popup" sp-show-options="%7B%22satellite%22%3Afalse%2C%22maDomain%22%3A%22login.sendpulse.com%22%2C%22formsDomain%22%3A%22forms.sendpulse.com%22%2C%22condition%22%3A%22onButtonClick%22%2C%22scrollTo%22%3A25%2C%22delay%22%3A10%2C%22repeat%22%3A0%2C%22background%22%3A%22rgba(0%2C%200%2C%200%2C%200.5)%22%2C%22position%22%3A%22bottom-right%22%2C%22animation%22%3A%22%22%2C%22hideOnMobile%22%3Afalse%2C%22urlFilter%22%3Afalse%2C%22urlFilterConditions%22%3A%5B%7B%22force%22%3A%22hide%22%2C%22clause%22%3A%22contains%22%2C%22token%22%3A%22%22%7D%5D%2C%22analytics%22%3A%7B%22ga%22%3A%7B%22eventLabel%22%3A%22%D0%A4%D0%BE%D1%80%D0%BC%D0%B0_%D0%BF%D0%BE%D0%B4%D0%BF%D0%B8%D1%81%D0%BA%D0%B8_%D0%A1%D0%B0%D0%BC%D0%BC%D0%B8%D1%82_%D0%B0%D1%80%D1%82%D0%BB%D0%B8%D0%BA%D0%B1%D0%B5%D0%B7%22%2C%22send%22%3Afalse%7D%2C%22ym%22%3A%7B%22counterId%22%3Anull%2C%22eventLabel%22%3A%22%D0%A4%D0%BE%D1%80%D0%BC%D0%B0_%D0%BF%D0%BE%D0%B4%D0%BF%D0%B8%D1%81%D0%BA%D0%B8_%D0%A1%D0%B0%D0%BC%D0%BC%D0%B8%D1%82_%D0%B0%D1%80%D1%82%D0%BB%D0%B8%D0%BA%D0%B1%D0%B5%D0%B7%22%2C%22targetId%22%3Anull%2C%22send%22%3Afalse%7D%7D%7D"><div class="sp-form-fields-wrapper"><button class="sp-btn-close ">&nbsp;</button><div class="sp-message"><div></div></div><form novalidate="" class="sp-element-container ui-sortable ui-droppable "><div class="sp-field " sp-id="sp-ea6c9a04-4698-438e-8a60-37593408e56e"><label class="sp-control-label"><span >Имя</span></label><input type="text" sp-type="name" name="sform[0LjQvNGP]" class="sp-form-control " placeholder="Ваше имя" sp-tips="%7B%7D"></div><div class="sp-field " sp-id="sp-82197f4f-4d51-4215-8d79-f8ba2ebf681c"><label class="sp-control-label"><span >Email</span><strong >*</strong></label><input type="email" sp-type="email" name="sformЗдесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

[Павел Хомерики 3360]

1 час назад, Сосновская Анастасия сказал:

Скрипт, который использую и который появляется в виде кликабельной надписи "Показать форму":

Разместите на странице эту часть кода

<script src="//static-login.sendpulse.com/apps/fc3/build/loader.js" sp-form-id="6203e38e3818c809a57d905bd0514f525caffa1b5ef0d61d6b650665719804e6"></script>

и сдвиньте ее за пределы сайта слева.
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./monthly_2019_03/izobrazhenie.png.544d72faee3730da5aa6dbb0e5555ce0.png" style="width:400px;height:auto;" alt="izobrazhenie.png.544d72faee3730da5aa6dbb0e5555ce0.png" />

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

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

[Сосновская Анастасия 0]

Вы бог, спасибо. Пошла тестить.

[Сосновская Анастасия 0]

Павел, добрый день. Поставила все, как вы сказали, - работала как часы: я ее сделала прозрачной и положила сверху над своими дизайнерскими кнопками. Потом залезла в код в head и после этого форма перестала работать (хотя может это и не связано). Код кнопки и сами кнопки снесла, как и сам виджет, поставила заново. Кнопка заработала, но она стала больше - я не могу ее уменьшить до нужного размера. В мобильной версии это проблема, у меня там кнопочки маленькие.

Может вы подскажите, где я накосячила?

Во-1, появилась белая полоса: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. Она меня не парит, т.к. на сайте ее не видно, но до того, как все слетело, ее не было и это странно.
Во-2, кнопка стала больше: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. - здесь она по ширине - ок, а по высоте больше. Можно забить, конечно, но не люблю делать как попало.
В настройках так: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. (так было и до того, как форма слетела)
А вот что в head шаблона (не страниц):

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '1272052016228420');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=1272052016228420&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<style> html { overflow-x: hidden; }</style>
<link href = "https://fonts.googleapis.com/css?family= Open + Sans | Open + Sans + Condensed: 300 " rel = "stylesheet">
<meta property = "og:title" content = "Онлайн-саммит для творческих людей" />
<meta property = "og:type" content = "article" />
<meta property = "og:image" content = "https://artlikbez.ru/images/063.jpg?crc=473251547" />
<meta property = "og:description" content = "Открытые мастер-классы от крупных мастеров: рисуем, пишем, снимаем, фотографируем" />

Задача решима или это вселенская загадка?

[Павел Хомерики 3360]

11 часов назад, Сосновская Анастасия сказал:

я ее сделала прозрачной и положила сверху над своими дизайнерскими кнопками.

А зачем Вы это сделали? Её же можно настроить точно так же. Те настройки, которых нет в настройках виджета задаются средствами Музы, например шрифт, его вес, размеры кнопки.

Что это за символ? Вполне вероятно, что из за него кнопку глючит.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./monthly_2019_03/izobrazhenie.png.3af902a5906eb1150de6ccbaf4840bb2.png" style="width:300px;height:auto;" />

Если вы используете несколько копий кнопки на странице, в каждой копии задайте собственный уникальный класс.

11 часов назад, Сосновская Анастасия сказал:

<style> html { overflow-x: hidden; }</style>

Никогда не используйте этот костыль. Если у вас появляется горизонтальный скроллинг - это значит, что имеются ошибки в верстке, которые надо исправить. А данный код - просто лечит симптом, а не причину. При его применении некоторые пользователи с меньшими экранами чем те, на которые рассчитан сайт, просто не смогут добраться до части контента.

11 часов назад, Сосновская Анастасия сказал:

<link href = "https://fonts.googleapis.com/css?family= Open + Sans | Open + Sans + Condensed: 300 " rel = "stylesheet">

Open Sans есть в наборе бесплатных шрифтов Edge. Подключение через гугл фонтс бессмысленно и неудобно

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.