Статьи

Создание простой контактной формы для простых потребностей

Ноябрь 30, 2018

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

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

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

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

  • Оптимизация — Использование слишком большого количества кода, особенно лишнего кода, который вам не нужен, в некоторых случаях может даже расширить пределы вашего хостинг-плана. Но даже если у вас достаточно ресурсов на сервере, оптимизация всегда полезна для здоровья вашего сайта.
  • Чистота — кроме работоспособности сервера, более чистый код может быть огромным преимуществом для скорости загрузки и анализа вашего сайта. Кодируя / взламывая самостоятельно, вы просто используете то, что вам нужно, и вам не нужно загружать тонны вещей, чтобы использовать простую функциональность на вашем сайте. Знаете, это даже хорошо для SEO.
  • Радость от взятия контроля — Вы никогда не должны недооценивать силу вызова. Контроль над вашим сайтом определенно делает вас более увлеченным дизайнером / разработчиком, чем использование готового кода. Вот почему, хотя мы предоставляем полный код для тех, кто не хочет, я лично считаю, что вам не следует копировать / вставлять код здесь, а писать его самостоятельно. Даже если вы наберете точно такой же код, вы сможете увидеть, как работает плагин, и вы почувствуете радость от получения контроля. Шутки в сторону.

Код

Ладно, хватит болтовни — давай начнем кодировать! Мы не будем иметь дело с огромным количеством кода или любой другой тяжелой работой здесь, поэтому даже если вы новичок в PHP и / или WordPress, вы можете понять код, следуя моим указаниям и исследуя любую часть код, который вы не узнаете.

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

01
02
03
04
05
06
07
08
09
10
11
12
13
<?php
/*
Plugin Name: Simple Contact Form Shortcode
Plugin URI: https://wp.tutsplus.com/author/barisunver/
Description: A simple contact form for simple needs.
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.
 
?>

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

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

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

01
02
03
04
05
06
07
08
09
10
11
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»];
    }
}

Шорткод

Если вы следите за моими постами здесь на Wptuts + , вы знаете, что я очень люблю WordPress ‘Shortcode API.

Я собираюсь разделить шорткод на 3 раздела, чтобы лучше объяснить его, но давайте не забывать сначала открыть и закрыть функцию шорткода:

1
2
3
4
5
6
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.
 
}
add_shortcode( ‘contact’, ‘wptuts_contact_form_sc’ );

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

Нам нужно установить несколько атрибутов, чтобы оставаться гибкими, оставаясь легкими. Вот десять:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
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 ).

E-Mail E-Mail

Это самая важная часть функции, поэтому я пойду дальше и объясню код внутри кода со строками комментария:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// 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 = «[» .
        $email_message = $form_data[‘message’] .
        $headers = «From: » .
        $headers .= «Content-Type: text/plain; charset=UTF-8\n»;
        $headers .= «Content-Transfer-Encoding: 8bit\n»;
        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 the message from the form and add the IP address of the user below it
        $email_message = $form_data[‘message’] .
        // set the e-mail headers with the user’s name, e-mail address and character encoding
        $headers = «From: » .
        $headers .= «Content-Type: text/plain; charset=UTF-8\n»;
        $headers .= «Content-Transfer-Encoding: 8bit\n»;
        // 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;
    }
}

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 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»>’ .
}
// anyways, let’s build the form!
$email_form = ‘<form class=»contact-form» method=»post» action=»‘ . get_permalink() . ‘»>
    <div>
        <label for=»cf_name»>’ .
        <input type=»text» name=»your_name» id=»cf_name» size=»50″ maxlength=»50″ value=»‘ . $form_data[‘your_name’] . ‘» />
    </div>
    <div>
        <label for=»cf_email»>’ .
        <input type=»text» name=»email» id=»cf_email» size=»50″ maxlength=»50″ value=»‘ . $form_data[’email’] . ‘» />
    </div>
    <div>
        <label for=»cf_subject»>’ .
        <input type=»text» name=»subject» id=»cf_subject» size=»50″ maxlength=»50″ value=»‘ . $subject . $form_data[‘subject’] . ‘» />
    </div>
    <div>
        <label for=»cf_message»>’ .
        <textarea name=»message» id=»cf_message» cols=»50″ rows=»15″>’ .
    </div>
    <div>
        <input type=»submit» value=»‘ . $label_submit . ‘» name=»send» id=»cf_send» />
    </div>
</form>’;

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

return шорткода

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

1
2
3
4
5
if ( $sent == true ) {
    return $info;
} else {
    return $info .
}

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

1
return $info .

CSS

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

1
2
3
4
5
.contact-form label, .contact-form input, .contact-form textarea { display: block;
.contact-form label { font-size: larger;
.contact-form input { padding: 5px;
#cf_message { width: 90%;
#cf_send { padding: 5px 10px;

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

Скриншот нашей контактной формы

Поздравляем, вы только что создали свой собственный контактный форму шорткод

Вывод

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

Если у вас есть идеи о том, как улучшить этот код или показать страницы своего сайта, где вы его использовали, поделитесь с нами своим комментарием ниже!

42
Share: