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

   | 

   | 

 Обновлено 11 Сен 2018  | 

 4593

 ǀ   10 

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

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

Улучшает юзабилити сайта, делает вас ближе к читателям и + к карме.

Создать форму можно как на отдельной странице, так и добавить к уже существующей. У меня эта форма размещена на странице «Автор». Можете попробовать в действии, но сильно не спамьте 🙂

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

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

  1. Создание формы в HTML.
  2. Подключение скрипта JS.
  3. Подключение файла-обработчика PHP.
  4. Оформление 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, подключаете скрипт, создаете файл mail.php, задаете стили).

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

Если остались какие-то вопросы – пишите в комментарии.

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

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (2 оценок, среднее: 5,00 из 5)
Загрузка...
Подписаться на обновления:

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

  1. Андрей:

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

    1. Li4ik Li4ik:

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

  2. Ярослав:

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

    1. Li4ik Li4ik:

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

  3. Johny:

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

    url: «/mail.php»,

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

    1. Li4ik Li4ik:

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

      1. Johny:

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

        1. Li4ik Li4ik:

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

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

      2. Johny:

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

        1. Li4ik Li4ik:

          Не за что 🙂

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

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

ПОДПИСЫВАЙТЕСЬ

НА КАНАЛ RAVESLI В TELEGRAM

@ravesli

ПОДПИСАТЬСЯ БЕСПЛАТНО