Главная Часть 1. Создание блога Глава 8. Техническая часть Урок 147. Онлайн генератор формы обратной связи

Урок 147. Онлайн генератор формы обратной связи

форма обратной связи

Доброго времени суток, уважаемые читатели!

В последнее время все чаще слышу о том, что у юных создателей сайтов возникают большие проблемы с формой обратной связи. Разумеется, далеко не все хотят учить базовые функции php, позволяющие обрабатывать форму. Раньше я предлагал в качестве решения использовать плагин contact form для wordpress. Но уже практически все знают, как плагины негативно влияют на работу блога. Поэтому стараются активировать как можно меньше плагинов. Так как же быть, когда нужна форма, при этом не хочется ни язык учить, ни плагины ставить. Вроде нельзя сделать амлет не разбив при этом яиц. Увы, но можно поручить кому-то другому разбить яйца 🙂

Представляю Вашему вниманию такое изобретение, как онлайн генератор форм. Что требуется от Вас? Только лишь указать свой e-mail адрес, поля, которые будут, их тип. Да и все. Ну и, разумеется, поставить флажок напротив поля, если его необходимо заполнить человеку.

Это все! Больше ничего делать не надо будет, кроме как скачать готовую форму и установить себе в любое место на сайте.

Не хотелось бы палить кантору, но в скором времени у нас будет отличный урок о том, как создать красивейшую, современную, форму обратной связи своими руками. Поэтому в данном уроке я пока что не призываю Вас срочно менять формы. На это еще будет время =)

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

Когда заходим на сайт, перед нашим взором предстает такая вот картина:

генератор форм

По традиции, распишу все по пунктам:

  1. Ваш e-mail. На него будут приходить письма, когда клиент заполнит форму и нажмет на "Отправить".
  2. Тема письма. Сюда пишете то, что будет в теме письма, которое придет вместе со всей прочей информацией.
  3. Сюда пишем название поля. Для чего оно предназначено. Например, Имя. Или Телефон.
  4. Тип поля. Типов много. От поля, специально созданного под e-mail до различных переключателей.
  5. Подсказка, которая будет говорить пользователям, что необходимо ввести.
  6. Если флажок установлен, то поле будет помечено как "необходимое".
  7. Добавить еще 5 полей. Для больших форм самое то.

А теперь немного практики. Создадим форму, которая будет запрашивать Имя\Фамилию и почту. Соответственно эти данные будут отсылаться на наш e-mail.

генератор форм

Форма готова, осталось нажать на "Create and Download Form".

Все, форма сгенерирована. Теперь необходимо ее скачать. Есть 2 варианта: в ввиде плагина для WordPress, и отдельно.  Плагин скачивать бессмысленно, так как в начале статьи наоборот был разговор о том, что плагины губят сайт.

Поэтому просто скачиваем форму:

генератор форм

У нас есть три файла:

  1. form.php
  2. form.lib.php
  3. admin.php

 

Расскажу по порядку:

  1. form.php - непосредственно, сама форма.
  2. form.lib.php - обработчик для формы
  3. admin.php - админка, в которой можно узнать информацию о трафике, который прошел через форму, и что-то там еще. В общем-то бесполезная вещь, как на мой взгляд.

В форме, по-умолчанию, установлена капча. Часто читал на форумах, что она очень мешает, и многие не знают, как ее убрать. Поэтому сейчас мы поговорим как раз об этом:

Первым делом уберем саму капчу. Для этого в файле form.php найдем следующий код:  (примерно 58-60 строчка)

  •  

 

Удаляем ее. Теперь на самой форме капчи нет. Однако в файле-обработчике, все еще стоит проверка ввода капчи. Проверку эту нам надо удалить, а то воспользоваться формой будет невозможно - всегда будет вылезать окно, что не заполнены необходимые поля.

Открываем файл form.lib.php и находим там вот такой код:  (примерно 209 строчка)

 

Удаляем этот код. Все! Теперь форма работает.

Вот такой способ довольно полезен многим блогерам. Однако, разумеется, лучше учиться писать формы самому. Тогда никаких проблем и вопросов возникать не будет.

На этом у меня все, до скорых встреч!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Desh
0

Форма выдается не совсем качественная( В том смысле, что много лишнего в ней понаписано, имхо легче самому написать такую. Там ведь из знаний только и надо что php первый уровень, да разметку html + css. Тем более, что сейчас даже сеошников начали заставлять учить эти языки. Слышал же про сео-программирование? Хотя слышал, я тебе писал как-то 🙂

30.03.2014
Sly
0

Форма идеально подойдет для всех, кто не хочет связываться с языками программирования. Не поверишь, но большая часть людей даже не собирается начинать учить php или html. Так что нормально все) Про сео-программирование слышал, более того, скачал пару курсов по этой теме, потом изучу.

01.04.2014
Иван
0

А можно поступить еще проще и воспользоваться каким-нибудь онлайн сервисом по созданию веб-форм. К счастью их сейчас привеликое множество. Я для себя сделал выбор на сайте http://formdesigner.ru. Отличный сервис. Рекомендую.

06.05.2014
Prohor
0

Здравствуйте! Сгенерировал форму, скачал 3 файла, что теперь с ними делать? Что-то никак не пойму как вмонтировать эту форму непосредственно в страницу сайта. Можете дополнить урок?

14.06.2014
Sly
0

Добрый день!
Данная статья писалась исключительно для людей, знающих, что делать с данными файлами 🙂

Однако могу дополнить статью немного позже

14.06.2014
Иван
0

Для незнающих лучше использовать онлайн конструкторы форм, о которых я писал выше. Сэкономите время.

14.06.2014
Sly
0

А там после создания формы есть инструкция по ее внедрению в сайт?

14.06.2014
Prohor
0

ну я как бы не совсем балбес - css и php понимаю хотя и не на уровне профи. Начинал верстать сайт по вашим урокам и ушёл уже намного дальше. Мне реально надо избавляться от лишних плагинов. Подскажите уж куда мне эти файлы пристроить чтоб форма работала. Хоть в общих чертах, я дальше сам разберусь

15.06.2014
Sly
0

Так все очень просто. Открываете файл form.php - это у нас сама форма. Вот ее-то и копируете. Затем вставляете туда, где она должна отображаться. А второй файл (который обработчик) form.lib.php - должен быть подключен к документу. Посредством include или require. Это уже на Ваш вкус. Вот и все - форма будет работать!

Если не получится, или возникнут вопросы - пишите, вместе разберемся 🙂

16.06.2014
Prohor
0

Ну теперь понятно стало наполовину. Форму я смогу встроить, а вот что делать далее с обработчиком не понимаю. Видимо знаний мало ещё. Можно детальнее сам процесс женитьбы обработчика с формой рассказать?

17.06.2014
Sly
0

в форме должен быть метод отправки. А именно: method и там должен быть прописан адрес обработчика. Вот и вся женитьба)

Если же у Вас в method="" пусто, то либо вставьте адрес, как я сказал выше, либо с помощью include ("адрес обработчика") вставьте его на страницу. Я же рекомендую воспользоваться первым способом.

17.06.2014
Prohor
0

Отлично. Буду пробовать. Пока у меня с редиректом проблема - сейчас решаю. Сразу после займусь формой

17.06.2014
Sly
0

В смысле, редирект после отправки формы? Если да, то Вам поможет функция location. Она прописывается в обработчике сразу после функции mail, которая отвечает за отправку письма. Лучше прочитайте про нее на сайтах, посвященных php. Тогда картина немного прояснится 😀

17.06.2014
Prohor
0

Да нет ))) Я имел в виду редирект 301. просто занят был его настройкой, а по окончании процедуры хотел заняться формой, но ночами работать тяжело - в сон клонит, и не успел к форме подойти по уму. Обязательно займусь в ближайшее время. А по редиректу 301 вопросы, которые были я уже задавал в комментариях к вашей статье про редиректы и кажется выход теперь тоже найден. Огромное спасибо за поддержку! Мой выбор пал на вордпресс именно потому что есть ваш сайт, на котором можно узнать как от А до Я сверстать сайт самому. Изначально хотел собирать сайт на Drupal но нигде не нашёл такой полной информации. В данный момент о выборе не жалею, а изучив сайтостроение по вашим урокам заново для себя открыл в интернете очень многое. Благодарю за труд!

