Напоминаю, что я уже писал в блоге о создании простой формы обратной связи с использованием технологии PHP (необходим свой платный хостинг). Потом публиковал статью о создании простых форм с помощью документов Google (вариант подходит для любого хостинга и просто локальных html-страничек). А для обладателей блога на WP была у меня статья про плагин Fast Secure Contact Form (разумеется, тоже для создания форм обратной связи). Но продолжают поступать комментарии. Видно, что тема не исчерпана, обладатели сайтов жаждут специализированных универсальных сервисов с удобной возможностью создания контактных форм любой сложности. Сегодняшняя статья как раз о таком сервисе.

Функционал конструктора форм на Заходи-ка.ру мною проверен и одобрен. Подойдёт как для опытного веб-программиста, которому просто не хочется заморачиваться с написанием кода, так и для владельца сайта, который с кодом смело может проводить только 2 операции: скопировать и вставить.

Для конструирования формы обратной связи идём по этой ссылке и видим такую картину:

1. Структура формы

Основа формы уже есть [2], нам необходимо только нажать на элементы [1] при необходимости добавления нового однострочного текстового поля («строка») или многострочного («текст текст»). При желании изменить поле, кликаем по нему в области визуального просмотра формы [2]:

2. Редактор полей ввода

В редакторе полей ввода мы можем изменить название полей, выбрать тип данных, установить галочку с указанием на то, что поля является обязательным для заполнения. Также стрелкой на рисунке выше я отметил дополнительные кнопки. Кнопка «стрелка» позволяет менять поля местами (передвигать ниже, выше), «крестик» — удалить поле.

Дополнительно можем поработать над оформлением формы в целом (стрелка [3] на первом рисунке).

3. Выбор оформления

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

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

Закончили редактирование — забирайте ниже код готовой формы и вставляйте на свой сайт:

4. Код готовой формы

5. Тестовое сообщение

На рисунке справа я демонстрирую, как тестовая форма обустроилась на моей тестовой страничке. Можете сразу не трудиться писать тестовое сообщение, потому что форму надо сначала зарегистрировать в сервисе Заходи-ка.ру, чтобы отправленные через неё сообщения получать на свой e-mail. Для инициации процедуры регистрации можно просто нажать кнопку «Отправить», не заполняя форму.

После нажатия страница перезагрузится, и вместо формы вы увидите такое сообщение:

6. Сообщение о необходимости регистрации формы

Переходим по ссылке в сообщении и осуществляем регистрацию на формы на сайте Заходи-ка.ру.

7. Регистрация формы на сайте

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

Если по каким-то причинам вместо картинки выше вы видите такое сообщение об ошибке:

8. Ошибка при регистрации формы

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

9. Личный кабинет

Тогда вам надо залогиниться на Заходи-ка.ру, перейти в личный кабинет, рядом с нужной формой нажать кнопку «Редактировать», сгенерировать форму, добавить её на страницу своего сайта, вновь инициировать процедуру регистрации.

Подробная документация по созданию эксклюзивных форм есть на сайте Заходи-ка.ру (на странице конструктора форм слева в меню пункт «Документация»). Там же увидите справа прикреплённую кнопку «Отзывы и предложения» — рекомендую туда писать сообщения, связанные с работой формы. Хотя, можете и в комментариях к этой статье писать, при необходимости я свяжусь с автором сервиса.

Рабочий пример формы обратной связи от сервиса Заходи-ка.ру




А вот так на вашей почте будет выглядеть письмо от посетителя сайта:

10. Письмо от посетителя сайта

Запись опубликована 18 июля 2013 года. Не так давно в рубрике «Web-кодинг» были опубликованы следующие посты:

: ретвит этого поста (как это?) увеличивает долю добра на квадратный байт Интернета! Кнопки других социальных сервисов плавают слева, чтобы вы могли парой кликов поделиться прочитанным с друзьями!

Хотите получать новые публикации на почту?

Подписка на RSS канал блога RSS подписка (как это?) поможет вам не пропустить ничего интересного на этом блоге.