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

Автор: | Рубрика: Блог на Wordpress | Обновлено: 2014-08-24 | Создано:
Просмотров: 3419
как сделать форму обратной связи

Привет всем! В этом посте я расскажу, как создать форму обратной связи wordpress блога без плагина. Наверное, те у кого есть страница обратной связи на сайте, использовали для ее создания плагин contact form 7. Долгое время и у меня стоял плагин 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 вот по этой инструкции http://inetsovety.ru/sozdaem-kontaktnuyu-formu-dlya-obratnoy-svyazi-na-bloge/

 

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 33 к статье "Форма обратной связи без плагина"
  • Александр 2016-07-27 в 15:01

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

    Ответить
  • SpongeBob 2016-01-17 в 00:25

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

    Ответить
  • Александр 2016-01-06 в 00:04

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

    Ответить
    • Ната Дегтярева 2016-04-27 в 20:38

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

      Ответить
  • Анна 2015-10-30 в 17:38

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

    Ответить
    • Виктория 2015-11-01 в 09:11

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

      Ответить
      • Анна 2015-11-01 в 20:53

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

        Ответить
  • Ольга 2015-09-18 в 21:56

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

    Ответить
  • Роман 2015-04-25 в 12:37

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

    Ответить
  • Виталий 2014-12-25 в 23:03

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

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

    Ответить
    • Виктория 2014-12-26 в 08:21

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

      Ответить
      • Виталий 2014-12-26 в 09:39

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

        Ответить
  • Александр 2014-10-31 в 09:51

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

    Ответить
    • Сергей Грицюк 2014-12-26 в 15:04

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

      Ответить
      • Руслан 2015-11-18 в 08:36

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

        Ответить
  • Рашида 2014-10-25 в 21:02

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

    Ответить
    • Сергей Грицюк 2014-12-27 в 08:54

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

      Ответить
  • Александр 2014-09-12 в 22:24

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

    Ответить
    • Сергей Грицюк 2014-12-26 в 15:06

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

      Ответить
  • seomodern 2014-08-30 в 15:53

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

    Ответить
    • Юрий Йосифович 2014-09-13 в 19:42

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

      Ответить
      • Рашида 2014-10-25 в 21:04

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

        Ответить
        • Сергей Грицюк 2014-12-26 в 15:10

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

          Ответить
      • Сергей Грицюк 2014-12-26 в 15:09

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

        Ответить
  • Александр 2014-08-25 в 21:49

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

    Ответить
    • seomodern 2014-08-31 в 19:37

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

      Ответить
  • maryna chygai 2014-08-25 в 16:25

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

    Ответить
    • Виктория 2014-08-26 в 13:18

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

      Ответить
    • seomodern 2014-08-31 в 19:39

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

      Ответить
  • Светлана 2014-08-25 в 15:07

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

    Ответить
    • seomodern 2014-08-30 в 15:54

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

      Ответить
      • Юрий Йосифович 2014-09-14 в 13:20

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

        Ответить
        • Александр 2014-09-30 в 20:49

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

          Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!