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

Приветствую, Друзья. В этом посте я хочу рассказать, как добавить форму обратной связи на сайт wordpress не прибегая к помощи каких-либо плагинов. Все предельно просто. Я даю код, немного его поясняю, для тех, кому интересно и у Вас есть готовая форма связи на сайте. Для примера, я покажу самую типичную и банальную форму, которую только можно придумать. Она будет содержать в себе: имя, e-mail и поле для ввода текстового сообщения. Также, будет добавлена проверка полей на наполненность и корректность.

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

Итак, для начала нам понадобится создать отдельный файл, который впоследствии мы подключим к нашему шаблону. Файл должен быть в формате php. Для создания файлов воспользуемся любым текстовым редактором, имеющимся на компьютере, например NotePad++. Затем копируем весь код из файла page.php нашей темы, который отвечает за вывод страниц на сайте, таких как «Контакты», и вставляем его в только что созданный файл. Обычно он выглядит примерно следующим образом. (Пример из стандартного шаблона Twenty Thirteen):

<?php get_header(); ?>
 <div id="primary" class="content-area">
 <div id="content" class="site-content" role="main">
 <?php /* The loop */ ?>
 <?php while ( have_posts() ) : the_post(); ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="entry-header">
 <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
 <div class="entry-thumbnail">
 <?php the_post_thumbnail(); ?>
 </div>
 <?php endif; ?>
 <h1 class="entry-title"><?php the_title(); ?></h1>
 </header><!-- .entry-header -->
 <div class="entry-content">
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
 </div><!-- .entry-content -->
 <footer class="entry-meta">
 <?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
 </footer><!-- .entry-meta -->
 </article><!-- #post -->
 <?php comments_template(); ?>
 <?php endwhile; ?>
 </div><!-- #content -->
 </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

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

<div class="entry-content">
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
 </div><!-- .entry-content -->
 <footer class="entry-meta">
 <?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
 </footer><!-- .entry-meta -->
 </article><!-- #post -->
 <?php comments_template(); ?>
 <?php endwhile; ?>
 </div><!-- #content --

Значит, код формы необходимо добавить между первой строкой и строкой:

<?php endwhile; ?>

Код формы обратной связи wordpress довольно простой:

<form action="<?php the_permalink(); ?>" id="contact" method="post">
 <input type="hidden" name="sent" id="sent" value="1" />
 <div id="form">
 <div id="lebel">Ваше имя (Обязательно)</div>
 <div id="input-field"><input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" /></div>
 <div id="lebel">Ваш E-mail (Обязательно)</div>
 <div id="input-field"><input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" /></div>
 <div id="lebel">Ваше сообщение(Обязательно)</div>
 <div id="input-field"><textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea></div>
 <div id="lebel"> </div>
 <div id="input-field"><input type="submit" name = "send" value = "Отправить" /></div>
 </div>
 </form>

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

Проверка полей контактной формы и обработчик данных для отправки письма.

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

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

<?php get_header(); ?>

Добавляем код:

<?php
/*
Template Name: Contact
*/
if($_POST[sent]){
 $error = "";
 if(!trim($_POST[your_name])){
 $error .= "<p>Пожалуйста, введите свое имя!</p>";
 }
 if(!filter_var(trim($_POST[your_email]),FILTER_VALIDATE_EMAIL)){
 $error .= "<p>Пожалуйста, введите корректный e-mail!</p>";
 }
 if(!trim($_POST[your_message])){
 $error .= "<p>Пожалуйста, введите сообщение!</p>";
 }
 if(!$error){
 $email = wp_mail(get_option("admin_email"),trim($_POST[your_name])." Вы получили сообщение от ".get_option("blogname"),stripslashes(trim($_POST[your_message])),"От: ".trim($_POST[your_name])." <".trim($_POST[your_email]).">\r\nОтветить:".trim($_POST[your_email]));
 }
}
?>

Кроме того, необходимо добавить еще кусок кода, перед кодом формы. То есть, перед:

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

Добавляем:

<?php if($email){ ?>
 <p><strong>Ваше сообщение успешно отправлено!</strong></p>
 <?php } else { if($error) { ?>
 <p><strong>Ваше сообщение не было отправлено. Что-то пошло не так...</strong><p>
 <?php echo $error; ?>
 <?php } else { the_content(); } ?>

И после закрывающего тега формы:

</form>

Добавляем:

<?php } ?>

Теперь, мы можем сохранить файл в формате php и загрузить его на хостинг, в папку с нашей темой, с помощью ftp-клиента.

После чего, переходим в админку сайта, создаем новую страницу, называем ее как угодно, например «Контакты».  И в правой колонке, в атрибутах страницы, выбираем шаблон «Contact».

Затем, сохраняем страницу и проверяем, что у нас получилось.

Немного о настройке формы связи.

Обратите внимание, что в коде мы нигде не указывали E-mail, на который будут приходить письма. Для того, чтобы его указать, необходимо в админке wordpress, в разделе параметры, выбрать «Общие». И там указать «Адрес E-mail». Именно на этот адрес будут приходить письма отправленные, с помощью данной формы связи на сайте.

А у меня на этом все. Удачи! У Вас получилась форма связи wordpress, без плагинов?