- Главная >
- Готовые модули InSales >
- Форма подписки с помощью UniSender

Предупреждение!
Внесение изменений в шаблон интернет-магазина InSales следует выполнять только при наличии достаточных навыков работы с этой системой. Наша инструкция предоставлена «как есть» и мы не можем нести ответственности за ее неправильное толкование или использование.
Мы оказываем только платную техническую поддержку по данному вопросу и сможем интегрировать код в Ваш магазин только на платной основе
Форма подписки на новости — одна из самых распространенных доработок. Исполнение может быть совершенно разным, очень часто используется штатная форма обратной связи Insales с последующим ручным добавлением подписавшегося в списки рассылки магазина, либо в какие-либо сторонние сервисы рассылки. А можно подключить уже готовую форму какого-то сервиса, например Unisender. У такого способа есть свои минусы и плюсы. Недостатки заключаются в том, что на странице появляется сторонний скрипт, который может не слишком вписываться в дизайн, зависеть от работы других серверов и даже вполне серьезно тормозить загрузку и работу. Плюсы же в том, что можно довольно удобно управлять рассылками в полуавтоматическом режиме.
Начало
Первым делом стоит зарегистрироваться на UniSender. Сразу же после можно начать создавать свою форму, находится она здесь:
Форма
После нажатия на эти кнопочки появляется довольно интересный конструктор форм. Допустим, я хочу горизонтальную форму с полем для почты:
И кнопку желтую!
Вроде как все готово, теперь нужно нажать “получить HTML”.
Вот он самый:
<link type="text/css" rel="stylesheet" href="https://cp.unisender.com/v5/template-editor-new/js/lib/datepicker/pikaday.css"/><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/lib/moment/moment-with-langs.min.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/lib/datepicker/pikaday.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/app/lang/ru.js"></script><script type="text/javascript" src="https://cp.unisender.com/v5/template-editor-new/js/app/preview/form/form-js.js"></script><form method="POST" action="http://cp.unisender.com/ru/subscribe?hash=5usr1zbsr8hnqsupfuy9emenxmdq79y4do97317e" name="subscribtion_form" us_mode="embed" target="_blank"><div class="container responsive"><table cellpadding="0" cellspacing="0" align="center" style="width: 100%; box-sizing: border-box; float: left; background-color: rgb(204, 204, 204);"><tbody><tr><td><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="400" align="center"><tr><td><![endif]--><table cellpadding="0" cellspacing="0" align="center" style="border-radius: 0px; max-width: 450px; width: 100%; border: none; margin: 0px auto; border-spacing: 0px; background-color: rgb(255, 255, 255);"><tbody><tr><td width="100%" style="vertical-align: top; max-width: 450px; padding: 25px;"><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="400" align="center"><tr><td><![endif]--> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; height: 70px; border-spacing: 0px; background-image: none;"> <tbody><tr> <td style="width: 100%; padding: 10px; border: none;" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; table-layout: fixed; border-spacing: 0px;"> <tbody><tr> <td style="width:100%;"> <table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; border-spacing: 0px;" id="JColResizer0"> <tbody><tr><td style="font-size:0;vertical-align:top;" align="center"><!--[if (gte mso 9)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="224px" valign="top"><![endif]--><table cellpadding="0" cellspacing="0" border="0" width="100%" style="vertical-align:top;display:inline-table;max-width:224px"><tbody><tr><td style="vertical-align: top; width: 100%;" align="center" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; height: 50px; border-spacing: 0px;"> <tbody><tr> <td style="width: 100%; padding: 8px; height: 50px;" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; table-layout: fixed; border-spacing: 0px; min-height: 50px;"> <tbody><tr> <td style="width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(34, 34, 34);"> <div style="display:inline-block; width:100%;font-size:0;"> <label style="font-size: 12px; padding: 0px 0px 5px; vertical-align: middle; box-sizing: border-box; width: 32%; display: inline-block;"> <span>E-mail</span> <b style="font-size:14px;font-family:Georgia;line-height:10px;"> *</b> </label> <div style="display: inline-block; width: 66%;"> <input type="text" name="email" _validator="email" _required="1" style="border-radius: 3px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 13px; line-height: 1; font-family: Arial, Helvetica; padding: 0px 8px; width: 100%; box-sizing: border-box; border: 1px solid rgb(193, 201, 203); height: 30px; background-image: none; background-color: rgb(255, 255, 255);" _label="E-mail" placeholder=""> <div class="error-block" style="display:none;color:#ff592d;font:11px/18px Arial;"></div> </div> </div> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td></tr></tbody></table><!--[if (gte mso 9)|(IE)]></td><td width="156px" valign="top"><![endif]--><table cellpadding="0" cellspacing="0" border="0" width="100%" style="vertical-align:top;display:inline-table;max-width:156px"><tbody><tr><td style="vertical-align: top; width: 100%;" align="center" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; height: 50px; border-spacing: 0px;"> <tbody><tr> <td style="width: 100%; min-height: 50px; height: 50px; background-image: none; background-color: rgb(255, 255, 255);" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; table-layout: fixed; border-spacing: 0px; min-height: 50px;"> <tbody><tr> <td style="width: 100%; text-align: center;"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="display: inline-table; width: auto; border-spacing: 0px;"> <tbody><tr> <td align="center" valign="middle" style="border-radius: 30px; border: none; padding: 15px 20px 17px; height: 18px; min-height: 18px; max-width: 97px; background-color: rgb(255, 187, 0);"> <button href="javascript:;" target="_blank" style="width: 100%; display: inline-block; text-decoration: none; word-break: break-all; font-size: 14px; font-family: Arial, Helvetica, sans-serif; line-height: 16.8px; color: rgb(255, 255, 255); border: 0px; background-color: rgb(255, 187, 0);">Подписаться</button> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td></tr></tbody></table><!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> </tbody></table> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td></tr></tbody></table><!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr></tbody></table></div><input type="hidden" name="charset" value="UTF-8"> <input type="hidden" name="default_list_id" value="5559362"> <input type="hidden" name="overwrite" value="2"> <input type="hidden" name="is_v5" value="1"></form> <link type="text/css" rel="stylesheet" href="<a href=" https:="" cp.unisender.com="" v5="" template-editor-new="" js="" lib="" datepicker="" pikaday.css"="">https://cp.unisender.com/v5/template-editor-new/js..."/>https://cp.unisender.com/v5/template-editor-new/js...</a>">https://cp.unisender.com/v5/template-editor-new/js...</a>">https://cp.unisender.com/v5/template-editor-new/js...</a>">https://cp.unisender.com/v5/template-editor-new/js...</a>"><form method="POST" action="<a href=" http:="" cp.unisender.com="" ru="" subscribe?hash="5usr1zbsr8hnqsupfuy9emenxmdq79y4do97317e"">http://cp.unisender.com/ru/subscribe?hash=5usr1zbs..." name="subscribtion_form" us_mode="embed" target="_blank"><div class="container responsive"><table cellpadding="0" cellspacing="0" align="center" style="width: 100%; box-sizing: border-box; float: left; background-color: rgb(204, 204, 204);"><tbody><tr><td><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="400" align="center"><tr><td><![endif]--><table cellpadding="0" cellspacing="0" align="center" style="border-radius: 0px; max-width: 450px; width: 100%; border: none; margin: 0px auto; border-spacing: 0px; background-color: rgb(255, 255, 255);"><tbody><tr><td width="100%" style="vertical-align: top; max-width: 450px; padding: 25px;"><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="400" align="center"><tr><td><![endif]--> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; height: 70px; border-spacing: 0px; background-image: none;"> <tbody><tr> <td style="width: 100%; padding: 10px; border: none;" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; table-layout: fixed; border-spacing: 0px;"> <tbody><tr> <td style="width:100%;"> <table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; border-spacing: 0px;" id="JColResizer0"> <tbody><tr><td style="font-size:0;vertical-align:top;" align="center"><!--[if (gte mso 9)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="224px" valign="top"><![endif]--><table cellpadding="0" cellspacing="0" border="0" width="100%" style="vertical-align:top;display:inline-table;max-width:224px"><tbody><tr><td style="vertical-align: top; width: 100%;" align="center" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; height: 50px; border-spacing: 0px;"> <tbody><tr> <td style="width: 100%; padding: 8px; height: 50px;" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; table-layout: fixed; border-spacing: 0px; min-height: 50px;"> <tbody><tr> <td style="width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(34, 34, 34);"> <div style="display:inline-block; width:100%;font-size:0;"> <label style="font-size: 12px; padding: 0px 0px 5px; vertical-align: middle; box-sizing: border-box; width: 32%; display: inline-block;"> E-mail <b style="font-size:14px;font-family:Georgia;line-height:10px;"> *</b> </label> <div style="display: inline-block; width: 66%;"> <input type="text" name="email" _validator="email" _required="1" style="border-radius: 3px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 13px; line-height: 1; font-family: Arial, Helvetica; padding: 0px 8px; width: 100%; box-sizing: border-box; border: 1px solid rgb(193, 201, 203); height: 30px; background-image: none; background-color: rgb(255, 255, 255);" _label="E-mail" placeholder=""> <div class="error-block" style="display:none;color:#ff592d;font:11px/18px Arial;"></div> </div> </div> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td></tr></tbody></table><!--[if (gte mso 9)|(IE)]></td><td width="156px" valign="top"><![endif]--><table cellpadding="0" cellspacing="0" border="0" width="100%" style="vertical-align:top;display:inline-table;max-width:156px"><tbody><tr><td style="vertical-align: top; width: 100%;" align="center" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; height: 50px; border-spacing: 0px;"> <tbody><tr> <td style="width: 100%; min-height: 50px; height: 50px; background-image: none; background-color: rgb(255, 255, 255);" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; table-layout: fixed; border-spacing: 0px; min-height: 50px;"> <tbody><tr> <td style="width: 100%; text-align: center;"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="display: inline-table; width: auto; border-spacing: 0px;"> <tbody><tr> <td align="center" valign="middle" style="border-radius: 30px; border: none; padding: 15px 20px 17px; height: 18px; min-height: 18px; max-width: 97px; background-color: rgb(255, 187, 0);"> <button href="javascript:;" target="_blank" style="width: 100%; display: inline-block; text-decoration: none; word-break: break-all; font-size: 14px; font-family: Arial, Helvetica, sans-serif; line-height: 16.8px; color: rgb(255, 255, 255); border: 0px; background-color: rgb(255, 187, 0);">Подписаться</button> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td></tr></tbody></table><!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> </tbody></table> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td></tr></tbody></table><!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr></tbody></table></div><input type="hidden" name="charset" value="UTF-8"> <input type="hidden" name="default_list_id" value="5559362"> <input type="hidden" name="overwrite" value="2"> <input type="hidden" name="is_v5" value="1"></form>
Сайт
Осталось самое главное. Вставить код на сайт и начать получать подписчиков. Я хочу вставить код на главную страницу чуть выше футера:
Не очень красиво, придется поработать со стилями. Хотя бы так:
<style> .container.responsive table { background-color: #fff !important; } </style>
Настройка
Дальше можно менять стили целую вечность, но давайте посмотрим, как оно работает:
Плохо работает. Нужно зайти обратно в аккаунт Unisender и настроить e-mail отправителя. Найти где это, практически невозможно, поэтому вот подробные картинки куда кликать:
И вот на этой странице нужно заполнить все поля:
Теперь можно проверять!
Итог
Судя по сообщению системы, все работает!
Теперь можно ждать подписчиков и устраивать рассылки.
Заключение
Данный мануал для InSales включает в себя только основной код. Разобраться с ним и внедрить его в магазин сможет опытный разработчик. Если Вы не готовы самостоятельно заниматься изменениями шаблонов InSales, а также хотите реализовать другие идеи как по этому модулю, так и в общем по системе InSales, мы будем готовы Вам помочь в рамках платной поддержки.
