Блог Максима Войтика
Публикации о способах
заработка в интернете и SEO
Анализ сайта: Проверить сайт на санкции

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

01 марта 2013
Комментарии: 47

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

Привет уважаемые читатели и гости блога seoslim.ru. Возвращаясь к теме оптимизации и настройке сайтов, хочу рассказать, как у меня реализована форма обратной связи на сайте без использования плагинов: на PHP или HTML.

Если посмотреть на такое решение с одной стороны, то приходят мысли: «А зачем это нужно?», ведь куда проще установить специальный плагин и пользоваться стандартной формой.

форма для связи с автором

Изначально я тоже так считал, о чем рассказывал в статье Плагин Contact Form 7, где расписал весь процесс по созданию простой и в тоже время многофункциональной страницы для обратной связи, а еще о том, как ее дополнительно защитить от разного рода спама, используя КАПЧУ.

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

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

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

Советую прочитать, что я уже для этого сделал:

Переехал на скоростной Хостинг

Выполнил кэширование блога

Оптимизировал базу данных wordpress

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

Решение задачи с помощью PHP


После долгих проб и ошибок я нашел для себя отличное решение данного вопроса. Мне понравился вариант с использованием скрипта Super AJAX Contact Form, который выполнен на php и jquery. В итоге у меня получилась вот такая красивая контактная форма без плагинов.

контактная форма

Посмотреть работу данной заготовки вы можете на этой страничке.

Достоинства:

— Проверка правильности заполнения всех полей и успешного отправления письма, без перезагрузки страницы.

— Встроенная капча.

— Можно указать тему письма и начало сообщения.

Недостатки:

— Открывать форму придется в новом окне, так как не получилось ее интегрировать на страницу блога.

Теперь давайте подробно рассмотрим, что надо для этого сделать:

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

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

Теперь нужно указать адрес электронной почты, на которую будут приходить письма. Для этого разархивируйте скаченный ранее файл и откройте файл config.php (его адрес «code» далее «assets» далее «xml»), используя для этого программу Notepad++. Замените e-mail в файле на свой.

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

Далее в этом же файле спускаемся немного ниже и смотрим, какая стоит кодировка между тегами «charset». Должна быть Utf-8.

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

Обратите внимание на кодировку в файле index.php. Там должна стоять «windows-1251».

правильная кодировка

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

Далее создаете в корне вашего сайта любую папку (в моем случае это «forma-svyazi») и закидываете туда файлы из скаченного и отредактированного архива.

Чтобы контактная форма на php заработала необходимо указать ссылку на файл index.php. У меня это выглядит следующим образом:

http://seoslim.ru/forma-svyazi/index.php

Чуть не забыл сказать, обязательно закрывайте от индексации ненужные папки и файлы в robots.txt.

Подробнее об этом прочитайте в моей прошлой статье «Как составить правильный файл Robots.txt».

Disallow: /forma-svyazi/

Что мне еще здесь нравится, так это возможность добавить различные темы сообщения.

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

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

Super AJAX Contact Form

Для этого переходим опять в файл index.php и редактируем отмеченные поля с темой или приветствием.

редактируем php форму связи

Также рекомендую посмотреть видео о том, как установить и настроить Super AJAX Contact Form.

Далее я приведу один онлайн сервис по созданию html форм, которая подойдет сайтам на всех движках.

Решение задачи в HTML


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

Переходим на сервис Ip-whois и заполняем конструктор по генерации формы.

html форма связи

Далее вставляем на сайт сгенерированный html код.

вставляем код на сайт

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

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

Должно получиться, что-то похожее на такую простенькую контактную форму для обратной связи.

пример html контактной формы

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

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

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

