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

Категория: Страницы подписки | 16.12.2013г.


Вы знакомы с сервисом 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> и замените им ту же часть в коде своей джасткликовской формы.

    Комментарии пользователей:
  1. Дмитрий (28.12.2014-09:00) пишет:

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

  2. Тамара (02.06.2017-17:49) пишет:

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

Оставить комментарий