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

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 рублей. При нынешнем кризисе, это копейки.

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

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

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

Ссылка на основную публикацию