Как создать горизонтальную форму подписки

Заготовка горизонтальной формы (http://yadi.sk/d/nX4o2YNZK3ZCR)

Добрый день.

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

Она располагается горизонтально как на примере Олесь Тимофеев. Ком ИФ вот так.

Вторая особенность в том, что нигде нет кода генератора горизонтальных форм, только вертикальных.

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

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

Сейчас я открою ’’ горизонтальная форма ’’полуфабрикат’’, ее не скачиваете она у вас автоматически скачивается. Сохранить.

Скачали и теперь нам стоит открыть в любом редакторе ’’HTML’’, если у вас есть программка NotePad++  отлично.

Она очень сильно подходит если пока никакого приложения для работы с кодом я вам предлагаю такой вариант.

Опять же под этим видео будет ссылка на эту программку она открывается только через ’’Google-chrome’’, поэтому используйте пожалуйста ’’Google-chrome’’, я сейчас скопирую и вставлю ссылку ’Присоединить к видео’’ сейчас пусть запускается.

У вас открывается окошко это и есть ’’HTML редаптор’’.

Для того чтоб начать работать в нем нужно открыть эту заготовку, которую мы скачали только что.

Нажимаете  ’’open’’ и горизонтальная форма подписки ’’полуфабрикат’’.

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

Для этого нам стоит создать обычную форму подписки  Smartresponder.

Посмотрим, как это будет на примере Smartresponder,  потому что он на данный момент является самой простой и самой удобной для начала сервис.

Как раз как вы заходите в ваш аккаунт Smartresponder,- открываете формы и старый генератор форм.

Вот у вас тут настройки этой формы. Ту вам стоит выбрать ссылку, на которой будет подписываться эта форма,- это основное, это самое главное.

Выбираете на ссылку,- выделили ее. Вопросы по дизайну вас не интересуют, потому что у нас там уже прописан код внешнего вида этой формы.

Нас интересуют только внутренности,- для этого опускайтесь в самый низ генератора форм Smartresponder,- нажимаете ’’отобразить код’’,- он уже тут готовый, его полностью копируете,- от начала и до конца, — копировать и возвращайтесь в HTML редаптора.

Нажимаете новый файл new,- вот у вас открывается ’’новый файлик’’,-  сюда мы ставим этот код в будущую горизонтальную форму.

Среди этого кода нам стоит найти элементы, которые нам нужны это вот 5  input type hidden.

Для этого нажимаете ’’ctrl + F’’ если у вас ’’Windows’’ и команд F, а если у вас макинтош, как у меня, открывается строка поиска на верху, я ее сейчас открою.

’’ctrl + F’’ вот оно открылось,  и вводите искомую фразу, а ищем мы именно hidden, вот их тут четыре, еще один.

Hidden мы найдем после того как мы расставим их по местам первые эти 4 hidden.

Для того чтобы их разделить от общего текста, от общего кода вы ставите курсор перед начинающей галочкой input и нажимаете пару раз ’’enter’’.  У нас получается, что она отделяется от общего кода.

Один есть ’’hidden’’, также делаете еще один ’’input type hidden’’, еще один, еще один и после четвертого  отделяете от основного кода. Вот у вас получилось 4 нужных элемента. Где найти пятый. Опять же нажимаете ’’ctrl + F’’, пишете ’’hidden’’, он у вас подсветку делает у первого. Нажимаете ’’enter’’, еще одного, еще одного, еще один. Пятый  ’’enter’’ показывает скрытый input. Его мы полностью выделяем от открывающей галочки до закрывающей, обязательно от открывающей и до закрывающей, вот так. Отсюда обрезаем и подставляем в новую строчку ’’вставить’’.

5 ’’hidden’’, которые отвечают за вашу рассылку, которые помогут  в горизонтальной форме понимать, что человек подписывается именно на вашу рассылку.

Эти ’’ 5 input type hidden’’ мы копируем, возвращаемся в горизонтальную форму, эти выделяете и удаляете.  На их место ставим то, что скопировали,- готово. Все. Работоспособность их мы проверим уже на сайте. Теперь код почти готов, его можно ставить на сайт. Поэтому его полностью копируем от начала и до конца. Не забываем никакие элементы от начала и до его конца. Его копируете, возвращаетесь на блок не ваш, заходите на админпанель. Если она уже у вас открыта или если вы еще не зашли туда, то после строки вашего сайта вы пишете .com или .ru или .me. Пишете  /wp-admin.  Он у нас запрашивает логин и пароль авторизуетесь и заходите.

Вот вы уже в админке опускаетесь в раздел ’’внешний вид’’ и ’’редактор’’.

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

Самая сложная самая интересная задачка здесь это найти нужное место, куда ей нужно подставить строку этого кода горизонтальной подписки.

Сразу подскажу что нужно искать после тега ’’body’’, потому что, то что идет выше до него- это невидимые части сайта, это как бы мозг этого сайта и его не трогаем туда не пойдем.

Находите ‘’body’’ можете также искать нажав ’’ctrl + F’’, и ввести букву ’’body’’.

Показал первый ’’body’’ это то что нужно. После него ищем место.

Как мы ищем место для формы  подписки. Для этого открываете сайт главную страницу обязательно в Google chrome, сейчас узнаете, почему именно в Google chrome.

Вот у вас есть шапка сайта основная часть и футер(footer)- подвал сайта.

Нас интересует именно заголовок или шапка сайта. Нажимаете по шапке сайта правой кнопкой и нажимаете ’’проверить элемент’’.

Вот у нас открылся код — это код вашей страницы. Находите строку которая отвечает чисто за ваш заголовок, она у каждого выглядит по разному, поэтому тут нет одного решения и нужно экспериментировать. ’’Body + ентер’’, это слишком широко как видите я навожу на body wrapper, выделяется полностью сайт, это не то что нужно.

Нажимаем на шаг header part wrapper и подсвечивается чисто заголовок, это уже то что нам нужно. Вот еще интересный момент можем,-  вот сюда подставить ну, а дальше это не то что нужно нам. Давайте будем опираться на div class hidden.

Part wrapper,- эту строчку кода нам нужно искать в заголовке. Для этого полностью копируйте название этого класса, по нему мы будем искать.

Для того чтобы копировать нажимаете два раза на имя класса у вас он может отличаться в 99 случаев, поэтому  я не могу вам объяснить как именно оно будет у вас выглядеть поэтому стоит экспериментировать.

Выделяете его, копируете, возвращаетесь в админку, здесь открываете опять же,- поиск,-  это ’’ctrl + F’’, удаляете старое, вставляете новое.  Вот нашел то, что мы искали.

Вам стоит проверить то же самое место ’’нашел’’, это можно сделать, посмотрев что здесь написано ’’div class’’ , ищем здесь это не то что мы ищем, поэтому возвращаемся в поиск здесь ’’div class’’, ’’ header part стайт background’’, это именно то что мы искали,- отлично.

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

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

Если вам сложно определить закрывающий скобку так как она есть здесь и здесь можете найти следующую открывающую скобку после него здесь это скобка ’’div class’’ .

Курсор устанавливаем впереди нее,  опускаем ее чуть — чуть ниже, это не повредит коду и вот в свободном месте устанавливаем код из ’’ интернет подписки’’.

Возвращаемся обратно в ’’HTML редаптор’’, выделим код, копируем, обратно возвращаемся на сайт в админку, и сюда устанавливаем код этой подписки. Он начинается от ’’Smartresponder’’, и заканчивается этим же ’’Smartresponder’’, -а вот здесь находится ваш код.

Теперь вы посмотрите как все это выглядит,- нажимаете ’’обновить’’ и обновляете главную страницу вашего сайта.

Это делается ctrl + F5  верхняя строка или ’’ctrl + R’’.

Вот у нас появилась форма подписки не так как вы этого хотели, то есть горизонтально, почему так получилось,- потому что какие  то элементы лишние.

Ну а сейчас мы будем это корректировать. Сначала нужно проверить, работает ли форма подписки нажимаете на имя,- например ’’Павел’’ и ’’имейл’’ и ’’подписаться’’. Ждете, пока загружается страница и все отлично.

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

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

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

Вы убрали центр и опускаетесь ниже, находим еще один центр, убираете все, обновляетесь,- смотрите результат.

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

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

Давайте сейчас опустим эту форму ниже нужного заголовка,- для этого нужно искать подходящее место и  опять же выделяете код от ’’Smartresponder’’ и до ’’Smartresponder’’,-  сюда вырезаете, и опять вспоминаем, где у нас находится ’’Установить’’ и вы видите, что у нас ушла ’’форма подписки’’.

Если у вас есть заголовок, под которым вы хотите поставить эту горизонтальную форму, то вы нажимаете по нему правой кнопкой  ’’проверить элемент’’, он показывает нам картинку, и вы видите то, что называется header wrapper, или logo wrapper.

Нам нужно поставить после затемненного раздела после header wrapper.

Для этого копируете название  ’’header wrapper’’.  Я понимаю что возможно сейчас вы запутались из-за того что, у нас разные надписи, и вот здесь, и по разному выглядит ко,д и вы не знаете как дальше делать, то ищите меня в скайпе мой скайп ’’paul –eleven’’, звоните мне что вы запутались с горизонтальной формой и помогите пожалуйста, я помогу бесплатно, так же как технической поддержкой.

Мы возвращаемся обратно на ’’header wrapper’’, его копируем закрывайте, обновляйте страничку,- еще раз ’’проверить елемент’’, и вот опять же ’’header wrapper’’, его копируем возвращаемся в редактор ’’ctrl + F’’,  ’’поиск’’, вот он у нас есть,-  это он здесь есть этот элемент. Нам нужно найти конец этого элемента и он кончается косая черта и ’’div’’,  но это относится к ’’div’’, который отвечает за вот эти.

Опускаетесь еще ниже,-  вот раз, вот два и показывает окончание header wrapper.

После закрывающего ’’div’’, вы ставите курсор, отделяете, выделяете место для кода, возвращаетесь на редактор кода.

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

Если вы хотите убрать вот этот ’’немедленный доступ’’,  чтобы был только заголовок и фронт подписки, вы выделяете эту фразу ’’немедленный доступ’’,  ее копируете,- возвращаетесь в код  ’’CTRL+F’’,  это поиск,  и ищете эту фразу.

Он ее  показывает,-  если вы хотите ее изменить,-  меняете ее на ’’нужный текст’’.

Если вы хотите ее полностью убрать, то выделяете от ’’центр’’ и до ’’центр’’,  это полностью этот белый блок,-  его удаляете, обновляете,-  получается вот так.

У меня попалась такая тема ’’блога’’,  что она выдает  какие  то свои параметры.

Это не есть хорошо, возможно у вас оно уже горизонтальное и работает, если это так,-  то  отлично.

Если это не так, или вы хотите еще что  подизменять, то ищите меня в моем скайпе,- ’’paul –eleven’’, это я.

Все.  Успехов. Пишите и большого количества подписчиков Вам.

До свидания.

ПОСТ БЫЛ ПОЛЕЗЕН? ЖМИТЕ "МНЕ НРАВИТСЯ"