Как сделать красивую форму подписки в JustClick

Форма захвата контактовВы знакомы с сервисом JustClick?

Пользуетесь ли вы всеми его возможностями? Ну или хотя бы его функционалом сбора подписчиков и ведения рассылок?

Лично я пользуюсь и очень им доволен :-)

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

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

Делаем красивой подписную форму от JustClick.

Стандартная форма подписки настраивается в личном кабинете пользователя в разделе «Мои рассылки» —> «Генератор формы подписки», делается это очень легко и выглядит изначально она так:

Подписная форма JustClick

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

Во-первых, советую ставить галочку напротив «Название поля внутри поля ввода: Включить» — это уберет название строк внутрь полей и форма станет такой:

Форма JustClick - названия полей внутри

Во-вторых, очень желательно заменить стандартную кнопку «Подписаться» на графическую.

Замена кнопки подписки в JustClick

Согласитесь, так ведь лучше:

Красивая кнопка в форме подписки JustClick

Хотя, конечно, форма пока ещё не выглядит идеальной :-)

Поэтому копируем полученный код и идем его дошлифовывать.

Тем, кто с редактированием кода не очень дружит, могу посоветовать перейти в JustClick’е в раздел «Сайты и страницы», кликнуть по надписи «Основной сайт» (если вы её не заменили на свою), создать новую страницу, кликнуть на кнопку «Источник», вставить код и производить там его изменения, просматривая результат кликом на кнопке «Предпросмотр». А я буду редактировать код формы в программе Notepad++.

Теперь я хочу убрать закругленные углы и удалив код:
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;

Улучшенная форма подписки JustClick

Увеличить поля для ввода данных, можно изменив padding:4px; например на padding:8px;

Красивая форма подписки для JustClick создана

Ещё добавим рамку, прописав border-top: 2px dotted red; после table{ и затем ещё пропишем padding: 20px 40px 15px; чтобы выровнять границы рамки поэстетичнее — в результете получим форму подписки, которую не стыдно поставить на страницу подписки, что я и сделал :-)

Сделали красивую подписную форму с рамкой

Если захотите поменять оформление рамки у формы, то в строке border-top: 2px dotted red; вместо dotted выберите одно из следующих значений:
Создание и редактирование рамки формы подписки
none и hidden — без рамки;
solid — простая сплошная рамка;
dotted — пунктирная рамка в виде точек;
dashed — рамка с пунктирными линиями;
double — две линии параллельно;
groove — рамка с эффектом вдавленного объёма;
ridge — рамка с эффектом выпуклого объёма;
inset — эффект вдавленной объемной рамки;
outset — эффект выпуклой объемной рамки.

Можете скачать код полученной формы подписки и использовать её стили для своей формы подписки. Для этого просто скопируйте из этого файла часть кода между <style type=»text/css»> </style> и замените им ту же часть в коде своей джасткликовской формы.

Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. Ramires (автор)

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

  2. Ramires (автор)

    На безрыбье и рак — рыба.

Добавить комментарий

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