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

форма за обратна връзка

Здравейте, приятели и читатели на моя блог! От много време търсех скрипт на форма за обратна връзка в WordPress, но без да се налага да използвам плъгин. И накрая намерих каквото търсих, проста, елегантна и много лека форма за изпращане на имейли до администратора на блога от вашите посетители.

Доста блогъри използват плъгин Contact Form 7, за да създадат форма за обратна връзка от техните посетители. Но този плъгин доста натоварва блога, както и всеки плъгин, затова трябва да се стремите да използвате колкото се може по-малко добавки, за да „лети“ вашия сайт. Но това не е всичко, някой блогъри дори слагат допълнителен плъгин за така наречената captcha против спам. Два плъгина за да създадете форма за обратна връзка, това е просто недопустимо!

За това колко е важно сайта ви да се зарежда бързо, може да прочетете в тези статии: „Влияе ли скоростта на зареждане на сайта на позицията ви в Google“ и „Бавен сайт – това е катастрофа“.

Между другото, в моя блог в момента има 13 активни плъгина, като тази бройка планирам да я съкратя на 10!

И така, след доста търсене в Интернет, най-накрая намерих, прост, лек и функционален скрипт на форма за обратна връзка. Ако не ви харесват цветовете по подразбиране, може по всяко време да ги смените по ваш вкус и цвят. Главното е, че формата е лека, не натоварва блога, прави се без използване на плъгин и не пропуска спам.

И така, просто изпълнявайте стъпките една след друга и ще може да поставите и вие такава форма на вашия wordpress блог.

Създаване на форма за обратна връзка в четири стъпки:

Стъпка №1 – Влезте във вашия хостинг в папка wp-content/themes/вашата_тема и свалете на вашия компютър файл page.php. Преименувайте page.php на contact.php и запазете промените.

Стъпка №2 – Отваряте файл contact.php със текстов редактор, например с notepad++ и извършвате две действия:

Изтривате код:

<?php get_header (); ?>

и на негово място поставяте този код:

<?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 = 'Грешен e-mail адрес.';
        $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;
    }

} ?>

Във този файл contact.php, намирате ред: <?php the_content (); ?> и под него поставяте този код:

<div id="contact_form">
                           <?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_left">
                                            <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_right">
                                            <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>

Файл contact.php вече е готов. Запазете промените и го качете на вашия сървър в папката със вашата тема – wp-content/themes/вашата_тема.

Стъпка №3 – За да придадете на вашата форма за обратна връзка добър изглед и за да не се изобразява разкривена, сложете този код във страницата за стилове style.php на вашата тема (wp-content/themes/вашата_тема/style.php):

/*-------------------------------- 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;
}

А за да ви излизат иконките в полета Вашето име, Вашия email и Тема, то ги свалете от този линк и ги качете във папка images на вашата тема – wp-content/themes/вашата_тема/images.

Стъпка №4 – В тази стъпка добавяме формата за контакт във самия блог. Влизате в админ панела на вашия WordPress блог и добавяте нова страница: „Страници“ -> „Добавяне“.

И на тази страница от дясно във „Атрибути на страницата“ избирате Шаблон „Contact“:

добавяне на страница за контакт

И това е всичко! Натискате бутон „Публикуване“. Може да напишете във страницата например: Свържете се с мен, от формата която виждате долу или нещо друго, каквото решите вие.

След като формата за обратна връзка е готова, проверете нейната работа, би трябвало да работи без проблеми. Всички писма от вашите посетители ще пристигат автоматично на администраторския имейл който сте посочили в админ настройките – „Настройки“ -> „Общи“ -> „Имейл адрес“.

А, ако не ви харесват цветовете на бутон „ИЗПРАТИ“ и искате да ги смените на други, това става от кода който поставихте във страница style.css. Цветът на бутона „Изпрати“ е тук – background: #6ea077;. Тоест кода на цвета е: 6ea077, а кода на цвета на бутона когато се посочва със мишката е написан тук: background: #6ea077;, тоест кода на цвета е: 6ea077.

Изберете цветове които искате и сменете кода на цвета във вашия файл style.css. Може да определите кода на всеки цвят например във Photoshop:

photoshop color code

За днес това е всичко от мен, приятели. Надявам се, тази форма за обратна връзка да ви хареса и да я използвате във вашия блог.

С уважение, Николай Томов.

Хареса ли ви статията? Споделете я с приятелите:

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *