Как добавить калькулятор ИМТ в WordPress (шаг за шагом)

Хотите добавить калькулятор ИМТ на свой сайт WordPress?? Если вы предлагаете контент, продукты или услуги, связанные со здоровьем и фитнесом, то...

Хотите добавить калькулятор ИМТ на свой сайт WordPress??

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

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

Как рассчитать ИМТ (и зачем добавлять калькулятор ИМТ в WordPress)?

BMI означает индекс массы тела. Это приблизительная мера содержания жира в организме человека, основанная на его росте и весе с помощью следующего расчета:

кг — это вес человека в килограммах, а m 2 — его рост в метрах в квадрате.

Расчет ИМТ может помочь вашим посетителям, пациентам или клиентам понять, есть ли у них недостаточный вес, избыточный вес или здоровый вес для их роста. Однако просить посетителей самостоятельно выполнять расчеты не очень удобно.

Вот где калькулятор ИМТ может быть полезен.

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

Калькулятор ИМТ также может побудить людей провести больше времени на вашем сайте. Это может увеличить количество просмотров страниц и снизить показатель отказов.

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

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

Учитывая это, давайте посмотрим, как вы можете легко добавить калькулятор ИМТ в WordPress.

Создание калькулятора ИМТ в WordPress

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

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

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

Калькулятор ИМТ, созданный с помощью Formidable Forms

Если посетитель хочет получить больше информации, то он может нажать на «Посмотреть мой диапазон.’

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

Калькулятор ИМТ в WordPress

Сначала вам нужно зарегистрироваться в Formidable Forms, затем установить и активировать плагин. Для получения более подробной информации ознакомьтесь с нашими инструкциями по установке плагина WordPress.

После активации вы увидите сообщение с просьбой ввести лицензионный ключ.

Добавьте лицензионный ключ Formidable Forms Pro

Нажав на ссылку, вы попадете в глобальные настройки плагина.

Здесь вы можете нажать на ‘Connect an Account’ и следовать инструкциям, чтобы подключить WordPress к вашему аккаунту Formidable Forms.

Подключение WordPress к вашему аккаунту Formidable Forms

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

Вы найдете эту информацию, войдя в свой аккаунт на сайте Formidable Forms.

Добавление лицензионного ключа к плагину Formidable Forms

После ввода ключа нажмите на «Сохранить лицензию.’

После успешной настройки Formidable Forms вы можете создать калькулятор ИМТ для вашего сайта WordPress.

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

Создание новой формы Formidable Form

Откроется всплывающее окно со всеми готовыми шаблонами, которые вы можете использовать.

Вы найдете шаблон BMI Calculator, нажав на раздел «Калькулятор».

Formidable Forms

Чтобы просмотреть, как форма будет выглядеть на вашем сайте, просто наведите курсор мыши на шаблон ‘BMI Calculator’.

Затем нажмите на маленькую кнопку, похожую на глаз.

Предварительный просмотр шаблона калькулятора BMI от Formidable Forms

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

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

Предварительный просмотр шаблона калькулятора ИМТ в WordPress

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

Затем нажмите на кнопку «Создать».

Создание новой формы Formidable

Это откроет шаблон калькулятора BMI в редакторе перетаскивания.

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

Редактор форм Formidable Forms с возможностью перетаскивания

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

Например, вы можете изменить текст, который отображается над полем, введя ‘Field Label.’

Изменение метки в форме калькулятора ИМТ

Если вы хотите добавить дополнительные поля в калькулятор ИМТ, выберите вкладку «Добавить поля».

Затем вы можете перетащить любое поле в редактор форм.

Добавление поля в калькулятор ИМТ в WordPress

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

Затем вы можете нажать на «Удалить.’

Удаление поля из калькулятора ИМТ WordPress

Настройка параметров калькулятора BMI

Когда вы будете довольны тем, как выглядит калькулятор ИМТ, вы можете просмотреть его настройки, перейдя на вкладку «Настройки».

В разделе ‘On Submit’ вы можете увидеть, что происходит, когда посетители отправляют форму. По умолчанию калькулятор BMI будет показывать сообщение каждый раз, когда кто-то нажимает на кнопку «Отправить».’

Изменение действия формы в Formidable Forms

В разделе ‘Сообщения’ вы можете увидеть текст, который будет показан посетителям.

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

Your BMI Result is:
[if 117 less_than=»18.5″]Недостаточный вес[/if 117]

Это означает, что посетитель с индексом массы тела менее 18.5 вы увидите следующее сообщение: Your BMI Result is Underweight.

Добавление пользовательского сообщения при отправке формы

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

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

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

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

Изменение текста кнопки калькулятора ИМТ

По умолчанию калькулятор имеет кнопку «Посмотреть мой диапазон».

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

Просто введите текст, который вы хотите использовать, в поле «Текст кнопки отправки». Например, мы собираемся использовать ‘Show My BMI Range’ в качестве ярлыка кнопки.

Настройка сообщения об отправке формы

Вы также можете изменить местоположение кнопки на странице с помощью выпадающего меню ‘Submit Button Alignment’ (Выравнивание кнопки отправки).

Добавление формы калькулятора ИМТ на ваш сайт

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

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

Сохранение калькулятора ИМТ

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

После этого нажмите кнопку ‘+’, чтобы добавить новый блок. Во всплывающем окне введите ‘Formidable Forms’, а затем нажмите на правый блок, когда он появится.

Блок

После этого откройте выпадающий список ‘Выбрать форму’ и выберите калькулятор BMI, который вы создали ранее. Теперь WordPress добавит калькулятор на вашу страницу.

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

Теперь, если вы посетите свой сайт, вы увидите калькулятор ИМТ в реальном времени.

БОНУС: Изменение стиля калькулятора BMI

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

Для этого перейдите по ссылке Formidable » Стили в приборной панели WordPress.

Вкладка

Чтобы создать новый стиль, нажмите на кнопку ‘+Новый стиль’. В качестве альтернативы вы можете отредактировать существующий стиль по умолчанию, хотя это изменение затронет все ваши формы.

Мы создадим новый стиль только для формы BMI Calculator.

Добавление нового стиля в Formidable Forms

Если вы создаете новый стиль, то начните с ввода названия в поле «Название стиля».

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

Создание пользовательского стиля формы

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

Для этого просто перейдите на вкладку ‘Field Labels’, а затем используйте различные настройки в этом разделе. Например, на следующем изображении мы изменим размер текста на 18px.

Изменение размера меток полей

В правой части экрана вы увидите предварительный просмотр стиля формы. По мере внесения изменений этот предварительный просмотр будет обновляться автоматически.

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

Изменение настроек полей формы

Чтобы изменить размер радиокнопок формы, просто выберите ‘Check Box & Radio Fields.’

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

Создание пользовательского стиля для калькулятора ИМТ

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

Чтобы применить новый стиль к вашему калькулятору BMI, перейдите по ссылке Formidable » Формы. Затем вы можете навести курсор мыши на форму калькулятора ИМТ и нажать на ссылку «Редактировать».

Редактирование созданной вами формы калькулятора ИМТ

Затем перейдите на вкладку «Настройки» и выберите «Стилизация и кнопки» в меню слева.

После этого откройте выпадающий список «Шаблон стиля» и выберите стиль, который вы хотите использовать.

Применение пользовательского стиля к калькулятору ИМТ

Наконец, нажмите на кнопку ‘Update’, чтобы сохранить изменения. Теперь, если вы посетите калькулятор на своем сайте, вы увидите новый стиль формы в действии.

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий