Обратная связь для сайта с помощью скриптов форм на html и php, а так же онлайн конструкторов и генераторов

Код простой формы обратной связи для сайта на HTML и PHP

Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.

Почему используется HTML и PHP?

Для CRM, таких как WordPress, Joomla и других можно найти различные плагины для установки формы обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это часто их низкая производительность и замедление сайта из-за загрузки лишнего «мусора» — ненужных стилей и скриптов. Так как эти плагины все равно выдают в результате тот же код HTML, то предлагаю использовать простую, но полноценно функциональную форму, которую можно изменить под свои нужны, например, под обратный звонок с сайта.

Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.

Структура кода реализации обратной связи для сайта

Далее приведен алгоритм работы обратной связи:

  1. Код HTML формы, вставленный на страницу + CSS стили для его оформления.
  2. PHP файл, который и выполняет отправку письма или иное действие для регистрации запроса.

В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.

Код формы обратной связи на HTML

Вначале приведем исходный код простой формы обратной связи для сайта на HTML:

Сама форма находится между HTML тегами . Тегу присвоен CSS класс class=»form-zvonok» , который используется для реализации отображения через CSS стили.

Рассмотрим атрибуты формы

  • autocomplete=»off» — автозаполнение формы отключено, при повторном заходе на страницу все поля ввода будут обнулены. Рекомендуется автозаполнение отключать, так как при включенном иногда возникали проблемы, что при изменении значений полей формы отправлялись на сервер старые значения.
  • Атрибут action=’email.php’ , в нём указан адрес скрипта, в данном случае PHP, который вызывается и которому передаются данные формы после нажатия кнопки «Отправить» . Если указан не полный путь к скрипту, как здесь, то обращение будет с адреса, на котором размещена форма. Например форма находится по этому адресу http://site.com/feed-back , тогда обращение будет http://site.com/feed-back/email.php . Так же это может быть любой путь, по которому обрабатывается запрос.
  • Атрибут method=’post’ , в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод GET отправляет данные формы через адресную строку. В этом случае после адреса строки появляется вопросительный знак «?» после которого идут название поля, его значение, что является небезопасным способом отправлять данные формы. Так, учитывая SEO оптимизацию сайта, данные формы обратной связи для сайта лучше отправлять методом POST, так как данные передаются скрытно, а в случае метода GET у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими параметрами после «?», что приведет к дублям страниц.

Далее внутри тега находится контейнер

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

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

Отправка письма PHP скриптом

Приведем код простого скрипта для отправки письма

Чтобы отправить письмо на нужный email, замените значение переменной $to email@tut.by на необходимый адрес. Переменная $subject — тема сообщения, показывается почтовыми программами при просмотре списков писем. $message — само тело письма, это и есть само сообщение. $headers — шапка письма, в ней указывается тип письма, например HTML, а также: кодировка, от кого доставлено письмо и на какой emal отправлять ответ.

Простой скрипт обработки данных формы HTML в PHP скрипте

Приведем сначала исходный код:

проверяем или используется метод POST

Далее проверяем или были высланы данные с полей ввода

Обратите внимание, что в конструкции $_POST[«username»] название поля совпадает с именем поля username в форме . Поэтому на одной странице названия полей должны быть уникальны, иначе они будут переписывать друг друга.

Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.

Функция trim() удаляет пробелы в начале и в конце строки. Далее формируем письмо и все что подготовили отправляем функцией mail() .

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

Приведем код CSS оформления для формы обратной связи сайта.

Разберем подробнее код.

Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px , если шире, то форма HTML выглядит растянутой:

Что бы упорядочить поля и кнопку «Отправить» , обертываем их в div , отображение ставим в flex и направление отображения столбцом column . Для красоты добавляем отступы сверху и снизу на 20px:

Подпись и поле ввода обернуты в контейнер div :

Для этого дива присвоим отступы сверху и снизу:

Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:

Аналогично для подписей и полей ввода:

Настраиваем красивый внешний вид подписей и полей ввода:

Звездочку делаем красной:

Оформляем кнопку «Отправить» :

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

Обратите внимание, что иногда эти стили могут быть переопределены другими, которые имеют больший приоритет. Что бы усилить приоритет, просто присвойте форме имя через id , например id=»obratnuj-zvonok» и в CSS файлах тогда обращение идет не через точку, как к классам, а через решетку # , например #obratnuj-zvonok . Тогда достаточно добавить к селекторам в CSS файлах в начало #obratnuj-zvonok , что бы повысить приоритет правил.

Скачать исходный код формы обратной связи

Для обучения вы можете скачать здесь исходные файлы примеров приведенные выше. Этот пример скорее для изучения и понимания как работает форма обратной связи на HTML в связке с PHP, а полноценный, рабочий пример будет выложен позже в другой статье.

Блог Vaden Pro

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

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

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