17.06.2014
Sly
0

Спасибо большое за Ваш отзыв)) Очень греет душу))

17.06.2014
Сергей
0

Интересное решение. А на вашем блоге стоит такая форма? По поводу Contact Form: не думаю, что этот плагин сильно увеличивает нагрузку. Вообще, в идеале можно сделать форму обратной связи силами HTML, и тогда не надо будет ни к каким плагинам и сервисам прибегать.

20.06.2014
Sly
0

У меня пока еще стоит contact form. Уже сверстал себе неплохую форму, все руки не доходят ее поставить. Сам плагин, конечно, не так уж много ресурсов БД сжирает, но вот каждый плагин так по чуть-чуть, в итоге нестабильная работа блога. Вывод: лучше каждый плагин убирать, который возможно заменить кодом.

20.06.2014
Prohor
0

У меня тоже стоит Contact_Form и хочется его заменить кодом... На блоге потому что 17 плагинов и все вроде нужные. Хоть одним станет меньше... Попробовал настроить и вмонтировать форму из рекомендованного вами генератора - у меня не получилось. Видимо это не для среднего ума процедура.... Кракозябры полезли только, а корректного отображения не было. Хотя вроде бы и простая настройка и установка - я покопавшись разобрался. Может генератор сглючило и он некорректно склепал мне форму? Самое лучшее это если вы напишете статью "Контактная форма без плагина" в которой приведёте код простенькой формы и стили к ней с описанием что прописать чтобы врезать форму к себе на блог и какие параметры в стилях поменять чтобы под себя настроить высоту, ширину, бэкграунд, фон, и текст подсказок. Статья получится небольшая и не займёт у вас много рабочего времени а многим была бы полезна. И мне в том числе... Только вот я боюсь что контактную форму лучше защитить капчей потому как иначе ведь через неё может на мыло спам посыпаться... Или это напрасная тревога?

21.06.2014
Sly
0

Я вот почти месяц назад даже начал писать статью, как раз с таким названием) Только у меня потом с самой формой проблемы возникли, решил отложить. Будет красивая форма, в стиле windows metro. Насчет капчи - вот у меня стоит сейчас простенькая капча, вида 1+2=? . По-моему, уже любой спамерский софт может разгадывать эти числа. Но увы, еще ни одного спам-сообщения я не получал. Поэтому не вижу смысла в серьезной защите формы.

21.06.2014
Prohor
0

Тогда ждём от вас всем миром статью по контактной форме с нетерпением! Вопрос то стоит пока по этой теме... Нашёл в сети 3 статьи но 2 оказались не очень.... Третью не проверял пока - работа не даёт... Уж в вашей то статье сто пудов будет всё точно, потому дождусь лучше её. По возможности постарайтесь не слишком надогло её откладывать конечно... Тем более что заготовка у вас уже есть. Остро стоит сейчас вопрос создания формы. Прямо загорелся мыслью избавиться от лишнего плагина!

21.06.2014
Sly
0

Уже сегодня после работы начну интегрировать форму на ВП. Если все выйдет хорошо, то статья появится уже на этой неделе!

23.06.2014
Prohor
0

Ну могу вам сказать что я уже нашёл статью с абсолютно валидной формой обратной связи на коде, и уже интегрировал её в свой шаблон. Если ваша статья будет с дополнением о том как сменить в форме стили для подгонки под шаблон то это будет супер, а так я уже форму отыскал и поставил, но у неё только размер меняется и бэкграунд. Хотелось бы эффектов добавить.... Но помимо меня наверняка многим полезна будет эта статья. Я просто нетерпелив - ждать не могу от природы... Потому сам статью отыскал за ночь и форму собрал. У меня ключевой момент сейчас - сроки. Но для других читателей статья точно будет востребована!

