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

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

Здравствуйте! Сегодня будем делать форму обратной связи без использования плагинов, для сайта на WordPress.

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

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

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

Валидный код — это код страницы сайта, который соответствует неким правилам и требованиям.

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

 

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

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

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

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

Создайте файл с названием mail.php (Можете создать обычный текстовый документ и переименовать его, не забудьте вместо .txt указать формат .php) и поместите его в папку с  вашей темой (Ваш.сайт/wp-content/themes/ваша тема/mail.php). Теперь можно открыть этот файл в админке блога во вкладке Внешний вид/Редактор или же используйте html редактор Notepad++ и вставьте в него следующий код:

Давайте разберем код. Строка под номером 2 отвечает за переадресацию на указанную вами страницу через 3 секунды. Время вы можете изменить, заменив число в «content=’3;» на свое.

В 9 строке укажите ваш E-mail адрес, на который будут приходить письма.

Строки 14 и 18 измените на свое усмотрение или оставьте как есть.

На этом закончим с настройками файла mail.php и перейдем к вставке его на блог.

 

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

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

Для ее вывода используем следующий код:

Подкорректируйте в 1 строке путь к файлу mail.php. Редактируйте под себя названия, высоту, ширину, расположение полей. Для этого замените или добавьте стили в «style=»width:31%; Ваш стиль;»».

Если на почту вам приходят невразумительные иероглифы или квадраты, сохраните файл mail.php в кодировке UTF-8 без BOM с помощью редактора Notepad++.

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

