Кнопка Заказать как сделать на WordPress

Кнопки для совершения тех или иных действий, есть почти на любом сайте. На продающих сайтах чаще всего нам попадается кнопка Заказать или(и) кнопка заказать обратный звонок. Сегодня мы рассмотрим как сделать такую кнопку на WordPress. Для простоты и скорости создания кнопки, нам потребуются три плагина: Page Builder, Popup Maker™ и Contact Form 7.

Page Builder позволяет быстро создать кнопку, а Popup Maker - организовать всплывающее окно с формой для заказа или обратного звонка, а Contact Form 7 непосредственно разработать ту самую форму.

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

Инструкция по созданию кнопки Заказать или обратный звонок

По сути нет разницы в том, какую кнопку мы собираемся создавать, так как назвать мы ее можем как угодно:Заказать, Заказать обратный звонок или Заказать сейчас. Для этого мы можем использовать виджет Page Builder - SiteOrigin Кнопка.

Page Builder - SiteOrigin Кнопка

Как сделать чтобы после клика по кнопке появлялось всплывающее окно с формой заказа.

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

Как добавить свойство вызова всплывающего окна кнопке

Для этого воспользуйтесь возможностями плагина Popup Maker™. Создайте Новое Всплывающее Окно, дайте ему понятное название и в поле контента вставьте шорткод подготовленной заранее формы Contact Form 7.
Впрочем форму можно добавить не сразу, а потом.

Где брать CLASS в Popup Maker

Сохранив Новую всплывающую форму, вы можете взять CLASS, который нужно будет разместить в Атрибутах кнопки.

Настройка кнопки Заказать

Так следует настроить кнопку и вставить CLASS в Атрибуты.

Результат

При нажатии на кнопку Оставить Заявку - всплывает окно, в которой расположена форма заказа.

Всплывающее окно с формой заказа

Выводы

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

Поделиться!

Оставить Комментарий