Форма контактов – установка и дизайн

Здравствуйте, друзья! В последнее время участились жалобы посетителей о невозможности отправить сообщение из моего блога через форму контактов. На блоге с первого дня его существования был установлен плагин 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). Кстати, плагин контактной формы можно деактивировать.

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

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

В распакованном архиве есть файл: 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 и две картинки. Проделайте все вышеописанные действия. Если вы уже установили первую и вторую части, то просто поменяйте их на новые (свежие).

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

if(isset($_POST[‘submitted’])) .contact_theme input[type=»text»] < /*background: #f7f7f7 url(images/url.png) no-repeat 3% 50%;*/ >

.contact_textarea textarea

.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

.contact_submit .contact_submit:hover

.contact_submit:active

.contact_message

.contact_comments label

.errors, .errorss