Создание формы обратной связи на бесплатных хостингах

Многие вебмастера начинают свой путь в интернете с сайтов на бесплатных хостингах и даже когда у вебмастера прибавляется опыта, бесплатные хостинги не остаются забытыми. Это обусловлено трастовостью бесплатных хостингом, а также определенным удобством, исходя из принципа «разместил контент и забыл», так как не надо помнить о продлении хостинга и домена и не надо волноваться о том, что деньги на хостинг уходят впустую. К сожалению бесплатным хостингам свойственны ограничения в функциональности, иногда довольно значительные. Однако многие ограничения можно обойти, используя сторонние сервисы.

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

Сервисов, на которых можно сделать форму обратной связи довольно много, я остановился на http://creator.zoho.com/ , поскольку он предоставляет намного больше возможностей для создания нужного функционала, в частности позволяет использовать в форме любой адрес электронной почты, а не только тот, который был указан при регистрации (в отличии, например, от http://kontactr.com/ ).

Начнем. Сначала зарегистрируемся и затем зайдем в админку. В правом верхнем углу увидим синюю кнопку с надписью “Create new application” т. е. «Создать новое приложение». Нажимаем на эту кнопку. Попадаем на страницу где надо заполнить два поля “Specify application name”, т. е. «Укажите название приложения», и “Specify Form Name”, т. е. «Укажите название формы». Указываем любое наименование. Названием приложения у нас будет “Contact form”, а названием формы «Задайте вопрос». Больше ничего не трогаем и нажимаем внизу на синюю кнопку с надписью “Create now” (создать
немедленно). Попадаем на следующую страницу. Слева, под общим заголовком “Insert Fields” (вставьте поля) будет находится две колонки голубых кнопок с различными надписями.

Нажимаем мышкой на кнопку с надписью “Single Line” (одна строка) и не отпуская правую клавишу мышки переносим эту кнопку в правую сторону, туда где вы увидите надпись “Drag and Drop”. Отпускаем клавишу мышки. В появившемся окне вписываем имя поля «Имя», в меню “Options” отмечаем чекбокс “This is required field” (это необходимое поле) и нажимаем на кнопку “Done” (готово). Точно так же переносим справа кнопку с надписью “Email” (электронная почта) и проделываем те же самы операции (называем поле и отмечаем чекбокс “This is required field”). После этого еще два раза переносим справа налево кнопку “Single Line”, присваиваем им названия «Страна», «Город», отмечаем чекбокс “This is required field”.

Осталось дополнить нашу форму полем для сообщения, которое нам пошлет посетитель. Это делается переносом справа налево кнопки с надписью “Multi Line” (многострочное поле). Этому полю присваиваем названия «Вопрос» и тоже деалем его обязательным для заполнения, отмечая галочкой чекбокс “This is required field”.

Форма почти создана. Осталось ввести адрес электронной почты, на который будут приходить сообщения из этой формы, а также прикрепить капчу. Для этого используем выпадающее меню вверху готовой формы с надписью “More actions” (дополнительные действия). Там выберем пункт “Form properties” (свойства формы) и отметим чекбокс “Need Verification Code” (необходим проверочный код) нажмем кнопку “Done”. Всё, капча установлена. Адрес электронной почты на который будут приходить сообщения из этой формы устанавливается выбором пункта меню “Set Email Notfication” (установить уведомление по электронной почте). После выбора данного пункта меню свой электронный адрес вы прописываете во втором поле сверху, сопровождаемом надписью “To:” (кому), а также отмечаете галочкой чекбокс “Include user submitted data”. Форма обратной связи полностью готова. Можно еще отредактировать кнопки Submit и Reset чтобы надписи на них были на русском языке, но на этом я останавливаться уже не буду, думаю, что сможете разобраться сами.

Как вставить форму на свой сайт.

Для получения кода встраивания формы в веб-страницу надо проделать следующее: в окне редактирования формы, т. е. в том окне, где слева в две колонки находятся синие кнопки с названиями полей, надо нажать на большой желтый овал в в верхней части экрана справа от центра. На этом овале имеется надпись “Access this application” (получить доступ к данному приложению). В появившимся окне нажать на меню “More actions” (дополнительные действия) и выбрать пункт меню “Embed in your Website” (встроить в ваш в сайт). В появившемся окне, в надписи “To access the form without login Click Here” (для доступа к данной форме без логина нажмите здесь) нажмите указателем мышки на ссылку “Click Here”. Надпись должна измениться на “To prompt for login details Click Here” (чтобы запросить данные для входа нажмите здесь). Теперь можете скопировать код из окна под надписью “Copy/Paste this code into your website” и вставить его в нужную страницу вашего сайта.

Что касается электронного адреса получателя, то он в форме не хранится.

Как выглядит форма на сайте, можно увидеть здесь: Юридическая консультация