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

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

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

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

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

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

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

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

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

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

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

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

  1. Создаем новый файл contact.php
  2. Открываем его в своем любимом текстовом редакторе и копируем в него следующий код
<?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>
     
<?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>			

Сохраняем файл contact.php и загружаем его в папку с файлами вашей темы
Открываем для редактирования файл functions.php и добавляем в него следующий код

/* Shortcode contact */

function contact_shortcode($content = null) {
	return  get_template_part('contact');
	}
add_shortcode('contact', 'contact_shortcode');

Сохраняем документ

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

Как добавить форму обратной связи на страницу 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>
         
    <?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 в директорию с новой темой и настроить перевод и оформление.
Источник populyarno.com

Запись опубликована в рубрике *HTTP, *Mail, *Web, WordPress. Добавьте в закладки постоянную ссылку.

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

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

Я не спамер This plugin created by Alexei91