Привет всем! В этом посте я расскажу, как создать форму обратной связи 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.
Находим в админке WordPress страницу настроек плагина Contact Form 7. Нажмите на кнопку "Добавить новую":
По умолчанию Вы увидите следующий вариант контактной формы:
Но здесь не хватает поля для капчи, чтобы письма Вам не посылал спам-робот. Добавим ее вручную. Для этого выберите из выпадающего списка - капчу.
Здесь можно ничего не менять. Нужно добавить к будущей контактной форме, код капчи.
После добавления кодов капчи, получится следующее:
Осталось вставить код вызова контактной формы на нужной странице. Скопируйте его в буфер обмена. Создайте новую страницу и назовите ее, например, "Контакты". Добавьте в текстовое поле, скопированный ранее код. Опубликуйте контактную страницу и проверьте, что получилось. Можете сами себе отправить тестовое письмо.
Вот так легко и просто создать форму обратной связи на своем блоге WordPress. В этом Вам поможет плагин для создания контактной формы Contact Form 7.
Если, у Вас что-то не получилось, посмотрите этот видеоролик, в котором рассказывается, как создать контактную форму на блоге.
Здравствуйте!
Контактная форма без плагина очень хорошая и удобная, единственный минус (не отправляет информация на почту) как это сделать подскажите пожалуйста ???
Еще один вопрос: как вывести контактную форму в определенные блоки ??? (например: в сайт бар)
На почту и у меня не поступают таким способом сообщения(((
Александр, попробуйте вывести контактную форму в сайт бар с помощью виджета.
Здравствуйте! А Вы не могли бы подсказать, можно ли аналогичным способом вставить форму связи на сайт на основе Джумлы? И в чем отличия?
Форма обратной связи не только нужна, она просто необходима. А код получился классный у вас, Виктория, хотя у меня стоит другой на блоге. Вообще считаю что если решил делать блог или сайт, то нужно все равно осваивать понемногу код. Для большого функционала своего проекта не будешь же ставить все плагины которые есть. Достаточно немного подучить код, правильно и внимательно прочитать статью куда и что вставить и все. После таких манипуляций со временем пропадет страх перед редактированием кода. Но это мое личное мнение.
Да, без знаний кода, видимо, никак. Было бы здорово услышать или увидеть)) рекомендации, по каким обучающим материалам лучше начинать заниматься этими вопросами новичку.
Чтобы освоить коды, тоже нужны знания и время.
Чтобы что-то освоить нужны не знания, которых изначально ни у кого нет. Иначе зачем осваивать, если уже знаешь?
Виктория добрый день. Разъясните пожалуйста один вопрос. Я на вашем блоге вижу много статей про использование кода вместо плагинов. Я понимаю, что плагины нагружают блог, вследствие чего он может долго грузиться. Вот здесь у меня недопонимание — а разве плагин это не набор кодов. Чем они друг от друга отличаются. И какое количество плагинов является оптимальным для блога. Спасибо за ответ.
Добрый день, Анна!
Все верно, плагин тоже состоит из кодов. Но разница в том, что плагин создается, как универсальный код для любых сайтов. А код можно написать под индивидуальные потребности конкретного сайта. Есть плагины, которые практически не нагружают блог, но есть те, которые содержат в себе дополнительные, но не всеми используемые функции. И вот в этих случаях можно заменить такой плагин кодом. Пример, форма обратной связи. Если рассматривать реализацию плагином, нужно ставить 2 плагина (один выводит форму, второй — капчу). В случае с кодом, защита от спама уже встроена в код. Вывод функции кодом дает более широкие возможности для оформления блока, у плагина обычно стандартный и убогий вариант оформления.
Спасибо, Виктория.Буду учиться ставить коды по мере надобности вместо плагинов, хотя меня это пока пугает и поэтому ставлю на блог только максимально необходимые плагины.
Придет время, когда от плагинов придется избавляться, вот тогда и вспомним о кодах.
Форма для обратной связи просто необходима, если у читателя есть вопросы к автору блога.
Но не все знают что можно обращаться к автору блога через обратную связь и часто пишут вопросы в комментарии.
Спасибо! Очень помогли! Все супер! Изменил немного CSS файл под свой сайт, получилось очень красиво!
Все отлично — все работает, но вот вопрос возник:
а как эту форму вывести на определенной части страницы?
Нужно со стилями экспериментировать, чтобы сместить форму в нужное место на странице.
Да пробовал уже -форма то смещается, но перекрывает текст за собой. Ваша форма, в отличие от всех остальных, что были мною найдены в сети, работает корректно. Поэтому не хочу ее удалять)) Только вот одна проблема с ее положением осталась..(
Многие предпочитают делать форму связи с помощью плагина, кроме этого ставят еще кучу плагинов например для создания капчи и прочее. Думаю это все лишнее, можно сделать кодом или скриптом например на аяксе, спам так же не пропускает и плагинов будет меньше на блоге
Если есть готовый код, то так даже лучше будет. Только есть вероятность, что при смене шаблона код заново нужно будет вставлять
При смене шаблона существует 100 % ная вероятность, что придется заново прописывать все коды, которые вы вставляли сами
И это так. Я сама в этом убедилась(((
Интересное решение создания формы обратной связи без плагинов. Я как раз использую плагин contakt form и плагин для защиты от спама — было бы неплохо избавиться от двух плагинов сразу. Если получится напишу.
Эти 2 плагина не замедляют загрузку сайта. Код тоже разный можно вставить и скорость загрузки так же может отличаться на какие-то тысячные миллисекунды. Особого смысла не вижу заменять эти плагины вставкой кода. Если в перспективе будет меняться шаблон сайта, то скорее всего эти коды заново нужно будет вставлять. Статью по этому поводу есть смысл написать для получения дополнительного трафика.
Интересное решение формы обратной связи. Но я себе сделал немного другим способом. Сделал с помощью кода который работает на аяксе, очень интересная и функциональная связь. можно сразу сделать отправление писем на разные майлы. Например реклама на один а услуги на другой и так далее
На твоем блоге есть соответствующая статья и сам скрипт?
Если действительно есть проблемы со скоростью загрузки блога или есть желание начать разбираться в PHP на практике, то есть смысл заменить плагины кодами. В любом случае статья полезная.
Сергей, неужели действительно плагины на столько уменьшают скорость загрузки сайта?
Просто я не вижу особой разницы между плагином и обычным php кодом — плагин это тот же код, только оформленный по правилам.
Юрий, такое мнение я тоже слышала. На самом деле не все плагины нагружают блог. Можно даже проверить специальным плагином, какие грузят, а какие нет.
Рашида, этот плагин называется P3 (Plugin Performance Profiler). Читал о нем. Не пользовался пока — не было необходимости.
Те плагины, которыми я пользуюсь, не заметил, чтоб нагружали. Согласен с тобой, что плагин — тот же код. Если действительно попадется какой-то плагин, который заметно будет грузить блог, то буду искать ему замену. А использовать код как альтернативу плагину буду разве что в образовательных целях
Виктория отличная информация! Вы прям взялись серьезно! Вот уже можно отказаться как минимум от 2 плагинов. Очень классно. Буду чаще заходить на блог и читать информацию!
Виктория не стоит на месте — совершенствует свои знания и навыки
pomogite zdelat sait………..ny ne polychaetsa y mena…..gotova zaplatit…
Здравствуйте! Напишите мне через форму обратной связи.
Интересно, почему не получается? Если особо не заморачиваться с шаблоном, то сайт за полчаса можно сделать с первичными необходимыми настройками.
Спасибо, очень все понятно и доступно. Так просто, когда читаешь, думаю, что и на практике не совсем сложно. Главное сделать копию редактируемого документа.
Бывает, когда читаешь, то кажется все просто, а когда пытаешься реализовать, то что-то выходит не так: что-то не отображается или отображается коряво.
К этому, Сергей, нужно быть готовому (в смысле что будет отображаться коряво) и уже тогда применить свои навыки работы с каскадными таблицами стилей (CSS), именно по этому лучше всего, прежде чем идти и в коде что-то делать — нужно изучить базовые основы html+css.
Да Юрий ты прав, я тоже когда уникализировал шаблон первый раз показалось что все очень просто, но на деле появилось куча проблем. Все таки я с этим разобрался и только благодаря этому стал изучать html и css. если бы не это наверное никогда бы не изучал. Но не каждый хочет в чем то разбираться. кому то проще заплатить деньги