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

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

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

Форма обратной связи — это один из важнейших элементов на сайте, очередной шаг навстречу посетителю. А посетители — это самое важное для любого сайта. Поэтому, и я считаю, вы со мной согласитесь, страница с формой обратной связи обязательна к установки на каждый сайт!

И в этой статье я подробно остановлюсь на том, как же добавить форму обратной связи на сайт WordPress.

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

Форма должна быть наглядной и понятной.

Обычно, достаточно бывает следующего набора полей:

  • Имя
  • Адрес электронной почту (e-mail)
  • Тема сообщения
  • Текст сообщения

В примере ниже я еще добавил простенькую защиту от спама (ответ на контрольный вопрос).

Задачи поставлены, приоритеты расставлены, поля для формы определены. Можно приступать непосредственно к созданию.

Создаем форму обратной связи для сайта на базе WordPress

  1. Создаем новый файл contact.php
  2. Открываем его в своем любимом текстовом редакторе и копируем в него следующий код
  3. <?php
    if (isset($_POST['submitted'])) {
        if (trim($_POST['contactName']) === '') {
            $nameError = __('Please enter your name', 'theme_textdomain');
            $hasError = true;
        } else {
            $name = trim($_POST['contactName']);
        }
    
        if (trim($_POST['email']) === '') {
            $emailError = __('Please enter your email address', 'theme_textdomain');
            $hasError = true;
        } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
            $emailError = __('You entered an invalid email address', 'theme_textdomain');
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }
    
        if (trim($_POST['messege']) === '') {
            $commentError = __('Please enter a message', 'theme_textdomain');
            $hasError = true;
        } else {
            $messege = stripslashes(trim($_POST['messege']));
        }
    
        if (trim($_POST['control']) != '31') {
            $controlError = __('Enter the correct answer to the question', 'theme_textdomain');
            $hasError = true;
        } else {
            $control = trim($_POST['control']);
        }
    
        if (!isset($hasError)) {
            $emailTo = get_option('admin_email');
    
            if (trim($_POST['subject']) != '') {
                $subject = trim($_POST['subject']);
            } else {
                $subject = '';
            }
    
            $body = __('From', 'theme_textdomain') . ": $name <$email>\n\n" . __('Messege', 'theme_textdomain') . ":\n$messege\n\n--\n" . __('This mail is sent via contact form on ', 'theme_textdomain') . get_bloginfo('name') . "\n" . get_bloginfo('url');
            $headers[] = "From: $name";
            $headers[] = "Reply-To: $email";
            /* $headers[] = "To: $emailTo"; */
            wp_mail($emailTo, $subject, $body, $headers);
            $emailSent = true;
            unset($_POST['contactName'], $_POST['email'], $_POST['subject'], $_POST['messege'], $_POST['control']);
        }
    }
    ?>
    
    <?php if (isset($emailSent) && $emailSent == true) { ?>
        <div class="good">
            <p><?php _e('Thanks, your email was sent successfully', 'theme_textdomain'); ?></p>
        </div>
    <?php } else { ?>
        <?php if (isset($hasError)) { ?>
            <p class="error"><?php _e('Sorry, an error occured', 'theme_textdomain'); ?><p>
            <?php }
        }
        ?>
    
    <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
        <label><?php _e('Name*', 'theme_textdomain'); ?><br>
            <input type="text" size="40" name="contactName" id="contactName" value="<?php if (isset($_POST['contactName'])) echo $_POST['contactName']; ?>" class="contact-form required" />
            <?php if ($nameError != '') { ?>
                <span class="error"><?php echo $nameError; ?></span>
            <?php } ?>
        </label>
        <br>
        <label><?php _e('E-mail*', 'theme_textdomain'); ?><br>
            <input type="text" size="40" name="email" id="email" value="<?php if (isset($_POST['email'])) echo $_POST['email']; ?>" class="contact-form required email" />
            <?php if ($emailError != '') { ?> 
                <span class="error"><?php echo $emailError; ?></span>
            <?php } ?>
        </label>
        <br>
        <label><?php _e('Subject', 'theme_textdomain'); ?><br>
            <input type="text" size="40" name="subject" id="subject" value="<?php if (isset($_POST['subject'])) echo $_POST['subject']; ?>" class="contact-form required subject" />
        </label>
        <br>
        <label><?php _e('Message*', 'theme_textdomain'); ?><br>
            <textarea name="messege" rows="10" cols="70" id="messegeText" rows="20" cols="30" class="contact-form required messege"><?php if (isset($_POST['messege'])) {
                if (function_exists('stripslashes')) {
                    echo stripslashes($_POST['messege']);
                } else {
                    echo $_POST['messege'];
                }
            } ?></textarea>
    <?php if ($commentError != '') { ?>
                <span class="error"><?php echo $commentError; ?></span>
            <?php } ?>
        </label>
        <br>
    
        <label><?php _e('Security question: How many days in January?', 'theme_textdomain'); ?><br>
            <input type="text" size="40" name="control" id="control" value="<?php if (isset($_POST['control'])) echo $_POST['control']; ?>" class="rcontact-form required question" />
    <?php if ($controlError != '') { ?>
                <span class="error"><?php echo $controlError; ?></span>
    <?php } ?>
        </label>
        <br>
    
        <input type="submit" value="<?php _e('Send', 'theme_textdomain'); ?>"></input>
    
        <input type="hidden" name="submitted" id="submitted" value="true" />
    </form>			
    
  4. Сохраняем файл contact.php и загружаем его в папку с файлами вашей темы
  5. Открываем для редактирования файл functions.php и добавляем в него следующий код
  6. /* Shortcode contact */
    
    function contact_shortcode($content = null) {
    	return  get_template_part('contact');
    	}
    add_shortcode('contact', 'contact_shortcode');
    
  7. Сохраняем документ

Все готово к работе.

Как добавить форму обратной связи на страницу WordPress

  1. Создаем новую страницу
  2. Вводим название страницы — например, «Обратная связь»
  3. В поле содержимого вставляем короткий код [contact]
  4. Опубликовываем страницу
  5. Пользуемся

Комментарии и обратные ссылки лучше отключить на данной странице.

Как русифицировать форму обратной связи WordPress

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

Можно дополнительно оформить форму обратной связи с помощью стилей CSS. В этом вам может пригодиться статья Форма обратной связи средствами CSS

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

Первая часть кода проверяет форму на наличие незаполненных полей и на наличие ошибок в заполненных полях. При их отсутвии введенное сообщение отправляется посредством e-mail администратору сайта.

if (isset($_POST['submitted'])) {
    if (trim($_POST['contactName']) === '') {
        $nameError = __('Please enter your name', 'theme_textdomain');
        $hasError = true;
    } else {
        $name = trim($_POST['contactName']);
    }

    if (trim($_POST['email']) === '') {
        $emailError = __('Please enter your email address', 'theme_textdomain');
        $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
        $emailError = __('You entered an invalid email address', 'theme_textdomain');
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    if (trim($_POST['messege']) === '') {
        $commentError = __('Please enter a message', 'theme_textdomain');
        $hasError = true;
    } else {
        $messege = stripslashes(trim($_POST['messege']));
    }

    if (trim($_POST['control']) != '31') {
        $controlError = __('Enter the correct answer to the question', 'theme_textdomain');
        $hasError = true;
    } else {
        $control = trim($_POST['control']);
    }

    if (!isset($hasError)) {
        $emailTo = get_option('admin_email');

        if (trim($_POST['subject']) != '') {
            $subject = trim($_POST['subject']);
        } else {
            $subject = '';
        }

        $body = __('From', 'theme_textdomain') . ": $name <$email>\n\n" . __('Messege', 'theme_textdomain') . ":\n$messege\n\n--\n" . __('This mail is sent via contact form on ', 'theme_textdomain') . get_bloginfo('name') . "\n" . get_bloginfo('url');
        $headers[] = "From: $name";
        $headers[] = "Reply-To: $email";
        /* $headers[] = "To: $emailTo"; */
        wp_mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
        unset($_POST['contactName'], $_POST['email'], $_POST['subject'], $_POST['messege'], $_POST['control']);
    }
}

Следующая часть кода отвечает за проверку результа отправки сообщения, и вывода соответствующего сообщения

if (isset($emailSent) && $emailSent == true) { ?>
    <div class="good">
        <p><?php _e('Thanks, your email was sent successfully', 'theme_textdomain'); ?></p>
    </div>
<?php } else { ?>
    <?php if (isset($hasError)) { ?>
        <p class="error"><?php _e('Sorry, an error occured', 'theme_textdomain'); ?><p>
        <?php }
    }

И соответственно оставшаяся часть исходного кода отвечает за вывод самой формы на экран

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
    <label><?php _e('Name*', 'theme_textdomain'); ?><br>
        <input type="text" size="40" name="contactName" id="contactName" value="<?php if (isset($_POST['contactName'])) echo $_POST['contactName']; ?>" class="contact-form required" />
        <?php if ($nameError != '') { ?>
            <span class="error"><?php echo $nameError; ?></span>
        <?php } ?>
    </label>
    <br>
    <label><?php _e('E-mail*', 'theme_textdomain'); ?><br>
        <input type="text" size="40" name="email" id="email" value="<?php if (isset($_POST['email'])) echo $_POST['email']; ?>" class="contact-form required email" />
        <?php if ($emailError != '') { ?> 
            <span class="error"><?php echo $emailError; ?></span>
        <?php } ?>
    </label>
    <br>
    <label><?php _e('Subject', 'theme_textdomain'); ?><br>
        <input type="text" size="40" name="subject" id="subject" value="<?php if (isset($_POST['subject'])) echo $_POST['subject']; ?>" class="contact-form required subject" />
    </label>
    <br>
    <label><?php _e('Message*', 'theme_textdomain'); ?><br>
        <textarea name="messege" rows="10" cols="70" id="messegeText" rows="20" cols="30" class="contact-form required messege"><?php if (isset($_POST['messege'])) {
            if (function_exists('stripslashes')) {
                echo stripslashes($_POST['messege']);
            } else {
                echo $_POST['messege'];
            }
        } ?></textarea>
<?php if ($commentError != '') { ?>
            <span class="error"><?php echo $commentError; ?></span>
        <?php } ?>
    </label>
    <br>

    <label><?php _e('Security question: How many days in January?', 'theme_textdomain'); ?><br>
        <input type="text" size="40" name="control" id="control" value="<?php if (isset($_POST['control'])) echo $_POST['control']; ?>" class="rcontact-form required question" />
<?php if ($controlError != '') { ?>
            <span class="error"><?php echo $controlError; ?></span>
<?php } ?>
    </label>
    <br>

    <input type="submit" value="<?php _e('Send', 'theme_textdomain'); ?>"></input>

    <input type="hidden" name="submitted" id="submitted" value="true" />
</form>

Код, который вы добавили в файл functions.php вашей темы добавляет возможность вызова требуемого кода посредством шорткода [contact].

Будьте осторожны! При смене темы оформления на вашем сайте, страница с формой обратной связи перестанет работать. Вам нужно будет вручную скопировать файл contact.php в директорию с новой темой и настроить перевод и оформление.

+18
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: WordPress, Хаки Wordpress теги: , . Прямая ссылка на запись.

Комментарии к записи Форма обратной связи для WordPress без плагинов: 23

  1. Claus сказал(а):

    Понравилась ваша статья. Буду пробовать ставить себе на блог этот скрипт, с WP только начал знакомство, до этого делал сайты на джумле. Хотел спросить у автора, можно ли осуществить чтобы полученное письмо приходило с IP адресом отправителя? Я знаю что нужно использовать переменную $_server ‘remote_addr’, но куда и как вставить в код понятия не имею. Очень полезная функция для борьбы с ботами и спамерами, засек IP спамера, добавил в бан лист и больше не достают.

  2. admin сказал(а):

    Можно получить переменную, добавить в форму новое скрытое поле и поместить ее туда. А при отправке сравнивать с черным списком. Только продумать где его хранить.

  3. Claus сказал(а):

    Я бы хотел просто в теле письма видеть IP отправителя, думаю что сравнивать с базой блэк листов не стоит, можно доставить плагин в который забивать ИП спамеров и все.

  4. max сказал(а):

    а где свою почту вводить?

  5. godex4 сказал(а):

    Спасибо, получилось все замечательно и перевел сразу же

  6. Михаил сказал(а):

    Почему-то не получается… создаю файл contact.php, в функции добавляю код, закачиваю файлик на сайт.. создаю страницы, вставляю на нее код…. Проверяю. обновляю страницу и ничего.. пустая страница.. может я не туда файл вставляю на сейте?… :( или что-то еще не учел…

  7. Александр сказал(а):

    Здравствуйте, подскажите, я руссифицировал данный код + добавил своё, но на email мне приходит только имя и емаил отправителя, а остальные денные не приходят, что делать?

    <?php
    if (isset($_POST['submitted'])) {
    if (trim($_POST['contactName']) === '') {
    $nameError = __('Пожалуйста, введите Вашу фамилию и имя', 'twentyten');
    $hasError = true;
    } else {
    $name = trim($_POST['contactName']);
    }

    if (trim($_POST['email']) === '') {
    $emailError = __('Пожалуйста, введите ваш email адрес', 'twentyten');
    $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
    $emailError = __('Вы ввели не правильный email адрес', 'twentyten');
    $hasError = true;
    } else {
    $email = trim($_POST['email']);
    }

    if (trim($_POST['contactTel']) === '') {
    $contactTelError = __('Пожалуйста, введите Ваш контактный телефон', 'twentyten');
    $hasError = true;
    } else {
    $contactTel = trim($_POST['contactTel']);
    }

    if (trim($_POST['Doctor']) === '') {
    $DoctorError = __('Пожалуйста, введите желаемого доктора', 'twentyten');
    $hasError = true;
    } else {
    $doctor = trim($_POST['Doctor']);
    }

    if (trim($_POST['Time']) === '') {
    $timeError = __('Пожалуйста, введите желаемое время', 'twentyten');
    $hasError = true;
    } else {
    $Time = trim($_POST['Time']);
    }

    if (trim($_POST['control']) != '31') {
    $controlError = __('Enter the correct answer to the question', 'twentyten');
    $hasError = true;
    } else {
    $control = trim($_POST['control']);
    }

    if (!isset($hasError)) {
    $emailTo = get_option('admin_email');

    $body = __('From', 'twentyten') . ": $name \n\n" .
    $headers[] = "From: $name";
    $headers[] = "Reply-To: $email";
    /* $headers[] = "To: $emailTo"; */
    wp_mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
    unset($_POST['contactName'], $_POST['email'], $_POST['contactTel'], $_POST['Doctor'], $_POST['Time'], $_POST['control']);
    }
    }
    ?>

    <form action="" id="contactForm" method="post">

    <input type="text" size="40" name="contactName" id="contactName" value="" class="contact-form required" />

    <input type="text" size="40" name="email" id="email" value="" class="contact-form required email" />

    <input type="text" size="40" name="contactTel" id="contactTel" value="" class="contact-form required contactTel" />

    <input type="text" size="40" name="Doctor" id="Doctor" value="" class="contact-form required Doctor" />

    <input type="text" size="40" name="Time" id="Time" value="" class="contact-form required Time" />

    <input type="text" size="40" name="control" id="control" value="" class="rcontact-form required question" />

    <input type="submit" value="">

  8. Дмитрий сказал(а):

    Сделал всё правильно, но сообщения вообще не приходят на e-mail

    • Doomster сказал(а):

      Попробуйте в строке wp_mail($emailTo, $subject, $body, $headers); заменить $emailTo на ‘Ваша_почта’
      Мне помогло и форма отработала нормально.

  9. Регина сказал(а):

    Здравствуйте! А как можно реализовать форму добавления постов с сайта?

  10. Лариса сказал(а):

    Здравствуйте! Скажите, можно ли реализовать каким-либо образом прикрепление файла к форме. Хотя бы в формате *.doc *.docx ?

  11. Лина сказал(а):

    Спасибо большое за интересную и важную статью. А как сделать форму обратной связи такую же, как я сейчас заполняю? Без темы, но с указанием сайта. Не судите строго. Я совсем недавно занимаюсь сайтостроением.

  12. Сергей сказал(а):

    Скажите, куда здесь нужно вставлять свой E-mail, на который будут приходить письма с этой формы.

    • admin сказал(а):

      Почта будет приходить на email администратора сайта, который задается в Консоли (Параметры->Общие)

  13. алексей сказал(а):

    Спасибо, перепробовал несколько форм, ваша отображается и отправляет наиболее корректно. Перевод выполнил быстро

  14. prinlella сказал(а):

    GT

  15. Елена сказал(а):

    Спасибо, всё получилось! Классная форма обратной связи — простая и в тоже время работает корректно, давно искала что-то похожее.

  16. Серж сказал(а):

    Здравствуйте, что означает: «…заменить все вхождения theme_textdomain на значение для вашей темы, и добавить перевод требуемых строк в файл локализации…»?

  17. Олег сказал(а):

    Здравствуйте!

    Очень интересное и полезное решение, но у меня вылезла странная проблема.
    Я вставляю шорт-код в конец страницы, туда, где я хочу увидеть форму. А она упрямо добавляется только в начале страницы.
    С чем это может быть связано и как это побороть?

    Заранее спасибо.

  18. Толя сказал(а):

    Доброго всем дня скажите пожалуйста как сделать что бы форма обратной связи всплывала атоматически после захода на сайт!? Заранее благодарен))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *