Как сделать форму обратной связи на сайте – Контактная форма обратной связи для сайта своими руками

Обратная связь — создаем форму для сайтов на HTML/PHP в Joomla и WordPress

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

Поэтому если на вашем ресурсе контактного раздела нет — стоит его установить. Разберемся, как это сделать.

Решения для организации обратной связи

Естественно, что сейчас существует несколько способов организации обратной связи на сайте: от универсальных скриптов на php до плагинов и модулей для CMS. То есть, необходимости писать код вручную, как видите, нет.

Можно воспользоваться следующими универсальными решениями:

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

Тем не менее, расширенных знаний по сайтопостроению от пользователей зачастую не требуется — универсальность и широкий выбор решений позволяют установить желаемую форму обратной связи любым из вышеизложенных способов.

Простая установка форм обратной связи в HTML

Рассмотрим одну из популярных программ для написания и установки HTML-форм обратной связи с капчей. Широкий их выбор представлен, например, на этом сайте. Сайт русскоязычный, определиться с выбором будет просто, а сама установка займет не более трех минут.

Но для начала следует не забыть внести поправки в стандартный файл config.php — нужно изменить кодировку и написать верный электронный адрес получателя.

12 Контактная форма для сайта: способы установки

Папку с исправленными файлами нужно скопировать в корневой каталог сайта, но перед этим ограничив ее индексацию в файле Robots.txt (Disallow: /sendmail-zakaz).

По сути, это все — если действия выполнены правильно, готовая форма будет выглядеть так:

22 Контактная форма для сайта: способы установки

Существуют конструкторы форм обратной связи, не требующие поддержки РНР. Рассмотрим один из них. После перехода по ссылке вы увидите окно, внося настройки в которое, можно создать желаемую форму.

После того, как все необходимые параметры внесены, следует ввести проверочную капчу и нажать на кнопку «Генерировать», а после — «Получить код».

32 Контактная форма для сайта: способы установки

Полученный код нужно просто скопировать на выбранную страницу сайта.

Можно сделать простую контактную форму собственноручно. Для этого нужно создать файл form.php и сохранить в нем следующий код:

02-500x367 Контактная форма для сайта: способы установки

Для функционирования формы нужен файл-обработчик. Назовем его mail.php и сохраним в такой код:

002-500x308 Контактная форма для сайта: способы установкиВ итоге получится такая форма связи:

43 Контактная форма для сайта: способы установки

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

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

Итак, для настройки компонента заходим в административную панель и выбираем вкладку «Компоненты/Контакты/Категории контактов».

51 Контактная форма для сайта: способы установки

Откроется страница, на которой не будет ни одной категории. Чтобы создать ее, нажмем на кнопку «Новый».

Система предложит заполнить поля «Заголовок» и «Псевдоним». Сделав это, нужно поставить галочку «Да» в строке «Опубликовано».

61 Контактная форма для сайта: способы установки

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

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

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

Сохранить настройки можно, нажав соответствующую кнопку в правом верхнем углу.

Форма обратной связи настроена, осталось расположить ее на сайте. Для этих целей надо перейти на административную панель и, выбрав вкладку «Меню», определиться с местом отражения пункта.

71 Контактная форма для сайта: способы установки

В этом меню создаем новый пункт. Для этого нажимаем кнопку «Создать» и в открывшемся меню выбираем «Контакты/Страница контакта».

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

Переходим на сайт, находим пункт «Контакты» и нажимаем на него. Должна открыться следующая страница:

92 Контактная форма для сайта: способы установки

Обратная связь для WordPress

В этой системе форму обратной связи можно создать, также прибегнув к помощи плагинов. Самый популярный и функциональный — плагин Contact Form 7.

Скачать его можно с официального сайта, либо же добавить и активировать через меню административной панели «Плагины/Добавить новый»

В активированном плагине следует пройти во вкладку «Контакты» и скопировать код плагина для формы обратной связи.

102-500x209 Контактная форма для сайта: способы установки

После этого нужно проследовать во вкладку «Страницы/Добавить новую», и, включив режим HTML, вставить ранее скопированный код формы обратной связи

112-500x210 Контактная форма для сайта: способы установки

Если не нравится название страницы «Контакты», можно переименовать ее как угодно. Также можно ввести все необходимы настройки.

Оформив страницу по своему усмотрению, следует нажать «Опубликовать». Страница готова. Выглядеть она будет примерно так

121 Контактная форма для сайта: способы установки

