Главная » Управление сайтом » Управление Wordpress » Простейшая форма обратной связи

Простейшая форма обратной связи

как сделать форму обратной связи

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

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



Даже если вы пользуетесь визуальным редактором, после добавления новой статьи (или при редактировании уже имеющейся) перейдите в редактор html и вставьте код после текста, или (если разбираетесь в коде), в любое подходящее место.

Раньше сайт «Реазар» «жил» на движке Joomla, на WordPress я перенесла его сравнительно недавно. И, пока я им серьезно не занималась, и посетителей практически не было, сделала себе вот такую простую форму обратной связи в боковой колонке:

обратная связь с фото

Кликнув на надпись «Напишите мне», пользователь попадает в свой основной почтовый ящик, на страницу отправки письма, где в строке «Кому» уже стоит мой адрес. Остается только написать свой вопрос и отправить.

Всего-то нужно было – загрузить на сайт свою фотографию и прописать небольшой код.

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

Конечно, если предполагается, что ваши пользователи будут часто к вам обращаться, то нужно придумать что-то посерьезнее. И тут оптимальным вариантом может быть специальный плагин. Вбейте в любую поисковую систему запрос «плагин обратной связи для WordPress» и найдете много информации на интересующую тему. Только прежде, чем устанавливать, почитайте отзывы. Не все плагины с аналогичным функционалом одинаково хороши.

Кстати, нынешняя форма обратной связи «Реазара» (в верхнем горизонтальном меню) тоже реализована без помощи плагина, но этот способ для многих из вас может оказаться слишком сложным. Идею я взяла здесь: Форма обратной связи без плагинов. Спасибо Денису, автору «Блога Свободного Вебмастера».

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

Для начала нужно подобрать и подогнать по ширине свою фотографию (не обязательно, или можно взять любую подходящую картинку, например, с изображением конверта). Как правило, ширина боковой колонки на WordPress не более 180 пикселей. Однако, в зависимости от темы оформления, возможны варианты. Я использовала фото шириной 120 пикселей. Высота не важна.

Теперь нужно загрузить фото на сайт. Для этого перейдите из консоли Медиафайлы – Добавить новый и на открывшейся странице сделать все то же самое, как при добавлении изображения в статью (пост), только в конце нажмите на кнопку «Сохранить все изменения».

После этого нужно зайти во Внешний вид – Виджеты, взять из средней части виджет «Текст», перетащить в нужную колонку справа, и открыть его настройки (подробнее о работе с виджетами читайте здесь).

Назовите его «Обратная связь», «Напишите мне», или так, как хотите. А в поле для текста нужно прописать код, который я вам дам. Лучше сделать в нем свои изменения, а потом просто скопировать в текстовое поле виджета. Мой выглядит так:

код формы обратной связи

Те данные, которые я отметила желтым маркером, вам нужно заменить на свои, то есть, подставить адрес своей фотографии (1) и адрес своей электронной почты (2).

Код можно скопировать из окна ниже. Но не торопитесь!



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



А если вы, вдруг, не хотите использовать свое изображение, а оставить только текст, то код будет совсем простым:



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

упращенная форма обратной связи

Также, вы можете заменить в коде фразы «Появились вопросы?» и «Напишите мне» на свои, которые сочтете наиболее подходящими.

Изменения делайте очень внимательно. Смотрите, чтобы не было пробелов между кавычками и ссылкой на картинку, и между двоеточием, адресом электронной почты и закрывающим знаком «>».

Чтобы посмотреть адрес фотографии, зайдите в Медиафайлы – Библиотека, найдите в списке изображений свое фото, и под ним нажмите «изменить».

Менять, конечно, ничего не надо. Внизу этой формы есть ссылка (адрес) на ваше изображение.

ссылка на фото

Скопируйте ее и подставьте в код.

Измененный код скопируйте и вставьте в поле виджета «Текст». Не забудьте сохранить.

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

Удачи!






Управление Wordpress
Понравился материал? Поделитесь с друзьями в социальных сетях, нажимайте на кнопочки!

2 комментария

  • Алиса

    Здравствуйте. Создаю сайт. Ваши материалы очень помогают спасибо большое! Но вот столкнулась с такой проблемой- делаю игровой сайт и хочу чтоб он был с регистрацией аккаунтов на своем сайте, чтоб когда человек заходил были его данные и все данные что он <> может у вас есть какой нибудь материал по этому? или какой нибудь html код? Помогите пожалуйста. Спасибо.

    Ответить
    • Светлана Канаева

      Здравствуйте, Алиса. Если Вам просто нужно, чтобы пользователи могли регистрироваться, достаточно из админки зайти Параметры — Общие и напротив пункта «Членство» поставить галочку в поле «Любой может зарегистрироваться».
      Если же Вы хотите, чтобы разделы сайта (игры) были доступны только зарегистрированным пользователям, для этого есть специальные плагины. Например, WishList Member. Возможно, есть и другие решения. Введите в строку поиска «как закрыть раздел сайта wordpress», думаю, найдете много самой разнообразной информации.

      Ответить

Ваш email не будет опубликован. Обязательные поля отмечены *
Имя *
Email *
Сайт
Ваш комментарий
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: