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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В итоге получится такая форма связи:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментировать

КОММЕНТАРИИ

13.02.13 Ответить
Contest:

Пользуюсь формой обратной связи Contact Form 7 для WordPress, но не получается через нее письмо отправить — ошибка красным цветом. Как починить?

13.02.13 Ответить
Ramsa:

Забрал простую формочку на HTML, спасибо)

13.02.13 Ответить
Григорий:

Плагин формы обратной связи для WordPress поставил, письма отправляются. У меня все нормально.

13.02.13 Ответить
Wildo:

У меня было подобное. Проблема в настройках почтового сервера вашего хостинга, скорее всего.

10.02.14 Ответить
ZEugene:

Я пока в нете нашел форму, использование .php файла. Но сейчас задумываюсь насчет jquery. хочу чтобы был еще выпадающий календарь. Не находили такой готовой формы?

12.02.14 Ответить
Андрей:

Смотрите, у меня есть моя дизайнер скаля форма — я сам ее сделал, под дизайн своего сайта. Я взял тег «form» и посредством HTML инструментов сварганил ее. И вот потом обнаружил, что кнопка «саблимит » работает не так как мне нужно. Я хочу, чтобы она испольльзуя только ресурсы моего сайта отправляла сообщение на мой почтовый адрес, как это на всех современных сервисах делается, а она вместо этого начинает зачем то открывать почтовую программу на компьютере пользователя.
Вы можете мне недостающий исполняемый код отправить — чтобы про нажатии кнопки на кой адрес сообщение приходило и все… Элементы формы у меня уже есть свои.

11.03.14 Ответить
Анна:

Аааа! Сейчас умру уже. Когда я делаю самостоятельно форму сообшений, как показано на примере «Можно сделать простую контактную форму собственноручно. Для этого нужно создать файл form.php и сохранить в нем следующий код: » ,то когда нажимаю на кнопку НАПИСАТЬ ,то открывается файл mail.php со всей написанной в нем лабуденью. Что я не так делаю?

12.03.14 Ответить
Wildo:

@Анна: не знаю, чесслово )

29.03.14 Ответить
Виктория:

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

22.04.14 Ответить
Anton:

хотел использовать первый вариант — Простая установка форм обратной связи в HTML.
ну а как эту форму выводить на странице? у меня на сайте (wp) уже есть страница контактов но отправка сообщений идёт без капчи. хотел поставить с капчёй ибо замучал спам. файл config.php отредактировал. куда всё это закачивать и как выводить эту форму на странице вместо старой?

22.04.14 Ответить
Anton:

дружище, ну коммент мой пропустил так может ответишь на него? или ты сам не в курсе?

02.10.14 Ответить
Блох:

Одни картинки, написали бы лучше коды или приложили бы файл для того чтобы скачать код, а не набирать его вручную.

03.11.14 Ответить
Виктор:

@Анна: Отправка не будет работать если Вы работаете локально. Её нужно либо выложить в интернет, либо запустить через какой-нибудь сервер, Apache например.

13.01.15 Ответить
Игорь:

а я использую форму созданную через сервис — http://formdesigner.ru. Очень мощный конструктор, особенно порадовал «дизайнер форм». Без проблем подогнал форму под дизайн своего сайта. Рекомендую.

08.03.15 Ответить
Татьяна:

Ура! Получилось. Спасибо!

18.05.15 Ответить
Лев:

Неплохо

11.07.15 Ответить
Улуг:

дизайнерская в виде печатной машинки как настроит надо

28.02.16 Ответить
Mir-On:

Спасибо за статью!

Ребят, попробуйте сервис от pozvonim.com
Простая установка на любую cms, хорошая поддержка. Не сочтите за рекламу, ссылка не реферальная, просто можно взять и попробовать на тестовый период. А потом уже решить подходит или нет. Цены как у всех, можно пакеты брать, а можно количество клиентов или минут. Лидогенерация очень высокая, а окупаемость быстрая. Может кому пригодится мой комментарий

07.03.16 Ответить
Оксана:

После отправки простой формы (HTML) переход осуществляется на ваш сайт, возможно ли отправлять посетителя на главную страницу своего сайта?

28.05.16 Ответить
Владимир:

По моему у Вас проблема в шаблоне письма, настройте его и будет Вам радость