36 Комментарии

  1. Приветствую! Прошу не обижаться, но так статьи для новичков не пишут.
    Попробовал поставить ваше решение формы обратной связи. В итоге, сначала не открывалась страница, но это ладно. Но потом, начал смотреть внимательнее код, оказалось, требуется кроме адреса главной страницы (что не указано вами в статье) изменить адрес получения писем на свой, что опять же не указано в вашей статье.
    Дальше интереснее, при установке и внесении нужных данных оказывается что форма не работает. Выдается, что сообщение отправлено и меня перебрасывает на главную. Но пи этом страница не отображается. Письмо приходит, но с пустыми полями от непонятного адресата.
    Я вижу что у вас это форма работает, тогда где может быть ошибка. Решение интересное и если это ваш код, то требуется доработать. И еще, а как решается проблема спама? И как применить стили? Как они называются?
    Можете не пропускать мой комментарий, но статью переработайте. Удачи!

    • Здравствуйте, Артем. Для обиды нет причины. Наверно, вы не читали полностью статью :smile: Под кодом написано следущее:

      «Давайте разберем код. Строка под номером 2 отвечает за переадресацию на указанную вами страницу через 3 секунды. Время вы можете изменить, заменив число в «content=’3;» на свое. В 9 строке укажите ваш E-mail адрес, на который будут приходить письма. Строки 14 и 18 измените на свое усмотрение или оставьте как есть.»

      Возможно, просто не заметили. Выделил в этом месте E-mail жирным, чтоб видно было :smile:

      Также при вставке формы на страницу нужно указать путь созданного mail.php (wp-content/themes/Ваша Тема/mail.php), что я также указал под кодом.

      «Подкорректируйте в 1 строке путь к файлу mail.php. Редактируйте под себя названия, высоту, ширину, расположение полей. Для этого замените или добавьте стили в «style=»width:31%; Ваш стиль;»».»

      Думаю, о стилях вопрос тоже отпал :smile:

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

      Вопрос со спамом я не решал, мне и в голову не приходило, что в обратную связь будут спамить :twisted: Кстати, не 1 спам письма еще небыло.

      Надеюсь, дал полный ответ :smile:

      • Почти полный. Спамить могут все что угодно, на то и он и спам. А вот о стилями не стыковочка. А если я хочу стили отдельно задать, например, мерцание придать полям или еще как-нибудь выпендриться. В теле кода писать не удобно, так что лучше дать идентификаторы. Или «заворачивать» каждое поле ввода в отдельный div-контейнер?

        • Конечно, при желании эту форму обратной связи можно усовершенствовать, назначить для нее различные стили CSS оформления, вы можете сделать это и в теле, но у меня белый фон и я не стал заморачиваться. :smile:

  2. Сережа, этим твои советом я тоже воспользовалос. Уже проверила — все работает. Только вот страница, созданная мною для вставки формы отображается только если читать запись или в архиве. На главной её нет. Может я чего не так вставила?

    • Обычно для обратной связи создается отдельная страница, на которой размещается код из пункта «Вставка формы обратной связи». Вы не забыли закинуть страницу mail.php и указать путь к ней? (Также настроить пункты, которые я описывал в статье)

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

    • Да, вы правы, что-то не так. Ну и пусть отправляются, поверьте, никому и в голову не придёт отправлять незаполненную форму :smile:

  4. Спасибо за пример! Главное, что реализация формы обратной связи делается без плагина. Все доходчиво изложено в статье как раз для тех, кто не сильно разбирается в сайтостроении. Сделал все, как описано — работает! Правда как описано выше в комментарии, есть недочет как отправление пустой формы. Думаю, глобальной проблемой это не является, по крайней мере, для меня :smile:

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

    С уважением.

    • Здравствуйте, Екатерина. Пожалуйста! Рад, что вам пригодилось :smile:

      • :o Добавила Ваш блог в избранное, спасибо еще раз.

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

        • Еще раз пожалуйста :smile: Я иногда встречаю материалы, которые пишут на «отвяжись» и они не представляют никакой пользы. Не понимаю для чего их плодить :smile: Вам также спасибо за отзывы :twisted:

          • Сказать, честно, я блоги с подобными статьями тоже не понимаю. :twisted: .
            Кстати, стараюсь чистить браузеры после посещения подобных блогов, тогда их в выдаче если и выдает, то очень редко.

  6. Даже так :smile: Ну я с чисткой не заморачиваюсь, просто вижу знакомый адрес и не захожу туда :smile:

  7. Сергей,спасибо огромное за статью
    с вчерашнего дня бился,пытаясь собрать эту «Форму обратной связи»
    и ничего не получалось….
    сегодня наткнулся на твою инфу,и о чудо,все заработало
    Респект !!!:cool: .

  8. Хм…а ведь не все так гладко однако
    Сергей,подскажите как сделать что бы форма не разъезжалась при добавлении текста над ней
    ну и ,разжуйте «чайнику» как все таки по колдовать над стилями,что бы форма приняла подобие вашей ?

    • Здравствуйте, Вячеслав. Форме можно задать любые стили, и расположение полей. Сейчас, на блоге используются следующие стили (стили задаются в коде формы после слова style=»:

    • Вы можете изменить их, подстроив под свой сайт:

      Границы вокруг элемента:

      Отступ:

      Закругление границ:

      Выравнивание по левому краю:

      Высота поля:

      Позиция относительно исходного места:

      Ширина поля:

      Тени:

      Это стили полей ввода Имени, E-mail, Темы (для каждого отдельно). Что касательно самого поля, куда вводить сообщение, такие стили:

      Границы вокруг элемента:

      Закругление границ:

      Высота поля:

      Ширина поля (в процентах) :

      Тени:

  9. Сергей,спс
    буду разбираться.

  10. Сергей,никак не разберусь с последней (нижней колонкой)
    не получается применить стили.в пунктах
    8
    9
    10
    не мог бы ты выложить этот конец кода ?

  11. Вот эта часть у меня:

  12. Сделала по Вашему описанию, всё работает! СПАСИБО!

  13. При нажатии на отправить выдает
    Not Found
    The requested URL /mail.php was not found on this server.

    • Прочтите внимательно раздел в данной статье — «Создание формы обратной связи», там описано:

      Создайте файл с названием mail.php (Можете создать обычный текстовый документ и переименовать его, не забудьте вместо .txt указать формат .php) и поместите его в папку с вашей темой (Ваш.сайт/wp-content/themes/ваша тема/mail.php).

      Также вставьте код в mail.php, который указан под данными словами в статье.

      • Нам сайт делали и такой папки нет. Можно как то по другому сделать?

        • Разместите файл mail.php в любом удобном для вас месте, в разделе «Вставка формы обратной связи» измените путь к файлу mail.php на свой (1 строка)

  14. Здравствуйте, спасибо все получилось.
    Не против, если я перепечатаю статью у себя в блоге со ссылкой на оригинал статьи?

  15. у меня круче :twisted:
    ———————-
    «Ссылку я перенес в урл»

  16. Виктор

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">