Хостинг от Макхост

Форма обратной связи для сайта. Готовый html и php код для wordpress

Автор: Евгений Несмелов
Форма обратной связи для сайта
Добрый день, форма обратной связи должна присутствовать на каждом сайте. Сегодня я покажу пример готовой формы для вставки на любой сайт, в том числе и на движок wordpress. Готовый пример html и php кода можно будет скопировать на свой сайт. Кроме готового примера, существует много плагинов, которые так же пользуются большой популярностью. На многих сайта такая форма уже встроена в тему, но иногда бывает необходимость добавить еще одну на другую страницу или заменить старую.

к оглавлению ↑

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

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

Есть конечно и достойные ответы, но их очень мало. Я приведу простой пример, для которого много ума не нужно. Особых знаний в php не требуется, точнее они вообще не нужны. Что и где нужно изменить, я напишу подробно, когда это будет нужно. Форма работает нормально, без сбоев. Пример формы находится у меня на этой странице. В готовый пример я добавил немного стилей для красоты, чтоб форма совсем уже не смотрелась «убого». При желании можно все изменить на ваше усмотрение.

к оглавлению ↑

Готовая форма обратной связи для сайта на html

В данном примере, форма обратной связи для сайта состоит из html кода. Такой пример html кода вставляете абсолютно на любую страницу сайта, не важно, где и что вы используете. Этот же код можно вставить на страницу движка wordpress, все будет работать правильно и без сбоев.

В самом начале кода, в первом строчке, вы должны указать свой путь к php файлу form.php ( про него немного попозже). Больше ничего менять не нужно. Если вас не устраивает название формы и ее поля, вы всегда можете добавить новые или изменить старые. Так же можно добавить свои стили прямо суда в таблицу. Если такой вариант вам неудобный, задавайте новые классы и уже потом добавляйте стили через ваш файл style.css

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

После проделанных действий, у вас должна получиться вот такая форма обратной связи на странице. Не стоит сильно увлекаться, ваша форма должна быть простой и максимально удобной. Без лишних дополнительных полей...имя, почта, тема и сообщение. При желании, даже Тему сообщения можно убрать.
Форма связи для wordpress

к оглавлению ↑

Php код формы

С разметкой формы определились, красоту навели, теперь необходимо создать файл с расширением php и добавить в него вот такой код. Файл добавляйте через FTP клиент на ваш сайт. Большинство пользователей используют CMS, скидывайте данный файл в папке с вашей темой. Адрес и название этого файла, вы должны изначально прописать в разметке вашей формы, которую я показывал выше. Я прописал полный путь для примера, чтоб было понятно, что и куда необходимо вставить.

( <form action="/wp-content/themes/xmarkup/form.php")

Сам код файла form.php содержит в себе:

Вместо url=http://nesmelov.ru пишем свой адрес сайта. $address = «site@yandex.ru» — в данной строчке указываем свой адрес электронной почты, на которую будут приходить письма. Больше ничего менять не нужно, все настроено и работает. Если у вас возникли трудности в процессе установки, пишите в комментариях, я обязательно отвечу.

к оглавлению ↑

Вставка обратной связи в wordpress

Процесс установки формы в wordpress ничем не отличается, все действия делаются аналогично. Файл form.php желательно закачать в папку с вашей темой. Не забываем в html разметки указать полный и точный адрес к файлу обработчику. Кроме этого, нужно изменить адрес сайта на свой сайт и правильно написать адрес электронной почты. Код готовой формы можно вставить на любую страницу вашего блога. В качестве примера я добавил к себе на блог на страницу с конкурсами.

В качестве примера, можно создать страницу «Связаться с автором» или «Автор» и закинуть туда вашу форму.  На некоторых блогах я замечал снизу каждой формы ряд из кнопок социальных сетей или дополнительные варианты связи с автором. Если есть желание, можно так же повторить. У меня на блоге форма связи работает, я проверял лично на своем примере. Если к вам письма не доходят, значит проблема с вашей стороны.

к оглавлению ↑

Плагины для wordpress

Плагин обратной связи Contact Form 7

Если у вас возникли трудности с вставкой такой рода обратной связи на свой сайт, вы можете сказать один из плагинов и установить его на свой сайт. На сегодня существует большое количество плагинов, с помощью которых можно сделать такие формы для сайта. Заходим в панель администратора, нажимаем на Плагины — добавить новый. Выбираем любой, который вам понравится и пользуемся на здоровье. Больше популярностью пользуется плагин Contact Form 7.

  1. Contact Form 7.
  2. Fast Secure Contact Form.
  3. Contact Form by Contact ME.
  4. FormCraft.
  5. Visual Form Builder.
  6. nForms – WordPress Form Builder.
  7. Gravity Forms.

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