(5 голос., в среднем: 5,00 из 5)
Загрузка...
С уважением, Максим Войтик
Буду рад, если нажмете на любую из кнопок:
Комментарии (47)
  1. Алексей в 21:27

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

    Ответить
    • Максим Войтик в 22:38

      Видел Алексей ее у вас, тоже может себе ее как-нить поставлю, только он немного закрывает сайдбар слева у вас.

      Ответить
      • Алексей в 22:57

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

        Ответить
  2. Слава в 17:53

    Спасибки за сервис формы,очень пригодилось,сам не имею знаний кода,поэтому выручили))

    Ответить
  3. Юлия в 12:27

    Здравствуйте, использовала скрипт Super AJAX Contact Form,все сделално как вы описали.Проблема: в появляющейся форме вместо букв знак . кодировки всюду проверила. Что делать?

    Ответить
  4. Надежда Суптеля в 00:39

    А я Максим пока не рискую вставить код. Поставила этот Аякс и видать что — то не то прописала или не там. У меня чуть блог не загремел по новой. Хорошо, что у меня все файлы PHP cкопированы — быстро восстанавливаю назад на свои места.

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

    Ответить
  5. Ирина в 23:07

    Юлия, откройте index.php в Notepad++, выполните команду: кодировки, перекодировать в utf-8 без BOM. сохраните ваш файл, обновите его на вашем сайте — все должно работать)

    отлично написано! спасибо! 🙂

    Ответить
  6. Александр в 18:33

    Максим, день добрый.

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

    Заранее спасибо.

    Ответить
    • Максим Войтик в 19:45

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

      Ответить
  7. Виктор в 23:44

    Подскажите, я правльно понимаю, что контактная форма не работает с новыми версиям jquery ?

    Точнее сказать, она работает, но не так как надо. То есть после отправки сообщений она не очищает поля и удаляет капчу.

    Ответить
    • Максим Войтик в 18:05

      Не знаю Виктор, не проверял. :)

      Ответить
  8. Надежда Суптеля в 21:01

    Установила Максим я обратную связь при помощи кода, плюс подчистила еще раз базу и сейчас полегче вроде скорость. Загружается быстрее блог. Еще хочу кое — что убрать, чтобы побыстрее скорость включилась. За статью спасибо.

    Ответить
  9. Данил в 10:13

    Для создания формы обратной связи я использую сервис Main-IP.ru. Удобно и можно сделать красивую форму

    Ответить
  10. Роман в 14:41

    глупый вопрос но я всегда пугаюсь когда вижу такие слова: «„в корне сайта любую папку“» . Подскажите как и где это создается? 😳

    Ответить
    • Максим Войтик в 14:48

      В том месте, где лежат все файлы сайта

      Ответить
  11. Роман в 19:18

    Чтобы php форма обратной связи заработала необходимо указать ссылку на файл index.php. У меня это выглядит следующим образом:

    Извиняюсь, где эту ссылку создавать?? 🙄

    Ответить
    • Максим Войтик в 22:52

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

      Ответить
  12. Игорь в 22:05

    Спасибо за инструкцию, наверное, в будущем воспользуюсь ей. Хочу потихоньку избавиться от плагинов, естественно от тех, которые с лёгкостью заменяются кодом. Лично я пока что пользуюсь плагином Contact form, его многие советуют. Разве он сильно загружает блог?

    Ответить
    • Максим Войтик в 19:23

      Любой плагин грузит блог, так почему бы его не заменить php кодом?

      Ответить
  13. Александра в 23:32

    Доброй ночи! Подскажите, пожалуйста, как это окно превратить во всплывающее... Не подходит мне, к сожалению, форма нового окна:(

    Ответить
  14. Marina в 19:28

    Добрый вечер!Поставила первый вариант формы на PHP. Работает. Письма приходят.

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

    Подскажите пожалуйста как исправить?

    Спасибо.

    Ответить
    • Максим Войтик в 22:55

      Проверьте кодировку, должна быть UTF-8

      Ответить
  15. Морис в 16:14

    Максим! Почему же полезную ссылку на ресурс, где объясняется как интегрировать форму обратной связи (super ajax contact form) в дизайн сайта вы посчитали за спам? ))))

    Ответить
    • Максим Войтик в 18:08

      А почему нет? ))

      Ответить
      • Морис в 11:03

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

        Ответить
      • Максим Войтик в 12:41

        У меня полностью комментарии закрыты от индексации поисковиками.

        Ответить
  16. Морис в 17:34

    Тогда давайте куплю ссылку в самой статье. Сколько будет стоить?

    Ответить
    • Максим Войтик в 17:42

      700 рублей

      Ответить
  17. Yura в 19:30

    Здравствуйте Максим! У меня проблема с обратной связью (второй пример). Всё установил, прописал как надо, но при вызове появляется пустой квадрат и написано ошибка 404. На локалке всё открывается, а как установил на реальный сайт, то возникла проблема. Спасибо.

    Ответить
    • Максим Войтик в 10:13

      Привет. Не знаю так как сервисами не пользуюсь.

      Ответить
  18. Галина в 21:21

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

    Ответить
    • Максим Войтик в 00:30

      Если вы Галина про комментарии, то это сделано с помощью плагина Subscribe To Comments, который создает подписку на комментарии, там галочка появляется около кнопки «Отправить».

      Ответить
      • галина в 00:47

        Максим, Вы имеете ввиду свою статью seoslim.ru/wordpress/plag...v-wordpress.html ? Нашла по поиску у Вас. Если да, то буду устанавливать предложенный плагин. Спасибо.

        Ответить
      • Максим Войтик в 20:30

        Да, в этой статье я его немного описывал. :)

        Ответить
  19. Галина в 23:42

    Здравствуйте, Максим! А подскажите,пожалуйста,где у Вас найти как вставить комментарии на страницу об авторе. У многих вижу, хочу научиться. Это в коде надо что-то добавить, искала в инете, но не поняла до конца, очень заумно преподнесено, а у Вас все доходчиво , легко и просто. Спасибо.

    Ответить
    • Максим Войтик в 18:03

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

      Ответить
      • Галина в 18:54

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

        Ответить
      • Галина в 19:02

        Написала в админке комментарий «тест-проверка».Комментарий оформился,как на статьях с аватаром, но на страницу блога не вывелся. Что-то его не пускает.

        Ответить
      • Максим Войтик в 20:50

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

        Ответить
      • Галина в 21:29

        А я вернулась к той статье и сделала вот что, чтоб Вы помогли следующему неумеке. Зашла в админку в page.php и перед вставила , как это в single.php, сохранила. А по методу, что Вы предложили, убрала комменты с других страниц, оставила только"об авторе". Так что Вы мне все-таки помогли. Спасибо.

        Ответить
      • Максим Войтик в 23:15

        Молодец Галина :) 🙂

        Ответить
      • Галина в 10:50

        Здравствуйте,Максим! Хочу уже добить тему комментариев. Дайте, пожалуйста, наводку. У меня они на английском выводятся. Как форму комментариев сделать на русском? Это плагин или ? Спасибо за помощь.

        Ответить
      • Максим Войтик в 21:33

        У меня форма комментариев была встроена в шаблон блога, поэтому ничего не пришлось менять. За комментарии, как правило отвечает файл comments.php если что-то в форме у вас на английском, то смотрите это файл и переводите на русский.

        Ответить
  20. Морис в 22:32

    Галина, а вы стандартный шаблон используете? Если да то какой?

    Ответить
    • Галина в 10:38

      Здравствуйте, Морис! Шаблон не совсем стандартный, это премиум тема, которая продавалась за деньги, ее кто — то обнулил, а мне товарищ почистил ссылки и использовал. Тема называется zenko magazine.

      Ответить
  21. Галина в 01:17

    Максим, добрый вечер или ночь! Снова вернулась на комментарии, а пишу потому, что Вы предлагаете образец формы один, а у Вас другой — который я заполняю. Зачем число с картинки в образце, мы же не сейф вскрываем (шутка). У Вас все классно и понятно, просто супер. Хотелось бы узнать как дойти до такой формы,если не секрет. Спасибо. Добиваю комментарии на блоге и Вас замучила вопросами. Обещаю передышку, спасибо Вам, Вы реально помогаете, грамотно, доходчиво, понятно, а главное есть результат.

    Ответить
    • Максим Войтик в 21:26

      Это я привел список форм, которые могут заказать посетители под свой проект, а уже все внедрю и настрою.

      Ответить
Оставить свой комментарий
Обязательно ознакомьтесь с правилами комментирования!!! СПАМ будет удален!
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]

© 2011-2016 seoslim.ru, блог Максима Войтика

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