Простая и качественная форма обратной связи для WordPress сайта без плагина

Здравствуйте, друзья.

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

В этом же материале у нас будет форма обратной связи для WordPress без плагина. Конечно поля для отправки файла не будет. Но во всем остальном она не уступает предыдущей контактной форме.

Реализацию данного способа вы можете посмотреть на странице "Написать мне". Вам такая форма, наверняка, понравится. Сразу скажу, что все эти реализации придумал не я. Но, если имеется возможность помочь людям и также сделать материалы по данному вопросу, то я просто обязан это сделать. К чему мы собственно и приступаем.

Кстати, реализация формы обратной связи в этой статье идентична с реализацией карты сайта для WordPress без плагина. Процесс аналогичен, только коды разные. Приступаем!

Создаем шаблон страницы

Форма, создаваемая данным способом будет иметь следующий вид.

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

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

Я назову его formaOS.php.

В этот файл нужно скопировать 2 части кода. Первая будет выводить название шаблона страницы и проверять ошибки при заполнении формы. А второй будет выводить саму форму на странице.

Вот первая часть.

А вот вторая часть.

Чтобы было легче понять суть процесса вставки этих кодов я покажу вам исходный код своего файла page.php. Даю сам код и его изображение.

Первую часть мы должны вставить в самое начале файла, заменяя при этом строчку <?php get_header();?>, так как она в 1й части кода уже присутствует и ее дублирование приведет к ошибкам.

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

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

В моем файле, код, который выводит контент обернут в общий блок <article id="main_content">тут код</article>. Именно перед закрывающим тегом </article> я и копирую вторую часть кода.

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

Красная рамка - первая часть кода, синяя - вторая.

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

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

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

к содержанию ↑

Оформление формы

Даю вам свои стили. Можете их использовать, но рекомендую изменить под себя, чтобы хоть чем-то отличаться.

Данные стили размещаем в файле style.css шаблона оформления.

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

Если папка с картинками у вас называется по другому, а не images, то нужно будет изменить название этой папки и в стилях. Это нужно сделать в 32, 39 и 40 строчках.

Теперь можно создавать саму страницу на сайте, выбрав при этом шаблон с нужным названием в блоке "Атрибуты страницы".

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

Можете ее сразу и протестировать. Письма должны приходить на почту, которая указана в общих настройках сайта в админ-панели WordPress.

Я проверил и сообщение успешно доставлено. Также и ошибки успешно проверяет.

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

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

Не забывайте про комментарии, если остались какие-то вопросы.

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

На этом я заканчиваю. До встречи в новых материалах и комментариях!

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 31
  • Вообще отличный контент даешь, ну молодец просто. Много интересного нашел у тебя на сайте. И эта статья тоже. Спасибо тебе - видно, что качество у тебя на высоте. Так держать!!!

    • Спасибо) Буду продолжать в том же духе!

  • А как сделать капчу в эту форму? Или антиспамщика - плагина будет достаточно? Не будет ли засорятся почта?

    • Почта засоряться не будет, так как защита против спама уже в коде формы имеется. Никаких плагинов против спама в комментариях тоже не нужно.

  • Доброго дня! Никак не получается вставить контактную форму, помогите пожалуйста! Возможно, не туда вставляю части кода.
    Вот код моей страницы page.php:

    <section id="container" class="">

    • Здравствуйте. Код в комментариях обрезается, поэтому отправьте мне его на почту через страницу "написать мне"

      • У меня как-то очень сложно устроена структура моей темы, контент в одной папке, функции в другой отдельной папке... Помучалась и решила поставить пока плагин))

        • Правилньо, что решили установить плагин. Нечего заморачиваться над тем, что можно сделать в 1-2 клика, хотя и без плагина форма ОС делается в 1- клика независимо от расположения функций в шаблоне)

  • Добрый день. Возможна ли работа данного кода при условии что мне нужно будет сделать форму отбратной связи не на отдельной странице а в right sidebar? некоторые способы я уже попробывал - после отправки сообщения он пишет или то, что файл не найден - или просто открывает созданный php файл(пустая страница)

    • Добрый день. Попробовать можно, но тогда файл создавать новый ни к чему. Придется копировать все коды в сайдбар. Создаете виджет текст и туда вставляете сначала 1ю часть кода, а затем втору. В первой части возможно потребуется убрать в самом начале пару строк:

      < ?php /* Template Name: Форма обратной связи */?>

      < ?php get_header();?>

      Экспериментируйте. Думаю, что работать будет.

  • Спасибо!

  • что делать у меня нет такого файла page.php ??

    • Может быть с точно таким названием файла и нет, но файл шаблона страницы имеется 100%. Просто он может называться немного по-другому, например, content-page.php

  • если вам Константин не сложно по скайпу мы можем созвониться и вы покажите ? Я все вроде перерыл ... bogdan-142 мой скайп

    • Скайпом для решения таких вопросов я не пользуюсь. Может скинуть свой шаблон на почту (info@kostyakhmelev.ru), как появится время, я гляну.

  • Константин, спасибо.
    Первая форма, которая успешно встала.
    Остальные все время что-то не так делал.

  • Спасибо Константин! Все сделал, как вы описали, все получилось!
    Единственное, хотел поменять немного стиль оформления, но не получилось, оставил как у вас.
    И главное проверил, все работает, еще раз спасибо. ))

  • Благодарен за форму, очень интересная и простая. Но есть один вопрос. Если я хочу чтобы она отправляла на другой почтовый ящик, как это сделать?

    • Во второй части кода в 50 строке попробуйте заменить get_option('admin_email') на 'тут емайл'

  • Константин, спасибо за прекрасное решение для организации формы обратной связи на блоге без плагина! С таким подробным объяснением установил за считанные минуты, а вот с "допиливанием" стилей под себя, пришлось повозиться. =)
    Перепробовал много всего, от плагина contact form7 отказался из-за высокой нагрузки
    Еще раз спасибо!

  • Добрый день!
    Сделала все в точности как Вы указали.
    Вроде все верно.
    Пишет, что сообщение успешно отправлено, но оно на указанную почту не приходит (( В чем может быть причина?
    Или хоть в каком примерно месте кода искать?
    Спасибо большое!

    • Здравствуйте. Все должно приходить. Проверьте, тот ли адрес стоит в настройках сайта и нет ли в нем ошибки.

  • День добрый, не подскажите, какая часть кода в css отвечает за расположение формы на странице? Можно ли её целиком опустить по ниже чтобы над ней вставить google map и текст?

    • Добрый. CSS тут не при чем. Расположение формы зависит от того, куда вы ее разместили в коде страницы. Просто выше кода вывода формы вставьте нужную вам информацию.

      • Это получается вторую часть кода нужно переместить?

  • Здравствуйте, Константин!
    Спасибо за вразумительную статью, уже воспользовалась, поставила на двух сайтах, все отлично работает.
    Вопрос - можно ли сделать так, чтобы при заполнении и отправке формы человека перебрасывало на другую страницу? Или это безумная идея :)? Не понимаю ничего в php, может где-то здесь в коде что-то можно поменять:

    Ваше сообщение успешно отправлено!

    • Здравствуйте. Такой сделать можно, но я, к сожалению, не подскажу как. Тут нужно чуток вмешаться в код. Если хотите, можете обратиться к программисту по части WordPress на фриланс и вам за совсем небольшую пату такое сделают.

  • Привет. Сделал все как ты и говорил. Технически, все заработало, но вот когда подгонял под себя дизайн возникли затруднения.
    Подскажи, как подвинуть поля для ввода имени, электронки в темы немного вправо.
    У меня получается что или они двигаются вправо, но еъезжают в кучу по вертикали, или же наоборот расплываются. Я знаю, что задачка пустяковая, но я пол дня с ней просидел и не сделал.
    Спасибо.

  • Привет. С полями разобрался, так что отбой. по предыдущему комментарию.

  • здравствуйте. эта форма ос отлично отрабатывала на старой версии php-5.3. при переходе на php-7.0 перестает отправлять письма. может знает кто-то, как её адаптировать под последнюю версию php? не хочется возвращаться к 5.3, поскольку на 7.0 скорость загрузки сайта в разы возрастает.

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

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