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

  Юрий  | 

  Обновл. 31 Июл 2019  | 

 17589

 ǀ   12 

Сегодня поговорим о создании контактной формы.

Зачем она нужна?

Улучшает юзабилити сайта, делает вас ближе к читателям и + к карме. Создать форму можно как на отдельной странице, так и добавить к уже существующей.

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


Весь процесс делится на:

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

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

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

   оформление css.

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

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

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

(читайте внимательно комментарии к коду, все важное я подписываю)

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

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


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

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

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

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

(обратите внимание на строчку №15 — там нужно указать свой электронный адрес)

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

Шаг №4: Оформление css


Последний штрих! Оформим нашу форму, добавив немножко стилей в 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 (4 оценок, среднее: 5,00 из 5)
Загрузка...

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

  1. Аватар Влад:

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

  2. Аватар Алина:

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

  3. Аватар Андрей:

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

    1. Юрий Юрий:

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

  4. Аватар Ярослав:

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

    1. Юрий Юрий:

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

  5. Аватар 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 не будет опубликован. Обязательные поля помечены *