X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Форма обратной связи без плагинов

Приклад
  • 2024-11-21
  • 4686 переглядів

  • Дизайн та розробка сайту

Доброго времени суток!
Сегодня я хочу показать, как с помощью небольшого кода организовать у себя на сайте форму обратной связи. К тому же мы обойдемся без использования плагинов. Эту форму легко подключить в любом месте на вашем сайте.
Наша форма будет иметь 4 поля.
1. Имя
2. E-mail
3. Текст сообщения
Такую форму использую и я на этом сайте. И так приступим.

В админ панели в настройках > общие > должен быть указан e-mail адрес администратора, иначе форма не сможет отправить письмо

no image

1. Создаем файл, со скриптом.

Создаем файл contacts.php и деоаем с него шаблон страницы по типу page.php. Выглядеть должно примерно так:

<?php
/*
Template Name: Страница Контакты
*/
?>
<?php get_header(); ?>

<?php get_footer(); ?>

2. Вставка кода обработки.

Перед

<?php get_header(); ?> 

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

<?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 (!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 = 'Сообщение с Блога от пользователя '.$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;
    }
 
} ?>

2. Вставка кода формы на сайте.

После

<?php get_header(); ?> 

вставляем код который выводит поля для заполнения на сайте:

	<?php if(isset($emailSent) && $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 } ?>
	

Перед этим кодом или после него можно дописать

<?php the_content(); ?>

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

.thanks{} /* Это внешний вид сообщения об благополучной отправке*/
.error{} /* вид вывода ошибок */
.contactform {} /*А вот это уже внешний вид самой формы */

Надеюсь эта статья вам поможет.
На этом все. Спасибо за внимание 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 4, в среднем: 5 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078