Плагин для контактных форм WordPress: Contact Form 7 (добавление онлайн-формы)

Независимо от того, есть ли у вас личный блог, корпоративный сайт или платформа электронной коммерции, вам нужна “контактная форма” - то, что позволит посетителям легко написать вам (например, задать вопрос, отправить запрос, оставить отзыв о предложениях).Контактная форма 7 Это старейший плагин форм WordPress (установленная база более 5 миллионов), бесплатный, гибкий и мощный, поможет вам быстро создать разнообразные формы (контактная форма, форма регистрации, форма обратной связи и т.д.), новичкам достаточно просто настроить, чтобы использовать.

I. Зачем мне нужна контактная форма? Разве я не могу просто указать свой e-mail/номер телефона?

Размещение прямого почтового ящика или телефонного номера может показаться простым, но у него есть 3 очевидных недостатка:

• Посетители доставляют слишком много хлопот: Чтобы отправить письмо, нужно скопировать адрес электронной почты и открыть почтовый клиент, а многие люди бросают это дело на полпути;
• Уязвимость для спама: Публичные адреса электронной почты просматриваются ботами и получают много спама;
• Информационные нарушения: Посетители могут упустить ключевую информацию (например, не указать свои потребности при запросе о продукте) и ответить неэффективно.

И контактная форма решает эти проблемы:

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

Установка Contact Form 7 и создание первой формы

Шаг 1: Установите и активируйте плагин

1. Backend [Plugin] → [Install Plugin], найдите “Contact Form 7”;
2. Нажмите [Установить сейчас] и нажмите [Активировать], когда закончите.
3. После активации в левом меню появится пункт [Контакт].

Шаг 2: Создайте контактную форму по умолчанию (рекомендуется для новичков, прямо из коробки)

Contact Form 7 поставляется с предустановленным шаблоном контактной формы с общими полями (имя, email, тема, содержание сообщения), который может быть использован непосредственно новичками:

1. Нажмите [Контакт] → [Добавить новый] слева, чтобы перейти на страницу редактирования формы;
2. Плагин автоматически генерирует название формы (например, “Contact Form 1”), которое можно изменить на “Website Contact Form” (для удобства идентификации);
3. Нижняя область “Form” - это код формы (вам не нужно знать код, просто сохраните значение по умолчанию), которая по умолчанию содержит 4 поля:
   • Имя (текстовое поле);
   • Электронная почта (электронный почтовый ящик с проверкой, убедитесь, что он правильно отформатирован);
   • Тема (текстовое поле для быстрого просмотра темы сообщения);
   • Сообщение (многострочное текстовое поле, заполните его подробно).

Шаг 3: Настройка “Обратной связи” и “Получения электронной почты” после отправки формы”

Недостаточно иметь возможность отправить форму, нужно ее настроить: какие оповещения появляются у посетителей после отправки формы? На какой адрес электронной почты отправляется сообщение?

1. установите адрес получения “Почты” (ключ! Убедитесь, что вы сможете получить сообщение)

• Прокрутите вниз до области “Почта” на странице редактирования формы;
• Найдите поле ввода “Кому” и введите свой обычный адрес электронной почты (например. contact@你的域名.com）；
• Остальные параметры оставлены по умолчанию (“От” “Тема” и т. д. автоматически заполняются содержимым формы).

2. настройка подсказки “сообщение” (чтобы сообщить посетителям о результате их отправки)

• Прокрутите вниз до области “Сообщения”, чтобы настроить текст оповещения:
  • “Отправить успешное сообщение”: например, “Спасибо за ваше сообщение, мы ответим как можно скорее!” ;
  • “Сообщение об ошибке проверки”: например, “Пожалуйста, проверьте правильность заполнения (например, формат почтового ящика)”.

Шаг 4: Сохраните форму и получите “короткий код”

1. Нажмите [Сохранить] в правом верхнем углу страницы, и создание формы будет завершено;
2. После сохранения в верхней части страницы появится “шорткод” (например. [contact-form-7 id="123" title="网站联系表单"]), скопируйте этот код (он будет использоваться позже).

Добавьте форму на страницу “Свяжитесь с нами”.

После того как форма создана, ее нужно разместить на странице “Контакты” (или любой другой нужной странице) сайта, чтобы посетители могли ее увидеть:

1. Перейдите в раздел [Страницы] → [Добавить новую] (или отредактируйте существующую страницу “Контакты”);
2. В редакторе установите курсор в то место, где должна отображаться форма;
3. Вставьте короткий код, который вы только что скопировали (например. [contact-form-7 id="123" title="网站联系表单"]）；
4. Нажмите [Опубликовать] или [Обновить] и зайдите на страницу, чтобы увидеть форму.

IV. Настраиваемые формы: добавление/удаление полей (настраивается по мере необходимости)

Если форма по умолчанию не соответствует требованиям (например, вам нужно добавить поле “Телефон” “Название компании”), вы можете настроить ее и изменить:

Пример: Добавление поля “Телефон” в форму

1. Перейдите в раздел [Контакт], найдите созданную вами форму и нажмите [Изменить];
2. В области редактирования “Форма” найдите поле “Почтовый ящик”, нажмите [Вставить ярлык] → [Текст] на панели инструментов;
3. Во всплывающем окне:
   • “Имя” Заполните “tel” (внутренняя идентификация, нижний регистр английского языка);
   • “Label” Заполните “Phone” (текст для отображения посетителям);
   • Поставьте галочку в поле “Обязательные поля” (убедитесь, что посетителям придется их заполнять);
   • При нажатии на кнопку [Вставить тег] автоматически генерируется строка кода (например. [text* tel placeholder "请输入您的电话"]）；
4. Нажмите [Сохранить], чтобы обновить страницу, и в форме появится дополнительное поле “Телефон”.

Общие типы полей (по запросу)

• текстовое поле: Подходит для короткого содержания, такого как имя, номер телефона, название компании и т.д;
• почтовый ящик: Специально для заполнения почтовых ящиков, которые будут автоматически проверять формат;
• textarea: Подходит для заполнения длинного контента (например, сообщений, описаний потребностей);
• выпадающее меню: Подходит для предоставления посетителям возможности выбора опций (например, “Тип запроса: запрос продукта / вопрос о послепродажном обслуживании / переговоры о сотрудничестве”);
• флажок: Уместно отметить более одного варианта (например, “Интересующие вас услуги: разработка веб-сайта / SEO-оптимизация / брендинг”).

V. Часто задаваемые вопросы для новичков

1. Не получаете письма после отправки формы?Это самая распространенная проблема, которую нужно решить:
   • Убедитесь, что почтовый ящик “Кому” в настройках “Почты” указан правильно (не вводите неправильный!). .;
   • Проверьте папку “Спам” вашего почтового ящика (письма с формами могут быть ошибочно определены как спам);
   • Если вы все еще не можете получить его, установите плагин “WP Mail SMTP” (исправляет функцию отправки почты WordPress, новички могут просто следовать мастеру настройки плагина).
2. Как изменить стиль (например, шрифт, цвет, ширину) формы?Contact Form 7 сам по себе не поддерживает визуальное изменение стиля и требует простого CSS-кода:
   • Метод 1: Найдите “Custom CSS” в настройках темы (обычно в разделе [Внешний вид] → [Настроить] → [Extra CSS]); Метод 2: Пример: сделайте ширину поля ввода 80%, добавьте код:
   .wpcf7 input, .wpcf7 textarea { width: 80%; padding: 10px; margin-bottom: 15px; }
3. (Если вы не знаете, как писать CSS, вы можете поискать “Contact Form 7 Style Code” и скопировать существующий код, чтобы изменить его).
4. Можно ли автоматически сохранить форму в бэкенде после отправки?Не поддерживается в бесплатной версии, отправленные сообщения отправляются только по электронной почте. Если вам нужно сохранить их в бэкенде (чтобы предотвратить потерю писем), вы можете установить плагин “Flamingo” (плагин-компаньон, разработанный автором Contact Form 7 и предназначенный для сохранения данных формы).
5. Как предотвратить рассылку спама ботами?Включите функцию “Антиспам”:
   • Отредактируйте форму и добавьте строку кода в область “Формы”. [recaptcha](Google CAPTCHA);
   • Перейдите в раздел [Контакт] → [Интеграция] и следуйте подсказкам для подключения к Google reCAPTCHA (вам нужно зарегистрировать бесплатный ключ API, просто следуйте указаниям мастера).

Итог: контактные формы - это “последняя миля к конверсии”.”

Для посетителей контактная форма - “самый быстрый способ выразить свои потребности”, для операторов сайтов - “важный канал для привлечения потенциальных клиентов”.

Contact Form 7, несмотря на то, что вам придется вручную писать шорткоды и менять поля, является бесплатным, гибким и стабильным, и после того, как вы освоите основы, вы сможете удовлетворить самые разные потребности в формах - от простых до сложных. Помните: форма не должна быть слишком сложной (чем больше полей, тем больше вероятность, что посетители откажутся от нее), сохранить основную информацию (имя, контактные данные, потребности) можно, чтобы порог общения был сведен к минимуму.