Як створити просту контактну форму для 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-коду у формі, можливо помітите змінну $тема. Пам'ятайте атрибут шорт-коду 'тема' з порожнім значенням за промовчанням? Це означає, що ви можете використовувати шорт-код, підставивши в атрибут потрібне вам значення, наприклад: [contact subject="Job application"]

Додавання повертати у шорт-код

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

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/