Возьмем для примера первый из них. Добавляем новый плагин Contact Form 7. Данный плагин очень простой, при работа с ним проблем возникнуть не должно. Многие блогера пользуются этим плагином для дополнительных мелких форм на своих сайтах. Переходи в консоли слева в пункт Contact Form 7 и нажимаем «добавить новую форму». Язык по умолчанию уже стоит русский.

Плагин формы обратной связи

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

После создания, плагин предложит вам короткий шорткод, который нужно будет вставить в нужное место на сайте, например [contact-form-7 id="517"]. После вставки шорткода, вы увидите свою новенькую форму. При создании любой страницы, переходим на вкладку редактирования «Текст» и вставляем ваш код.

Небольшой минус заключается в том, что дизайн вашей обратной связи будет в очень ужасном виде. Не стоит сильно расстраиваться. Заходим через ftp по данному адресу wp-content/plugins/contact-form-7/modules. В этой папке находятся все css стили плагина. Можно смело добавлять свои новые свойства, чтоб ваша форма была красивая и заметная.

к оглавлению ↑

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

Онлайн генератор форм

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

  • formdesigner;
  • livetools.uiparade;
  • Google Forms;
  • iFormbuilder;
  • faary.

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

к оглавлению ↑

Форма обратного звонка

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

Форма обратного звонка

На сегодня подобных вида услуг существует большое количество и все они не стоят на месте. С каждый обновлением добавляются новые фишки. Онлайн консультанты добавляют много возможностей вашему интернет магазину для удобства связи с клиентом. Возьмем для примера сервис livetex, единственный его минус наверное цена. Период пользования три месяца стоит 4200 рублей для одного магазина. Всегда есть возможность испытать пробный период.

  1. Живое общение с клиентом.
  2. Генераторы лидов.
  3. Различные виджеты для обратного звонка.
  4. Онлайн статистика.
  5. Онлайн мониторинг.

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

Евгений Несмелов

Подпишись на обновления блога!Будь в курсе первым
20 комментариев

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь . формой входа или введите другой .

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

20 комментариев

по хронологии
по рейтингу сначала новые по хронологии

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

Автор

Добрый день, только что проверил, форма обратной связи работает. Письма приходят в Входящие. Проверьте правильно ли написал в коде адрес почтового ящика, папку спамм. Ящик укажите Яндекса или Гугла.

$address = "site@yandex.ru";

Спасибо, нашла ошибку. все заработало (лишний слэш стоял). Не подскажете как в этой форме сделать не обязательным для заполнения поле емейл?

Автор

Если вы уберете обязательное поле емейла, как вы потом людям будете отвечать?

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

Установил форму как вы описывали, но при отправке выдает нет страницы. как исправить? заранее благодарен.

Автор

В первой строчке указали свой адрес сайта?

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

Автор

Скорей всего проблема с кодировкой. При сохранении кода попробуйте поставить UTF-8 без BOM.

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

Добрый день
Спасибо большое за подробную и простую инструкцию
Все вставила-сделала (у меня php), но при отправке формы пишет Method Post not allowed (скриншот прикрепила).
Думаю, что проблема все-таки на моей стороне, но может у вас есть на этот случай подсказка?

Спасибо заранее!

Красивые формочки!
Буду использовать в работе. Автору - спасибочки!

Автор

Проверьте правильность написания ваших данных, возможно ошибка там.

уже выяснила у хостинга, оказывается мой тариф (минимальный у nic.ru) не позволяет выполнение php модулей. Докуплю тариф, все заработает 🙂

Добрый день. Всё сделал как написано, форма работает.

Только в письмах, которые приходят, текст (cirillik) отображается квадратиками, кроме английского.
И когда отправляю сообщение перед тем как перекинет на главную страницу, на белом фоне появляются чёрные квадратики и только потом главная страница.
Как устранить эту проблему?

Добрый день Евгений! Сенкс за форму . Форма работает . как сделать чтоб поле email убрать?
убрал в .php if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}} и коде кнопки
E-mail: письма перстали отправляться.

Александр

Спасибо, всё работает, вид формы подправлю. Вопрос такой: можно указывать почту своего сайта типа имя@имя сайта.ru и можно ли таким способов загружать другие формы, например расчёт стоимости заказа?

Здравствуйте. Я сделал как описано выше, но когда нажимаю на кнопку атправит у меня появляется окно где показивает тот код, который у меня на form.php
Как 1то исправит?

Работает на "ура" !
Поставил себе в закладки.

Письмо не отправляется - как исправить?
тестовые письма с админке smtp приходят, а через форму нет