Контактная форма на WordPress без плагинов

  Юрий  | 

  Обновл. 15 Май 2021  | 

 27470

 ǀ   14 

Сегодня поговорим о создании контактной формы на WordPress без плагинов. Контактная форма улучшает юзабилити сайта и позволяет вашим читателям связаться с вами или задать вам вопрос.

Создание контактной формы

Весь процесс создания контактной формы делится на:

   создание html-формы;

   создание и подключение js-скрипта;

   создание и подключение файла-обработчика mail.php;

   оформление стилей.

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

Шаг №1: Создание html-формы

Выбираете любое место в файле (в page.php или любом другом файле), где хотите разместить форму (у меня после строки <?php the_content(); ?>) и вставляете следующий код:

Здесь мы создали простую форму. Атрибут required означает, что поле является обязательным для заполнения.

Примечание: Читайте внимательно комментарии к коду, всё важное я подписываю.

Шаг №2: Создание и подключение js-скрипта

Чтобы сообщение отправлялось без перезагрузки страницы, используется технология AJAX (сокр. от «Asynchronous Javascript and XML»). Для её применения нужно подключить библиотеку Jquery. В файле header.php перед закрывающим тегом </head> добавляем следующую строку:

Дальше нужно вставить сам скрипт. Сразу после строки <?php get_header(); ?> или после тега </head> в том файле, в котором создавали форму, вставляем следующий код:

Шаг №3: Создание и подключение файла-обработчика mail.php

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

Примечание: Обратите внимание на строку №14 — там нужно указать свой электронный адрес.

Сохраняем как mail.php и закидываем в корневую папку шаблона (в WordPress это: wp-content > themes > название_вашего_шаблона) к файлу с формой.

Шаг №4: Оформление стилей

Последний штрих! Сделаем нашу форму красивой и лаконичной, добавив немного стилей в style.css:

Класс .ok отвечает за оформление блока с текстом "Сообщение отправлено".

Теперь наша форма полностью готова к использованию. Оформление можете изменить под себя.

Создание отдельной страницы для контактной формы


Этот пункт для тех, кто хочет создать форму на отдельной странице! Чтобы создать отдельную страницу для контактной формы вам нужно зайти в админку WordPress > Внешний вид > Редактор. Справа ищите «Шаблон страницы» (page.php). Открываете этот файл, копируете содержимое. Создаете на своем компьютере новый текстовый файл и вставляете всё скопированное туда. В самом верху добавляете следующие строки:

Сохраняете этот файл под именем contact.php, а дальше всё, как было указано выше в этой статье (вставляете html-форму, подключаете js-скрипт, создаете файл mail.php, задаете стили).

Эти два файла (contact.php и mail.php) нужно будет закинуть в корневую папку вашего шаблона (wp-content > themes > название_вашего_шаблона). После этого заходите в админку WordPress > Страницы > Добавить новую. И в атрибутах страницы выбираете шаблон «Contact», дальше «Опубликовать», и всё!

Оценить статью:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (8 оценок, среднее: 4,50 из 5)
Загрузка...

Комментариев: 14

  1. serkin:

    Здравствуйте.
    Не понятно как работает mail.php
    Вчера сделал как у вас написано, подогнал под свои нужды, но письмо на почту не пришло. Сегодня вечером проверяю — есть письмо.
    Отредактировал mail.php и снова нет письма. Не получается понять в чём причина…

    1. Дарья:

      Я вот, например, открыла для себя, что OpenServer складывает это в специальную папочку, а не рассылает)))) Такие пироги))))

  2. Влад:

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

  3. Алина:

    Здравствуйте, подскажите пожалуйста как можно подключить RTL? Нужна форма на иврите

  4. Андрей:

    Подскажите, как подключить каптчу в эту форму?

    1. Юрий:

      Удобнее было бы подключить reCAPTCHA от Google (в Интернете есть инструкции по установке). Если у вас WordPress, то можно плагином воспользоваться.

  5. Ярослав:

    Сообщения попадают в Спам, как это исправить ?

    1. Юрий:

      Уже от того, что Вы ввели в полях (тема, сообщение, e-mail) зависит то, в какую папку это сообщение в почтовом сервисе попадет. Когда я, тестируя, ввожу в контактную форму всякую белиберду, то у меня в Gmail сообщения также попадают в папку «Спам», в остальных же случаях всё нормально.

  6. Johny:

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

    url: «/mail.php»,

    как он найдет путь при такой записи, это же js-файл?
    Лично у меня он ругается на такой путь.
    Приходится менять на статический

    1. Юрий:

      Совершенно верно, я указал динамический путь для тех, кто использует WordPress. Если использовать вне WP — нужно просто поменять в форме HTML и в js-скрипте путь на статический. Указал динамический, так как статью затачивал именно под WP 🙂

      1. Johny:

        Понял, спасибо! А можно ли как-то в этом mail.php вытащить данные из поста или страницы? К примеру, чтоб он вместе с сообщением слал данные, к примеру, с какого поста была отправлена форма

        1. Юрий:

          Можно 🙂 Есть два варианта:
          1. Добавить в форму скрытое поле с адресом страницы.
          2. Обрабатывать referrer — $_SERVER[‘HTTP_REFERER’].

          Для второго варианта измените строку 16 файла mail.php на такую:

      2. Johny:

        Отлично! Спасибо за ответы, я как раз сам докумекал вариант со скрытым полем сделать)

        1. Юрий:

          Не за что 🙂

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

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