Легкая форма обратной связи для wordpress блога.

  • 4 Апрель 2011
  • Артем
  • 21 комментариев


Блог должен быть максимально удобным для читающего. Как этого достичь? Установить кнопки rss подписки, удобные комментарии и многое другое. А если читателю захочтеся посоветоваться с блоггером  и задать вопрос? Сообщение электронной почты – это долго. Пока найдешь адрес, впишешь и т.д… Максимально упростить процесс общения блоггера и читателя в индивидуальном порядке поможет форма обратной связи.

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

Для того чтобы создать “легкую” (не значит, что с меньшим количеством функций) форму обратной связи на wordpress блоге нам нужно взять файл page.php, на всякий случай сохранить в исходном виде, и переименовать например на contact.php. Это и будет  файлом для создания формы обратной связи на нашем wordpress блоге. Просмотрим содержимое. У меня данный файл содержит следующие строки


<?php get_header(); ?>
<div id="_mcePaste"><div id="contentwrap"></div>
<div id="_mcePaste"><div></div>
<div id="_mcePaste"><div id="content"></div>
<div id="_mcePaste"><?php if (have_posts()) : while (have_posts()) : the_post(); ?></div>
<div id="_mcePaste"><div id="post-<?php the_ID(); ?>"></div>
<div id="_mcePaste"><h2><?php the_title(); ?></h2></div>
<div id="_mcePaste"><div></div>
<div id="_mcePaste"><?php if ( function_exists("has_post_thumbnail") &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft post_thumbnail")); } ?></div>
<div id="_mcePaste"><?php the_content('<p>Читать далее &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;raquo;</p>'); ?></div>
<div id="_mcePaste"><?php wp_link_pages(array('before' => '<p><strong>Страницы:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?></div>
<div id="_mcePaste"></div></div>
<div id="_mcePaste"></div></div>
<div id="_mcePaste"><?php endwhile; endif; ?></div>
<div id="_mcePaste"><?php edit_post_link('Редактировать', '<p>', '</p>'); ?></div>
<div id="_mcePaste"></div></div>
<div id="_mcePaste"></div></div>
<div id="_mcePaste"><?php get_sidebars(); ?></div>
<div id="_mcePaste"></div></div>
<div id="_mcePaste"><?php get_footer(); ?></div>
<?php get_header(); ?><div id="contentwrap"> <div> <div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> <div><?php if ( function_exists("has_post_thumbnail") &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft post_thumbnail")); } ?> <?php the_content('<p>Читать далее &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;raquo;</p>'); ?> <?php wp_link_pages(array('before' => '<p><strong>Страницы:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?> </div> </div> <?php endwhile; endif; ?> <?php edit_post_link('Редактировать', '<p>', '</p>'); ?> </div> </div><?php get_sidebars(); ?></div><?php get_footer(); ?>

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

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<span style="white-space: pre;"> </span><div class="post" id="post-<?php the_ID(); ?>">

<span style="white-space: pre;"> </span><h2 class="title"><?php the_title(); ?></h2>

<span style="white-space: pre;"> </span><div class="entry">

<?php if ( function_exists("has_post_thumbnail") &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft post_thumbnail")); } ?>

<span style="white-space: pre;"> </span><?php the_content('<p class="serif">Читать далее &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;raquo;</p>'); ?>

<span style="white-space: pre;"> </span>

<span style="white-space: pre;"> </span><?php wp_link_pages(array('before' => '<p><strong>Страницы:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

Но при этом нам нужно оставить

 <div id="content"> 

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

 

</span> <?php /* Template Name: Форма обратной связи */ ?><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal;"> 

Данный код нужен для того, чтобы создать отдельную страницу под нашу форму обратной связи. Теперь же нам нужно создать непосредственно форму обратной связи. Для этого берем следующий код и вставляем сразу же после приведенного выше отрывка кода.
</span><?php if(isset($_POST['submitted'])) { if(trim($_POST['contactName']) === '') { $nameError = 'Введите ваше имя.'; $hasError = true; } else { $name = trim($_POST['contactName']); } if(trim($_POST['email']) === '') { $emailError = 'Введите e-mail адрес.'; $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) { $emailError = 'Вы ввели неправильный адрес.'; $hasError = true; } else { $email = trim($_POST['email']); } if(trim($_POST['comments']) === '') { $commentError = 'Введите сообщение.'; $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } if(!isset($hasError)) { $emailTo = get_option('tz_email'); if (!isset($emailTo) || ($emailTo == '') ){ $emailTo = get_option('admin_email'); } $subject = 'Сообщение с блога Steepbend Поверни в нужном направлении от пользователя '.$name; $body = "Имя: $name \n\nE-mail: $email \n\nСообщение: $comments"; $headers = 'От: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Ответить: ' . $email; $headers = "Content-type: text/plain; charset=\"utf-8\""; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?>

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

</span><?php if(isset($emailSent) &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; $emailSent == true) { ?> <div class="thanks"> <p>Спасибо, ваше сообщение отправлено.</p> </div> <?php } else { ?> <?php if(isset($hasError) || isset($captchaError)) { ?> <p class="error">Извините, произошла ошибка.<p> <?php } ?> <form action="<?php the_permalink(); ?>" id="contactForm" method="post"> <ul class="contactform"> <li> <label for="contactName">Имя:</label> <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" /> <?php if($nameError != '') { ?> <span class="error"><?=$nameError;?></span> <?php } ?> </li> <li> <label for="email">E-mail</label><input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="required requiredField email" /> <?php if($emailError != '') { ?> <span class="error"><?=$emailError;?></span> <?php } ?> </li> <li> <label for="commentsText">Сообщение:</label> <textarea name="comments" id="commentsText" rows="20" cols="50" class="required requiredField"><?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 } ?> </li> <li> <input type="submit">Отправить сообщение</input> </li> </ul> <input type="hidden" name="submitted" id="submitted" value="true" /> </form> <?php } ?></span></span><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal; font-size: x-small;">

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

Спасибо за добавление этой статьи в:

Комментариев: 21

    • Ольга Ladyemansipe
    • Апрель 5 2011 в 11:07

    Я пока ограничиваюсь емейлом, но может на будущее и такую форму установлю)))

    Ответить

    • Tramp
    • Апрель 5 2011 в 11:34

    Для посетителя намного удобнее форма обратной связи)

    Ответить

    • Плагин для Wordpress
    • Апрель 5 2011 в 13:34

    А я бы рекомендовал Contact Form 7. Очень удобный плагин, который ,к тому же, не тормозит блог.

    Ответить

    Tramp
    Апрель 5 2011 в 14:42

    Все изложенное выше – абсолютно то же самое. Только без использования плагинов)))

    Ответить

    • overbag
    • Апрель 5 2011 в 16:09

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

    Ответить

    Tramp
    Апрель 6 2011 в 8:32

    Overbag,пример формы обратной связи вы можете посмотреть у меня на блоге. Если не хотите заворачиваться с настройками формы обратной связи, приведенной выше, установите себе абсолютно бесплатный плагин contact form 7.

    Ответить

    • евг
    • Апрель 11 2011 в 13:04

    Спасибо за пост.Лично я пробовал вначале использовать плагины для обратной связи,однако этот способ стоит попробовать.

    Ответить

    • Надежда
    • Апрель 14 2011 в 5:58

    Давно хочу установить таку форму, и она необходима, но для меня это “китайская грамота”.

    Ответить

    Tramp5
    Апрель 14 2011 в 9:52

    Просто поставьте плагин contact form 7 и не мучайтесь с php кодом)))

    Ответить

    • Gosha_trade
    • Май 13 2011 в 22:13

    СПС за статью с кодами. Вооружился.

    Ответить

    • Евгений
    • Май 15 2011 в 14:01

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

    Ответить

    • Tramp
    • Май 15 2011 в 15:10

    Форма стоит рядом со страницами главная и карта сайта)

    Ответить

    • bardbos
    • Апрель 18 2012 в 11:45

    Вчера был актуален. Может пригодиться исходник. сенкс.

    Ответить

    • Денис
    • Июль 8 2013 в 14:41

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

    Ответить

    Артем
    Июль 8 2013 в 14:58

    Здравствуйте, Денис! Конкретно плагинов под вашу задачу не существует (а может я не встречал). Такое можно сделать с комментариями, используя плагин TinyMCEComments, а с обратной связью – это придется заказать у кодера.

    Ответить

    Денис
    Июль 8 2013 в 15:07

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

    Ответить

    Артем
    Июль 8 2013 в 15:27

    Да, посмотрел:) Денис, если вы хотите позволить пользователям добавлять материал, то самое разумное дать им зарегистрироваться:) Но, так как для неподготовленных интерфейс wordpress непонятен, вам придется все – равно самостоятельно править статьи. Единственный выход, как я вам уже сказал ранее – это помощь кодера, то, что вам нужно стоит явно не больше 30-50 $. (Специально еще раз просмотрел списки плагинов, ничего похоже не нашел).
    Если у вас среди пользователей есть продвинутые, позвольте им добавлять статьи прямо из редактора.

    Ответить

    • Денис
    • Июль 8 2013 в 15:35

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

    Ответить

    Артем
    Июль 8 2013 в 15:59

    Из бесплатных решений единственное, что я еще мог бы предложить – это contact-form-7, но он у вас и так стоит и вы его прекрасно настроили. Я бы еще добавил пункт – отправка файла, чтобы ваши читатели имели возможность загружать статьи в word’e или в форматах других текстовых редакторов.

    Ответить

    • Денис
    • Июль 8 2013 в 16:06

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

    Ответить

Написать комментарий

  • rss
  • rss
  • rss
  • rss