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

   ⁄ 

 Обновлено 17 Апр 2017

  ⁄   

⁄  10

Здравствуйте. Сегодня хотел бы вам рассказать об одном полезном моменте в сайтостроении – о создании контактной формы.

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

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

Мой опыт

Со своей формой обратной связи я немного повозился. Казалось бы, что там трудного – подключил плагин Contact Form 7, поменял внешний вид, цвета — 5 минут и готово. Но добавления плагинов снижает скорость загрузки сайта, делая ненужные запросы к базе данных. Итого, пользователь может не дождаться, пока загрузится сайт и уйдет. Оно нам нада? Уверен, что у вас и так есть около десятка плагинов, если не больше, так зачем добавлять еще, если можно все сделать самому, уделив лишь некоторое время.

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

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

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

  1. Создание формы разметкой HTML.
  2. Подключение скрипта.
  3. Подключение файла-обработчика.
  4. Оформление CSS.

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

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

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

// Читайте внимательно комментарии в коде, все важное я буду подписывать 

Здесь мы создали простую форму, атрибут required значит, что поле является обязательным для заполнения (можете удалить, где считаете нужным или так оставить). Идем дальше.

2. Подключение скрипта

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

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

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

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

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

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

4. Стили формы

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

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

  1. Johny:

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

    url: «/mail.php»,

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

    1. Li4ik:

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

      1. Johny:

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

        1. Li4ik:

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

          Для второго варианта измените строку 16 файла mail.php на такую:
          $mes = «Имя: «.$name.»\n\nТема: » .$sub.»\n\nСсылка: «.$_SERVER[‘HTTP_REFERER’].»\n
          \nСообщение: «.$message.»\n\n»;.

      2. Johny:

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

        1. Li4ik:

          Не за что 🙂

  2. Ярослав:

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

    1. Li4ik:

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

  3. Андрей:

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

    1. Li4ik:

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

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

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