23.06.2014
Sly
0

А можете показать форму? Насколько я понял, Вы ведь знакомы с css. Так именно с помощью стилей легко и быстро можно форму привести к гармонии с шаблоном. Я постараюсь к концу недели свою версию формы выложить. Так вот получается, хотел сесть сегодня - вызвали, хотел завтра - и завтра вызов. Увы..

23.06.2014
Prohor
0

Ну я интегрировал форму себе на сайт на страницу "Барахолка" там её можно посмотреть. Могу сбросить код, и код обработчика. Я не совсем понял как задать стили конкретно для этой формы чтоб их редактировать через style.css Или в коде для вставки можно их как-то прописать? Ссылку на статью по которой собирал себе форму тоже могу предоставить если нужно. На какие координаты сбросить информацию?

24.06.2014
Sly
0

У меня хорошие новости - готова моя форма. Сегодня проверил максимальное количество раз. В файлах реализовал настройки и вывел их в начало, чтобы всем удобно было настраивать на свой вкус надписи, почту и т.д., не читая код. Так что скоро будет статья 🙂

Насчет стилей - все достаточно просто, я об этом еще скажу в статье. Находите любой идентификатор или класс в диве. (Помните, да, div class, div id ?) . Так вот, их названия вставляете в style.css и прописываете им различные атрибуты. Например, у нас есть строчка с вводом имени. Допустим она начинается так: < div id="stroka" > . Вы открываете style.css, пишете туда следующий код:
#stroka {
нужные свойства;
}

Почему # перед названием - потому, что тут у нас идентификатор (div id). Если бы был div class. Тогда все тоже самое, только вместо решетки ставим точку:
.stroka {
параметры
}

24.06.2014
Denis
0

Хорошая статья обратная связь обязательна должна присудствовать. У меня на блоге она в коде прописана.

29.06.2014
Prohor
0

Её лучше кодом и прописывать. Я прописал тоже кодом, но в поисках валидного перерыл всю сеть. И то его править пришлось... Если Sly в ближайшее время закончит статью - будет очень большая помощь блоггерам!

29.06.2014
Sly
0

Сегодня закончить хочу. Только утром приехал, завтра опять уезжаю, до субботы вряд ли на блог зайду. Поэтому постараюсь сегодня все закончить.

01.07.2014
Вячеслав Деликамов
0

Посмотел ваш сайтик! Очень душевно и информативно написано. Спасибо!
Не нашел статью про форму в стиле metro, которую вы анонсировали. А очень бы хотелось ее почитать. 🙂

12.06.2015
Вячеслав Деликамов
0

И еще отдельное спасибо за эту статью. Очень оказалась полезной!

12.06.2015
Sly
0

День добрый! Прошу прощения за столь долгий ответ, больше месяца прошло 🙂 Выкроил время на ответы, так вот. Статья, которую Вы ищите, расположена по адресу: http://wpguru.ru/sozdanie-bloga/forma-obratnoj-svyazi-dlya-wordpress.html . Надеюсь, Вам понравится 🙂

16.07.2015
Дмитрий
0

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

22.09.2015
Sly
0

Кодировка изменяется в самом начале файла. Ищите слово charset. Почти везде используется UTF8, поэтому впишите ее. Если же там эта кодировка уже указана, тогда укажите windows-1251.

22.09.2015
طراحی سایت
0

Awesome, Thank You For Sharing

30.10.2015

thank you for website and post

12.02.2016
0

You are welcome 🙂

13.02.2016

Hi. It's very good post and so helpful for me. Thanks for sharing.

03.04.2016

thank you for website and post

03.06.2016

tnx 4 ur good web site and this post

29.06.2016
0

u r welcome

30.06.2016
کلیپ های جدید
0

Hi. I like this post very much and alwals read this. Thank you so much for sharing.

09.08.2016
Willam
1

Thank you ! I love this article. I am sending this good article to my colleagues right now!

22.08.2016
0

hi , good web
thanks

06.06.2017

hi , good web
thanks

08.06.2017

very good

25.06.2017

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

Поделиться