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

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

Возможно тема блога не соответствует каким-то параметрам, возможно последние обновления самого WordPress как-то повлияли на работу плагина, не знаю. Вообщем, полез в инет, нашёл несколько интересных предложений, перепробовал их и остановился на одном, как мне показалось, самом надёжном (в плане его работоспособности) и, более или менее, простом в установке.

Этот вариант описывается на многих блогах, но источником послужила статья А. Борисова в его блоге, вот ссылка на статью: http://isif-life.ru/dlya-sajta/legkaya-i-krasivaya-forma-obratnoj-svyazi-dlya-wordpress-bez-plaginov.html Как бы там ни было, начал я городить форму контактов на свой тестовый блог, попутно делая снимки для этого поста. Что из этого получилось, я сейчас подробно с картинками вам выложу.

Для начала нужно скачать архив с кодами на свой компьютер в заранее созданную для этого папку. Распакуйте архив. В нём находятся файлы: contactform.css, Код.txt и три иконки с расширением png. 

Чтобы не путаться в дальнейшем, можно создать ещё одну папку, в ней будут содержаться вновь созданные файлы, коды стилей и изображения. В общем, не мне решать, где на вашем компьютере будут храниться ваши файлы и папки. Всё как обычно, создаём папку, в моём случае: Форма контактов. 

Затем, запустите программу FileZilla и соединитесь со своим сайтом. На снимке в левом секторе показаны действия при открытии созданной папки.

Папку нашли (стрелка 1), открываем тему блога (стрелка 2).

Затем, кликните правой клавишей мыши по файлу: page.php (стрелка 1) и, в открывшемся контекстном меню, выберите: Скачать (стрелка 2). В левом секторе видно, что файл page.php удачно скопирован в папку (стрелка 3).

Из скачанного архива откройте файл: Код.txt. Выделите первую часть кода.

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

Откройте скачанный ранее файл: page.php, желательно с помощью редактора Notepad++

В открывшемся редакторе сразу установите кодировку: Кодировать в UTF-8 (без BOM). (стрелки 1 и 2)

  1. После чего, выделите верхнюю строчку: <?php get_header ( ); ?> и нажмите комбинацию клавиш: Ctrl + V  или,
  2. выделите строчку, кликните по ней правой клавишей мыши и в меню выберите: Вставить.
  3. Можно удалить строчку, а на её место вставить скопированный код. Вообщем, кому как удобнее.

Затем, скопируйте вторую часть кода, найдите в файле строчку содержащую подобные значения: <?php the_content (…); ?>. Прямо под ней установите курсор (стрелка 1) и вставьте вторую часть кода, аналогично первому.

После удачных вставок обоих частей кода, файл нужно сохранить и присвоить ему новое имя. Нажмите кнопку: Файл (стрелка 1) и выберите: Сохранить как… (стрелка 2).

Сохранить файл можно в ту же папку : Форма контактов, задав ему имя: contact.php (стрелка 1) и указав расширение PHP в поле: Тип файла. После чего, нажать кнопку: Сохранить (стрелка 2).

Снова откройте FileZilla и обновите окно программы. Выделите вновь созданный файл: contact.php (стрелка 1), кликните по нему правой клавишей и в меню выберите: Закачать на сервер (стрелка 2). Как видно, файл удачно закачан в папку темы (стрелка 3).

Зайдите в админ-панель вашего блога. Скорей всего, у многих уже создана страница обратной связи (Контакты, Все записи и т.п.). У кого такой страницы нет, нажмите кнопку или наведите курсор на: Страницы в левой колонке и в выпадающем меню выберите: Добавить новую.

Присвойте имя вновь создающейся странице (стрелка 1), у кого страница уже создана, удалите из неё все теги касающиеся плагина контактной формы. Откройте раздел: Шаблон (стрелка 2) и в открывшемся списке шаблонов выберите: Contact (стрелка 3). После чего, нажмите кнопку: Опубликовать (стрелка 4). Кстати, плагин контактной формы можно деактивировать.

Перейдите на главную страницу сайта и откройте страницу: Контакты. Вот так малопривлекательно выглядит контактная форма без стилей, т.е., почти никакого дизайна. Эта форма уже работает, можете проверить.

Если не устали, поехали дальше.

Вставка CSS

В распакованном архиве есть файл: contactform.css – откройте его и скопируйте всё содержимое. После чего, откройте таблицу стилей в шаблоне/теме вашего блога и в самом конце вставьте скопированные стили контактной формы. Обновите/сохраните изменения и откройте страницу контактов в своём блоге. Должно получиться примерно так:

Если вас всё устраивает, осталось добавить картинки, имеющиеся в архиве. Запустите FileZilla и пройдите по пути: Ваш сайт/wp-content/themes/Ваша тема/images.

В левом окне найдите распакованный архив, выделите три иконки, кликните по ним правой клавишей мыши и в контекстном меню выберите: Закачать на сервер.

В итоге получится вот такая форма контактов:

Форма очень лёгкая, быстрая и, как обещают разработчики, защищена от спама. Но, её внешний вид (дизайн) меня не очень устраивал и я начал искать более интересные варианты оформления контактной формы. И нашёл, вот здесь: http://dbmast.ru/primer-verstki-kontaktnoj-formy-dlya-sajta-s-pomoshhyu-css3 .

Выглядит она вот так:

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

Меняем дизайн контактной формы

Если хотите такую форму как у меня на блоге, в момент написания статьи, скачайте архив с файлами и новыми картинками. В архиве 4 файла: Код-html.txt, contactform-css.txt и две картинки. Проделайте все вышеописанные действия. Если вы уже установили первую и вторую части, то просто поменяйте их на новые (свежие).

Первая часть кода NEW

Первая часть кода осталась почти неизменна.

?php
/*
Template Name: Contact
*/
?>

<?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;
}

} ?


В последнем секторе этой части вместо “Ваш Сайт” впишите название своего блога. Надпись: “Сообщение с “ВАШ САЙТ” от “ будет отображаться в сообщении в вашем почтовом ящике.

Затем, замените или вновь вставьте вторую часть обновлённого кода.

Вторая часть кода NEW

div id=»contact_form»>
<div class=»contactform»>
<fieldset><legend>Пишите письма!</legend></fieldset>
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class=»contact_message»>Ваше сообщение успешно отправлено!</div>
<img src=»http://ВАШ САЙТ/wp-content/themes/ВАША ТЕМА/images/yescontact.png» style=»position:absolute; top: 85px; right: 15%;»/>
<?php } else { ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>

<?php } ?>

<form action=»<?php the_permalink(); ?>» id=»contactForm» method=»post»>
<img src=»http://ВАШ САЙТ/wp-content/themes/ВАША ТЕМА/images/pishite.png» style=»position:absolute; top: 15px; left: 3%;»/>
<div class=»contact_left»>
<div class=»contact_name»>
<p>
<label for=»name»>Имя *</label>
<input type=»text» name=»contact_name» id=»contact_name» value=»<?php if(isset($_POST[‘contact_name’])) echo $_POST[‘contact_name’];?>» class=»required requiredField» />
</p>
<?php if($nameError != ») { ?>
<div class=»errors»><?=$nameError;?></div>
<?php } ?>
</div>
<div class=»contact_email»>
<p>
<label for=»email»>Email *</label>
<input type=»text» name=»contact_email» id=»contact_email» value=»<?php if(isset($_POST[‘contact_email’]))  echo $_POST[‘contact_email’];?>» class=»required requiredField email» />
</p>
<?php if($emailError != ») { ?>
<div class=»errors»><?=$emailError;?></div>
<?php } ?>
</div>
<div class=»contact_theme»>
<p>
<label for=»email»>Тема</label>
<input type=»text» name=»contact_theme» id=»contact_theme» value=»<?php if(isset($_POST[‘contact_theme’])) echo $_POST[‘contact_theme’];?>»» />
</p>
<?php if($themeError != ») { ?>
<div class=»errors»><?=$themeError;?></div>
<?php } ?>
</div>
</div>

<div class=»contact_right»>
<div class=»contact_textarea»>
<label for=»email»>Сообщение *</label>
<textarea 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>
</div>
<button type=»contsubmit» class=»contact_submit»>Отправить</button>
<input type=»hidden» name=»submitted» id=»submitted» value=»true» />
</div>
</form>
<?php } ?>
</div>


Картинки, находящиеся в архиве закачайте в папку images вашей темы (выше по тексту показано). В местах, где написано: “Ваш сайт”, “Ваша тема” – впишите свои данные.

Стили для обновлённой контакт – формы

Осталось дело за малым. Скопируйте содержимое файла contactform-css.txt и вставьте его в самый конец таблицы стилей вместо установленных ранее стилей формы контактов (если были установлены). 

/*——————————— Contact ———————————*/

#contact_form {
position: relative;
width: 100%;
margin-top: 20px;
}

.contact_left p {
margin: 0 0 10px;
}

.contact_name label {
border: none;
font-family: Georgia;
font-size: 12pt;
display:block;
color:#5B5B5B;
margin-bottom:1px;
}

.contact_email label {
border: none;
font-family: Georgia;
font-size: 12pt;
display:block;
color:#5B5B5B;
margin-bottom:1px;
}

