Свеженькое
Облако пометок
Реакция публики
Благодарю за мат.помощь:

Как сделать контактную форму на WordPress без плагинов

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

Итак, как чисто «языком Вордпресса» создать контактную форму?

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

Открываем свой contact.php, удалив все лишнее что осталось с предыдущего шаблона вставляем в самое начало кода вот это:

<?php
/*
Template Name: Контакт
*/
?>

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

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
    <ul>
        <li>
            <label for="contactName">Имя:</label>
            <input type="text" name="contactName" id="contactName" value="" />
        </li>
        <li>
            <label for="email">E-mail</label>
            <input type="text" name="email" id="email" value="" />
        </li>
        <li>
            <label for="commentsText">Сообщение:</label>
            <textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
        </li>
        <li>
            <button type="submit">Отправить</button>
        </li>
    </ul>
    <input type="hidden" name="submitted" id="submitted" value="true" />
</form>

Вставить можно в любое место, это уже упирается в дизайн. Получится обычная форма: Имя, почта и текст сообщение +кнопка «отправить». Но пока она бесполезная, необходимо добавить функционал:

<?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 = '[Веб-мастерская] от '.$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;
    }

} ?>

Этот код необходимо вставить между обозначением шаблона и тегом 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 } ?>

Наша контактная форма уже полноценная. Остается лишь поправить стили по вкусу:

.thanks{}  /*-- Стиль сообщения об успешной отправке --*/
.error{} /*-- Вывод ошибки --*/
.contactform ul, .contactform li {} /*-- Соответственно, стиль списка формы --*/

Далее мы создаем страницу в админке и просто выбираем шаблон «Контакт» справа в колонке. wink

Всего комментариев: 7
  1. Igor:

    Отлично! Работает! Спасибо!
    ..нужна была именно простая форма для WordPress без всяких заморочек и чтобы легко и быстро можно было подогнать напильником под любую тему.

    • BarSug:

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

      • ФДуч:

        А как стили подключить?) Я догадываюсь, но хочу у проверенного источника узнать smile
        Заранее спасибо smile

        • BarSug:

          Сорри, отсутствовал…
          Ну, если к конкретно этому коду, то в любом месте (так, чтоб не мешать другому коду и не обрезать его, ессно) добавить:

          <style type="text/css">
          .thanks{}  /*-- Стиль сообщения об успешной отправке --*/
          .error{} /*-- Вывод ошибки --*/
          .contactform ul, .contactform li {} /*-- Соответственно, стиль списка формы --*/
          </style> 
  2. ФДуч:

    Спасибо большое, помогло! smile

  3. Alex:

    А как можно сделать более объемную форму, например форму заказа пиццы, и чтобы она отправляла имейл.
    Как еще сделать чтобы при получении заказа пиццы, сотруднику приходила смс с оповещением?)
    Заранее спасибо)

    • BarSug:

      Мне кажется, в вашем случае будет проще использовать плагин типа Cforms, с помощью которого можно создать какую угодно форму. единственное, для смс-оповещения там будет необходимо прикручивать сторонние сервисы (хотя я с таким не сталкивался, не знаю) .

Оставьте свой комментарий:

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

:-):-(:-D;-)*acute**help**blush**negative**pardon**mosking**dance**search**rofl**punish**dash**ok**gamer**aggressive**friends**crazy**dirol**clapping**drinks**don-t_mention*