7

Как оформить страницу “Контакты” на сайте.

Здравствуйте уважаемые читатели моего блога. В предыдущей статье я описывал, что делать если Contact Form 7 не отправляет письма. Надеюсь мои подсказки помогли справится с этой неприятностью.

Пока писал статью, постоянно ловил себя на мысли, что внешний вид моей страницы “Контакты”, смотрится как-то убого и не привлекательно. Решил поискать решение как можно это исправить и красиво оформить страницу контактов на сайте .

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

Как оформить страницу контакты на сайте.

Для начала я сделал скриншот моей старой страницы “Контакты”, чтобы вы могли наглядно сравнить , что было и что получилось в итоге.

старая-страница-контакты

Согласитесь “…не комильфо”! Или как говорил классик “Скучно девочки, скучно”! Итак поехали.

1. Идем в панель управления сайтом « Contact Form 7» (1) => «Формы» (2).

формы-контактов

2. Выбираем форму созданную для своего сайта и переходим в настройку «Изменить» .

меняем-форму-контактов

3. Меняем код формы который у вас есть.

меняем-стандартный-код-формы-контактов

А вот и сам код который надо вставить вместо стандартного.

4. Как всегда не забываем нажать кнопку «Сохранить изменения».

5. Далее в панели управления сайтом, идем «Внешний вид» (1) => «Редактор» (2) => «style.css» (3).

код-стилей-контактов

6. В самом конце файла «style.css»  добавляем следующий код для настройки стилей оформления вашей формы обратной связи.

7. Опять не забываем нажать «Обновить файл» и проверяем что получилось в итоге.

В коде я оставил комментарии, где и что можно поменять для изменения оформления формы.

Примечание: Возможно у вас, что-то может пойти не так. Это зависит от вашей темы установленной на сайт, в которой изначально  установлены стили для формы контактов.  

Для применения нужного вам стиля, припишите ему правило приоритета  !important.

Например, для задания  своего цвета фона блока формы можно написать background:#888!important;

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

новая-форма-контактов

По моему, вполне комильфо! На этом пожалуй все. Всего доброго, до встречи!

Перейти на главную

комментариев 7
  1. admin
    13.01.2018 в 15:44

    Пожалуйста, применяйте.

  2. Олеся
    13.01.2018 в 01:32

    Спасибо большое, за статью, очень помогли!!

  3. Бандитов
    02.01.2018 в 18:15

    Нужная информация.Можно было бы добавить как без пароля заходить в ВК.Я то знаю но не решусь выложить такое…..

  4. admin
    24.07.2017 в 17:58

    Пожалуйста, Евгений. Будут вопросы пишите. Удачи в блогинге!

  5. Евгений
    23.07.2017 в 23:46

    Очень классная инфа! Спасибо. Попробую тоже усовершенствовать

  6. admin
    17.07.2017 в 13:45

    Не стоит благодарности! Будут вопросы пишите. Всего доброго!

  7. Наталья
    17.07.2017 в 01:23

    Классно! Я то же так хочу. Пойду разбираться. Спасибо за информацию

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