Вы хотите добавить контактную форму на свой сайт WordPress? Каждый веб-сайт нуждается в контактной форме, чтобы люди могли связаться с вами по поводу ваших продуктов и услуг. В этом уроке по WordPress мы покажем вам, как создать контактную форму в WordPress (пошаговая инструкция), не затрагивая ни одной строки кода.^
Вы можете быть удивлены, зачем мне нужна контактная форма? Разве я не могу просто добавить свой адрес электронной почты на мой сайт, чтобы люди могли написать мне?
Это очень распространенный вопрос для начинающих, потому что они боятся, что добавление контактной формы требует знания кода. Правда в том, что вам не нужно знать какой-либо код. Это пошаговое руководство по добавлению контактной формы написано для начинающих.
Ниже приведены три основные причины, по которым контактная форма лучше, чем вставка вашего адреса электронной почты на страницу.
Защита от спама – спам-боты регулярно очищают веб-сайты для метки адреса электронной почты mailto :. Когда вы разместите свой адрес электронной почты на сайте, вы начнете получать много спам-писем. С другой стороны, когда вы используете контактную форму, вы можете избавиться почти от всех спам-писем.
Непротиворечивая информация – при отправке электронной почты люди не всегда отправляют вам всю необходимую информацию. С помощью контактной формы вы можете точно указать пользователю, какую информацию вы ищете (например, номер телефона, бюджет и т. д.).
Экономит время – контактные формы помогут вам сэкономить время больше, чем вы можете себе представить. Помимо согласованной информации, которую мы упомянули выше, вы также можете использовать подтверждение формы, чтобы сообщить пользователю, что делать дальше. Например, посмотрите видео или подождите до 24 часов, чтобы получить ответ, чтобы они не отправляли вам несколько запросов.
Ниже приведен пример контактной формы WordPress, которую мы создадим в этом руководстве.^
После создания вышеуказанной формы мы также покажем вам, как вы можете легко добавить ее на страницу контактов или в боковую панель вашего сайта с помощью виджета контактной формы WordPress.
Звучит хорошо? Хорошо, так что давайте начнем.
Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте чтение.
Первое, что вам нужно сделать, это выбрать плагин контактной формы WordPress.
Хотя есть несколько бесплатных и платных плагинов для контактной формы WordPress, которые вы можете выбрать, мы используем WPForms на нашем сайте и считаем, что это лучший вариант на рынке.
Ниже приведены три причины, по которым мы считаем WPForms лучшей:
Это самый удобный плагин для контактов. Вы можете использовать конструктор drag & drop, чтобы легко создать контактную форму всего за несколько кликов.
WPForms Lite на 100% бесплатен, и вы можете использовать его для создания простой контактной формы.
Когда вы будете готовы к более мощным функциям, вы можете перейти на WPForms Pro.
Теперь, когда мы определились с плагином контактной формы, давайте продолжим и установим его на свой сайт.
В этом руководстве по контактной форме мы будем использовать WPForms Lite, потому что он бесплатный и простой в использовании.
Вы можете установить этот плагин на свой сайт, войдя в панель управления WordPress и перейдя в раздел Плагины »Добавить новый.^
В поле поиска введите WPForms и нажмите кнопку «Установить сейчас».
После того, как плагин установлен, убедитесь, что вы активировали плагин.^
Если вы не видите меню плагинов или хотите получить более подробные инструкции, обратитесь к нашему пошаговому руководству по установке плагина WordPress.
Теперь, когда вы активировали WPForms, вы готовы создать контактную форму в WordPress.
На панели инструментов WordPress щелкните меню WPForms и выберите «Добавить новый».^
Это откроет конструктор форм перетаскивания WPForms. Начните с присвоения имени контактной форме, а затем выберите шаблон контактной формы.
WPForms Lite поставляется только с двумя предварительно созданными шаблонами форм (пустой или простой контактной формы). Но вы можете использовать эти два для создания практически любого типа контактной формы, которая вам нравится.
Ради этого примера мы продолжим и выберем Простую контактную форму. Он добавит поля «Имя», «Электронная почта» и «Сообщение».^
Вы можете нажать на поле, чтобы редактировать их. Вы также можете использовать мышь, чтобы перетаскивать порядок полей.
Если вы хотите добавить новое поле, просто выберите из доступных полей слева.^
Когда вы закончите, нажмите на кнопку Сохранить.
Теперь, когда вы создали свою форму WordPress, важно правильно настроить уведомление формы и подтверждение формы.
Подтверждение формы – это то, что видит посетитель вашего сайта после отправки формы. Это может быть сообщение с благодарностью или вы можете перенаправить их на специальную страницу.
Уведомление о форме – это электронное письмо, которое вы получаете после того, как кто-то отправит контактную форму на вашем сайте WordPress.
Вы можете настроить оба из них, перейдя на вкладку Настройки в конструкторе форм WPForms.
Обычно мы оставляем подтверждение формы в качестве сообщения по умолчанию. Однако вы можете изменить его, чтобы перенаправить на определенную страницу, если хотите.^
Самое приятное в WPForms – это то, что настройки по умолчанию идеально подходят для начинающих. При переходе в настройки уведомлений все поля будут заполняться динамически.^
Уведомления по умолчанию отправляются на адрес электронной почты администратора, который вы настроили на своем сайте. Если вы хотите отправить его на собственный адрес электронной почты, вы можете это изменить. Если вы хотите отправить уведомление на несколько электронных писем, просто разделите каждый адрес электронной почты запятой.
В теме письма предварительно указывается имя вашей формы. Поле от имени автоматически заполняется именем вашего пользователя. Когда вы ответите на запрос, он перейдет на адрес электронной почты, который ваш пользователь заполнил в контактной форме.
Теперь, когда вы завершили настройку контактной формы WordPress, пришло время вставить ее на страницу.
Первое, что вам нужно сделать, это либо создать новую страницу в WordPress, либо отредактировать существующую страницу, где вы хотите добавить контактную форму.
Мы будем использовать шорткод контактной формы WordPress для добавления формы на страницу. Просто нажмите кнопку «Добавить форму» вверху и выберите форму, которую вы хотите добавить.^
Контактный шорткод будет добавлен в контент вашей страницы. Теперь сохраните свою страницу, чтобы просмотреть ее.
Вот как будет выглядеть форма на примере страницы WordPress:^
Если вы только хотели добавить контактную форму на страницу, то все готово. Поздравляю.
Если вы хотите добавить контактную форму на боковой панели или в другую область виджета, перейдите к шагу 6.
WPForms поставляются с виджетом контактной формы WordPress, который можно использовать для добавления контактной формы в боковую панель или в любую другую область, готовую к виджетам, в вашей теме.
В вашей админке WordPress зайдите в Внешний вид »Виджеты. Вы увидите виджет WPForms, который вы можете легко перетащить в любой виджет готовых областей вашей темы.^
Затем добавьте заголовок для вашего виджета и выберите форму, которую вы хотите отобразить. Сохраните настройки и посетите свой веб-сайт для предварительного просмотра.
Мы надеемся, что эта статья помогла вам создать простую контактную форму в WordPress. Вы также можете проверить наше сравнение 7 лучших плагинов для резервного копирования WordPress.
Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас в Twitter и Facebook.
Поскольку до крайнего срока соблюдения GDPR ЕС осталось всего 178 дней , многие владельцы сайтов…
Команда Gutenberg создаст станцию тестирования удобства использования в WordCamp US, где посетители смогут принять участие…
Сегодня компания 10up опубликовала предварительную версию своего плагина Distributor , нового решения для синдикации контента…
На этой неделе был выпущен Gutenberg 1.8 с несколькими заметными улучшениями, которые предоставят разработчикам плагинов…
На этой неделе был выпущен Gutenberg 15.5 с новыми функциями и улучшениями возможностей полнофункционального редактирования…
DesktopServer выпустил версию 3.8.4 своего программного обеспечения для локальной разработки. Эта версия включает в себя…