Всплывающая контактная форма для Blogger

Привет всем! Всплывающая контактная форма для Blogger - на любителя. Совсем забыл про русский сервис freeforms, с помощью которого можно создать всплывающею форму для связи с автором или установить её на отдельную статическую страницу  блога. Хотя в закладки этот сервис я добавил примерно год назад и вот сегодня freeforms попался мне на глаза. Естественно, спешу сразу поведать о сервисе всему миру, то есть, вам.

контактная форма
Всплывающая контактная форма

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

Ваша форма для связи, в виде ссылки, может быть вставлена одновременно во много разных страниц, в любой форум или блог (даже если там не разрешены скрипты) и может быть изменена вами в любое время. При отправке форма не перезагружает страницу – то есть пользователи остаются на прежнем блоге. Вот пример простой контактной формы по умолчанию:

forma_ dlja_ svjazi
Простая контактная форма для Blogger

А это уже всплывающая, открывается поверх блога, очень удобно:

forma_ dlja_ svjazi_freeforms
Всплывающая форма для связи

Как видите можно выбрать из двух вариантов установки формы в ваш блог.

Как установить всплывающею контактную форму в блог

Для этого необходимо зайти на сайт freeforms (сервис перестал существовать) и указать свою электронную почту, куда будут приходить письма от ваших читателей, придумать свой пароль:

Как установить всплывающею контактную форму в блог

 

Затем нажмите "Получить код". На следующей странице, Вы можете спокойно начать редактировать контактную форму или создать новую и так далее:

Получить код

Здесь все просто и понятно, ведь сервис наш родной, русский. Нажмите на "Редактировать форму":

forma_ dlja_ svjazi_freeforms1
Свойства формы

Для того, чтобы настроить форму нужно нажать "Свойства формы" и приступайте к изменению внешнего вида. Что можно изменить - Название формы; Заголовок формы; Текст на кнопке; Размер шрифта; Цвет текста; Шрифт заголовка; Цвет заголовка; Цвет фона; Толщина границы; Радиус углов границы; Цвет границы. После всех изменений нажмите "Сохранить форму". Далее, чтобы добавить поля для своей формы вам нужно опять нажать "Редактировать форму" (Вы можете или сначала добавлять поля, а затем настраивать и вносить изменения в форму). Затем нажмите Добавить поле и в выпадающем списке выбрать то, что вам нужно, например, поле для ввода E-Mail. Обратите внимание, поля можно перетаскивать мышкой:

Добавить поле

После того как Вы определитесь с нужными полями для формы, нажмите как обычно "Сохранить форму". Переходим к установке формы в блог. Нажмите "Код для вставки".

Код для вставки

Теперь определитесь, какую форму будете устанавливать - на отдельную статическую страницу блога или всплывающею.

Установка контактной формы на отдельную статическую страницу Blogger

Зайдите в панель управления Blogger - Страницы - Создать страницу - Пустая страница и в режиме HTML вставьте первый код. Все, опубликуйте страницу, ссылку на форму можете вставить в меню. Вот что получается на странице:

forma_ dlja_ svjazi5
Контактная форма на статической странице

Установка всплывающей формы для связи на сайт

Зайдите в панель управления Blogger - Дизайн - Добавить гаджет HTML/JavaScript на боковой панели блога, дайте название и в его поле вставьте второй код. Сохраните гаджет.

kontaktnaya_forma11
Отправить сообщение

При нажатии на "Отправить сообщение" появится ваша всплывающая контактная форма, где посетитель может написать вам. Надеюсь это будет для вас полезным. Как всегда напоминаю, подпишитесь на обновление блога и не забудьте пользоваться красивыми кнопочками, а также дать вашу оценку поста. До новых встреч.

С уважением, Сергей



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *