Если вы ищите классную форму обратной связи, то вы её нашли!
Я сделал её простой и понятной.
Вам не надо ничего будет прописывать на странице. А достаточно просто закинуть 2 файла в папку со своей темой. И всё!
При желании вы сможете поменять в стилях цвет кнопки, цвет самой формы, шрифт или добавить иконки в поля e-mail и имя.
Нажмите, чтобы скачать файл.
В архиве лежать 2 файла contact.php и mail.php.
Файл contact.php содержит в себе следующий код:
<?php /* Template Name: Contact */ ?> <?php get_header(); ?> <style> form#contact { border:1px solid #e5e5e5; padding:10px; background:#fbfbfb; border-radius:5px; } #contact label { font-size: 14px; } #contact input:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; background: #fff url(images/valid.png) no-repeat 98% center; } #contact textarea:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; } #contact input:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; background: #fff url(images/invalid.png) no-repeat 98% center; } #contact textarea:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; } .err { border: 1px solid #ff8c00; padding: 10px; background: #FFDF97; text-align: left; border-radius: 3px; } .ok { border: 1px #BCEF89 solid; margin-bottom: 15px; padding: 10px; background: #f5f9fd; text-align: center; border-radius: 3px; } #author, #email, #url { width: 30%; padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; } #comment { padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; } #submit { font-weight: 400; background: #7269a2; font-size: 15px; color: #fff; padding: 10px 50px; border: none; cursor: pointer; } </style> <h1><?php the_title(); ?></h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post"> <?php the_content(__('<p class="serif">Read the rest of this page »</p>')); ?> <?php wp_link_pages(array('before' => __('<p><strong>Страница:</strong> '), 'after' => '</p>', 'next_or_number' => 'number')); ?> <form id="contact" action="/wp-content/themes/ВАША ТЕМА/mail.php" method="post"> <div id="fields"> <p><label for="author">Ваше имя (обязательно)</label><input type="text" name="name" id="author" style="width:97%" placeholder="" required></p> <p><label for="email">Ваш E-mail (обязательно)</label><input type="email" name="email" id="email" style="width:97%" placeholder="" required></p> <p><label for="url">Тема письма</label><input type="text" name="sub" id="url" style="width:97%" placeholder="" required></p> <p><textarea name="message" cols="1" rows="10" id="comment" style="width:97%" placeholder="Введите сюда текст сообщения" required></textarea></p> <p><button type="submit" id="submit" class="go">Отправить сообщение</button></p> </div> </form> <h5><?php edit_post_link(__('Edit'), '<p>', '</p>'); ?></h5> </div> <!-- /end .post --> <?php endwhile; endif; ?> <?php get_footer(); ?>
Вам нужно будет в 84 строчке кода указать название той темы, которую вы используете.
<form id="contact" action="/wp-content/themes/ВАША ТЕМА/mail.php" method="post">
__
Файл mail.php содержит в себе следующий код:
<?php $post = (!empty($_POST)) ? true : false; if($post) { $email = $_POST['email']; $name = $_POST['name']; $email = $_POST['email']; $sub = $_POST["sub"]; $message = $_POST['message']; $error = ''; if(!$name) {$error .= 'Укажите свое имя. ';} if(!$email) {$error .= 'Укажите электронную почту. ';} if(!$sub) {$error .= 'Укажите тему обращения. ';} if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';} if(!$error) { $address = "Ваш E-mail"; $mes = "Имя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n"; $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email"); if($send) {echo "Ваше сообщение успешно отправлено! <a href='https://ВАШ САЙТ/'> Вернуться на страницу </a>";} } else {echo '<div class="err">'.$error.'</div>';} } ?>
В строчке 15 укажите свой (e-mail), а вот в строчке 18 свой сайт.
Затем просто закиньте эти 2 файла в папку со своей темой.
Создайте новую страницу на своём сайте и выберите шаблон contact.
Вот такая вот форма у нас получилась! Можете зайти на мою страничку контакты.
Внимание! В зависимости от вашей темы форма связи может немного меняться. В стилях вы можете настроить как вам нужно.