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

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

Форма обратной связи для сайта

ААААААААААА! Вот так вот я кричал ребята, когда искал в интернете различные статьи, в которых хотел найти информацию по теме создания формы обратной связи для wordpress блога и НИЧЕГО подходящего не нашел. Вроде статей очень при очень много, но вот именно такой формы, которая бы меня устраивала я не нашел.

Всем привет! С вами Александр Борисов! В общем мне нужна была форма обратной связи для wordpress блога! Мне не нужна красота, супер пупер функции, мне просто нужна была форма обратной связи, совсем простая, без наворотов, прибамбасов и прочей хрени.

Да, кстати и чтобы создавалась она без всяких замудренных скриптов, а тем более плагинов. Знаю, что многие блоггеры для создания формы обратной связи используют плагин contact form 7. А он, я вам скажу, не слабо грузит ваш блог. Но это еще пол дела. Кто-то ставит еще и доп.плагин для этой формы, чтобы в ней была капча. Два плагина для создания формы связи на блоге это пипец конечно!

Кстати ребята, у меня на блоге осталось активных, всего 9 плагинов. Скоро будет вообще 6. В добавок уйду от Ротабана (об этом я писал тут) и вообще блог полетит как ракета.

Вернемся к делу. В общем искал я форму и хотел чтобы там было все по простому и как обычно. Человек заходил на страницу обратной связи на моем блоге и видел поля — введите свое имя, введите свой e-mail, введите тему сообщения, текст сообщения и кнопочка «Отправить»! ВСЕ!

Искал, искал инфу в интернете, что-то пробовал, но так и не нашел.

Пришлось обратиться за помощью к моему брату (он мне уже как брат реально) Артему (gurusite.ru) верстаку, про него я писал тут, чтобы он сделал нормальную, легкую и самое главное простую форму обратной связи. Вот что у него получилось:

Форма обратной связи для wordpress

Форма просто сок! Не нравится внешний вид? Ни чего страшного, стили можете настроить на свой вкус и цвет. Главное что она легкаяне грузит блог, делается без плагинов и не пропускает спам. То что доктор прописал, как говорится. Короче щас я вам покажу как такую же форму обратной связи сможете поставить и вы на свой любой блог на движке wordpress.

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

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

ШАГ №1: Заходим на свой хостинг в папку wp-content/themes/ваша_тема и скачиваем на свой компьютер файл page.php. Скачали? Ок. Переименовываем его в contact.php например. Сделали? Отлично!

ШАГ №2: Скачайте к себе на компьютер вот этот архивчик, в нем есть файл txt с кодом. Откройте его. Там две части кода, я эти коды даже пометил, первая часть и вторая часть.

ШАГ №3: Открываем файл contact.php, в который мы переименовали page.php и в нем делаем 2 действия.

а) Удаляем код <?php get_header (); ?> и вместо него вставляем первую часть кода из файла, который вы скачали у меня. Если что вот он:

' . "\r\n" . 'Reply-To: ' . $email;
        wp_mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
    }
} ?>

б) В этом же файле contact.php, находим строчку <?php the_content (); ?> и под ней вставляем вторую часть кода. Вот она:

Ваше сообщение успешно отправлено!

Окей. Файл contact.php готов. Сохраняем его и закидываем на наш сервер в папку с темой в ту же wp-content/themes/ваша_тема.

ШАГ №4: Для того, чтобы придать нашей форме обратной связи стили, ну чтобы она не отображалась криво, то берем вот этот код:

/*-------------------------------- Contact --------------------------------*/

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

.contact_left {
        float: left;
        width: 131px;
}

.contact_right {
        float: right;
	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: 100px;
        height: 30px;
        line-height: 30px;
	padding: 0 0 0 31px;
        margin: 0 0 20px;
        background: #f7f7f7 url(images/nameid.png) no-repeat 2px 0;
        border: none;
        border-radius: 4px;
        box-shadow: inset 0.5px 0.5px 3px #aaaaad;
        font: normal 13px Arial, sans-serif;
        color: #434343;
}
.contact_email input[type="text"] { background: #f7f7f7 url(images/mailid.png) no-repeat 0 0; }
.contact_theme input[type="text"] { background: #f7f7f7 url(images/url.png) no-repeat 2px 0; }

.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: #f7f7f7;
        border: none;
        border-radius: 4px;
        box-shadow: inset 0.5px 0.5px 3px #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: 120px;
	padding-top: 7px;
	padding-bottom: 4px;
	margin: 0 0 15px;
	background: #6ea077;
        border: none;
        border-radius: 4px;
	text-transform: uppercase;
	text-align: center;
	font-size: 16px;
	color: #fff;
	transition: background-color ease-in-out .15s;
	cursor: pointer;
}
.contact_submit:hover { background: #7FAC87; }

.contact_message {
        width: 100%;
        height: 22px;
        padding: 70px 0;
        text-align: center;
        font: normal 22px Arial, sans-serif;
        color: #434343;
}
.errors, .errorss {
	position: absolute;
	bottom: 2px;
	left: 10px;
	font: normal 12px Arial, sans-serif;
        color: red;
	z-index: 999;
}

и вставляем его в файл style.css темы вашего блога (wp-content/themes/ваша_тема/style.css) в самый конец например. А чтобы в трех полях (имя, мыло, тема) выводились специальные маленькие красивые картинки, то возьмите их все в том же архиве что вы скачали сейчас у меня и поместите в папку «images» вашей темы (wp-content/themes/ваша_тема/images).

ШАГ №5: Ну теперь собственно добавляем форму на сам блог. Для этого добавляем новую страницу в админке, называем ее как обычно, «Контакты», «Обратная связь» или как у меня например «НаписАть мне»… Что-то в этом духе в общем… И на этой странице справа в виджете «Атрибуты странцы» выбираем шаблон «Contact»:

contact

Все! Жмем «опубликовать»! А ну можете еще в теле страницы что-то написать, типа: Связаться со мной вы можете через форму, которую видите ниже. Кстати вы можете не создавать новую страницу, а добавить форму на уже существующую, где у вас уже что-то написано в теле страницы.

Форма связи для wordpress

После всех манипуляций, проверьте работу формы. Все должно работать. Все письма от людей будут приходить автоматически на e-mail администратора блога. А e-mail этот указан у вас в админке «Настройки» — «Общие».

обратный e-mail адрес

Форма мною проверена, работает отлично! Всем рекомендую. А брату Артему большое спасибо за помощь мне в ее создании. Молодца! Верстак от бога! Кстати эта форма использовалась и в курсе Как создать блог за ЧАС. Жалобы пока ни одной не получил!

Ну и последнее. Наверняка кому-то не понравится внешний вид формы, кто-то захочет, например, чтобы поля располагались не так как тут (слева), а как обычно — сверху. Или же, чтобы поля ввода были не с закругленными углами, а острыми и т.д. Ну тут я вам не помогу. Это вы делайте сами, или изучайте html и css, либо обращайтесь за помощью к верстальшикам.

Скажу только что делается это все через файл style.css в коде, который мы как раз туда вставили для оформления формы. Я, давайте, лучше сейчас все таки подскажу новичкам, как поменять цвет кнопки. Ну понятно, что сейчас она зеленая, а кто-то хочет синюю или красную.

Короче цвет кнопки в форме меняется опять же через style.css, в том коде, что вы вставили. Сейчас цвет, повторю, зеленый и выводится он в коде вот тут — background: #6ea077; То есть код цвета: 6ea077 — это и есть цвет кнопки. А при наведении цвет немного светлеет и выводится он вот тут  — background: #7FAC87; То есть код цвета: 7FAC87.

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

Код нужного цвета для формы

Действуйте! На этом у меня все на сегодня, я с вами прощаюсь, ну а турнир, в котором вы можете выиграть планшет google nexus 7 продолжается.

Обновлено: 30.04.2019 — 07:15