.contact_theme label {
border: none;
font-family: Georgia;
font-size: 12pt;
display:block;
color:#5B5B5B;
/*margin-bottom:1px;*/
}

.contactform {
border: 1px solid #ded8dc;
float: left;
background: #FFFFFF;
background-image: radial-gradient(at center center, rgba(248,247,243,1) 50px, rgba(210,204,190,.7) 70%);
/* закругляем углы */
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
/* добавляем тени для блока*/
-webkit-box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
-moz-box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
margin: 0 auto;
overflow: hidden;
padding-top: 10px;
text-align: left;
/* устанавливаем необходимую ширину формы в зависимости от дизайна
** форма отлично растягивается */
width: 100%;
max-width: 100%;
height: auto;
}

.contactform legend {
border: 0px dotted #000;
font-family: Georgia;
font-size: 34px;
font-style: italic;
margin: 0 0 8px 80px;
text-shadow:#886C26 0 3px 2px;
}

.contactform fieldset {
/*background: transparent url(images/pishite.png) no-repeat;*/
background-position: 0% 100%;
border-bottom: 2px dotted #ccc5b5;
margin:0 90px 20px;
}

.contact_left {
float: left;
width: 131px;
margin: 0 0 0 8px;
padding: 0 0 0 8px;
display: inline-block;
}

.contact_right {
float: right;
/*width: -moz-calc(90% — 155px);
width: -webkit-calc(90% — 155px);
width: calc(90% — 155px);*/
width: 70%;
max-width: 70%;
height: auto;
padding: 0 10px 0 0;
}

.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;
height: 31px;
line-height: 31px;
padding-left: 5px;
margin: 0;
/*background: #f7f7f7 url(images/nameid.png) no-repeat 3% 50%;*/
background-position: relative;
border: 0px solid #ccc;
border-radius: 4px;
box-shadow: inset 1.5px 1.5px 5px #aaaaad;
font-family: Georgia;
font-size: 12pt;
color: #434343;
}
.contact_email input[type=»text»] { /*background: #f7f7f7 url(images/mailid.png) no-repeat 3% 50%;*/ }
.contact_theme input[type=»text»] { /*background: #f7f7f7 url(images/url.png) no-repeat 3% 50%;*/ }

.contact_textarea textarea {
position: relative;
width: -moz-calc(97% — 20px);
width: -webkit-calc(97% — 20px);
width: calc(97% — 20px);
height: 175px;
padding: 7px 10px;
margin: 0 0 18px;
background: #f7f7f7;
border: none;
border-radius: 4px;
box-shadow: inset 1.5px 1.5px 5px #aaaaad;
font: normal 13px Arial, sans-serif;
color: #434343;
}

.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 #aaaaad;
}

.contact_submit {
float: right;
width: 135px;
padding-top: 3px;
padding-bottom: 7px;
margin: 0 15px 15px 0;
background: #6ea077;
background-image: linear-gradient(to top, #70946e 0px, #82aa7f 79%);
border: 2px solid #ded8dc;
border-radius: 25px;
box-shadow: 0 0 10px rgba(50, 50, 50, 0.75);
font-family: Georgia;
text-transform: capitalize;
text-shadow: 0 1px 1px #e5e5e5;
text-align: center;
font-size: 16pt;
color: #62510B;
transition: background-color ease-in-out .15s;
cursor: pointer;
clear:both;
}
.contact_submit:hover {
background-image: linear-gradient(#3CBE5A, #21652C);
color: #E5E5E5;
outline: 0 none;
text-decoration: none;
text-shadow: 0 1px 1px #000;
}

.contact_submit:active {
background-image: linear-gradient(#3CBE5A, #21652C);
color: #E5E5E5;
outline: 0 none;
text-decoration: none;
text-shadow: 0 1px 1px #000;
box-shadow: 0 3px 3px #575555 inset;
}

.contact_message {
width: 100%;
height: 22px;
padding: 70px 0;
text-align: center;
text-shadow: 0 1px 1px #000;
font: italic 22px Georgia, sans-serif;
color: #309a35;
}

.contact_comments label {
border: none;
font-family: Georgia;
font-size: 12pt;
display:block;
color:#5B5B5B;
margin-bottom:1px;
}

.errors, .errorss {
position: absolute;
bottom: 2px;
left: 10px;
font: normal 10pt Georgia, sans-serif;
color: red;
z-index: 999;
}


В итоге должно получиться вот так:

 

А я прощаюсь с Вами. Что не понятно спрашивайте.

 

Удачи Вам!

Поделиться ссылкой: