Как создать онлайн-форму заказа в WordPress

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

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

Что такое форма заказа?

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

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

Формы заказа обычно включают следующую информацию:

• Полное имя клиента.
• Информация о доставке.
• Биллинг и платежные реквизиты.
• Список покупаемых предметов.
• Детали товара, такие как количество, размер, стиль и т.д.
• Срок и условия.
• Стоимость доставки.
• Весь заказ.

Затем клиент отправляет форму онлайн для обработки данных.

Как создать онлайн-форму заказа в WordPress

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

А благодаря технологии интеллектуальных форм WPForms и простой интеграции платежей вы можете оформить онлайн-заявку за несколько минут. Для начала вам нужно скачать, установить и активировать плагин WPForms. Идем на «WPForms» — «Новая форма».

Вы попадете в конструктор форм. Введите имя для вашей формы и выберите шаблон. Мы рекомендуем шаблон «Форма оплаты/Заказа».

Ваша форма будет автоматически создана для вас.

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

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

Нажмите на поле «Доступные элементы», чтобы отредактировать его.

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

Чтобы добавить дополнительные параметры, просто нажмите значок (+).

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

Если у вас есть несколько категорий параметров, вы можете скопировать поле для создания групп.

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

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

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

Теперь вы можете редактировать это поле, как и раньше, вводя названия и цены для ваших товаров.

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

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

Ваши изображения не будут изменены или сжаты WPForms, поэтому важно загружать их в нужном размере. Все они должны быть одинакового размера и не более 250 × 250 пикселей.

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

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

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

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

Если вы довольны дизайном своей формы, вы можете перейти к настройке ее параметров. Рекомендуется сначала сохранить форму, нажав кнопку «Сохранить» в верхней части экрана.

Настройка уведомлений

Сначала нажмите вкладку «Настройки» в левой части экрана. Это откроет настройки вашей формы.

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

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

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

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

Чтобы настроить новое уведомление по электронной почте, нажмите кнопку «Добавить новое уведомление».

Вам будет предложено ввести имя для нового уведомления.

Удаляем {admin_email} из этого поля. Нажмите «Показать смарт-теги» и выберите поле «Электронная почта».

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

В поле «Сообщение» можно добавить сообщение своему клиенту. {all_fields} Тег даст всю информацию, как только клиент вошел в форму.

Закончив настройку уведомлений, нажмите кнопку «Сохранить» в верхней части экрана.

Совет: чтобы вернуться к первому уведомлению, которое вы редактировали, просто прокрутите экран вниз.

Настройка сообщения подтверждения для ваших клиентов

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

Подтверждение по умолчанию гласит «Спасибо, что связались с нами! Мы свяжемся с вами в ближайшее время.

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

Кроме того, вы можете перенаправить клиентов на страницу «Спасибо» на вашем сайте или даже на другой сайт в целом.

После настройки подтверждающего сообщения нажмите «Сохранить» в верхней части экрана.

Интеграция оплаты с вашей формой заказа (необязательно)

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

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

Мы будем использовать PayPal в этом руководстве, но процесс для Stripe аналогичен.

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

Скачиваем и устанавливаем Addons «PayPal Standard».

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

Нажмите «PayPal Standard», затем заполните данные формы. Во-первых, вам нужно установить флажок «Включить стандартные платежи PayPal» и ввести адрес электронной почты PayPal вашей компании.

Оставьте для раскрывающегося списка «Режим» значение «Производство», а для параметра «Тип платежа» — «Продукты и услуги».

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

Добавление формы заказа на ваш сайт

Просто выберите страницу, на которую вы хотите добавить форму, или создайте новую страницу в разделе «Страницы» — «Добавить новую». Затем нажмите на значок (+), чтобы добавить новый блок и найдите блок «WPForms». Он расположен в разделе блоков «Виджеты», или вы можете просто ввести «WPForms» в строку поиска, чтобы найти его.

Вы увидите блок WPForms. Нажмите «Выбрать форму» и выберите свою форму.

Затем вы увидите предварительный просмотр самой формы в редакторе WordPress.

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

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

Даже если вы пропустили письмо или случайно удалили его, WPForms сохраняет данные формы в базе данных WordPress. Вы можете найти все свои заказы, зайдя в «WPForm» — «Записи» в панели управления WordPress.

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

Ну вот и все. Мы надеемся, что эта статья помогла вам узнать, как создать онлайн-форму заказа в WordPress. А у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!