Как добавить контактную форму и страницу на WordPress? (Краткое руководство)

Вам интересно, как добавить контактную форму в WordPress? Или вы хотите узнать, как добавить страницу контактов в WordPress? Если да, то это руководство для вас.

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

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

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

Итак, приступим!

Зачем нужна контактная форма и страница на вашем сайте?

Прежде чем перейти к шагам по добавлению контактной формы, давайте обсудим причины, по которым она вам нужна для сайта.

• Доступность: с помощью контактных форм ваши посетители могут легко связаться с вашим сайтом. Потому что не все клиенты будут проверять электронную почту или социальную платформу только для того, чтобы связаться с вашим сайтом.
• Простой сбор информации: вы можете сделать некоторую информацию обязательной для заполнения. Вы легко получите необходимую информацию от посетителей, такую ​​как имя, контактную информацию и т. д. Поскольку ее нельзя собрать с помощью старого метода, просто добавив свой адрес электронной почты. адрес на сайте.
• Защита от спама. Защищает вас от спама, который вызывает головную боль. Добавление адреса электронной почты — неэффективный метод, который делает его уязвимым для спамеров, и они могут легко рассылать спам-сообщения. Следовательно, чтобы избежать надоедливых спам-ботов, используйте контактные формы, чтобы посетители могли связаться с вами.
• Контроль над информацией: вы можете полностью контролировать информацию, собранную с помощью контактных форм через ваш сайт. Вместо того, чтобы обмениваться несколькими электронными письмами, что доставляет неудобства как пользователям, так и владельцам сайтов.
• Организованная информация: вы будете получать организованную информацию, так как большинство контактных форм включают в себя строки темы, имя получателя, сообщение и т. д.

С учетом сказанного, теперь давайте посмотрим, как сделать контактную форму и контактную страницу в WordPress.

Как лучше всего добавить контактную форму в WordPress?

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

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

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

Итак, вот некоторые из лучших плагинов контактной формы WordPress, которые вы можете использовать:

1. WPForms

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

Цены:

Хотя плагин WPForms можно использовать бесплатно и его можно загрузить с WordPress.org, вы можете перейти на премиум-версию. Премиум-версия дается как:

• Базовый план: 31,60 долларов США в год.
• План Плюс: $79,60/год
• Профессиональный план: 159,60 долларов США в год.
• Элитный план: 239,60 долларов США в год.

2. Контактная форма 7

Contact Form 7 — самый популярный бесплатный плагин контактной формы WordPress с более чем 5 миллионами активных установок. Это позволяет вам легко создавать и управлять несколькими контактными формами. Кроме того, он включает в себя другие функции, такие как CAPTCHA, интеграцию с фильтрацией спама Akismet и так далее.

Цены:

Плагин Contact Form 7 абсолютно бесплатен для использования и загрузки с WordPress.org.

3. Формы ниндзя

Ninja Forms — еще один потрясающий плагин для создания красивых форм WordPress. Вы можете легко перетаскивать различные поля формы в макеты строк и столбцов. Плагин помогает создавать не только одностраничные, но и многостраничные формы. Кроме того, он позволяет пользователям загружать файлы любого формата, такие как файл doc, pdf, лист excel и т. д.

Цены:

Плагин Ninja Forms предоставляет вам бесплатную версию, которую можно использовать на WordPress.org. Также есть премиум-версия. Тарифный план Pro версии:

• Персональный план: $49,50
• Профессиональный план: $ 99,50
• Агентский план: 249,50 долларов США.

Наша рекомендация — WPForms

Среди упомянутых плагинов для этого урока мы выбрали WPForms.

Потому что WPForms — самый удобный плагин для создания форм любого типа. Это также позволяет вам легко вставлять свои формы в сообщения блога, страницы, боковую панель, виджеты, нижний колонтитул и многое другое.

Не только это, но вы также можете получать мгновенные уведомления, когда вы получаете форму, отправленную клиентами.

Как создать контактную форму в WordPress?

Здесь мы рассмотрим пошаговый процесс создания контактной формы на вашем сайте WordPress с помощью плагина WPForms. Кроме того, вы можете использовать любую тему WordPress для своего сайта. Здесь мы будем использовать тему Astra.

Итак, давайте проверим шаги, указанные ниже:

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

Прежде всего, войдите в панель управления вашего сайта WordPress. Затем перейдите в меню « Плагины » и нажмите « Добавить новый ».

После этого вы можете увидеть панель поиска в правом верхнем углу панели инструментов. Там вам нужно ввести «WPForms», чтобы найти плагин для установки.

Найдя плагин, нажмите кнопку « Установить сейчас» .

После завершения установки вы увидите кнопку « Активировать ». Нажмите на нее, чтобы увидеть, работает ли плагин.

После активации плагина вы можете увидеть дополнительное меню «WPForms » на панели инструментов.

Шаг 2: Создайте контактную форму

Теперь вы сможете легко приступить к созданию контактной формы.

Прежде всего, перейдите в меню WPForms и нажмите « Добавить новый » на панели инструментов.

После нажатия кнопки «Добавить новую» вы будете перенаправлены на страницу установки . Вы можете написать название формы перед ее созданием. Там вы можете увидеть шаблоны и использовать их для создания различных типов форм. Кроме того, вы можете получить пустую форму для создания с нуля.

Итак, есть 2 метода: использование шаблона и создание его с нуля. Шаги для каждого метода приведены ниже. Теперь давайте начнем!

Способ 1: используйте шаблон

Вот шаги для создания контактной формы с использованием шаблона.

Найдя подходящий шаблон, при наведении на него можно увидеть кнопку «Использовать шаблон ». Нажмите здесь. Или перед использованием шаблона вы можете просто нажать кнопку «Просмотреть демо », чтобы увидеть, как выглядит форма.

Мы выбрали шаблон «Простая контактная форма », чтобы показать вам демонстрацию.

Нажав на шаблон, вы перейдете к редактированию страницы формы. Там вы можете увидеть раздел « Поля » с левой стороны, чтобы добавить любые поля с помощью меню «Добавить поля» . Вы можете увидеть стандартные поля и другие варианты полей, которые можно просто перетащить, чтобы добавить поля в шаблон.

Также вы можете настроить содержимое добавленных полей по своему усмотрению. Для этого перейдите в меню « Параметры поля », где вы можете легко изменить метку, форматы, описания и т. д.

Способ 2: создать форму с нуля

Чтобы создать форму с нуля, перейдите в раздел «Пустой бланк» . Затем наведите на него курсор и нажмите кнопку « Создать пустую форму ».

Теперь вы будете направлены в раздел редактирования «Пустой формы». Там вы можете увидеть стандартные параметры полей в разделе «Поля», воспользовавшись меню «Добавить поля ».

Просто перетащите необходимые поля, чтобы включить их в форму, как описано в «Способ 1: Использование шаблона». Вы можете вставить любое поле по вашему выбору. Кроме того, отредактируйте содержимое поля с помощью того же процесса, перейдя в « Параметры поля ».

Удалить и изменить порядок полей

После настройки содержимого формы любым из двух способов вы также можете удалить это поле. Если вы нажмете на любое поле, вы увидите значок удаления. Перейдите к значку « Удалить » и нажмите кнопку « ОК », чтобы удалить его.

Кроме того, чтобы изменить порядок поля, нажмите на определенное поле, где вы найдете « Перетащите, чтобы изменить порядок ». Вам просто нужно перетащить и расположить их в том порядке, в котором вы хотите.

После завершения редактирования формы в любом случае нажмите кнопку « Сохранить » в правом верхнем углу.

Шаг 3. Настройте параметры формы

Двигаясь дальше, следующим шагом будет настройка параметров формы, которую вы только что создали. Для этого перейдите в раздел « Настройки » в левой части экрана WPForms. Там вы найдете 3 параметра настройки: «Общие», «Уведомления» и «Подтверждения». Поскольку мы используем бесплатную версию, другие параметры доступны только для профессиональных пользователей.

Теперь давайте настроим все 3 опции.

Общий

Первый — общие настройки. Там вы можете настроить различные параметры, такие как имя формы, описание формы, текст кнопки отправки и т. д. Вы можете настроить это содержимое по своему усмотрению. Прежде всего, вам нужно « Включить защиту от спама », чтобы предотвратить спам-ботов и спам-сообщения.

Ниже вы также сможете настроить расширенные разделы, такие как добавление класса CSS для форм и кнопок и т. д. Вы можете просто оставить настройки по умолчанию, но не забудьте нажать кнопку « Сохранить » после их настройки.

Уведомления

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

По умолчанию есть « Включить уведомления », но вы можете отключить их, чтобы не получать уведомления.

Первый элемент для настройки — « Отправить на адрес электронной почты ». Уже есть смарт-теги, которые используют электронную почту администратора из ваших настроек WordPress. Однако вы также можете добавить другие адреса электронной почты получателей, используя запятые .

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

Двигаясь вперед, вы также можете настроить содержимое From Name . Аналогичным образом, From Email по умолчанию настроен на адрес электронной почты администратора, но вы можете просто ввести адрес электронной почты другого отправителя.

Другой элемент — « Адрес электронной почты для ответа », который используется в качестве получателя любых ответов. Таким образом, лучше установить элемент From Email на свой собственный адрес электронной почты или на адрес электронной почты администратора.

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

Подтверждения

Подтверждения — это последний раздел конфигурации. Здесь он позволяет настроить сообщения подтверждения для посетителей, отправивших свои формы.

Элемент Тип подтверждения дает вам 3 варианта: сообщение, показать страницу и перейти по URL-адресу.

Первое — это сообщение , которое отображается, как только пользователи отправляют свою форму. Вы также можете настроить содержимое сообщения в элементе « Сообщение о подтверждении ».

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

Последний вариант — « Перейти к URL» . Это перенаправит ваших посетителей на любой URL-адрес, который вы ввели в URL-адрес перенаправления подтверждения . Просто добавьте любую ссылку на страницы, которые вы хотите, чтобы ваши посетители перенаправляли.

Шаг 4: Сохраните контактную форму

Наконец, нажмите кнопку « Предварительный просмотр », чтобы увидеть, как ваша форма выглядит для ваших пользователей. Если вы считаете, что ваша форма идеальна, просто нажмите кнопку « Сохранить ».

Как добавить страницу контактов в WordPress?

После того, как вы закончили создание формы, давайте посмотрим, как добавить форму на вашу страницу. Итак, начнем!

Шаг 1: Создайте новую страницу на своем сайте WordPress

Прежде всего, вам нужно создать новую страницу на вашем сайте для добавления форм. Итак, перейдите на панель инструментов, нажмите « Страницы » и перейдите к « Добавить новую », чтобы добавить новую страницу на свой веб-сайт.

После этого вы попадете в раздел редактирования страницы.

Шаг 2: Добавьте свою контактную форму на страницу и опубликуйте

После создания новой страницы добавьте заголовок для своей страницы, как мы написали: «Свяжитесь с нами». Теперь нажмите кнопку + в поле «Введите/выберите блок». Затем вы увидите строку поиска, где вам нужно ввести «WPForms».

Найдя WPForms, щелкните по нему, и в текстовом редакторе появится мастер WPForms. Теперь нажмите «Выбрать форму» , где вы получите варианты форм, которые вы создали. Выберите любую из форм, которые вы хотите встроить на свою страницу, и форма появится в вашем текстовом редакторе.

После того, как вы добавили форму на свою страницу, нажмите кнопку « Опубликовать » в правом верхнем углу, чтобы опубликовать свою контактную страницу.

Шаг 3. Отобразите ссылку на страницу контактов на своем сайте.

Теперь, когда вы опубликовали свою страницу «Свяжитесь с нами», вы можете не увидеть ссылку на страницу на главной странице веб-сайта. Для этого вам нужно добавить ссылку на страницу «Свяжитесь с нами» в видимом месте, например в меню, нижнем колонтитуле или боковой панели.

Итак, давайте посмотрим, как его добавить.

Добавление ссылки на страницу контактов в меню

Для этого войдите в панель управления, затем перейдите в « Внешний вид»> «Меню» . Там вы увидите структуру меню с правой стороны. Он содержит форму для создания нового меню.

Поскольку это меню заголовка, вам нужно указать имя меню по вашему выбору, здесь мы написали «Основное меню».

После этого установите флажок « Основное меню », которое находится в настройках меню . Затем нажмите кнопку « Создать меню ».

После этого вы увидите раздел « Страница » с левой стороны, нажмите «Просмотреть все». Там вы увидите страницу «Свяжитесь с нами », которую вы недавно опубликовали, просто отметьте ее. Вы также можете добавить некоторые пользовательские ссылки или любые другие страницы, которые вы хотите иметь в своем меню. Затем нажмите кнопку « Добавить в меню ».

Наконец, нажмите кнопку « Сохранить меню » после добавления страницы контактов в правом нижнем углу.

Теперь перейдите к кнопке «Управление с помощью Live Preview» в верхней части раздела меню. Вы будете перенаправлены в раздел живого редактирования.

Здесь вы увидите пункт меню « Свяжитесь с нами» в разделе заголовка. Если вы нажмете на это меню, вы перейдете на ссылку страницы « Контакты» .

Добавление контактной формы на боковую панель

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

Нажмите кнопку со стрелкой назад в меню . Вы увидите множество параметров, которые можно настроить и отредактировать. Просто нажмите на опцию виджета .

Теперь вы можете увидеть главную боковую панель , нажмите на нее.

Там вы увидите кнопку + , нажмите на нее и найдите WPForms. Найдя его, нажмите на виджет WPForms.

И выберите нужную форму на боковой панели. Теперь все готово.

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

Добавление ссылки на страницу контактов в нижнем колонтитуле

Добавление ссылки на страницу контактов в нижний колонтитул аналогично добавлению в меню верхнего колонтитула. Перейдите в раздел « Внешний вид » и нажмите « Меню » на панели инструментов.

Там вы можете увидеть структуру меню с правой стороны. Дайте имя меню по вашему выбору, хотя мы написали «Важные ссылки». Теперь поставьте галочку в меню нижнего колонтитула и нажмите « Создать меню ».

Перейдите в раздел « Страницы », отметьте галочкой страницу « Контакты » и нажмите « Добавить в меню ».

Кроме того, вы можете добавить некоторые пользовательские ссылки или другие страницы веб-сайта в меню нижнего колонтитула. После этого нажмите на кнопку Сохранить меню . Затем нажмите «Управление с помощью Live Preview» .

В разделе нижнего колонтитула вы можете увидеть значок редактирования , нажмите на него, чтобы добавить меню нижнего колонтитула. Просто нажмите на раздел, вы хотите отобразить свои ссылки. Теперь среди трех появившихся строк вы увидите 1 строку и 1 столбец с надписью «Авторское право».

Вы можете просто нажать на раздел Авторские права . Сбоку слева вы можете увидеть столбец в разделе « Общие ». Теперь нажмите на столбец и установите его в 2 столбца. Вернувшись в нижний колонтитул, вы можете увидеть 2 столбца.

Теперь нажмите на второй столбец, где вы можете увидеть кнопку + . Как только вы нажмете, вы увидите несколько вариантов. Среди них нажмите на меню нижнего колонтитула , чтобы добавить свои ссылки. После этого нажмите кнопку « Скрыть », которая находится в правом нижнем углу. Теперь вы можете увидеть ссылку на свою контактную страницу в нижнем колонтитуле.

После добавления ссылок на контактную страницу или контактную форму не забудьте нажать кнопку « Опубликовать », которая находится в верхней левой части страницы редактирования в реальном времени.

Шаг 4. Просмотрите свою контактную страницу и проверьте, работает ли она

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

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

Вы также можете проверить, как работает ваша контактная форма. Для этого заполните форму и нажмите кнопку « Отправить ». После этого он показывает вам сообщение «спасибо» или контент, который вы настроили при создании формы.

Таким образом, вы все сделали с добавлением контактной формы и страниц.

Заключение

Это все люди! Мы подошли к концу нашей статьи.

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

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

Вам также может понравиться наша статья о том, как создать блог и как добавить кнопки «Поделиться» в социальных сетях в WordPress.

Не забудьте подписаться на нас в Facebook и Twitter, чтобы получать больше полезных статей.