Читать еще:  Как анализировать рынок форекс с помощью индикаторов

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:

Мы использовали данный код:

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

  1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
  2. Не используйте для переноса строк и создания отступов лишние теги по типу , и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
  3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

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

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST[‘name’] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo «Для отправки сообщения заполните все поля! $back» и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

  1. ‘почта_для_получения_сообщений@gmail.com’ – сюда между кавычек вставляете свою почту
  2. ‘Письмо с адрес_вашего_сайта’ – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
  3. ‘Вам написал: ‘.$name.’ Его номер: ‘.$phone.’ Его почта: ‘.$mail.’ Его сообщение: ‘.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом делаем перенос строки, чтобы сообщение в целом было читабельно.
  4. Content-type:text/html;charset=windows-1251 — в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

Кодировка указанная в «голове» документа ( ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

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

Проверка формы на адекватность вводимых данных

Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

Теперь по пунктам забираем состав проверки:

  1. Обращаемся к нашей форме и по значению атрибута name выбираем интересующий нас инпут.
  2. Записываем его содержимое в переменную
  3. Собственно сама проверка формы на совпадение с заданными нами символами. (/^[A-Za-zА-Яа-я ]*[A-Za-zА-Яа-я ]+$/ — могут использоваться только буквы русского и английского алфавитов; /^[0-9+][0-9- ]*[0-9- ]+$/ — первый символ это «+» или цифра, дальше могут быть только цифры; /^[A-Za-z0-9][A-Za-z0-9._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*.)+[A-Za-z]+$/ — первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).
  4. Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
  5. Пользователю выводится это сообщение о ошибке.
  6. Происходит выход из скрипта проверки.

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

Полный код страниц формы

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

Подводя итоги

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

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

Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.

О защите от спама я напишу в следующих статьях.

Форма обратной связи для сайта: PHP-обработчик + Ajax + Валидация

Привет ребята. На связи Серёга. Знаю, что давно не писал — дела, дела. Да и сейчас, если честно, времени совсем нету. И форму будем делать не по моему уроку, а по урокам моего знакомого — Кротова Романа.

Читать еще:  Как автоматически добавить атрибут alt в теги img вашего блога на wordpress (там, где их нет)

Создавать форму обратной связи для сайта мы будем последовательно. Поэтому эта статья будет разбита на 3 урока.

В первом видео — мы просто заведём её в HTML и создадим PHP-обработчик для отправки писем. Всё будет последовательно, с нуля и до результата. Так, что бы вы всё поняли, и смогли самостоятельно встроить нужные поля.

Во второй части Рома, покажет Вам как сделать Ajax-загрузку. То есть отправлять данные с формы без перезагрузки странички. Что, согласитесь, весьма удобно и современно.

Ну и в третьей (урок готовится — позже здесь будет ссылка), мы встроим проверку на валидацию. Не средствами браузера, а при помощи специальных скриптов.

Видео 1. Создание формы обратной связи для сайта.

Обращаю внимание! Что бы форма заработала — необходимо, что бы ваш хостинг поддерживал PHP.

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

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

Вот что получилось в итоге в файле index.php

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

Содержимое файла submit.php:

Здесь осуществляется базовая проверка формы на заполненность, что бы не отправлять пустые сообщения. Если всё «гуд» — письмо отправляется. И идёт переадресация на страницу-уведомление об успешном отправлении письма.

Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.

Видео 2. Ajax — отправка письма без перезагрузки страницы.

Для прохождения второго урока, нам понадобится библиотека jQuery. Мы её подключали с официального сайта jquery.com (ссылка ведет на страницу загрузки).

Ребята, решил что не буду публиковать код формы обратной связи. Какой смысл в этом, если есть ссылка на оригинал автора??

Видео 3. Валидация — проверка формы на правильность заполнения.

Как сделать чтобы отправляло два письма — тому, кто пишет (он вводит свой мейл) и администратору системы (магазина). Еще добавление файлов к форме отправки

mail(«drugoisvet@gmail.com, admin@krotovroman.ru», $theme .

Здравствуйте, Сергей и Роман!

Спасибо за Ваши уроки!

Но . — большая просьба: покажите как поставить капчу и как пристегнуть картинку, видео ??

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

По вложению файлов и капче — надо отдельное видео записывать.

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

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

Есть полный курс у меня Мастер PHP PRO.

Напишите мне в личку, я скину: https://vk.me/krotovromanpublic

Спасибо за урок. Ждем новых уроков. Просмотрел урок бегло. Так как не закончил ещё изучение «верстаем на 5 с плюсом». Урок впринципе понятен. Так как сам программирую на языке мкл5. Тема Ваша интересна. После изучения буду изучать Ваш курс «Видеокурс «Мастер PHP»».

Хорошо. Всегда рад видеть!

Посмотрел уроки, возникло пару вопросов:

1. Зачем назначать документу расширение .php, если там чистый html?

2. Почему нет закрытия кода в файле submit.php?

Здравствуйте Кирилл. Спасибо за вопросы!

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

2. Тега закрытия в конце файла submit.php нет, потому что он не требуется там. Там чистый PHP без примеси HTML. Если комбинировать в файле HTML код со вставками PHP, то PHP теги надо закрывать. Если будете дальше смотреть мои уроки по этой теме, возможно, увидите такие примеры.

С уважением, Кротов Роман.

Здравствуйте! Как сделать, чтобы сообщение об отравке исчезало через несколько секунд?

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

Сделайте все точно так же как в видеоуроке и всё получится.

В крайнем случае создайте тему на моем форуме: https://support.krotovroman.ru/

И со скриншотами покажите по порядку что вы делали и какие ошибки появляются.

Добрый день. Установил форму на сайт и в консоли появилась ошибка Uncaught TypeError: $.validate is not a function Подскажите, с чем она связана и как ее устранить?

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

Ошибка исчезла, но форма все равно не реагирует. Не проверяет заполнение поля и не отправляет.

Помогите исправить обработчик в форме обратной связи. К сожалению сам с РНР, мягко говоря, на Вы.

А проблема в следующем.

У нас только один почтовый ящик и в его настройках, на сервере хостинга, указана переадресация на почту Яндекса на fanat1959@yandex.ru.

Но пересылается на Яндекс только примерно половина писем, остальные нет. Т.е. я ВСЕ входящие письма вижу в ящике на хостинге, а на почте Яндекса — только половину.

В службе поддержки хоста написали (вкратце):

ВСЕ письма поставлены в очередь почтовой службы Яндекс, однако по части из них получены отказы в доставке, поскольку форма обратной связи сайта установила в письме в качестве заголовка отправителя email посетителя сайта, например ниже «inek@flowers56.ru», «aj.sidorov@physics.msu.ru», или пустое.

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

Рекомендуем пересмотреть исходный код формы обратной связи и изменить его таким образом, чтобы электронный адрес посетителя сайта добавлялся, например, в заголовок «Reply-to:».

Вот часть кода обработчика на РНР:

$mail_addr = array («info@fanatgusyatnik.ru»); // сюда необходимо подставить СУЩЕСТВУЮЩИЙ на сервере email, с него будет рассылка

#header («Location: sm_success.htm»);

header («Location: sm_failed.htm»);

$mail_subj = «Вопрос к Фанат Гусятник — «.$p[«Subject»];

$sender_mail = array («E_mail» => «E-mail»);

foreach ($sender_mail as $key => $item)

if (isset($p[$key]) && chop($p[$key]))

$mail_head = «From: «.»n»;

$mail_head .= «Content-Type: multipart/mixed; boundary=»».$mail_bond.»»».»n»;

$mail_body = «—«.$mail_bond.»n».»Content-Type: text/plain; charset=Windows-1251″.»n»;

$mail_body .= «Content-Transfer-Encoding: 8bit».»nn»;

$mail_body .= ‘== Новое письмо с сайта Фанат-Гусятник ==’.»n»;

Подскажите пожалуйста куда и что прописать в «Reply-to:».

Доброго времени суток. У меня проблема со скриптом. установил полностью скаченный скрипт на локальный сервер всё сработало. установил на сервер где расположен сайт выдаёт «ошибка при отправке сообщения», при этом я для проверки создал отдельную директорию и ничего не менял кроме e-mail адреса. дал права всем файлам 777. но всё тщетно. в чём может быть проблема?

1. При открытии письма не работают переносы строк. Вся информация идет в одну строку http://joxi.ru/xAeNPoLup7K3vr. Как можно исправить такое.

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

Читать еще:  Как инициировать просмотр видео с youtube не с начала, а с нужного места (при передаче ссылки на ролик или вставке на сайт)

Вы прекрасно показали и рассказали, как сделать одну форму на странице. А если надо несколько, тогда что получается необходимо делать несколько index.php и submit.php. что ли дублировать форму несколько раз в корне сайта. Или есть возможность как-то объединить эти формы в одном файле?

Большая просьба помочь в этом вопросе.

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

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

Подскажите как прописать путь от js к submit.php если они находятся в разных папках на сервере?

Здравствуйте! Спасибо за Ваш урок! Все получилось, но не могу сообразить только одно.

Есть форма и при нажатии на кнопку выполняется скрипт JS:

var vz = «f»;// это так для примера

// само исполнение при нажатии на кнопку

$(this).val(«Отправляется. » ); // Перед отправкой меняем название кнопки. Это работает

$.post( // три параметра метода Post

«submit.php», // 1-ый параметр — путь до файла submit.php

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

// в переменную vz и далее название кнопки изменилось . .

$(this).val(vz) ; // Текст кнопки

Вопрос в следующем.Как из функции function (vozvrat) результат присвоить переменной VZ , что бы на кнопке отображались соответствующие надписи из файла submit.php ( видеоурок 2), как у Вас?

Доброго времени суток. Урок очень полезный и я такую форму с доработками установил на свой сайт. Сейчас столкнулся с такой проблемой. На странице где форма обратной связи я сделал еще одну форму для добавления комментариев с использованием бд. Проблема в выводе результата PHP проверки, так как он выводится в блок div class=’result’ одновременно на двух формах. Подскажите как их разделить.

Warning: mail(): Failed to connect to mailserver at «localhost» port 25, verify your «SMTP» and «smtp_port» setting in php.ini or use ini_set() in D:xampphtdocstestformsubmit.php on line 17

Я свою почту указал. На локальном сервере xampp такая ошибка

Форма обратной связи без плагинов

Здравствуйте, дорогие читатели моего блога!

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

Раньше форма обратной связи на моем блоге была реализована при помощи двух плагинов.

Это плагин, добавляющий контактную форму на блог, под названием «Contact form 7».

И в совокупности с ним плагин — «Really simple captcha», добавляющий капчу для созданной формы.

О создании формы при помощи этих двух плагинов я писал в этой статье.

В последнее время я стараюсь ускорить работу своего блога, в недавних постах «Как ускорить wordpress» и «Как сменить хостинг» я писал об этом.

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

Но ненужными они становятся только в том случае, если мы сможем найти им альтернативную замену.

Как раз такое решение я нашел, установив на блог обратную связь без плагинов.

Кстати, я планирую отключить еще некоторые плагины на блоге и опубликовать подробные инструкции о том, как это сделать.

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

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

Форма обратной связи без плагинов, при помощи php

На своем блоге я поставил обратную связь Super AJAX Contact Form, наблюдать ее Вы можете, перейдя по этой ссылке.

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

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

Скачать Super AJAX Contact Form можно по этой ссылке (внизу страницы нужно нажать «Download Now»).

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

Чтобы русифицировать текст, нужно заменить некоторые записи в файле index.php. а также в файле config.php, который расположен в каталоге xml (assetsxml).

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

Любую из версий Super AJAX Contact Form необходимо настроить, а именно прописать адрес электронной почты, на которую будут отправляться сообщения.

Для этого необходимо открыть файл config.php и заменить e-mail, указанный в файле, на свой:

Также здесь между тэгами изменить кодировку «iso-8859-1» на «utf-8» (в русифицированной версии кодировка уже изменена).

Далее в файле index.php необходимо заменить кодировку «UTF-8» на «windows-1251».

Теперь нам остается каталог с файлами формы поместить в корень блога. Я его переименовал в «code».

Все, установка формы закончена. Чтобы ее увидеть, нужно вставить ссылку в любое место блога на файл index.php. На моем блоге ссылка выглядит так:

P.S. Не забудьте запретить индексацию папки «Code» в файле robots.txt.

Можете также посмотреть подробный видеоурок по

настройке Super AJAX Contact Form:

Еще одна форма обратной связи php

Есть еще подобные формы обратной связи. Одну из них можно скачать здесь.

Выглядит она так:

Она уже на русском языке. Настройки очень просты.

В файле config.php необходимо заменить адрес электронной почты и указать кодировку текста (utf-8, windows 1251).

Установка аналогична предыдущей форме.

Форма обратной связи html, создаваемая при помощи конструктора.

Для работы двух предыдущих форм требуется наличие поддержки «PHP».

Если на Вашем сервере она отсутствует, либо Вас не устраивают описанные выше формы, то можете создать самостоятельно при помощи генераторов и конструкторов.

Один из таких онлайн-конструкторов обратной связи (ip-whois) Вы можете посмотреть на этой странице.

Готовая форма будет выглядеть примерно так:

Здесь Вам предложат создать ее всего за три шага:

1. Настройка. Настроить можно поля, цвета, текст.

2. Разместить с генерированный конструктором код на странице Вашего сайта.

3. Указать адрес сайта и адрес электронной почты, на который будут отправляться письма.

Конечно, дизайн здесь не суперский, но это лучше, чем использовать немереное количество плагинов на блоге.

Еще одна форма обратной связи html

Если Вас не устраивает предыдущая форма обратной связи html, то можете посмотреть еще один онлайн генератор форм обратной связи, перейдя по этой ссылке.

Здесь все аналогично предыдущему конструктору. Перечислю основные его плюсы:

— отсутствие нежелательной почты;

— работа на любом хостинге;

— помощь при настройке.

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

Хочу отметить, что указанные в статье html формы обратной связи без плагинов подойдут для любых сайтов, на любых хостингах.

Ссылка на основную публикацию
Adblock
detector