Публикация: | Изменение: | Просмотров: 9130

Форма обратной связи в WordPressВ WordPress есть кучи плагинов, которые позволяют добавить форму обратной связи в блог, но использовать плагины — это не тру. Почему плагины — это плохо я рассказывать не буду, об этом можете почитать подробнее в статье про удаление лишних плагинов. А в этой статье я постараюсь донести до вас то, как можно сделать контактную форму для вашей темы WordPress без плагина. Притом форма будет содержать 4 поля: имя, мыло, тема и сообщение. Будет использована валидация данных, как на сервере, так и на клиенте динамически с помощью библиотеки jQuery. Ну что же, приступим!

Создание индивидуального шаблона

Для начало создадим индивидуальный шаблон для страницы, на которой будет находится наша форма обратной связи. В дальнейшем этот индивидуальный шаблон вы должны применить для нужной страницы (установить в атрибутах страницы этот шаблон), чтобы отобразить форму в нужном месте. Для создания шаблона скопируйте файл page.php из вашей темы и переименуйте его в feedback.php. Далее, для обозначения, что это индивидуальный шаблон в начало нужно добавить комментарий:

1
2
3
4
5
<?php
/*
Template Name: Feedback
*/

?>

В зависимости от вашей темы остальной исходный код страницы может выглядеть по-разному, но минимально необходимый для feedback.php должен быть примерно следующим:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
/*
Template Name: Feedback
*/

?>

<?php get_header() ?>

    <div id="container">
        <div id="content">
            <?php the_post() ?>
            <div id="post-<?php the_ID() ?>" class="post">
                <div class="entry-content">
                </div>
            </div>
        </div>
    </div>

<?php get_sidebar() ?>
<?php get_footer() ?>

Всё, теперь индивидуальный шаблон под названием Feedback готов.

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

Теперь необходимо создать HTML-код самой формы обратной связи. Для этого просто вставьте следующий код в контейнер entry-content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
    <p>Ваше имя (обязательно):<br />
        <input type="text" name="contactName" id="contactName" class="required" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
        <?php if(isset($nameError) && $nameError != '') { ?>
            <span class="error"><?=$nameError;?></span>
        <?php } ?>
    </p>

    <p>Ваш E-Mail (обязательно):<br />
        <input type="text" name="email" id="email" class="required email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" />
        <?php if(isset($emailError) && $emailError != '') { ?>
            <span class="error"><?=$emailError;?></span>
        <?php } ?>
    </p>

    <p>Тема:<br />
        <input type="text" name="subject" id="subject" value="<?php if(isset($_POST['subject']))  echo $_POST['subject'];?>" />
    </p>

    <p>Сообщение (обязательно):<br />
        <textarea name="comments" id="commentsText" rows="20" cols="30" class="required"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
        <?php if(isset($commentError) && $commentError != '') { ?>
            <span class="error"><?=$commentError;?></span>
        <?php } ?>
    </p>
    <input type="submit" class="button" value="Отправить сообщение"/>
    <input type="hidden" name="submitted" id="submitted" value="true" />
</form>

Ничего сложного в этом коде нет. Тут выводятся 4 поля: имя, мыло, тема письма и текст письма. Плюсь одно скрытое поле hidden для того, чтобы в дальнейшем определить отсылалась форма или нет. Так же вы можете видеть PHP-код, который я приготовил заранее для восстановление внесенных данных в поля после неудачной отсылки и вывод ошибок.

Обработка данных и ошибок

Наша форма выглядит довольно неплохо, но, правда, она совсем бесполезна, потому что пока не умеет отправлять сообщение на почту. Чтобы форма стала полноценной, необходимо написать PHP-код, который проверит входные данные и если поля были заполнены правильно, то отправит письмо администратору блога, в противном случаи выдаст ошибку.

На счет адреса отправления сообщения. Он будет браться из профайла администратора блога. Если вам нужно указать другую почту, то можете поменять у себя в админском профайле свою почту или ручками железно вбить в коде (ниже в коде я обозначил где).

Для реализации обработки данных необходимо вставить следующий код после комментариев объявляющих шаблон и до функции get_header():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
if(isset($_POST['submitted'])) {
    if(trim($_POST['contactName']) === '') {
        $nameError = 'Пожалуйста, введите ваше имя.';
        $hasError = true;
    } else {
        $name = trim($_POST['contactName']);
    }

    if(trim($_POST['email']) === '')  {
        $emailError = 'Пожалуйста, введите адрес вашей электронной почты.';
        $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
        $emailError = 'Адрес электронной почты некорректный.';
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    if(trim($_POST['subject']) === '') {
        $subject = 'Сообщение с сайта';
    } else {
        $subject = stripslashes(trim($_POST['subject']));
    }

    if(trim($_POST['comments']) === '') {
        $commentError = 'Пожалуйста, введите ваше сообщение.';
        $hasError = true;
    } else {
        $comments = stripslashes(trim($_POST['comments']));
    }

    if(!isset($hasError)) {
        $emailTo = get_option('tz_email');
        if (!isset($emailTo) || ($emailTo == '') ){
            $emailTo = get_option('admin_email');
        }
        // тут можно железно установить почту для отправки письма, например так:
        // $emailTo = 'admin@site.ru';
        $body = "Имя: $name \n\nEmail: $email \n\nСообщение: $comments";
        $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

        wp_mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
        unset($_POST);
    }

} ?>

Это место расположение кода обоснованно тем, что если поставить его после get_header(), то весь глобальный массив _POST будет отчищен, что нам не на руку.

Тут все так же просто, вначале проверяем отсылалась ли форма и правильно ли она заполнена. В случае ошибки (пустое поле или неправильный электронной адрес почты), то будет возвращена ошибка, которая отобразится на форме.

Для полной наглядности можно в случаи ошибки или удачной отсылки письма выдать соответствующее сообщение пользователю. Для этого необходимо перед началом формы (перед тегом <form>) вставить следующий код:

1
2
3
4
5
6
7
8
9
10
<?php if(isset($emailSent) && $emailSent == true) { ?>
    <div class="thanks">
        <p>Спасибо за ваше письмо. Я постараюсь, как можно скорее на него ответить.</p>
    </div>
<?php } else { ?>
    <?php the_content(); ?>
    <?php if(isset($hasError)) { ?>
        <p class="error">Извините, но отправить письмо не удалось. Возможно вы допустили ошибки при заполнении формы.<p>
    <?php } ?>
<?php } ?>

Теперь форма обратной связи полностью рабочая и может принимать от ваших клиентов/читателей/поклонников сообщения. Но есть одни существенный недочет, она будет принимать сообщения и от всех спам-машин, который забредают на ваш сайт, что я считаю крайне плохо.

Боремся со спамом

Чтобы исключить спам сообщения, которые отсылают боты пачками, нужно вставить чуть-чуть дополнительного кода. Этот код должен их обманывать ботов. Этот метод не является новинкой, он довольно давно и с успехом борется со спамом. Мы создадим дополнительное поле, которое будет видит робот, а нормальный пользователь видеть не будет, т.е. робот будет его заполнять, а пользователь не будет. И тогда при проверке и отсылки письма, если это поле будет заполнено, то мы сразу поймем, что это спам.

Давайте попробуем это реализовать. Сперва установим это новое поле и сделаем его невидимым для пользователей. Поле у нас будет textarea, чтобы сделать вид, что сюда нужно вписывать основной текст сообщения. А невидимым мы его сделаем с помощью JavaScript. Да, если у пользователя будет отключен JS, то ему будут видны оба поля, что будет не очень красиво, но сейчас в большей степени у всех JS включен. Вставим поле перед нашим основным полем для сообщения:

1
2
3
4
5
6
<textarea name="comments1" id="commentsText1" rows="20" cols="30" class="required"></textarea>
<script>
    window.onload = function(){
        document.getElementById('commentsText1').style.display ='none';
    }
</script>

Тут ничего сложного, просто обратите внимание, что атрибуты поля name и id являются уникальными и не повторяют атрибуты ваших других полей. В JS мы просто прописываем этому полю CSS-стиль display: none. Теперь вы это поле не увидите при загрузке страницы, а бот увидит, поскольку боты не умеют интерпретировать JS код и не видят, как будет выглядеть страница преобразованная JS.

Get Adobe Flash player

Как видите тут использован голый JS, если кто очень хочет, то он может его заменить на код jQuery библиотеки. Хотя это является более тяжелым для машины клиента (не забудьте только проконтролировать подключена ли эта библиотека), но зато более удобным для некоторых:

1
2
3
4
5
<script type="text/javascript">
    $(document).ready(function(){
        $('#commentsText1').hide();
    });
</script>

Ну в общем, так или иначе, у вас в данный момент должно быть готово невидимое для пользователя дополнительное поле. Теперь надо его обработать в PHP, т.е. просто проверить, если оно заполнено, то это бот и мы ему сделаем внушение, в противном случаи пропустим дальше и отправим письмо. Для этого вставим следующий код в самом начале обработки данных формы (после проверки отправленности письма):

1
2
3
if($_POST['comments1'] != '') {
    die("Get out!");
}

Тут всё просто, если поле comments1 не пустое, то бот попался и мы ему просто вываливаем сообщение, чтобы он убирался отсюда и более ничего не делаем.

И еще один момент. Чтобы боты не «обучались» я рекомендую сделать другими атрибуты name и id этого нового поля, т.е. не comments1 и commentsText1, а что-нибудь другое. А то вдруг кто-то сообразит и добавить такие поля в исключения. Так же не рекомендую в именах использовать намеки на то, что это поля специальна для спама (типа comments-spam), они должны максимально походить на настоящие поля, которые заполняет пользователь.

Полный код формы обратной связи

Чтобы у вас не возникло никаких проблем я предоставлю конечный получившийся код формы обратной связи с борьбой против спама:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<?php
/*
Template Name: Feedback
*/

?>

<?php
if(isset($_POST['submitted'])) {
    if($_POST['comments1'] != '') {
        die("Get out!");
    }

    if(trim($_POST['contactName']) === '') {
        $nameError = 'Пожалуйста, введите ваше имя.';
        $hasError = true;
    } else {
        $name = trim($_POST['contactName']);
    }

    if(trim($_POST['email']) === '')  {
        $emailError = 'Пожалуйста, введите адрес вашей электронной почты.';
        $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
        $emailError = 'Адрес электронной почты некорректный.';
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    if(trim($_POST['subject']) === '') {
        $subject = 'Сообщение с сайта';
    } else {
        $subject = stripslashes(trim($_POST['subject']));
    }

    if(trim($_POST['comments']) === '') {
        $commentError = 'Пожалуйста, введите ваше сообщение.';
        $hasError = true;
    } else {
        $comments = stripslashes(trim($_POST['comments']));
    }

    if(!isset($hasError)) {
        $emailTo = get_option('tz_email');
        if (!isset($emailTo) || ($emailTo == '') ){
            $emailTo = get_option('admin_email');
        }
        // тут можно железно установить почту для отправки письма, например так:
        // $emailTo = 'admin@site.ru';
        $body = "Имя: $name \n\nEmail: $email \n\nСообщение: $comments";
        $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

        wp_mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
        unset($_POST);
    }

} ?>

<?php get_header(); ?>
<div id="container">
    <div id="content">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <div class="entry-content">
            <?php if(isset($emailSent) && $emailSent == true) { ?>
                <div class="thanks">
                    <p>Спасибо за ваше письмо. Я постараюсь как можно скорее на него ответить.</p>
                </div>
            <?php } else { ?>
                <?php the_content(); ?>
                <?php if(isset($hasError)) { ?>
                    <p class="error">Извините, но отправить письмо не удалось. Возможно вы допустили ошибки при заполнении формы.<p>
                <?php } ?>
            <?php } ?>

            <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
                <p>Ваше имя (обязательно):<br />
                    <input type="text" name="contactName" id="contactName" class="required" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
                    <?php if(isset($nameError) && $nameError != '') { ?>
                        <span class="error"><?=$nameError;?></span>
                    <?php } ?>
                </p>

                <p>Ваш E-Mail (обязательно):<br />
                    <input type="text" name="email" id="email" class="required email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
                    <?php if(isset($emailError) && $emailError != '') { ?>
                        <span class="error"><?=$emailError;?></span>
                    <?php } ?>
                </p>

                <p>Тема:<br />
                    <input type="text" name="subject" id="subject" value="<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>" />
                </p>

                <p>Сообщение (обязательно):<br />
                    <textarea name="comments1" id="commentsText1" rows="20" cols="30" class="required"></textarea>
                    <script>
                        window.onload = function(){
                            document.getElementById('commentsText1').style.display ='none';
                        }
                    </script>
                    <textarea name="comments" id="commentsText" rows="20" cols="30" class="required"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                    <?php if(isset($commentError) && $commentError != '') { ?>
                        <span class="error"><?=$commentError;?></span>
                    <?php } ?>
                </p>
                <input type="submit" class="button" value="Отправить сообщение"/>
                <input type="hidden" name="submitted" id="submitted" value="true" />
            </form>
        </div>
    </div>
<?php endwhile; endif; ?>
</div>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

Улучшаем вид

Для того чтобы форма выглядела чуток получше можно добавить немного стилей. Все классы уже прописаны осталось только описать их в CSS-стилях. Тут я приведу только небольшой пример, который растянет все поля на всю ширину контента, а то так поля маленькие и неказистые. В файл style.css вашей темы добавьте следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#contactName{
width:100%;
}
#email{
width:100%;
}
#subject{
width:100%;
}
#commentsText{
width:100%;
}
span.error{
color:red;
}

Вот теперь все поля растянулись. На свое усмотрение можете сделать стили под свой дизайн, чтобы форма не казалась посторонним элементом.

Проверка формы

Сейчас контактная форма работает отлично, в том числе и проверка введенных данных, но она происходит на сервере, что требует перезагрузки страницы. Можно сделать дополнительную проверку введенных данных на стороне клиента с помощью JavaScript. Но если вам этого не нужно, то можете не читать дальше, форма и без этого работает. Точнее с помощью jQuery и специального плагина jQuery Validation Plugin. Этот плагин является довольно мощным и позволяет быстро и легко проверить введенные данные на корректность.

Для начала, необходимо скачать плагин и загрузить его в свою тему в каталог /js. После этого создать файл verification.js со следующим содержимым:

1
2
3
$(document).ready(function(){
    $("#contactForm").validate();
});

Этот файл необходимо так же разместить в папке /js вашей темы.

Теперь необходимо связать JavaScript файлы с темой. Для этого откройте файл темы header.php и вставьте следующий код между тегов <head> и </head>:

1
2
3
4
<?php if( is_page('contact') ){ ?>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>

При условии, что страница с формой имеет URL contact. На крайний случай этот код можно вставить в индивидуальный шаблон, сделанный выше, без условия конечно же.

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

Любая помощь по данному коду (вопросы, установка, доработка и т.д.) являются платными услугами. Пишите через форму обратной связи, если готовы оплатить мою работу. Если вопрос нет, то берём и устанавливаем – благо, я всё дал и разжевал.

На этом у меня все. Надеюсь этот пост поможет вам сделать форму обратной связи без плагина для WordPress. Ваше мнение о коде и предложения жду в комментариях. Всем удачи!

Похожие статьи

Понравился пост? подпишись на RSS

Комментарии 98 комментариев

Хорошее решение , Вы Мастер PHP =)

Хех, спасибо! Старался =)

Я вот наверно чего то не понимаю.
Зачем и почему, нужны решения без плагинов?
Пока мое мнение таково, что хаки это анахронизм, и применение их уместно только в тех случаях, когда существующие плагины не могут сделать в полной мере то же самое.
По моему даже плагин который реально просто включает/отключает хак, уже лучше самого хака.

Хаки - это одно название. На самом деле это тот же плагин, точнее в плагинах те же хаки стоят, только еще много чего лишнего понапихано. Ведь плагин нужно обнаружить, подключить, у него много дополнительного кода для работы с ними в админке и обычно плагин решет больше задач, чем требуется, что дает нагрузку. Вот например, обычно форму контакта делают с помощью плагина Contact Form 7, его вес больше 1го метра, он содержит 117 файлов. Это не просто плагин! Это мощная машина для генерации форм! И с помощью нее выводят только форму контактов, в лучшем случаи!!! Это не есть хорошо! И получается он нагрузку дает не оправданную. Это как атомной бомбой по воробьям!

Так что решайте сами. Можете потестить, с плагином и без. В разных случаях по разному. Да, и к тому же это зависит от вашего хостинга и посещаемости. Если вы лимиты хостинга не превышаете, то и волноваться не стоит =) Хотя можете позаботиться о будущем и сделать сразу =)

Ну а сколько времени у вас займет сделать из вот этого хака, плагин?

Проблема стоит в том что многие пытаются одним плагином угодить всем, и при этом ещё и отдельно привлечь дополнительными понтами.
А простой человек по не знанию и ведется: "Оо... целый мегабайт для контактной формы! Это ж сколько труда вложено, функционала сколько."

Но иногда это ведь может быть и справедливо.
Допустим если настройки конфигурируют некий config.ini, к которому потом код из шаблона обращается, и только тогда работает, это неправильно.Хотя может быть и хуже.

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

Другое дело что реалии таковы, что никто вот так вот делать не будет. Одни сделают обычные хаки, другие сделают навороченные плагины вроде упомянутой CF7. Для первых создание плагина это пустая трата времени, что вполне справедливо. А для вторых это просто не дойдет никогда, и с этим вряд ли что то можно сделать.

Но все же вначале стоит попробовать плагин, потому что иногда можешь решить что то нужно, а реально тебе так только кажется, тратить время даже на поиски и "установку" хака сразу не стоит, не говоря уже о его написании.

PS: просто хочется чтоб и простым людям были доступны не просто хаки, а хаки которые они бы смогли легко сконфигурировать.

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

А что касается меня, то я лучше незнающему человеку объясню как сделать хак и он прозреет, чем он поставит плагин и будет находится в неведение. По крайней мере, я стараюсь объяснять =)

WordPress и без того CMS для блондинок, я думаю, знание основ работы кода никому не помешает. Это тоже самое, что летать на самолете (в смысле быть пилотом) и не знать принципов самого полёта. Благо, в инете тонны материала любой сложности для новичков, думаю пару часиков на изучение можно потратить.

Хотя конечно, всегда найдутся те кто поленится и те кому лучше будет поставить плагин. Но рано или поздно они подойдут к черте, когда придется сносить тяжелые плагины и заменять их на хаки, облегчать нагрузку на сервер и др. (если конечно их проект развивается). Так что лучше начать пораньше, а то все "пока гром не грянет мужик не перекреститься".

PS: И кстати, я плагин делать не буду из этого кода, мне он не нужен, да и мануал вроде подробный =)

PSS: Свои хаки-функции я стараюсь делать настраиваемыми, чтобы большему числу народа угодить. Хотя в данном случаи это не так, это исключение. Все такие это не хак, а больше просто страница с индивидуальным шаблоном, хотя и его можно сделать настраиваемым =)

Качественно, возьму на заметку.
На моем сайте до сих пор нет формы обратной связи.

Если вы сейчас хотите форму себе вставить, то обождите до вечера! Я внесу кое-какие изменения в код, точнее дополнения. Они касаются предотвращения спама.

Всё, я это сделал. Теперь глупые спам-боты не пройдут. Только умные =D

спасибо

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

Доброго времени суток!

Давно, после того как проверил на нагрузку, хочу заменить плагин контакт форм на скрипт,но ... знаний то пока ни каких ((( Очень обрадовался Вашему готовому решению, да видно по своей криворукости и незнанию, что то где то делаю не так ((( На хостинге копирую файл page.php, переименовываю его в feedback.php. и на этом стопарюсь((( Потому как не появляется кнопка Edit - редактировать и я не могу внести в него Ваш код ((( Подскажите пожалуйста где я косячу - делаю не так ...

Что за кнопка Edit? Я так понял вы используете интерфейс хостинга для работы с файлами или интерфейс самого WP? Если так, то лучше юзайте FileZilla для подключения по FTP к хостингу, будете редактировать свои файлы в нормальном блокноте.

На самом деле копировать файл page.php не обязательно, если вы хотите мой код вставить, то можно просто создать новый файл и в него запихать, но по идеи, и так и так должно работать.

Но чтобы не было загвоздок с редактированием файлов установите FileZilla. Все данные для подключения должен дать вам хостинг.

Три вопроса:
1.Перед описанием плагина уже готовая форма, которую вставляй в файл да давай название feedback.php?

2.Как прикрутить созданный файл в уже имеющуюся страничку? Была форма контакт 7 плагин - удалила, а новое ничего не смогла внедрить, либо опять же плагин требуется (ну и смысл шило на мыло менять) либо какие то форма на аяксе, которые опять же фиг знает как прикрутить к уже давно существующей страничке? На всякий случай дам ссылку на формочку http://www.codeharmony.ru/materials/18 чтоб было понятно о чем речь.
Или редирект тока спасет тогда? Перенаправить созданную давно на вновь созданную?

3.И о плагине вы в конце пишете jQuery Validation Plugin - он обязательно должен присутствовать после внедрения на сайте кода? опять же зачем шило на мыло менять тогда? если без плагина все равно никак?

1) Да

2) Не понял вопрос. Вы задаете вопрос по чужому поделию? Если так, то я чужие поделия не комментирую =) А на счет того как прикрутить к старой странице, то в статье создается индвидуальный шаблон страницы, который потом можно назначить любой странице.

3) Вроде бы из текста не следует, что нужно это делать специально:

Сейчас контактная форма работает отлично, в том числе и проверка введенных данных, но она происходит на сервере, что требует перезагрузки страницы. Можно сделать дополнительную проверку введенных данных на стороне клиента с помощью JavaScript.

Можно сделать - это как Не обязательно делать, но видать смысл слишком скрыт. Щас поправлю, чтобы в дальнейшем вопросов таких не задавали =) Это добавлено для повышения юзабилити формы, но оно не обязательно. И jQuery плагин это не WordPress плагин, это разные вещи. jQuery - это JavaScript код, который закачивается пользователю в браузер и работает уже там и при этом динамически, т.е. без перезагрузки страницы. И соответственно WordPress плагин - это PHP код, который работает только на сервере.

Добрый вечер!
При создании формы возникла небольшая проблема, вся форма выровнена по левому краю, что можно сделать, что бы отцентрировать форму?
вот сам код страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<?php
/*
Template Name: Feedback
*/
?>

<?php
if(isset($_POST['submitted'])) {
    if($_POST['comments1'] != '') {
        die("Get out!");
    }

    if(trim($_POST['contactName']) === '') {
        $nameError = 'Пожалуйста, введите ваше имя.';
        $hasError = true;
    } else {
        $name = trim($_POST['contactName']);
    }

    if(trim($_POST['email']) === '')  {
        $emailError = 'Пожалуйста, введите адрес вашей электронной почты.';
        $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
        $emailError = 'Адрес электронной почты некорректный.';
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    if(trim($_POST['subject']) === '') {
        $subject = 'Сообщение с сайта';
    } else {
        $subject = stripslashes(trim($_POST['subject']));
    }

    if(trim($_POST['comments']) === '') {
        $commentError = 'Пожалуйста, введите ваше сообщение.';
        $hasError = true;
    } else {
        $comments = stripslashes(trim($_POST['comments']));
    }

    if(!isset($hasError)) {
        $emailTo = get_option('tz_email');
        if (!isset($emailTo) || ($emailTo == '') ){
            $emailTo = get_option('admin_email');
        }
        // тут можно железно установить почту для отправки письма, например так:
        // $emailTo = 'admin@site.ru';
        $body = "Имя: $name \n\nEmail: $email \n\nСообщение: $comments";
        $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

        wp_mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
        unset($_POST);
    }

} ?>

<?php get_header(); ?>
<div id="col1">
    <div id="container">
    <div id="content">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <div class="entry-content">
            <?php if(isset($emailSent) && $emailSent == true) { ?>
                <div class="thanks">
                    <p>Спасибо за ваше письмо. Я постараюсь как можно скорее на него ответить.</p>
                </div>
            <?php } else { ?>
                <?php the_content(); ?>
                <?php if(isset($hasError)) { ?>
                    <p class="error">Извините, но отправить письмо не удалось. Возможно вы допустили ошибки при заполнении формы.<p>
                <?php } ?>
            <?php } ?>

            <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
                <p>Ваше имя (обязательно):<br />
                    <input type="text" name="contactName" id="contactName" class="required" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
                    <?php if($nameError != '') { ?>
                        <span class="error"><?=$nameError;?></span>
                    <?php } ?>
                </p>

                <p>Ваш E-Mail (обязательно):<br />
                    <input type="text" name="email" id="email" class="required email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
                    <?php if($emailError != '') { ?>
                        <span class="error"><?=$emailError;?></span>
                    <?php } ?>
                </p>

                <p>Тема:<br />
                    <input type="text" name="subject" id="subject" value="<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>" />
                </p>

                <p>Сообщение (обязательно):<br />
                    <textarea name="comments1" id="commentsText1" rows="20" cols="30" class="required"></textarea>
                    <script>
                        window.onload = function(){
                            document.getElementById('commentsText1').style.display ='none';
                        }
                    </script>
                    <textarea name="comments" id="commentsText" rows="20" cols="30" class="required"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                    <?php if($commentError != '') { ?>
                        <span class="error"><?=$commentError;?></span>
                    <?php } ?>
                </p>
                <input type="submit" class="button" value="Отправить сообщение"/>
                <input type="hidden" name="submitted" id="submitted" value="true" />
            </form>
        </div>
    </div>
<?php endwhile; endif; ?>
</div>
</div>
</div><!--end:col1-->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Конечно же с помощью CSS-стилей. В ваш файл style.css нужно добавить примерно следующее:

1
#contactForm {text-align: center;}

Тогда вся форма встанет по центру страницы, но это не всегда пригодно. В вашем случае, наверно, будет достаточно сделать отступ слева на пару десятков пикселей:

1
#contactForm {margin: 0 0 0 20px;}

Плюс то что я сейчас вижу у вас на сайте не очень красиво. Дизайн поломался из-за того что почему-то форма находится не в контейнере #col1, а в отдельном #container, хотя нужно второе запихать в первое, если вы понимаете о чем я. И в принципе, в коде сверху всё так и есть, но у вас на сайте что-то не так =)

Спасибо большое, все поправил, все работает)

Здравствуйте! Помогите пожалуйста у меня не получается

вот что у меня в файле feedback.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<?php
/*
Template Name: Feedback
*/
?>

<?php
if(isset($_POST['submitted'])) {
    if($_POST['comments1'] != '') {
        die("Get out!");
    }

    if(trim($_POST['contactName']) === '') {
        $nameError = 'Пожалуйста, введите ваше имя.';
        $hasError = true;
    } else {
        $name = trim($_POST['contactName']);
    }

    if(trim($_POST['email']) === '')  {
        $emailError = 'Пожалуйста, введите адрес вашей электронной почты.';
        $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
        $emailError = 'Адрес электронной почты некорректный.';
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    if(trim($_POST['subject']) === '') {
        $subject = 'Сообщение с сайта';
    } else {
        $subject = stripslashes(trim($_POST['subject']));
    }

    if(trim($_POST['comments']) === '') {
        $commentError = 'Пожалуйста, введите ваше сообщение.';
        $hasError = true;
    } else {
        $comments = stripslashes(trim($_POST['comments']));
    }

    if(!isset($hasError)) {
        $emailTo = get_option('tz_email');
        if (!isset($emailTo) || ($emailTo == '') ){
            $emailTo = get_option('admin_email');
        }
        // тут можно железно установить почту для отправки письма, например так:
        // $emailTo = 'admin@site.ru';
        $body = "Имя: $name \n\nEmail: $email \n\nСообщение: $comments";
        $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

        wp_mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
        unset($_POST);
    }

} ?>

<?php get_header(); ?>



<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>



    <div id="primary" class="site-content">

        <div id="content" role="main">


<div id="container">
    <div id="content">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <div class="entry-content">
            <?php if(isset($emailSent) && $emailSent == true) { ?>
                <div class="thanks">
                    <p>Спасибо за ваше письмо. Я постараюсь как можно скорее на него ответить.</p>
                </div>
            <?php } else { ?>
                <?php the_content(); ?>
                <?php if(isset($hasError)) { ?>
                    <p class="error">Извините, но отправить письмо не удалось. Возможно вы допустили ошибки при заполнении формы.<p>
                <?php } ?>
            <?php } ?>

            <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
                <p>Ваше имя (обязательно):<br />
                    <input type="text" name="contactName" id="contactName" class="required" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
                    <?php if($nameError != '') { ?>
                        <span class="error"><?=$nameError;?></span>
                    <?php } ?>
                </p>

                <p>Ваш E-Mail (обязательно):<br />
                    <input type="text" name="email" id="email" class="required email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
                    <?php if($emailError != '') { ?>
                        <span class="error"><?=$emailError;?></span>
                    <?php } ?>
                </p>

                <p>Тема:<br />
                    <input type="text" name="subject" id="subject" value="<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>" />
                </p>

                <p>Сообщение (обязательно):<br />
                    <textarea name="comments1" id="commentsText1" rows="20" cols="30" class="required"></textarea>
                    <script>
                        window.onload = function(){
                            document.getElementById('commentsText1').style.display ='none';
                        }
                    </script>
                    <textarea name="comments" id="commentsText" rows="20" cols="30" class="required"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                    <?php if($commentError != '') { ?>
                        <span class="error"><?=$commentError;?></span>
                    <?php } ?>
                </p>
                <input type="submit" class="button" value="Отправить сообщение"/>
                <input type="hidden" name="submitted" id="submitted" value="true" />
            </form>
        </div>
    </div>
<?php endwhile; endif; ?>
</div>
</div>
           



        </div><!-- #content -->

    </div><!-- #primary -->





<?php get_sidebar(); ?>

<?php get_footer(); ?>

не получается именно когда вставляю кусок кода после

1
2
3
4
5
<?php
/*
Template Name: Feedback
*/
?>

и до

1
<?php get_header(); ?>

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

А вообще всё работает. Я взял предоставленный вами код, создал индивидуальный шаблон, создал страницу, назначил ей этот шаблон и всё заработало и даже письмо администратору (мне) пришло через форму. Так что есть предположение, что вы что-то неверно делаете сами. Или с вашей темой что не так =)

пишет Ошибка сервера и невозможно отобразить страницу.
Тема стандартная 2012 от WordPress
если вставляю код без этого куска о проверке формы

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php
if(isset($_POST['submitted'])) {
    if($_POST['comments1'] != '') {
        die("Get out!");
    }

    if(trim($_POST['contactName']) === '') {
        $nameError = 'Пожалуйста, введите ваше имя.';
        $hasError = true;
    } else {
        $name = trim($_POST['contactName']);
    }

    if(trim($_POST['email']) === '')  {
        $emailError = 'Пожалуйста, введите адрес вашей электронной почты.';
        $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
        $emailError = 'Адрес электронной почты некорректный.';
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    if(trim($_POST['subject']) === '') {
        $subject = 'Сообщение с сайта';
    } else {
        $subject = stripslashes(trim($_POST['subject']));
    }

    if(trim($_POST['comments']) === '') {
        $commentError = 'Пожалуйста, введите ваше сообщение.';
        $hasError = true;
    } else {
        $comments = stripslashes(trim($_POST['comments']));
    }

    if(!isset($hasError)) {
        $emailTo = get_option('tz_email');
        if (!isset($emailTo) || ($emailTo == '') ){
            $emailTo = get_option('admin_email');
        }
        // тут можно железно установить почту для отправки письма, например так:
        // $emailTo = 'admin@site.ru';
        $body = "Имя: $name \n\nEmail: $email \n\nСообщение: $comments";
        $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

        wp_mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
        unset($_POST);
    }

} ?>

то все нормально форма показывается

Я так понимаю вы не туда вставляете или что-то вроде того. Куда вы этот код располагаете? В редактировании страницы в окно, куда контент пихают? Или как? Опишите вкратце последовательность своих действие.

Прост без этого заголовка нельзя создать индивидуальный шаблон, а значит его и не выбрать, а значит никакой формы отображаться не будет.

если создаю шаблон и вставляю туда следующий код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?php
/*
Template Name: Feedback
*/
?>



<?php get_header(); ?>



<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>



        <div id="primary" class="site-content">

        <div id="content" role="main">
       


<div id="container">
        <div id="content">
            <?php the_post() ?>
            <div id="post-<?php the_ID() ?>" class="post">
                <div class="entry-content">
               
   


<?php if(isset($emailSent) && $emailSent == true) { ?>
    <div class="thanks">
        <p>Спасибо за ваше письмо. Я постараюсь, как можно скорее на него ответить.</p>
    </div>
<?php } else { ?>
    <?php the_content(); ?>
    <?php if(isset($hasError)) { ?>
        <p class="error">Извините, но отправить письмо не удалось. Возможно вы допустили ошибки при заполнении формы.<p>
    <?php } ?>
<?php } ?>





   
               
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">



<textarea name="comments1" id="commentsText1" rows="20" cols="30" class="required"></textarea>
<script>
    window.onload = function(){
        document.getElementById('commentsText1').style.display ='none';
    }
</script>




    <p>Ваше имя (обязательно):<br />
        <input type="text" name="contactName" id="contactName" class="required" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
        <?php if($nameError != '') { ?>
            <span class="error"><?=$nameError;?></span>
        <?php } ?>
    </p>

    <p>Ваш E-Mail (обязательно):<br />
        <input type="text" name="email" id="email" class="required email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" />
        <?php if($emailError != '') { ?>
            <span class="error"><?=$emailError;?></span>
        <?php } ?>
    </p>

    <p>Тема:<br />
        <input type="text" name="subject" id="subject" value="<?php if(isset($_POST['subject']))  echo $_POST['subject'];?>" />
    </p>

    <p>Сообщение (обязательно):<br />
        <textarea name="comments" id="commentsText" rows="20" cols="30" class="required"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
        <?php if($commentError != '') { ?>
            <span class="error"><?=$commentError;?></span>
        <?php } ?>
    </p>
    <input type="submit" class="button" value="Отправить сообщение"/>
    <input type="hidden" name="submitted" id="submitted" value="true" />
</form>
               
               
               
                </div>
            </div>
        </div>
    </div>



       
        </div><!-- #content -->

    </div><!-- #primary -->
   





<?php get_sidebar(); ?>

<?php get_footer(); ?>

то форма показывается.
То есть страница загружается и можно вводить сообщение.
добавляю код для проверки формы и все - невозможно отобразить страницу

Все замечательно работает! Не обошлось сначала без съехавших вниз сайтбаров, затем сайтбары переместила влево, а шапка съехала вниз, в футер.:)) Зато тема получилась уникальная))) немного поменяла местами строчки кодов, и через три часа усе на месте! Так что пробуйте, господа! Темы у всех разные, и не обязательно какие то атрибуты будут присутствовать. Если не пытаться, то чему научитесь?

Так и есть! Терпение и труд к чему-нибудь да приведут! Молодец =)

Здравствуйте!
подскажите пожалуйста, как сделать некоторые поля необязательными к заполнению (поля удалить на фиг не вариант), а то все мои усилия только удаляют вывод сообщений об ошибке =)
спасибо

Переменная $hasError отвечает за обнаружение ошибки. Если она ровна true то ошибка произошла, если false то всё норм. Рассмотрим нижеследующий код проверки контактного имени:

1
2
3
4
5
6
if(trim($_POST['contactName']) === '') {
    $nameError = 'Пожалуйста, введите ваше имя.';
    $hasError = true;
} else {
    $name = trim($_POST['contactName']);
}

Видите, когда не заполнено поле имени, то переменная встаёт в true, ну и текст ошибки еще прописывается. А мы можем просто убрать эти две строки и вместо них запихать, например, просто присваивание некой константы или пустой строки. Ну например, если кто-то не подписался, то мы его просто обозначи как АНОНИМ и не будем инициировать ошибку:

1
2
3
4
5
if(trim($_POST['contactName']) === '') {
    $name = 'Аноним';
} else {
    $name = trim($_POST['contactName']);
}

По аналогии действуйте и с остальными полями.

большое спасибо!

Пытаюсь въехать в

1
2
3
4
5
6
7
8
9
10
<?php if(isset($emailSent) && $emailSent == true) { ?>
    <div class="thanks">
        <p>Спасибо за ваше письмо. Я постараюсь, как можно скорее на него ответить.</p>
    </div>
<?php } else { ?>
    <?php the_content(); ?>
    <?php if(isset($hasError)) { ?>
        <p class="error">Извините, но отправить письмо не удалось. Возможно вы допустили ошибки при заполнении формы.<p>
    <?php } ?>
<?php } ?>

Но это, в принципе, несущественно, без этого вполне можно обойтись. Вопрос: код хороший, рабочий. Может, стОит добавить в него вывод через шорткод - чтобы люди сильно не заморачивались?

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

Вывод формы обратной связи не через индивидуальный шаблон, а через function.php )) То есть можно встроить в любую страницу не меняя её шаблон. Ну это так, мыслЯ просто меня посетила. ))

Хм, теперь понятно. Сделать и правда можно. Но пока на очереди другие вопросы. Хотя индивидуальный шаблон сделать плёвое дело, должен каждый уметь кто WordPress юзает. Денёк пострадают и сделают xDDDD Но идею я к сведению приму и даже черновик создам! ПасибА!

Да не за что. Я генерирую идеи и дарю их. Со стороны это действие слегка напоминает понос. 💡 ➡ :mrgreen: Примерно в такой последовательности. )))

SlowProg, спасибо за подробное объяснение.
Задумался себе поставить и возник вопрос. Еще не силен в подобных премудростях.
В какую папку на хостинге необходимо залить файл feedback.php и вид ссылки будет :
домен/ feedback.php или я не прав. У меня все время ошибку 404 выдает. Спасибо.

Нет, вы не верно думаете. Залить нужно в свою папку с активной темой /wp-content/themes/Noble. А ссылка будет той которую вы укажите при создании страницы.

Благодарю за пояснения, всё так и делаю, а 404 выскакивает.

Значит вы наверно чего-то не понимаете. Скорее всего что такое и как создавать индивидуальные шаблоны для страниц. Почитайте про них отдельно. Вы создали саму страницу в WordPress? Назначили ей индивидуальный шаблон в выпадающем списке?

SlowProg, я действительно в первый раз столкнулся с индивидуальными шаблонами для страницы. Спасибо за ответы, у меня все получилось. Удачи и хорошо отдохнуть в выходные! Я ваш подписчик!

Здравствуйте!
По материалам Вашей статьи сделал форму обратной связи, всё получилось.
Спасибо.
А можно ли сделать так, чтобы цвет шрифта сообщений типа "Адрес электронной почты некорректный", "Пожалуйста, введите ваше имя" был, например, красного цвета?
Если можно, объясните, пожалуйста, как это сделать.

Ещё как можно. Все ошибки выводятся в контейнерах с классом error. Вот в CSS и добавьте нечто подобное:
.error{color:red;}

А как бы к этой форме капчу прикрутить? например с captcha.ru , чтоб тоже была проверка на предмет введенных данных с капчи?

Капча??? Ооооо НЕТ!!! Какая капча? Зачем капча? Если нужно для портала в 100 000 посещаемости, то я скажу как. В противном случае не надо вешать где непоподя ужасные и противные капчи, которые снижают всё что только можно на свете. Тут есть невидимое поле, которое снижает количество спама в разы. Вот почитайте статью для убедительности.

Добрый день.
Возникла необходимость максимально снизить нагрузку на сайт и повезло найти Ваш сайт. очень полезные статьи. Попробовала сделать форму обратной связи по Вашему коду, все в общем получилось, но сообщения не отправляются. ошибок никаких не выдает, просто страница перезагружается и никаких записей типа сообщение отправлено или не отправлено, ничего нет.
Шаблон сама делала с нуля. Может быть, в этом проблема? Подкажите, если не трудно:)
С Уважением, Poly.

Вот пару намёков в какую сторону копать:

1) Ранее письма вообще отправлялись другими способами с сайта? Может быть у вас хостинг не включил SMTP-сервер. Проверьте отправляются ли вообще письма WordPress или нет. Этот плагин можете использовать для этого.

2) Если письма не отсылаются то может функция mail() у вашего PHP отключена, можете об этом спросить у своей поддержки хостинга. Может они пойдут на встречу и включат.

3) Найдите и покопайтесь в логах с ошибками, может быть это натолкнёт на решение, если нет то связанные с этим ошибки (если они будут) скидывайте сюда - глянем. Логи должны быть у вас на хостинге, но в каком месте не могу точно сказать всё зависит от конкретного хостинга, но обычно они лежат по иерархии файловой системы немного ниже самого сайта (если глядеть по FTP). Если их нет, то скорее всего их надо включить в панели управления хостингом. И об этом должно быть написано в FAQ вашего хостинга.

4) Поищите плагины решающие данный вопрос. Например можно вообще все письма направить через любой другой SMTP-сервер. Вот для этого плагина.

Здравствуйте. Спасибо, что ответили.
Логи проверила, ошибок нет.
Раньше стоял плагин contact-form7 Работал хорошо, письма отправлялись моментально. Другие письма wordpress тоже отправляются исправно, а вот форма без плагина не хочет.

Я , честно, так, основываясь не на чём, диагностировать не могу.

Может быть у вас вывод ошибок выключен.

Ещё рекомендуют, когда не работает отправка, поменять в файле wp-includes/pluggable.php это:

1
2
// Set to use PHP's mail()
$phpmailer->IsMail();

на это:

1
2
// Set to use PHP's mail()
$phpmailer->IsSendmail();

В последней версии WordPress эта 405 строка кода. В других может отличаться, но думаю найдёте.

У меня работает и так и так, но в случае с вами я не знаю поможет или нет. Попробуйте. единственное данный способ не универсален т.к. изменения в коде сбросятся после обновления WordPress

[...] которые я предоставлял, то рекомендую вам перейти на вот этот сайт. Его автор в достаточной мере все [...]

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

Я так понимаю вы взяли просто мой код всей формы? Без каких либо изменений и адаптаций под свою вёрстку? Если так, то да, всё будет вверх дном и вы сделали не верно. Я показал на примере одного конкретного шаблона, а у вас нужно код вписывать в свой шаблон. Именно потому я и показал всё по шагам, в противном случае я бы мог просто вывалить код и ничего не объяснять.

Попробовала еще раз по шагам, если правильно поняла, нужно вписать свой емейл - вписала в трех местах (по одному) - все равно никак...Как-то сложно дается.
После Вашего ответа возник вопрос: вписывать код нужно в чистый лист или в дополнение к какому-то шаблону? - вот это не поняла...

Не в чистый лист. У меня написано следующее в статье:

Для создания шаблона скопируйте файл page.php из вашей темы и переименуйте его в feedback.php.

Этим самым я преследую цель сохранения структуры вашего шаблона. Т.е. вы берёте за основу свой шаблон и его видоизменяете.

В этом файле менять практически нечего, там всего несколько строк.. Завтра попробую еще раз. Спасибо.

Окей, бывают разные шаблоны. Но так или иначе свой шаблон надо знать и надо знать где конкретно формируется HTML-код страницы. В каком это файле происходит. Можете index.php взять за основу. В общем, любой файл что отвечает за формирование ваших страниц.

Приветствую! Все поставил все работает, отличное и изящное решение. Спасибо.
Но столкнулся с такой проблемкой. В старом шаблоне все работало как часы, но после смены шаблона появляется двойное поле Сообщение, я так понимаю у меня не включен JS. Так вот вопрос, может и не в тему так что извиняюсь за офтоп, как включить JS?

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

Спасибо, помогло. Подключил jQuery и все заработало.

Здравствуйте! Простите как сделать так чтоб поле сообщения не растягивалось, точнее чтобы можно было в CSS не только указать ширину в % но и высоту - без всякого растягивания? спс

Не очень понимаю термин "растягивание", но так или иначе у textarea есть атрибут rows отвечающий за высоту в строчках (читаем мат. часть). Или если хочется через CSS, то можно использовать свойство height. Например, в данном случае так:

1
2
3
4
#commentsText{
width:100%;
height: 200px;
}

Или вы имеете в виду, что не задаётся высота именно в %? Если так, то опять в мат. часть. Проценты всегда задаются относительно родителя. Обратите внимание какую высоту имеет родитель и именно от неё задаётся и высота поля-потомка. Если высота родителя явно не прописана, то надо это сделать.

Есть такое свойство resize: параметр; указав параметр свойство не дает растягиваться полю по вертикали или горизонтали. Я обычно указываю resize: vertical чтоб поле не растягивалось в сторону сайдбара.

ААААА! Вот что имелось в виду под "растягиванием"!!! Какой же я глупый =) Хорошо есть умные люди на свете, а то я какие-то глупости понаписал xDDD

Спасибо!
куда прописать resize: vertical ?
Образ и подобия соответствует описанию автора SlowProg. (у меня идентично полный код формы обратной связи Template Name: Feedback)

для поля сообщения есть id #commentsText вот ему и пропишите это свойство, а ширину можно поставить width: 90% это оптимально в большинстве случаев.
Для полей имя емейл и тема я ставил ширину width: 290px.При данных параметрах форма выглядит как эта форма для комментирования.

Спасибо!! Побольше бы таких инструкций сделай сам... не профессионалу
Всего Вам лучшего.

Здравствуйте!
Поставил Вашу форму обратной связи.
На локальном Open Servere работает без замечаний.

Поставил на действующий блог, появились замечания:
Notice: Undefined variable: nameError in - далее идет адрес файла и номер строки.
Notice: Undefined variable: emailError in - ...
Notice: Undefined variable: commentError in -...
Применительно к Вашему полному коду - это строки 81, 88, 105.

Тестовое письмо на почтовый ящик (...@gmail.com) не пришло, хотя запись, что сообщение отправлено, появилась.

Помогите, пожалуйста, устранить эти замечания.
Спасибо.
С уважением, Юрий

Добрый.

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

А вот то что не отправляется с этим вовсе может быть и не связано. Может и заработает, но вряд ли. Бывает на разных хостингах адекватно не работает отсылка почты. А так вообще, почта самого WP нормально ходит?

Внес Ваши корректировки в код, сейчас ошибок нет и почта заработала.

Спасибо.
Всего доброго.

Привет ! Проблема с формой, при отправке перекидывает на страницу записей. В чём может быть проблема ?

Если имеется в виду форма на сайте, что вы указали, то там в action формы указана (наверно) не та страница. А вообще сложно судить не имея перед глазами ничего. Приведите хотя бы код и адрес страницы, где эту форму можно поглядеть.

<?php
if(isset($_POST['submitted'])) {
if($_POST['comments1'] != '') {
die("Get out!");
}

if(trim($_POST['contactName']) === '') {
$nameError = 'Пожалуйста, введите ваше имя.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '') {
$emailError = 'Пожалуйста, введите адрес вашей электронной почты.';
$hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'Адрес электронной почты некорректный.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['subject']) === '') {
$subject = 'Сообщение с сайта';
} else {
$subject = stripslashes(trim($_POST['subject']));
}

if(trim($_POST['comments']) === '') {
$commentError = 'Пожалуйста, введите ваше сообщение.';
$hasError = true;
} else {
$comments = stripslashes(trim($_POST['comments']));
}

if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
// тут можно железно установить почту для отправки письма, например так:
// $emailTo = 'admin@site.ru';
$body = "Имя: $name \n\nEmail: $email \n\nСообщение: $comments";
$headers = 'From: '.$name.' ' . "\r\n" . 'Reply-To: ' . $email;

wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
unset($_POST);
}

} ?>

Спасибо за ваше письмо. Я постараюсь как можно скорее на него ответить.

Извините, но отправить письмо не удалось. Возможно вы допустили ошибки при заполнении формы.

<form action="" id="contactForm" method="post">
<input type="text" name="contactName" id="contactName" placeholder="Имя" required value="" />

<input type="text" name="email" id="email" placeholder="email" required value="" />

<input type="text" name="subject" id="subject" value="" />

window.onload = function(){
document.getElementById('commentsText1').style.display ='none';
}

Код находится в отдельном файле, по месту вызывается

я так понимаю код побился? Если да, то это моя вина, а если нет, то такой код будет плохо работать xDDDD

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

include (TEMPLATEPATH . '/form_contakt.php');

Приветствую! Возник такой вопрос: А можно ли данную форму привязать к кнопке? То есть, сделать так, чтобы была, например, страница, на странице расположена кнопка, допустим, называется сия кнопка "Написать письмо". По нажатию на такую кнопку появлялась бы данная форма. И это все в вордпрессе. Такое вообще возможно? Заранее благодарю за ответ.

Если речь идёт о модальном окне, то, конечно, это возможно. И в WordPress тоже. Но уже как вы реализуете и какие у вас требования это другой вопрос. Если вы хотите полную динамику без перегрузки страницы, то код будет совсем другой. Хотя это будет полностью костыльно, мне кажется лучше отдельную страницу.

Согласен, костыль конкретный получается. Придется jQuery прикручивать и тд... В обще проще ссылку на почтовый адрес поставить. У меня не магазин, пойдет и так. Спасибо...

Андрей, у Вас в форме обратной связи три поля разного размера для сообщения. Для чего они все?

Они для обмана ботов, которые спамят. И по идеи, они не видны обычным пользователям (если только мигнут быстренько), потому что скрываются с помощью JavaScript. Если они видны, то в браузере не работает JS или отключен или ещё что с JS.

Понятно. Спасибо.

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

Не приходят сообщения на почту, я раскомментил и вбил свой мэил
$emailTo = '*****@gmail.com';

Почитайте этот комментарий. Может быть помогут рекомендации.

Добрый день, Подскажите пожалуйста, как можно на главной странице, в верхнем меню сайта сделать кнопку, при нажатии по которой откроется модальное окно с данной формой(форма будет поверх страницы, а фон прозрачный и затемненный)? Спасибо.

Хм, данная задача может быть реализованна различными способами. Но так или иначе для полноценной работы потребуются существенные изменения. Поскольку я так понял вы хотите, чтобы форма работала динамически, а в нынешнем варианте она работает с перегрузкой страницы. Для помещения формы в модальное окно по url можно воспользоваться любой из многочисленных jQuery-библиотек, в другом случае можно сделать скрытый контейнер, на главной странице который и будет пихаться в модальное окно. Подобных примеров хватает в каждой документации к каждой библиотеке, что вы найдёте. Но есть проблема будет в ответах пользователю. Если не вносить никаких изменений, то при отправке из модального окна письмо может и отправится, но пользователь ничего не узнает и даже ошибки ему не покажутся. Так что в принципе тут нужено фактически весь код переработать и сделать его динамически работающим на основе одной из найденных вами библиотек. =)

А не смотрели в сторону онлайн сервисов для генерации веб-форм? Я например, у себя на блоге поставил форму от http://formdesigner.ru. Доволен, есть и смс-уведомления.

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

PS: долго мучился оставить ссылку или нет, поскольку саморекламу не люблю, но в конце подумал: почему бы и нет.

Ну для простых форм хватит и бесплатной версии, плюс не каждый сможет и захочет разбираться в этом php и html коде, некоторым проще создать форму в визуальном редакторе, получить готовый код и вставить его к себе на сайт. Для того, кто знаком с php конечно не составит труда создать и самому любую форму. Еще плюсом использования подобных конструкторов является то, что данные, кроме отсылки на почту, еще и хранятся на сайте, т.е. можно быстро отфильтровать нужные данные. Иногда это очень удобно.

Те кто не хочет разбираться в этом php и html стремительно уходят с этой статьи. Не для них писано. А те кто хочет будут разбираться, и в конце окажется, что и разбирать собственно нечего. Просто код вставить куда нужно и готово. А скилл прокачается. Может быть он на шаг ближе станет к умению программировать. Полезно же.

Но в общем и целом, ваше поделие имеет право на жизнь. Я не против него. Есть целевая аудитория.

Большое спасибо за статью. Можно даже сказать огромное. Пришлось перебрать и перепробовать целую кучу всякого web-мусора с кривыми-косыми кодами и бестолковыми инструкциями, прежде, чем добралась до Вашего блога. Но зато, как говорится, "почувствуйте разницу" :))

Есть три вопроса.
1. Какую функцию выполняют значения атрибута value в полях имя и E-mail?

1
2
3
value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>
и
value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>"

2. Как можно вставить в форму блок с чекбоксом "Отправить мне копию"? Т.е. как их прописать в HTML-структуре я знаю, вопрос какой кусок кода вставить в обработчик, чтобы копия отправлялась отправителю.

3. Как сделать так, чтобы после отправки сообщения на странице присутствовал только блок с извещением об успешной отправке (div class="thanks") и не было самой формы?

Добрый день. Извините за задержку в ответе. Нет мне оправдания.

1. Атрибут value содержит дефолтное значения поля после перегрузки страницы.

2. и 3. я помогу решить в отдельном порядке за соответствующую плату. Если что пишите через форму обратной связи. Но если можете сами, то лучше сами, а то мои цены кусаются =))))

С третьим справилась, со вторым подумаю настолько ли оно мне надо, с первым разобралась, но есть вопрос. Я хочу, чтобы для залогиненных пользователей поля имя и адрес заполнялись автоматически. Соорудила вот такое условие (пример поля "имя", с адресом аналогично):

1
2
3
4
5
6
7
8
<input type="text" name="contactName" id="contactName" class="required" value="<?php
    if ( is_user_logged_in() ) {
    global $user_identity;
    get_currentuserinfo();
    echo $user_identity;
}
if ( isset( $_POST['contactName'] ) )
    echo $_POST['contactName']; ?>" />

Изначально всё заполняется правильно. Но при обновлении формы удваивается.Т.е. печатается два раза (Вася ИвановВася Иванов). Не подскажете где ошибка?

Думаю второе не очень нужно. такое я почти нигде не видел. Да оно в общем-то и бесполезно.

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

1
2
3
4
5
6
7
8
9
<input type="text" name="contactName" id="contactName" class="required" value="<?php
if ( isset( $_POST['contactName'] ) )
    echo $_POST['contactName'];
else if ( is_user_logged_in() ) {
    global $user_identity;
    get_currentuserinfo();
    echo $user_identity;
}
?>" />

Код не проверял, но должен работать. Смысл такой, что если не было POST-запроса, то размещаем имя из профиля, а если запрос был, то размещаем пришедшие данные. Хотя и этот код не идеален =)

а этот код куда прописывать надо?

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

У меня в шаблоне уже вшитая форма обратки. Работает нормально. Вот только решил ее "модернизировать". Поэтому и спрашиваю куда это надо вписывать

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

Разобрался. Форму вписал. Автоматически подставляет данные. Но!!!! Когда нажимаешь на кнопку отправить, пишет введите имя! Не в курсе почему?

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

Разобрался в чем была причина! Починил, теперь все равботает