Создаем формы в WordPress с помощью плагина

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

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

Я веду к тому, что на разных сайтах эти механизмы могут отличаться друг от друга. Но, в большинстве своем, как правило, это различного рода, контактные формы, формы RSS подписки, формы голосований, формы обратной связи и многое другое. Но возникает вопрос: «А как все эти формы сделать?». Даже программисту это было бы не так-то просто, не говоря про людей, которые не знают программирование. Но, к счастью, в  WordPress есть специальный плагин, который хорошо справляется с созданием разнообразных форм, при этом программирование знать вообще и не требуется. И сейчас мы узнаем, как это делается.

Плагин для создания форм в WordPress

Далее, речь пойдет о плагине - Contact Form 7, скачивайте этот плагин и устанавливайте. После установки плагина, в консоли WordPress появится вкладка — Contact Form 7, откройте её.

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

Вот эта форма сделана с помощью плагина Contact Form 7, там даже валидация есть. Если кто-то не знает, валидация форм — это проверка формы на корректность входных данных. Если форма заполнена неправильно, то появится ошибка валидации и письмо не отправится. Чтобы создать новую форму, нам нужно перейти на страницу: Contact Form 7->Добавить новую.

Создание формы в WordPress

Нажимайте на кнопку Добавить новую и перед вами откроется страница с конструктором форм.

1. Сюда вводим заголовок формы. Заголовок будет отображаться на странице с формой. Кроме того, форму можно оставить и без заголовка.
2. Шаблон формы — это то, из скольких полей форма будет состоять, сколько кнопок будет и как они будут расположены.

Давайте создадим форму контактов в качестве наглядного примера. Я буду все пошагово описывать и показывать. Для начала, нам нужно определиться какие данные пользователь будет вводить в форму. Для меня достаточно, чтобы пользователь ввел свое имя, email, тему сообщения и само сообщение. Итак, форма должна состоять из следующих полей:

1. Имя пользователя (обязательное поле).
2. Email (обязательное поле).
3. Тема сообщения.
4. Текст сообщения (обязательное поле).

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

Генерация полей формы

1. Открываем генератор и выбираем текстовое поле.
2. Ставим галочку, так как имя является обязательным полем
3. Вводим имя данного тега, я ввел -name.
4. Максимальная длинна имени пользователя — 10 символов. Если имя будет больше 10 символов, появится ошибка валидации.
5. Сгенерированный тег копируем и вставляем в форму слева, под номером 6.
6. Вставили скопированный тег в форму.
7. Копируем тег имени и вставляем в шаблон письма. Письмо уже автоматически сгенерировано.

Все эти действия мы проделали, чтобы добавить строку для ввода имени пользователя. Точно такие же операции проделываем и для остальных полей.

В конце формы не забудьте добавить кнопку отправки письма, она под номером 5 на последнем скриншоте. Теги <p> я добавлял на свое усмотрение, чтобы все поля формы отображались с новой строки. Проверьте форму для адресата, все коды в ней должны совпадать с теми кодами, которые вы создали для формы.

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

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

Подключение формы к странице

Перейдите во вкладку Формы, тут вы найдете только что созданную форму.

Форма создана, осталось воспользоваться ею, для этого достаточно скопировать Код вставки и поместить его на страницу контактов. Мой код вставки:

[contact-form-7 404 "Not Found"]

По сути, это всего лишь шот-тег. Вы можете его поместить абсолютно в любое место на странице или сайте, даже в сайд-бар можно добавлять такую форму. Обратите внимание на то, как подсвечивается шот-тег в этой статье, это сделано с помощью плагина для вставки и подсветки кода - WP SyntaxHighlighter.

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

/wp-content/plugins/mypuzzle-word-search/get_ws_grid.php

300