Как сделать красивую форму подписки в 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 comments
  1. Дмитрий
    Дмитрий • Post Author •
    28.12.2014 at 09:00

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

    Reply
  2. Тамара
    Тамара • Post Author •
    02.06.2017 at 17:49

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

    Reply
Leave a Reply

Your email address will not be published. Required fields are marked *