Урок 22. Форма обратной связи: плагин Contact Form 7

Последнее изменение поста: Декабрь 16, 2016

Форма обратной связи: плагин Contact Form 7Здравствуйте. Сегодня создадим на блоге форму обратной связи.  Для этого мы установим плагин Contact Form 7. Форма обратной связи нужная для того, чтобы посетители Вашего блога всегда могли с Вами связаться. Можно конечно создать новую страницу и написать на ней свой e-mail, ICQ, Skype, Телефон и т. д., но форма обратной связи никак не помешает. Этот плагин пользуется у блоггеров  популярностью, поэтому и я рекомендую Вам его установить. Для настройки этого плагина достаточно базовых знаний администрирования.

 Форма обратной связи: плагин Contact Form 7

  1. Скачайте   плагин Contact Form 7 по этой ссылке: http://wordpress.org/plugins/contact-form-7/, установите и активируйте.
  2. Создайте новую страницу.
  3. В Панели Администратора, перейдите «Контакты (CF7)». Вы перейдете в настройки этого плагина.
  4. Скопируйте там код в буфер обмена, как показано на скриншоте.
    Форма обратной связи: плагин Contact Form 7

    Форма обратной связи: плагин Contact Form 7

  5. Откройте страницу, которую Вы недавно создали.
  6. Перейдите в HTML-режим:Форма обратной связи: плагин Contact Form 7
  7. Вставьте этот код из буфера обмена в окно редактора текста, нажав «Ctrl» + «V»
    Форма обратной связи: плагин Contact Form 7

    Форма обратной связи: плагин Contact Form 7

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

Вы можете создать свою форму обратной связи в настройках Contact Form 7 или подкорректировать готовую. Это можно сделать в следующих настройках:

Форма обратной связи: плагин Contact Form 7

Форма обратной связи: плагин Contact Form 7

В поле, под №1 можно удалять лишние поля, которые Вам не нужны в форме, а в поле под №2 можно генерировать новые и добавлять в форму.

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

Скачайте плагин Really Simple CAPTCHA http://downloads.wordpress.org/plugin/really-simple-captcha.1.4.zip и установите.

Перейдите «Контакты (CF7)», в левой колонке Панели Администратора. В настройках формы, кликните «Сгенерировать тэг».

В контекстном меню надо выбрать «CAPTCHA». Названия полей, которые отмечены желтым, Вы всегда можете корректировать.

Форма обратной связи: плагин Contact Form 7

Форма обратной связи: плагин Contact Form 7

У Вас появится окно, как показано на скриншоте ниже:

Форма обратной связи: плагин Contact Form 7

Кликните по скриншоту мышкой, чтобы посмотреть его в полном размере.

В поле «size (необязательно)» установите размер поля для ввода капчи. У меня он равен десяти, Вы можете установить другое значение. Скопируйте коды в левую часть формы, как показано на скриншоте.

Нажмите «Сохранить», в верхней части страницы справа:

Форма обратной связи: плагин Contact Form 7

Перейдите на главную страницу блога и посмотрите Вашу страницу контактов. У меня форма выглядит как на скриншоте ниже, у Вас должна быть такая же.Форма обратной связи: плагин Contact Form 7

Теперь Вы можете проверить, как Ваша форма работает. Заполните все поля в форме, введите правильно капчу и нажмите «Отправить».

В следующем уроке рассмотрим, что такое семантическое ядро.
Жду Ваших комментариев. Всего Вам доброго.

_________________________
К Уроку 23. Семантическое ядро. Что такое семантическое ядро?

Получайте свежие статьи на свою почту

Форма подписки dvpress.ru
Поделиться статьей с друзьями


