Мой основной проект: Боевые искусства в кинематографе! (fight-films.info)

Свеженькое
Реакция публики
    Облако пометок
    css Google html SEO WordPress Яндекс видео графический дизайн заработок интернет интернет магазин контент партнерка поисковые системы посещаемость продвижение раскрутка реклама сайт ссылки статья юзабилити

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

    КонтактыСуществует множество плагинов для WordPress, создающих всякие формы для разных нужд, в принципе и чисто под форму обратной связи тоже их хватает. Но я сторонник не пользоваться сторонними доработками, которые добавляют лишь нагрузку на сайт. Тем более, когда у 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 {} /*-- Соответственно, стиль списка формы --*/

    Далее мы создаем страницу в админке и просто выбираем шаблон "Контакт" справа в колонке. ;)

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

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

      • BarSug:

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

        • ФДуч:

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

          • BarSug:

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

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

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

    3. Alex:

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

      • BarSug:

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