Skip to content
 

Четыре способа создания красивых форм подписки

forma_podpiski

 

Здравствуйте дорогие читатели блога «Создание и продвижение сайта».  Поговорим сегодня о создании красивых форм подписки.

Я не стану рассказывать, что красивое оформление блога, положительно влияет на продвижение сайта. А сразу перейду к описанию создания красивых подписных форм.

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

Поэтому, чтобы хоть как то выделиться, украсить форму подписки, сделать её индивидуальной, приходится «изобретать велосипед». Вот давайте этим и займёмся.

 Способы создания красивой формы подписки

Первый способ я узнала из курса Александра Борисова – «Рассылка, которая продаёт».  Очень интересный курс, много полезного материала и советов.

Заключается этот метод в том, что мы «заимствуем» любую понравившуюся форму подписки.  Делается это таким образом:  находясь на сайте, с понравившейся формой подписки,  нажимаете на клавиатуре сочетание клавиш  «Ctrl»+ «U». Открывается код страницы. Теперь  нужно найти код формы подписки.  Объясню на примере моей страницы.

Смотрим на слова, с которых начинается форма.  В моем случае это:- «Подписка на блог», и далее «быть в курсе».  Вот эти слова нужно найти в коде страницы. Нажимаем сочетание клавиш «Ctrl»+ «F».  Появляется окно поиска, вписываем в окно слова «быть в курсе».

forma_podpiski

Теперь находим начало кода, выделяем его, и прокручиваем страницу вниз, находим конец кода, нажимаем клавишу «Shift», ставим курсор в конец кода и жмем левую кнопку мыши. Код полностью выделился, наводим на выделенный код курсор, нажимаем правую кнопку мыши, и в выпадающем окне жмем копировать.

forma_podpiski

Теперь идем в Smartresponder – «Формы» — «генератор всплывающих окон». Убираем,  все галочки в окне настроек и  в окно для кода вставляем скопированный код.

forma_podpiski

Смотрим на изображение формы. Если все отображается правильно, значит, код скопировали верно.

forma_podpiski

Теперь нужно в скопированном коде заменить значения  «uid» и  «did», на свои. Дело в том, что создавая новую подписку на  Smartresponder,  ей  присваиваются номера, соответствующие нашему имени и данной подписке, эти номера уникальные и для каждого свои. Значит, чтобы люди подписывались именно на вас, и вашу рассылку, нужно поставить свои значения.  Взять эти номера вы можете из своей формы подписки, созданной на Smartresponder .

forma_podpiski

И последнее действие.  Нужно скопировать картинки,  с формы подписки, (или выбрать свои подходящие по размеру), загрузить их на хостинг в специально созданную папку для изображений.  Я просто загрузила изображения в библиотеку медиафайлов, (из админ. панели – «добавить медиафайл»).  Затем скопировать адрес изображения, и  вставить этот адрес в код, «img src=адрес  вашей картинки».  Проверяем, отображение картинок в окошке Smartresponder.   Копируем исправленный код,   вставляем его в текстовый виджет,  в административной панели вашего сайта.  Любуемся новой формой подписки! Вы можете также прочитать, как установить красивую форму подписки на обновления, в конце статьи на блоге.

Способ второй: — сделать форму подписки самостоятельно.

Принцип действия заключается в том, чтобы создать рамку с фоном и картинкой,  и вставить в эту рамочку форму подписки. Для этого понадобиться программа  Dreamweaver 8, Microsoft Office SharePoint Designer 2007 (бесплатная программа),  или  Web Pade Maker.

В этих программах можно создавать любые формы подписки, даже не зная HTML  кодов.  Я, не в коей мере, не претендую на роль учителя,  потому, что сама все делала «методом научного тыка».  Думаю, в интернете Вы сможете найти уроки по работе в этих программах.  Я лишь опишу, как делала форму сама.  Простейший вариант.

forma_podpiski

Открываем программу,  жмем  «HTML»,  если открылась страница с кодом (code), то ставьте курсор после слова —  <body>, клик,  далее жмем кнопку  «Design».

forma_podpiski

Перед нами чистый лист. Щелкаем по нему курсором.  И на верхней панели жмем иконку таблицы. На этой картинке я также отметила иконку добавления картинок.

forma_podpiski

Открывается окно, где нужно  определить, какую таблицу  Вы желаете вставить.

forma_podpiski

Мне нужна простая таблица, в одно окно, то есть один ряд и один столбик. Значит нужно в окне,  для количества рядов и столбцов, поставить  цифру 1.  Далее вписываем  ширину таблицы, заранее измерьте ширину сайтбара, измерить размер можно при помощи специальной программы для снятия скриншота, называется программа — «FastStone Capture».

У меня ширина – 300, так и записываю, можно сделать на пару пикселей меньше.  Рамку  (border)  ставим — 0 Далее отступы,  (внешний и внутренний) ставлю в обоих окошках – 0.  Жмем «OK».  Таблица готова, растягиваем её вниз до желаемой высоты.

Щелкаем курсором внутри таблицы.  Теперь вы можете добавлять фон, картинки, и саму форму подписки. Иконка для добавления картинок на верхней панели.  Но,  продолжу рассказывать, как делаю я.

Для того, чтобы картинки или фон нашей подписной формы отображался в интернете, а не только в программе, изображения должны быть в интернете, и иметь свой адрес. Я заранее загружаю нужное изображение в библиотеку файлов. В админ. панели – «Медиафайлы» — «добавить новый».

forma_podpiski

Копирую адрес изображения,  и вставляю в окно для вставки фона.

forma_podpiski

 Рамочка с фоном готова,  теперь нужно определиться, где вы хотите расположить форму подписки,  если на каком -то изображении, то картинку так же нужно добавлять как фон, тогда форма подписки будет на изображении. Если вы хотите форму подписки расположить под изображением, то добавляем картинку,  нажав на иконку вверху, и вставив адрес картинки в окно URL.

Теперь нам понадобиться форма подписки.  Её можно сделать заранее на Smartrespondere.  Жмем «форма», «создать новую»,  выбираете подписку, для которой будет создаваться форма, и приступайте к созданию.

Для нашей подписки требуется чистая форма, без рамочки, без фона. Значит нужно:-  убрать все лишние  галочки, поставить нужную ширину формы, и настроить цвет кнопки.  Скопировать форму, и сохранить код в блокноте, так как она может пригодиться не один раз.

Возвращаемся к нашей рамочке. Ставим курсор в то место, где будет располагаться форма,  регулируем расположение курсора в нижней панели. В окне «Horz» — центрируем, в окне «Vert» — определяем значения по вертикали, то есть расположение вверху или внизу таблицы. Я выбрала расположение внизу- «Bottom».

forma_podpiski

Когда выбрали нужное положение, и курсор мигает там, где нужно, жмем кнопку «Code»,  открывается код нашей рамки, курсор будем мигать в том месте, куда нужно вставить код. Вставляем код, и возвращаемся на визуальную страницу.  Проверяем, все ли стоит там, где нужно, опять открываем код.  Копируем код, между тегами  <body>…</body>.

Все, рамочка готова, можно вставлять скопированный код  в текстовый виджет блога. Конечно трудно в одной статье всё описать, поэтому, если Вы решили сделать форму и у Вас что –то  не заладилось, обращайтесь за помощью.  Я обязательно объясню и помогу каждому, кто ко мне обратится.

Способ третий, самый легкий, но не бесплатный. Заказать изготовление подписной формы фрилансеру. Вам сделают любую форму подписки, какую только пожелаете. Правда профессиональные фрилансеры дорого берут за свои услуги.

Ну и последний способ – заказать изготовление формы мне.  Время не стоит на месте, и с момента написания статьи, я научилась делать не только простейшие формы подписки, но и надевать код на сложные красивые формы. А так же создавать в фотошопе красивые формы подписки.

А так же в сайтбаре вы можете увидеть форму подписки на обновления блога, созданную только при помощи стилей. Она без фона, и поэтому будет прекрасно смотреться на любом блоге, не зависимо от его фона. Цвет рамки можно менять.

Создание новой, красивой, индивидуальной формы (в программе Photoshop) — 300 рублей, одеть код на готовую форму — 200, создать форму по вашему заказу, состоящую только из стилей — 150 рублей. При нынешнем кризисе, это копейки.

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

Вот и все, что я хотела рассказать Вам об изготовлении красивой формы подписки. Если Вам понравилась статья, поделитесь с друзьями, нажав на социальные кнопки, буду Вам безмерно благодарна. И не забудьте подписаться на обновления блога, чтобы быть в курсе выхода новых статей.  До встречи на страницах блога, удачи Вам.

Ирина Баталова.

Я хочу быть в курсе событий на сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Google

97 комментариев

  1. Спасибо за информацию! Через недельки две займусь созданием такой красоты. А то сейчас решаю проблему индексации сайта и все не могу понять, что там такое, уже все перепробовала.А У ВАС ДЕЙСТВИТЕЛЬНО ФОРМА ПОДПИСКИ ПРОСТО ШИКАРНАЯ! ❗

  2. Это же подписка на smartresponer? А на feeв можно так сделать?

    • Наташа, доброго времени суток. Без разницы, где вы возьмете форму подписки, сделать красивую форму можно из всех форм. Тут не важно, где вы взяли форму, она является основой, мы же её «одеваем» в таблицу с фоном и картинками.

  3. Здравствуйте! А вы не хотите рубрику архивы из сайдбара убрать?Просто многие рекомендуют ее не применять пока блог молодой. 🙄

    • Здравствуй, Арина. Давай уже перейдём на ты? Я не думаю, что нужно скрывать, что блог молодой. Мне самой иногда интересно посмотреть на сайтах возраст блога. Так вот, если блог старый, а посещаемости нет, и место занимает с пятью нулями, то у меня складывается не очень хорошее мнение о таком блоге, а если блог молодой, а показатели не плохие, то к такому блогу и доверия больше. Но это лично мое мнение. Я наверное не совсем точно выразилась, скажем так, я захожу на блог, и вижу не очень хорошие показатели посещаемости и место среди блогов, тогда я смотрю архив, чтобы определить возраст блога, если оказывается, что блог молодой, то я с интересом буду его читать, так как у него ещё все впереди. А если блогу уже несколько лет, то скорее всего, он так и будет в хвосте и будущего у такого блога нет, его и читать не интересно.

  4. Огромное спасибо за идею создания формы подписки. Я даже и не задумывалась, что можно вот так скопировать понравившуюся форму и сделать под себя. А можно так же сделать для сервиса justclick.ru Я просто недавно перенесла всех своих подписчиков туда и хочу красивую форму на сайт. 😉

    • Здравствуй, Ирина. Я думаю разницы нет, на каком сервисе взята форма подписки. Мы ведь не меняем скрипт подписной формы. Идея состоит в том, чтобы поместить форму в таблицу в фоном и картинкой. А сама форма остается без изменений. Главное при создании формы на почтовом сервисе, убрать все галочки с фона, обводки, что бы получилась прозрачная форма, которую можно поместить на фон.

  5. Анна (Манздадер):

    Спасибо за такое доступное объяснение. Пока занимаюсь немного другими делами на своем блоге. И технические вопросы у меня больше решает муж, так как мне все это дается достаточно сложно:oops: . Но если мне понадобиться создать самостоятельно подписку, благодаря вам я смогу это сделать 🙂

    • Пожалуйста, Анна, рада, что смогла помочь. Если в процессе создания подписной формы будут затруднения, обращайтесь за помощью, буду рада помочь. Заходите в гости, буду рада общению. Удачи Вам и продвижение вашему блогу.

  6. Спасибо, Ирина за разъяснения по поводу сервисов. Испробую ваш вариант создания подписки. Попробую по крайней мере 😉

    • Пожалуйста, Иринка. Я приходила к вам на сайт, очень красивый, добрый и гостеприимный. И подписные формы ваши красивые! Мне понравились! Буду приходить к вам в гости.

  7. Ира, форма подписки у тебя шикарная. Моего «креатива» на такое не хватает. Тебе что ли заказать?.. 🙂

  8. Ирина, приглядываюсь к вашей красивой форме подписки,думаю тоже что-то изменить на сайте за лето, пока читателей мало. Где бы еще время найти для этого. Но если надумаю, и не пойму что-то в технических вопросах, можно будет обратиться к вам на безвозмездной основе за помощью?

  9. Поучительная статья.Спасибо.

  10. Здравствуйте, Ирина!

    Отличная статья! 🙂 . Я бы, наверное, добавила еще пятый способ, с использование фотошопа. Но это уже более сложный вариант, не каждый сможет справиться, по крайней мере сразу.

    С уважением.

    • Спасибо, Екатерина, я фотошоп использую для подготовки картинок, а затем их всё равно нужно разместить в таблице, вот как раз об этом и идёт речь. Спасибо, за комментарий, буду рада общению, заходите в гости. 🙂

  11. Ирина, здравствуйте 🙄 Пыталась-пыталась я сегодня целый день ваш код формы под свой подогнать со своей картинкой, да так у меня ничего и не вышло. Вернее вышло, но наполовину 😮 Не могли бы вы мне помочь? Картинку я подготовила. Осталось эти поля и кнопку разместить. Вот здесь я и застряла.

  12. Светлана:

    Здравствуйте,Ирина.

    Не поняла, где код начинается и , где заканчивается. Идея интересная,но не понятно ничего. Для блондинки объясните, пожалуйста.

    Спасибо.

    • Здравствуй, Светлана, для того, чтобы определить начало кода, нужно найти слова, содержащиеся в форме подписки, в самом верху, например: «подпишитесь». Это делается с помощью клавиш CTRL+F. И перед этими словами ищешь начало кода. Обычно это див или табле. А затем после всего кода ищешь такой же закрывающий тег: /див или /табле. Для того, чтобы находить целиком код, нужно хотя бы немного разбираться в них. У Евгения Попова есть бесплатные курсы по HTML и CSS. Которые помогают «блондинкам» стать «брюнетками»! 😉 Первый раз будет сложно найти код целиком, но нужно пробовать, и проверять код в смартреспондере, затем копировать снова, и так до тех пор, пока не придёт понимание. Затем коды сами будут «кидаться» в глаза. Всё приходит с опытом. Пробуй, и всё получится, а если нет, обращайся за помощью, я помогу. Удачи тебе, Светлана.

  13. Светлана:

    Ира, спасибо. Я это поняла. Я нашла «бить в курсе», а дальше в твоем случае,конкретно, что я должна искать. Как выглядит этот код, в данной форме?
    Спасибо.

    • Быть в курсе, это не начало, это уже в самом коде. Нужно искать слова: «Подписка на блог». А затем начало кода: — table align, затем прокручиваешь код смартреспондера до его заключающего тега SmartResponder.ru subscribe form code и после этого ищи закрывающий тег /table. Это и будет конец кода. Некоторые коды заключены в тег div, принцип копирования такой же. Удачи тебе, Светлана!

  14. Ирина, посмотрю, попытаюсь сделать форму сама. Но если не получится, то обращусь к тебе с просьбой помочь. Пока у меня есть стремление научиться, надо воспользоваться, а то запал быстро проходит. Написала тебе об этом, с а сама подумала. Вот если я долго раскачиваться стану, ты к тому времени уже плату за услуги станешь брать 😀
    Что мне тогда делать то? 😆 Сама момент упускаю. Или ты по дружбе меня на заметку возьмешь, вдруг позднее обращусь? 💡

    • Зоя, не беспокойся, с друзей деньги не беру! Может быть и я когда нибудь к тебе за помощью обращусь! Так что удачи! Осваивай сама, тебе это ещё не раз пригодится, не обращаться же каждый раз к фрилансерам по пустякам!

  15. Спасибо! Я вот еще нашел полезный сервис подписки-банеры http://inetclick.ru/

    • Эти банеры будут находиться не на вашем блоге, а это прямая внешняя ссылка на другой ресурс, оно вам нужно? Нужно чтобы картинки приводили к вам, а не от вас. Даже если вы поставите в настройках переходить при нажатии на картинку на ваш сайт, адрес картинки всё равно будет на их сервисе.

    • Зачем использовать чужое, всегда ведь должна быть некая индивидуальность. Ведь всегда приятней смотреть на то, что сделал лично ты.

  16. Спасибо, Ирина, что делишься такими секретами, как изготовление красивых форм подписки, а то стандартные как-то надоели уже.
    Способы очень интересные, буду пробовать.

  17. Ирина, у меня не получается 😥
    Все сделала, как ты описала, вставляю в блог — отображается не так.

    • У меня тоже некоторые формы не хотели устанавливаться. Приходилось ставить другую формулу. Дай мне твою формулу, я посмотрю, как встанет на моём блоге, и заодно проверю, что с ней не так.

  18. Здравствуйте, наконец-то нашёл то, что искал, а то уже замучился искать. Спасибо вам большое!!! 😉

  19. У вас хороший сайт, есть чему поучиться, успехов в ваших делах!!!

  20. В самом начале, когда создавала форму подписки (она у меня простая), тоже пользовалась исходным кодом других сайтов 🙂 Это полезно — копаться в кодах, сравнивать и понимать, что к чему относится.
    Хочу вопрос задать вот такой. Я форму вставляю вручную в сатью, поскольку, как уже писала, файлы страница и пост не позволяют это сделать. Куда Вы вставляете код подписки, какой файл? Но больше меня интересует: после каких и до каких слов. Хочу полазить по другим файлам, может там что-н. похожее найду.

    • У меня стоит плагин, в который я вставила код подписки, и форма подписки теперь на всех страницах после статьи. Попробуй вставить код в файл, отвечающий за страницы, перед комментариями. Я думаю должно получиться. А плагин я поставила давно, когда ещё не лазила в файлы. Всё не соберусь его убрать, времени нет.

  21. Спасибки! Очень помогли разобраться!!! ❗

  22. Здравствуйте, мы предлагаем Вам услуги комплексного продвижения вашего сайта, подробнее с нашими услугами Вы можете ознакомиться на нашем сайте clck.ru/9G6Ao Извините за беспокойство.

  23. Ирина добрый вечер, замечательный урок, форму сделала все получилось, только почему не могу вставить ее на страницу. Я хотела под статьями чтобы такая красивая форма была. Может ее надо в какие либо теги заключить, а то получается что как бы таблица вставляется, и вся страница у меня ползет. ❓

    • Вы правы, очень трудно вставить форму подписки под статью. Не всякий шаблон работает в этом случае. У меня тоже были проблемы со вставкой формы на странице под статьёй. Пришлось устанавливать плагин для вставки рекламы и формы подписки на страницу с постом.

  24. Ирина, здорово, что объяснили все. Буду пробовать. Кстати, когда только познакомилась с Вашим блогом, сразу обратила внимание на форму подписки под статьями. Строго, но красиво. 😉

  25. Ирина, расскажите как сделать кнопку «узнать подробнее», которая отправляет на одностраничник. Как у Вас с продающей графикой.Или отправьте, где почитать))

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

      • Ирина, меня интересует, как сделать чтобы нажал и переходит на страницу. я так никогда не делала.

        • А, поняла, что ты имеешь в виду. Всё очень просто. В виджет сначала вставляешь ссылку на нужную страницу, а сразу после ссылки адрес картинки. Картинку я сделала заранее, загрузила её в библиотеку в админ панели, скопировала адрес картинки, и получился такой код: —
          <p><a href=»адрес ссылки» target=»_blank»>
          <img src=»адрес картинки» width=»300″ height=»375″ />
          </a>
          </p>

  26. Здравствуйте, мы предлагаем Вам услуги комплексного продвижения вашего сайта, подробнее с нашими услугами Вы можете ознакомиться на нашем сайте clck.ru/9G6Ao Извините за беспокойство.

  27. Ирина, что то у меня с виджетом не получается((

  28. Ирина, спасибо за полезность. Я давно хочу поставить форму подписки. Но мне надо еще будет снова зарегистрироваться на сайте подписки. я свою с сайдбара убрала и все не могу назад ее поставить.
    А после статьи у меня совсем простая форма стоит. ее как можно изменить?
    И я уже не помню, как ее ставила. Плагином, наверное.

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

  29. Больше всего мне понравился первый способ: сдуть и всё! 😉 Никогда не была двоечницей, но сейчас захотелось ей побыть, так как у меня с творческим мышлением проблемы. В технике я разберусь, а вот придумать что-то интересное — увы!..

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

  31. Давно хотела поставить себе на сайт красивую форму подписки,но все не находила время разобраться,найти информацию,как это делается,спасибо,что подсказали,и подробно объяснили

  32. ИРина,я фотошопе сделала картинку для формы подписки.А что делать дальше не разберусь.Помогите

    • @Олеся Сазонова, теперь нужно соединить картинку с формой подписки. Можно это сделать в редакторе Dreamweaver 8, или Web Pade Maker, или Microsoft Office SharePoint Designer 2007. Таких программ на самом деле много. Вставляешь картинку как фон, а на неё размещаешь подписку на твою услугу или бесплатность. Подробнее как это сделать я описала в статье. Но можно собрать форму и онлайн, например на этом сайте — http://inetclick.ru/ . Там вообще легко для новичка, всё по шагам. Попробуй, если не получится, то скинешь мне картинку и твою подписку, я попробую найти время и собрать всё в кучку! ➡

  33. То. что у меня стоит на блоге. сама состряпала .. сплошное творчество. Безо всяких программ.. картинку понравившуюся впихнула.. 😉 И получилось то. что получилось..

  34. Ирина,у меня так и не получилось.Я бестолковая?

    • Олеся, почему сразу бестолковая? Всё приходит со временем и практикой, и мало у кого всё получается с первого раза. Пробуй ещё раз. А по какой формуле ты делаешь? Брала у кого то с блога, или у тебя есть готовый код? Не все коды в других блогов могут подойти к твоей теме. Скажи подробнее, что именно у тебя не получилось?

  35. Очень интересная статья! В ближайшее время займусь преображением своей формы подписки.Ну и наверное снова обращусь к вашей статье.

  36. Ирина, спасибо за науку. Особенно меня привлек первый способ. Статью отправил в закладки.

  37. Ирина, здорово у вас получилось! Сама мучаюсь пытаюсь себе сделать красивую формы.

    • Елена, на самом деле это не сложно, только очень трудно рассказать про все способы создания красивой формы подписки в одной статье. Вот я недавно убрала форму с картинкой, и сделала себе подписную форму только с помощью стилей. Можете посмотреть в сайдбаре вверху.

Написать отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: