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

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

Реферальные банеры

Привет всем! В этом посте я расскажу, как создать форму обратной связи wordpress блога без плагина. Наверное, те у кого есть страница обратной связи на сайте, использовали для ее создания плагин Contact Form 7. Долгое время и у меня стоял этот плагин. С недавних пор, я решила заняться ускорением своего блога, заменяю какие возможно плагины кодами. Прошлый мой пост был посвящен созданию карты сайта без плагина. Кто не читал статью, прочтите. Принцип создания новой страницы-шаблона, который описан там, я буду сегодня использовать. Но так детально уже не буду разжевывать.

Форма обратной связи для wordpress сайта при помощи скрипта

Как и в случае, когда мы создавали шаблон страницы карты сайта, так и сейчас мы будем редактировать файл page.php. Заходите на хостинг и добирайтесь к папке с темой, последовательно открывая следующие папки public_html/wp-content/themes/

Скопированный на компьютер файл page.php переименуйте, оставив расширение файла php. Например, файл можно назвать formacontact.php. В этот файл мы добавим скрипт формы обратной связи.

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

<?php  /*  Template Name: PageContact  */  ?>     <?php get_header();?>     <?php      if(isset($_POST['submitted'])) {      if(trim($_POST['contact_name']) === '') {          $nameError = 'Вы не ввели имя';          $hasError = true;      } else {          $name = trim($_POST['contact_name']);      }         if(trim($_POST['contact_email']) === '')  {          $emailError = 'Введите e-mail';          $hasError = true;      } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['contact_email']))) {          $emailError = 'Не корректный адрес.';          $hasError = true;      } else {          $email = trim($_POST['contact_email']);      }         if(trim($_POST['contact_theme']) === '') {          $themeError = 'Вы не ввели тему сообщения';          $hasError = true;      } else {          $theme = trim($_POST['contact_theme']);      }         if(trim($_POST['contact_comments']) === '') {          $commentError = 'Не введен текст сообщения';          $hasError = true;      } else {          if(function_exists('stripslashes')) {              $comments = stripslashes(trim($_POST['contact_comments']));          } else {              $comments = trim($_POST['contact_comments']);          }      }         if(!isset($hasError)) {          $emailTo = get_option('tz_email');          if (!isset($emailTo) || ($emailTo == '') ){              $emailTo = get_option('admin_email');          }          $subject = 'Сообщение с сайта от '.$name;          $body = "Имя: $name \n\nE-mail: $email \n\nТема: $theme \n\nСообщение: $comments";          $headers = 'From: '.$name.' <'.$email.'>' . "\r\n" . 'Reply-To: ' . $email;          wp_mail($emailTo, $subject, $body, $headers);          $emailSent = true;      }     } ?>

Чтобы на странице отобразилась сама форма, после функции <?php the_content (); ?> добавим еще один код:

	<div id="form_contact">                             <?php if(isset($emailSent) && $emailSent == true) { ?>                                   <div class="contact_message">Ваше сообщение успешно отправлено!</div>                             <?php } else { ?>                                   <?php if(isset($hasError) || isset($captchaError)) { ?>                                      <?php } ?>                                      <form action="<?php the_permalink(); ?>" id="contactForm" method="post">                                            <div class="contact_right_colum">                                              <div class="contact_name">                                                   <input type="text" placeholder="Ваше имя" name="contact_name" id="contact_name" value="<?php if(isset($_POST['contact_name'])) echo $_POST['contact_name'];?>" class="required requiredField" />                                                   <?php if($nameError != '') { ?>                                                         <div class="errors"><?=$nameError;?></div>                                                   <?php } ?>                                              </div>                                              <div class="contact_email">                                                   <input type="text" placeholder="Ваш email" name="contact_email" id="contact_email" value="<?php if(isset($_POST['contact_email']))  echo $_POST['contact_email'];?>" class="required requiredField email" />                                                   <?php if($emailError != '') { ?>                                                         <div class="errors"><?=$emailError;?></div>                                                   <?php } ?>                                              </div>                                              <div class="contact_theme">                                                   <input type="text" placeholder="Тема" name="contact_theme" id="contact_theme" value="<?php if(isset($_POST['contact_theme'])) echo $_POST['contact_theme'];?>" class="required requiredField" />                                                   <?php if($themeError != '') { ?>                                                         <div class="errors"><?=$themeError;?></div>                                                   <?php } ?>                                              </div>                                         </div>                                            <div class="contact_left_colum">                                              <div class="contact_textarea">                                                   <textarea placeholder="Введите текст сообщения" name="contact_comments" id="commentsText" rows="12" cols="56" class="required requiredField"><?php if(isset($_POST['contact_comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['contact_comments']); } else { echo $_POST['contact_comments']; } } ?></textarea>                                                   <?php if($commentError != '') { ?>                                                         <div class="errors"><?=$commentError;?></div>                                                   <?php } ?>                                              </div>                                                 <button type="contsubmit" class="contact_submit">Отправить сообщение</button>                                              <input type="hidden" name="submitted" id="submitted" value="true" />                                         </div>                                   </form>                             <?php } ?>                        </div>

На этом создание формы обратной связи в файле formacontact.php завершено. Сохраняйте в нем изменения и копируйте на хостинг в папку с темой.

Чтобы форма обратной связи без плагина в wordpress корректно отображалась, нужно добавить в файл стилей оформление полей данной формы. Откройте файл style.css и в самый конец вставьте следующий код:

/*-------------------------------- контактная форма --------------------------------*/     #form_contact {          position: relative;          width: 100%;  	margin-top: 20px;  }     .contact_right_colum {          float: right;          width: 145px;  }     .contact_left_colum {          float: left;  	width: -moz-calc(100% - 155px);  	width: -webkit-calc(100% - 155px);  	width: calc(100% - 155px);  }     .contact_name, .contact_email, .contact_theme, .contact_textarea { position: relative; }     .contact_name input[type="text"],  .contact_email input[type="text"],  .contact_theme input[type="text"] {          position: relative;  	width: 120px;          height: 30px;          line-height: 30px;  	padding: 0 0 0 31px;          margin: 0 0 20px;          background: #F7F8FA url(images/name.png) no-repeat 3px 3px;          border: none;          border-radius: 5px;          box-shadow: inset 0.5px 0.5px 3px #B7BDCB;          font: normal 13px Arial, sans-serif;          color: #151515;  }  .contact_email input[type="text"] { background: #F7F8FA url(images/email.png) no-repeat 3px 2px; }  .contact_theme input[type="text"] { background: #F7F8FA url(images/tema.png) no-repeat 2px 3px; }     .contact_textarea textarea {          position: relative;  	width: -moz-calc(100% - 20px);  	width: -webkit-calc(100% - 20px);  	width: calc(100% - 20px);          height: 116px;          padding: 7px 10px;  	margin: 0 0 18px;          background: #F7F8FA;          border: none;          border-radius: 5px;          box-shadow: inset 0.5px 0.5px 3px #B7BDCB;  	font: normal 13px Arial, sans-serif;          color: #151515;  }     .contact_name input[type="text"]:focus, .contact_email input[type="text"]:focus, .contact_theme input[type="text"]:focus, .contact_textarea textarea:focus, .contact_submit:focus {          outline: none;          box-shadow: 0 0 5px #B7BDCB;  }     .contact_submit {  	float: center;  	width: 220px;  	padding-top: 7px;  	padding-bottom: 4px;  	margin: 0 0 15px;  	background: #ADF1AD;          border: none;          border-radius: 4px;  	text-align: center;  	font-size: 16px;  	color: #4C4C4C;  	transition: background-color ease-in-out .15s;  	cursor: pointer;  }  .contact_submit:hover { background: #7AF07A; text-transform: uppercase; width: 240px;}     .contact_message {          width: 100%;          height: 22px;          padding: 70px 0;          text-align: center;          font: normal 22px Arial, sans-serif;          color: #1F1F1F;  }     .errors, .errorss {  	position: absolute;  	bottom: 2px;  	left: 10px;  	font: normal 12px Arial, sans-serif;          color: red;  	z-index: 999;  }

На свой вкус Вы можете изменить цвет кнопки отправить. Найдите стили contact_submit, строчка background: #ADF1AD; отвечает за цвет фона. Ниже свойство contact_submit:hover задает фон при наведении на кнопку.

Чуть не забыла. Можно добавить иконки к полям имя, имейл и тема. Скачайте вот этот архив. Все три картинки необходимо загрузить в images, которая находится в папке темы.

Последний шаг - создаем страницу контактов или редактируем текущую. В правой колонке найдите виджет "Атрибуты" и выберите в нем название только что созданной страницы контактов.

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

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

Плагин Contact Form 7

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

Сначала скачайте и установите плагин контактной формы Contact Form 7. Установить его можно и непосредственно из панели администратора, найдя плагин по названию.

После успешной установки и активации, перейдем к настройкам контактной формы Contact Form 7.

Находим в админке WordPress страницу настроек плагина Contact Form 7. Нажмите на кнопку "Добавить новую":

Плагин Contact Form 7 для WordPress

По умолчанию Вы увидите следующий вариант контактной формы:

Создание контактной формы с помощью Contact Form 7

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

Защита от спама для Contact Form 7 WordPress

Здесь можно ничего не менять. Нужно добавить к будущей контактной форме, код капчи.

Порядок установки плагина Contact Form 7

После добавления кодов капчи, получится следующее:

Плагин контактной формы для WordPress

Осталось вставить код вызова контактной формы на нужной странице. Скопируйте его в буфер обмена. Создайте новую страницу и назовите ее, например, "Контакты". Добавьте в текстовое поле, скопированный ранее код. Опубликуйте контактную страницу и проверьте, что получилось. Можете сами себе отправить тестовое письмо.

Как сделать страницу контактов на сайте

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

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

Понравилась статья? Поделиться с друзьями:
Как заработать деньги в интернете
Комментарии: 40
  1. Александр

    Здравствуйте!
    Контактная форма без плагина очень хорошая и удобная, единственный минус (не отправляет информация на почту) как это сделать подскажите пожалуйста ???
    Еще один вопрос: как вывести контактную форму в определенные блоки ??? (например: в сайт бар)

    1. Нина

      На почту и у меня не поступают таким способом сообщения(((

    2. Люся

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

  2. SpongeBob

    Здравствуйте! А Вы не могли бы подсказать, можно ли аналогичным способом вставить форму связи на сайт на основе Джумлы? И в чем отличия?

  3. Александр

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

    1. Ната Дегтярева

      Да, без знаний кода, видимо, никак. Было бы здорово услышать или увидеть)) рекомендации, по каким обучающим материалам лучше начинать заниматься этими вопросами новичку.

      1. Нина

        Чтобы освоить коды, тоже нужны знания и время.

      2. Люся

        Чтобы что-то освоить нужны не знания, которых изначально ни у кого нет. Иначе зачем осваивать, если уже знаешь?

  4. Анна

    Виктория добрый день. Разъясните пожалуйста один вопрос. Я на вашем блоге вижу много статей про использование кода вместо плагинов. Я понимаю, что плагины нагружают блог, вследствие чего он может долго грузиться. Вот здесь у меня недопонимание — а разве плагин это не набор кодов. Чем они друг от друга отличаются. И какое количество плагинов является оптимальным для блога. Спасибо за ответ.

    1. Виктория (автор)

      Добрый день, Анна!
      Все верно, плагин тоже состоит из кодов. Но разница в том, что плагин создается, как универсальный код для любых сайтов. А код можно написать под индивидуальные потребности конкретного сайта. Есть плагины, которые практически не нагружают блог, но есть те, которые содержат в себе дополнительные, но не всеми используемые функции. И вот в этих случаях можно заменить такой плагин кодом. Пример, форма обратной связи. Если рассматривать реализацию плагином, нужно ставить 2 плагина (один выводит форму, второй — капчу). В случае с кодом, защита от спама уже встроена в код. Вывод функции кодом дает более широкие возможности для оформления блока, у плагина обычно стандартный и убогий вариант оформления.

      1. Анна

        Спасибо, Виктория.Буду учиться ставить коды по мере надобности вместо плагинов, хотя меня это пока пугает и поэтому ставлю на блог только максимально необходимые плагины.

      2. Нина

        Придет время, когда от плагинов придется избавляться, вот тогда и вспомним о кодах.

  5. Ольга

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

    1. Нина

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

  6. Роман

    Спасибо! Очень помогли! Все супер! Изменил немного CSS файл под свой сайт, получилось очень красиво!

  7. Виталий

    Все отлично — все работает, но вот вопрос возник:

    а как эту форму вывести на определенной части страницы?

    1. Виктория (автор)

      Нужно со стилями экспериментировать, чтобы сместить форму в нужное место на странице.

      1. Виталий

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

  8. Александр

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

    1. Сергей Грицюк

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

      1. Руслан

        При смене шаблона существует 100 % ная вероятность, что придется заново прописывать все коды, которые вы вставляли сами

      2. Нина

        И это так. Я сама в этом убедилась(((

  9. Рашида

    Интересное решение создания формы обратной связи без плагинов. Я как раз использую плагин contakt form и плагин для защиты от спама — было бы неплохо избавиться от двух плагинов сразу. Если получится напишу.

    1. Сергей Грицюк

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

  10. Александр

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

    1. Сергей Грицюк

      На твоем блоге есть соответствующая статья и сам скрипт?

  11. seomodern

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

    1. Юрий Йосифович

      Сергей, неужели действительно плагины на столько уменьшают скорость загрузки сайта?
      Просто я не вижу особой разницы между плагином и обычным php кодом — плагин это тот же код, только оформленный по правилам.

      1. Рашида

        Юрий, такое мнение я тоже слышала. На самом деле не все плагины нагружают блог. Можно даже проверить специальным плагином, какие грузят, а какие нет.

      2. Сергей Грицюк

        Рашида, этот плагин называется P3 (Plugin Performance Profiler). Читал о нем. Не пользовался пока — не было необходимости.

      3. Сергей Грицюк

        Те плагины, которыми я пользуюсь, не заметил, чтоб нагружали. Согласен с тобой, что плагин — тот же код. Если действительно попадется какой-то плагин, который заметно будет грузить блог, то буду искать ему замену. А использовать код как альтернативу плагину буду разве что в образовательных целях :)

  12. Александр

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

    1. seomodern

      Виктория не стоит на месте — совершенствует свои знания и навыки

  13. maryna chygai

    pomogite zdelat sait………..ny ne polychaetsa y mena…..gotova zaplatit…

    1. Виктория (автор)

      Здравствуйте! Напишите мне через форму обратной связи.

    2. seomodern

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

  14. Светлана

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

    1. seomodern

      Бывает, когда читаешь, то кажется все просто, а когда пытаешься реализовать, то что-то выходит не так: что-то не отображается или отображается коряво.

      1. Юрий Йосифович

        К этому, Сергей, нужно быть готовому (в смысле что будет отображаться коряво) и уже тогда применить свои навыки работы с каскадными таблицами стилей (CSS), именно по этому лучше всего, прежде чем идти и в коде что-то делать — нужно изучить базовые основы html+css.

      2. Александр

        Да Юрий ты прав, я тоже когда уникализировал шаблон первый раз показалось что все очень просто, но на деле появилось куча проблем. Все таки я с этим разобрался и только благодаря этому стал изучать html и css. если бы не это наверное никогда бы не изучал. Но не каждый хочет в чем то разбираться. кому то проще заплатить деньги

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности. Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.