Создание формы обратной связи на jQuery

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

В зависимости от плагина, можно выбрать стиль контактной формы — будь то стандартная:

131-500x363 Контактная форма для сайта: способы установки

Либо же с эффектом подсветки:

14-500x390 Контактная форма для сайта: способы установки

Или же оригинальная дизайнерская в виде печатной машинки:

15-500x436 Контактная форма для сайта: способы установки

Справиться с установкой таких форм сможет даже не профессионал.

wildo.ru

Как сделать форму обратной связи на сайте? Легко и Просто

Всем привет друзья и сегодняшняя статья пойдет о настройки и установки плагина которая дает нам форму обратной связи. Эта функция необходима практически на каждом сайте что бы пользователь мог с легкостью с вами связаться более того у этого плагина большой функционал можно к примеру настроить функцию что бы пользователь при необходимости отправлял вам файл любого формата и размера. так же можно установить капчю от спама. Еще я вам рекомендую создать доменную почту так как с ней меньше вероятности того что ваши письма попадут в спам. Для начало настройки формы вам нужно установить на свой сайт плагин под названием Contact form 7 у него более 1 млн установок а это значит, что он пользуется популярностью.

Установка и настройка плагина

После того как вы установили и активировали плагин то с боку в панели появится функция «Соntact form 7» перейдя по ней вам уже предлагают готовую форму, но мы будем делать сами все с нуля и для этого «Добавляем новую» (Смотрим ниже)

После того как мы добавили новую форму нас перебрасывает в настройки функций, во вкладке «Шаблоны форм» мы можем видеть какие именно можно настроить функции на нашей формы а именно отправка телефона, капча, файл, URL, опрос и.т.д и внизу мы видим фрагменты кода (Смотрим ниже)

В следующей вкладке «Письмо» мы можем увидеть какой фрагмент кода установлен для тех или иных полей, а именно в поле «Кому» прикреплен тот E-mail на который будут приходить письма посетителя, в остальных полях так же коды которые отвечают за каждое поле. (Смотрим ниже)

«Уведомление при отправки формы» в этих полях находятся подставные которые будут отображаться при каких нибудь активных действий, вы их можете изменить и написать по своему (Смотрим ниже)

Ну и вкладка «Дополнительно» ведет на официальный сайт плагина где так же вы можете воспользоваться дополнительными настройками но сайт на английском языке и я в подробности не вникал (Смотрим ниже)

Теперь давайте вернемся во вкладку «Шаблон формы» и настроим нашу форму, для начало нам нужно продублировать одну из строчек вместе с ком к примеру возьмем строчку «Сообщение» (Смотрим ниже)

Затем просто переименовываем одну строчку к примеру «Прикрепить файл» если вы хотите настроить функцию что бы пользователь при необходимости мог отправлять файл то нажимаем на вкладку «Файл» после появится всплывающее окно с настройками если в верху вы поставите галочку то функция будет (обязательной) в полях вы можете настроить тип файла, размер файла я же оставляю поля пустыми и просто копирую нижнюю часть кода (Смотрим ниже)

И просто вставляю скопированный код в одну из дублированных строк для «Сообщений» (Смотрим ниже)

Затем я перехожу во вкладку «Письмо» иду вниз и вставляю этот же код в самый низ (но убираю одно слово file) (Смотрим ниже)

 Затем возвращаемся и снова дублируем одну строчку к примеру строчку «Прикрепить файл»  (Смотрим ниже)

И так же ее переименовываем и называем одну из строчек «Ответьте на вопрос» мы это делаем для того что бы нам не поступал спам так только человек сможет ответить на заданные вопросы.

Для этого нажимаете на верхнюю функцию под названием «Опрос» так же выпадает всплывающее окно с настройками и здесь нам нужно задать вопрос к примеру (5+5 и ставим вертикальную черту и затем ответ 10) «5+5|10» (Смотрим ниже)

После чего копируем нижний код и вставляем в переименованную строчку под названием «Ответьте на вопрос» а точнее чуть ниже (Смотрим ниже)

После всех нужных настроек и функций идем вверх и в синей строке копируем нужный нам шор-код, после чего идем на ту страничку где бы вы хотели видеть форму обратной связи в моем случае это «Контакты» (Смотрим ниже)

Вставлять код нужно в режиме «Текст» и в завершении все это сохраняете (Смотрим ниже)

С Уважением Максим Зеленцов!

Отправить ответ

avatar
  Подписаться  
Уведомление о