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

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

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

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

Создание формы обратной связи

Сначала нужно зайти на хостинг и в папку wp-content — themes, выбрать установленную тему и создать в ней пустой файл с именем  mail.php.

Затем, в блоге зайти на вкладку  «Внешний вид» — «Редактор» и открыть созданный файл. В этот файл добавляете следующий код:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8" />
<meta http-equiv='refresh’ content='3; url=http://ваш сайт/’></meta>
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['sub'])) {$sub = $_POST['sub'];}
if (isset($_POST['body'])) {$body = $_POST['body'];}
 
$address = «ваш е-мейл«;
$mes = «Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body»;
$send = mail ($address,$sub,$mes,»Content-type:text/plain; charset = UTF-8\r\nFrom:$email»);
if ($send == ‘true’)
{
echo «Сообщение отправлено, теперь Вы можете вернуться обратно и продолжить чтение статей блога»;
}
else
{
echo «Сообщение не отправлено, проверьте правильность заполнения полей и попробуйте снова»;
}
?>

В этом коде  отмечено, что нужно изменить:
3 — обозначает через сколько секунд будет произведен возврат на главную страницу блога
http://ваш сайт/  – должен быть адрес вашего сайта
$address = «ваш е-мейл»; естественно, ваш емейл

Добавляем форму обратной связи

Обычно форму обратной связи располагают на странице контактов. Пишете небольшое обращение, переходите в формат HTML и добавляете следующий код:

<form style=»border: 2px solid #d20383; padding: 4px; background-color: #e8eaeb;» action=»/wp-content/themes/clear-line/mail.php» method=»post» name=»MyForm»><input style=»width: 31%;» onfocus=»if(this.value==this.defaultValue)this.value=»;» onblur=»if(this.value==»)this.value=this.defaultValue;» type=»text» name=»name» value=»Ваше имя» /></p>

<p><input style=»width: 31%;» onfocus=»if(this.value==this.defaultValue)this.value=»;» onblur=»if(this.value==»)this.value=this.defaultValue;» type=»text» name=»email» value=»Эл. почта» /></p>

<p><input style=»width: 31%;» onfocus=»if(this.value==this.defaultValue)this.value=»;» onblur=»if(this.value==»)this.value=this.defaultValue;» type=»text» name=»sub» value=»Тема» /></p>

<p><textarea style=»width: 98%;» onfocus=»if(this.value=='Текст сообщения‘){this.value=»};» onblur=»if(this.value==»){this.value='Текст сообщения‘}» name=»body» rows=»5" cols=»1">Текст сообщения</textarea></p>

<p><input type=»submit» value=»Отправить сообщение автору блога» /></p>

</form>

В этом коде можно подкорректировать цветовую гамму в соответствии с вашим шаблоном.

В части кода <form style=»border: 2px solid #d20383; padding: 4px; background-color: #e8eaeb;» можно изменить следующее:

border: 2px – толщина рамки
solid #d20383 – цвет рамки
background-color: #e8eaeb – цвет фона
А также, нужно будет изменить название темы (выделено красным). Вот такая форма обратной связи у меня получилась.

После добавления форму, остается только протестировать ее рабочее состояние.

Может быть, я что-то не так написала, с точки зрения основ HTML, но у меня получилась вот такая форма обратной связи. P.S. Теперь у меня коды правильно отображаются, но то, что раньше, когда кавычки изменялись.

Ваша Блогобабушка


Понравилась статья? Поделитесь с друзьями в соцсетях

Подпишитесь на обновления блога по email:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *


+ восемь = пятнадцать

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>