Как создать простую контактную форму для WordPress

Создаете ли вы простенький блог, большой корпоративный сайт или проект с вашим портфолио на основе WordPress, страница обратной связи почти всегда — необходимый элемент. И всегда лучше использовать для обратной связи публичную форму контактов вместо того, чтобы публично делиться вашим адресом электронной почты (уж очень такие адреса любят спам-боты).

Конечно, существует множество отличных готовых форм обратной связи на основе плагинов для WordPress. Но зачем "грузить" свой сайт громоздкими плагинами и дополнительными запросами к БД, если можно на основе небольшого кода написать собственную простую форму обратной связи?

| Скачать исходники |

Преимущества создания собственной контактной формы

Плагины — это круто, но многие из них отличаются избыточной функциональностью, которая вам не нужна, но они будут перегружать вашу БД и сайт. Происходить это будет из-за исполнения дополнительного PHP-кода, добавления таблиц стилей CSS и файлов JS в заглавной части страницы... и в какой-то момент вы просто захотите держаться подальше от всевозможных плагинов, какими бы классными они ни были.

Если у вас нет навыков кодера, то вынужден признать: у вас немного связаны руки, и придется использовать один из существующих плагинов. Но если вы знакомы с разработкой под WordPress на любом уровне (будем исходить из предположения, что у вас такие навыки есть, раз вы все еще читаете эту статью), то вам стоит рассмотреть разработку собственной формы для сайта. Вот какие преимущества несет такое решение:

• Оптимизация — использование избыточного кода, особенного того, который вам не нужен, ведет к достижению граничных допустимых лимитов вашего хостера. И даже если у вас есть большой запас ресурсов на сервере, оптимизация всегда пойдет на пользу вашему сайту.
• Чистота кода — помимо оптимизации работы самого сервера, "чистый" код станет основным фактором в быстроте загрузки страниц сайта. Написание собственного кода дает вам преимущество: вы используете только то, что нужно именно вам, и нет нужды загружать множество "мусора", который отвечает за довольно простую функциональность на вашем сайте. Также это положительно сказывается на SEO.
• Удовлетворение от полного контроля — никогда не стоит недооценивать возможности полного контроля. Полноценный контроль над сайтом подтолкнет вас стать более увлеченным разработчиком / дизайнером, чем тогда, когда вы просто используете набор готового кода. И даже если вам предоставляется код в готовом виде, всегда лучше "перебрать" его вручную, чем просто "скопипастить". Набор кода вручную дает вам понимание того, как работает плагин.

Перейдем к коду

Ну вот, довольно болтовни: давайте займемся написанием кода! Нам не придется разбираться с большим объемом кода и затрачивать уйму усилий, так что даже если вы — новичок в PHP и / или WordPress, приведенный далее код вы поймете без проблем, следуя моим инструкциям относительно тех частей кода, который вы сами не можете "распознать".

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

<?php
/*
Plugin Name: Simple Contact Form Shortcode
Plugin URI: http://wp.tutsplus.com/author/barisunver/
Description: A simple contact form for simple needs. Usage: <code>[contact email="your@email.address"]</code>
Version: 1.0
Author: Barış Ünver
Author URI: http://beyn.org/
*/
// This line of comment holds the place of the amazingly simple code we're going to write. So you don't really need to read this.
?>

Небольшая вспомогательная функция: get_the_ip()

Как вы можете догадаться из названия функции, мы с ее помощью получаем реальный IP-адрес пользователя, даже если пользователь этот "пришел" к нам через прокси-сервер. Решение, конечно, не 100% для защиты и получения сведений о пользователе, но тем не менее, кое-какое представление дополнительное о пользователе мы получим.

В основном мы будем использовать и другие переменные для $_SERVER: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP и REMOTE_ADDR. А вот и сам код:

function wptuts_get_the_ip() {
    if (isset($_SERVER["HTTP_X_FORWARDED_FOR"])) {
        return $_SERVER["HTTP_X_FORWARDED_FOR"];
    }
    elseif (isset($_SERVER["HTTP_CLIENT_IP"])) {
        return $_SERVER["HTTP_CLIENT_IP"];
    }
    else {
        return $_SERVER["REMOTE_ADDR"];
    }
}

Шорт-код

Шорт-код мы разделим на три секции, чтобы вам было понятнее, но для начала надо не забыть открыть и закрыть функцию в шорт-коде:

function wptuts_contact_form_sc( $atts ) {
    // This line of comment, too, holds the place of the brilliant yet simple shortcode that creates our contact form. And yet you're still wasting your time to read this comment. Bravo.
}
add_shortcode( 'contact', 'wptuts_contact_form_sc' );

Атрибуты нашего шорт-кода

Нам надо установить несколько атрибутов, чтобы шорт-код был гибким и при этом сохранил свою легкость в работе. Вот они, эти атрибуты:

extract( shortcode_atts( array(
    // if you don't provide an e-mail address, the shortcode will pick the e-mail address of the admin:
    "email" => get_bloginfo( 'admin_email' ),
    "subject" => "",
    "label_name" => "Your Name",
    "label_email" => "Your E-mail Address",
    "label_subject" => "Subject",
    "label_message" => "Your Message",
    "label_submit" => "Submit",
    // the error message when at least one of the required fields are empty:
    "error_empty" => "Please fill in all the required fields.",
    // the error message when the e-mail address is not valid:
    "error_noemail" => "Please enter a valid e-mail address.",
    // and the success message when the e-mail is sent:
    "success" => "Thanks for your e-mail! We'll get back to you as soon as we can."
), $atts ) );

Помните, что мы будем ссылаться на эти атрибуты в нашем коде как на переменные с именем атрибута (например: $label_submit).

Отправка электронной почты

Это — самая важная часть функции, которая отвечает за отправку электронной почты:

// if the <form> element is POSTed, run the following code
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
    $error = false;
    // set the "required fields" to check
    $required_fields = array( "your_name", "email", "message", "subject" );
    // this part fetches everything that has been POSTed, sanitizes them and lets us use them as $form_data['subject']
    foreach ( $_POST as $field => $value ) {
        if ( get_magic_quotes_gpc() ) {
            $value = stripslashes( $value );
        }
        $form_data[$field] = strip_tags( $value );
    }
    // if the required fields are empty, switch $error to TRUE and set the result text to the shortcode attribute named 'error_empty'
    foreach ( $required_fields as $required_field ) {
        $value = trim( $form_data[$required_field] );
        if ( empty( $value ) ) {
            $error = true;
            $result = $error_empty;
        }
    }
    // and if the e-mail is not valid, switch $error to TRUE and set the result text to the shortcode attribute named 'error_noemail'
    if ( ! is_email( $form_data['email'] ) ) {
        $error = true;
        $result = $error_noemail;
    }
    if ( $error == false ) {
        $email_subject = "[" . get_bloginfo( 'name' ) . "] " . $form_data['subject'];
        $email_message = $form_data['message'] . "nnIP: " . wptuts_get_the_ip();
        $headers  = "From: " . $form_data['name'] . " <" . $form_data['email'] . ">n";
        $headers .= "Content-Type: text/plain; charset=UTF-8n";
        $headers .= "Content-Transfer-Encoding: 8bitn";
        wp_mail( $email, $email_subject, $email_message, $headers );
        $result = $success;
        $sent = true;
    }
    // but if $error is still FALSE, put together the POSTed variables and send the e-mail!
    if ( $error == false ) {
        // get the website's name and puts it in front of the subject
        $email_subject = "[" . get_bloginfo( 'name' ) . "] " . $form_data['subject'];
        // get the message from the form and add the IP address of the user below it
        $email_message = $form_data['message'] . "nnIP: " . wptuts_get_the_ip();
        // set the e-mail headers with the user's name, e-mail address and character encoding
        $headers  = "From: " . $form_data['your_name'] . " <" . $form_data['email'] . ">n";
        $headers .= "Content-Type: text/plain; charset=UTF-8n";
        $headers .= "Content-Transfer-Encoding: 8bitn";
        // send the e-mail with the shortcode attribute named 'email' and the POSTed data
        wp_mail( $email, $email_subject, $email_message, $headers );
        // and set the result text to the shortcode attribute named 'success'
        $result = $success;
        // ...and switch the $sent variable to TRUE
        $sent = true;
    }
}

Контактная форма

Эта часть работы не менее важна, чем предыдущая. В конце концов, как предыдущий код должен отправить вам электронное письмо, если не будет самой формы для его отправки? :)

// if there's no $result text (meaning there's no error or success, meaning the user just opened the page and did nothing) there's no need to show the $info variable
if ( $result != "" ) {
    $info = '<div class="info">' . $result . '</div>';
}
// anyways, let's build the form! (remember that we're using shortcode attributes as variables with their names)
$email_form = '<form class="contact-form" method="post" action="' . get_permalink() . '">
    <div>
        <label for="cf_name">' . $label_name . ':</label>
        <input type="text" name="your_name" id="cf_name" size="50" maxlength="50" value="' . $form_data['your_name'] . '" />
    </div>
    <div>
        <label for="cf_email">' . $label_email . ':</label>
        <input type="text" name="email" id="cf_email" size="50" maxlength="50" value="' . $form_data['email'] . '" />
    </div>
    <div>
        <label for="cf_subject">' . $label_subject . ':</label>
        <input type="text" name="subject" id="cf_subject" size="50" maxlength="50" value="' . $subject . $form_data['subject'] . '" />
    </div>
    <div>
        <label for="cf_message">' . $label_message . ':</label>
        <textarea name="message" id="cf_message" cols="50" rows="15">' . $form_data['message'] . '</textarea>
    </div>
    <div>
        <input type="submit" value="' . $label_submit . '" name="send" id="cf_send" />
    </div>
</form>';

Подсказка: Если вы внимательно присмотритесь к HTML-коду в форме, то возможно заметите переменную $subject. Помните атрибут шорт-кода ‘subject’ с пустым значением по умолчанию? Это значит, что вы можете использовать шорт-код, подставив в атрибут нужное вам значение, например: [contact subject="Job application"]

Добавление return в шорт-код

Заключительная часть работы довольно проста. После отправки пользователь должен увидеть сообщение о том, что письмо успешно отправлено, или же в случае неудачи — уведомление об ошибке. Вот и сам код:

if ( $sent == true ) {
    return $info;
} else {
    return $info . $email_form;
}

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

return $info . $email_form;

Код CSS

Конечно, сам по себе код не выглядит совершенным. Добавим немного шарма за счет CSS. Добавьте следующие строки в код CSS в вашем файле style.css:

.contact-form label, .contact-form input, .contact-form textarea { display: block; margin: 10px 0; }
.contact-form label { font-size: larger; }
.contact-form input { padding: 5px; }
#cf_message { width: 90%; padding: 10px; }
#cf_send { padding: 5px 10px; }

Если вы сделали все правильно, то увидите что-то похожее на то, что изображено на картинке ниже:

Поздравляем: вы только что сделали свою собственную форму контактов!

Заключение

Эта простая форма обратной связи подойдет для большинства веб-сайтов, но если вы хотите добавить в нее дополнительные поля, то просто отредактируйте ее и добавьте переменные $form_data['name_of_the_new_field'] внутри переменной $email_message (и возможно, еще надо будет добавить имя поля в массиве $required_fields).

Если у вас есть мысли насчет того, как улучшить приведенный в этом посте шорт-код, или вы хотите показать, что у вас получилось на основе данной формы, поделитесь с нами своими мыслями и ссылками в комментариях.

Источник: WP.tutsplus.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/