47 Comments

  1. Здравствуйте Вмктор. Поставила форму обратной связи ,но что то не так сделала , не получается капча.Сгенерировать тег у меня нет слово CAPTCNA .Почему ? все делала как у вас написано?

    Валентина
  2. Здравствуйте, Валентина. Вам в первую очередь нужно убедится, что плагин Really Simple CAPTCHA установлен и активирован. Обязательно проверьте.

    admin
    • Здравствуйте!
      Не знаете ли Вы,как сделать капчу как на Яндексе?

      Сталин И. В.
      • Приветствую! Для чего нужна капча? При отправке комментария, или для чего-то другого?

        admin
  3. Этот плагин у меня есть и настроен так , как рекомендуете Вы. С капчей. А следующая тема особо интересная для меня.

    Тамара
  4. Здравствуйте Виктор! Мне действительно очень нравиться ваш блог. Вы молодец, очень рад. Мы учимся и спасибо есть у кого. И ещё у меня вопрос. Всё сделал так же, но почему-то не отправляются сообщения. Заранее благодарен. 🙁

    Владимир
    • Владимир, здравствуйте! Владимир, меня Юра зовут, а не Виктор :). А чтобы приходили письма на Вашу почту, нужно в общих настройках указать адрес Вашего почтового ящика: «Параметры» -> «Общие», и в графе «Адрес e-mail» введите адрес Вашей почты.

      admin
  5. Здравствуйте Виктор!

    Почитал ваш урок и внедрил, спасибо. Вопрос возник такой: почему-то нет рамок в форме и фона в полях — что-то ещё нужно делать?

    Андрей
    • Здравствуйте, Андрей. Меня Юра зовут, а не Виктор. Этот плагин не создает рамок и фон в полях.

      admin
  6. Хорошо Юрий, уточню вопрос: цвет поля для заполнения у вас на скриншотах имеют салатовый цвет и обрамление — это свойство «border; 1px solid #BBBBBB» может называться — а в плагине этого нет, я правильно понял? Если так то жаль, этого явно не хватает =)

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

      admin
  7. Я все сделал как в уроке 22, но сообщение не отправляется, выдает: «Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта».
    Уже неделю бьюсь с этой проблемой и не могу ее устранить, что делать незнаю(

    Александр
    • Может мне попытаться настроить Вам этот плагин?

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

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

          admin
  8. Хорошо! Завтра тогда спишемся:)

    Александр
  9. Юрий, скорее всего ваша помощь в этой проблеме не понадобится:) мне все стало ясно, недавно из службы поддержки хостинг-провайдера я получил ответ следующего содержания: «На тестовом периоде Вашего аккаунта запрещена отправка почтовых сообщение скриптами. Contact Form7 по сути является скриптом. В связи с этим и выдается ошибка при отправке писем».
    Я завтра уберу тестовый режим хостинга) думаю после все наладится, и как все получится обязательно отпишусь, думаю многим это знать будет полезно так как не у меня одного подобная проблема возникает при создании сайта.

    Александр
    • Да, Александр, скорее всего из-за этого и не работает плагин. Напишите, когда перейдете на нормальный хостинг, будет работать плагин или нет. Если нет, то помогу в настройке.

      admin
  10. Ура! Юрий, все верно, ваш урок правильный, сделал все как выше описано и ВУАЛЯ! Почта стала отправляться, спасибо Юрий за урок, единственное хочу добавить для тех кто с толкнется с ошибкой отправки сообщения через contact form 7, форма работает только при наличии оплаченного и рабочего хостинга, если ваш хостинг имеет статус тестового(2 недели например) то почтовый сервер отвечать не будет и поэтому будет ошибка отправки сообщения в contact form 7.

    Александр
    • Спасибо, Александр, за комментарий. Думаю, что кому-то это будет интересно знать.

      admin
      • Уверен, что многим пригодится эта информация, я 2 дня инет юзал и ни где не нашел ответа: «Почему не отправляется почта через обратную связь contact form 7» и выдает ошибку, ни гугл ни яндекс ответа не дали, было потрачено куча времени, а причина оказалась наипростейшей) мне до сих пор смешно, поэтому считаю, что большинство тех кто только начинают создавать сайт на wordpress и только начинаетт тестировать хостинг обязательно воспользуются этой информацией, так как про эту мелочь ни на одном блоге про уроки wordpress не написано, поверьте на слово) сайтов 700 пролистал про уроки wordpress, но ни где нет ответа.

        Александр
        • Александр, все верно! Я и сам не знал об этом. Такой информации я так же нигде не читал. Я сам на тестовом хостинге побыл один день и перешел на платный, потому что мне сразу не понравился тестовый хостинг.

          admin
        • У меня хостинг проплаченый на год вперед, хостер тайм веб, контакт форм не работает выдает ошибку которую вы успешно победили.

          В чем еще могут быть загвоздки?

          stos
  11. Скажите почему не всегда приходят письма, а если приходят некоторые попадаю в спам, почту создавал доменную на гугле.

    Олег
    • Почему письма не приходят, я не знаю. Я вообще первый раз слышу, чтобы на gmail не приходили письма. Если не хотите, чтобы определенные письма попадали в спам, настройте для них фильтр. Письма, которые уже попали в спам, нужно открыть и щелкнуть «Не спам», после этого они не будут попадать в спам.

      admin
      • Я уже не знаю что думать, ставлю в настройках Contact Form 7 почту от майл.ру все в порядке письма приходят один за другим,вроде все правильно настроил на хостинге МХ для почты и все равно этот баг (, и даже когда ставлю в плагине почту майл.ру, а на самом почтовику пересылку на гугл, тоже письма не приходят (, в общем мне наверное поделано 😀 🙁

        Олег
        • Даже не знаю, что посоветовать. Почта gmail мне нравится, и никогда глюков не замечал. Зато на маил.ру сплошные глюки 🙂

          admin
          • Во во, абсолютно с Вами согласен =)

            Олег
  12. Скажите, как вставить Really Simple CAPTCHA в статистическую страницу (страницу созданную отдельно).
    Хотелось бы узнать html-код, который необходимо вставить.

    Плагин в админке активирован.

    Виктор
    • Виктор, я не знаю, как вставить на отдельную страницу код. Возможно, что этот плагин в этом случае не поможет.

      admin
  13. Здравствуйте являюсь давно читателем вашего блога. Прошу помощи, прочитал у вас о настройке плагина на WP contact form 7 , скажите а как сделать чтобы информация по которой переходил пользователь ( в моем случае он сначала выбирает даты в календаре) а потом вводит данные в контактную форму, как сделать чтобы из строки браузера данные тоже отсылались ко мне на мейл вместе с введенной формой?

    Сергей
    • Сергей, доброго времени суток! Рад, что Вы являетесь читателем моего блога! Был на Вашем сайте, чтобы было легче разобраться в Вашем вопросе. Могу точно сказать, что этот плагин не может сделать того, что Вам нужно. Я даже больше скажу! Нужно вносить изменения в плагин, чтобы сделать то, что Вы хотите. Не понимаю, для чего могут понадобиться данные из адресной строки?! Человек, когда заходит на страницу с формой, то в адресной строке введен адрес страницы с самой формой. Вот этот адрес: хttp://www.chloehotel.ru/reservation/

      admin
  14. Спасибо большое за статью! Доходчиво и полезно!
    Кликнул по баннерам в знак благодарности 😉

    Оскар
  15. прочитала все комментарии и так не получила ответа, почему барахлит плагин этот. Хостинг не тестовый, уже второй год на нем и сбоев не было, а вот вместо текста письма приходит только вот это: [textarea-240].

    Вера
    • Если у Вас никак не работает этот плагин, то могу посоветовать установить copiny. Я не знаю, почему этот плагин у Вас не работает.

      admin
      • А это сервер или плагин?

        Вера
        • Это сервис. У Вас будет такая же штучка, как у меня слева экрана. Это лучше чем плагин в раз 10000

          admin
  16. спасибо

    Вера
  17. Большое спасибо за подробные объяснения. Форма контактов установилась и работает.

    Валентина
  18. Здравствуйте! Помогите пожалуйста! Форму установила, все работает, но кнопку отправить нужно наживать раз 5-7 до того как он выдаст сообщение Спасибо, отправлено. В чем дело не пойму! Пиьма приходят, но потом по 5-7 писем от каждого человека! Заранее спасибо!

    Таня
  19. У меня не отправляет сообщения на некоторые почтовики а на некоторые отправляет, как исправить. razlukanet.ru

    Михаил
    • Михаил, статья была написана 2012 году, в январе. Плагин обновлялся уже не раз, и последнее обновление было 26 января. Зайдите на сайт разработчика, в раздел FAQ. Может там найдете ответ на свой вопрос. Но это англоязычный сайт. Вот ссылка: http://contactform7.com/faq/

      Yuriy
  20. Настроил форму на сайте www.home-engineer.ru , но не знаю как прописать в css доп. настройки.

    Zawer
  21. Юрий, добрый день! Вы очень доходчиво все описали. У меня получилось поставить хотя бы саму форму. Пока без капчи.
    Только я не поняла, куда конкретно надо поставить E-mail, чтобы на почту приходили заявки с contact.form7 ? Или я что-то неправильно увидела — «параметры, общие» — это где смотреть?
    Прошу для самых отсталых дать подробное описание.
    Заранее благодарю, Галина

    Галина
    • Здравствуйте, Галина! Действительно, я этого как раз и не написал. Перейдите ПОЛЬЗОВАТЕЛИ > ВАШ ПРОФИЛЬ
      . Найдите там КОНТАКТЫ и впишите: адрес сайта, почту. Сообщения будут приходить на почту, которую укажите в этих настройках. Просто эти настройки надо делать изначально, как только создали блог.

      Yuriy
  22. Здравствуйте! Установил плагин Contact Form и РеКапчу (от Гугла) но вот последняя выходит за рамки сайтбара. Не подскажите — как отредактировать размер блока с капчей?

    Владимир
  23. Здравствуйте. У меня сообщения отправляются, но на почту мне (она указана в настройках) не приходят. В чем может быть дело?

    Елена