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

/

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

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

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

Что такое ИМТ и почему он важен?

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

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

Добавление калькулятора ИМТ на ваш сайт может заставить людей проводить больше времени на вашем сайте. Они могут даже что-то купить у вас или одно из ваших партнерских предложений.

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

Как рассчитать ИМТ?

Вы можете рассчитать ИМТ, используя следующий расчет:

ИМТ = кг / м2

Кг - это вес человека в килограммах, а m2 - его рост в квадратных метрах.

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

ИМТ = [вес в фунтах / рост в дюймах2] x 703

Здоровый ИМТ находится в диапазоне 18,5–25. ИМТ ниже 18,5 указывает на то, что у человека недостаточный вес, а ИМТ более 25 указывает на избыточный вес.

Очевидно, просить читателей достать калькулятор не очень помогает.

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

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

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

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

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

После активации вам необходимо перейти на страницу Formidable »Forms, а затем нажать кнопку« Добавить »вверху, чтобы создать свой калькулятор ИМТ.

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

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

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

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

Как только вы это сделаете, Formidable Forms автоматически создаст для вас форму калькулятора ИМТ.

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

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

Вы можете удалить поле BMI Prime, если хотите, чтобы форма была простой. Для работы формы это не обязательно.

Чтобы удалить поле, просто щелкните по нему, а затем щелкните значок корзины.

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

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

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

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

Когда кто-то использует калькулятор, его результат будет выглядеть так:

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

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

Вы можете ввести HTML-код в это поле. Чтобы изменить размер шрифта и цвет фона поля, вы можете использовать функцию стилей в Formidable Forms. Мы поговорим об этом позже в этом руководстве.

Вот пример сообщения с результатом с соответствующей ссылкой:

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

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

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

Просто введите текст, который хотите использовать. Мы собираемся использовать текст «Показать мой диапазон ИМТ» вместо «Посмотрите мой диапазон!» для текста кнопки.

Мы также изменили «Обновить результаты» вместо «Обновить» для текста на кнопке, которая появляется после того, как форма была отправлена ​​в первый раз.

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

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

Вы можете изменить стиль формы, используя разные цвета, размеры шрифта и многое другое. Для этого сначала вам нужно перейти в Formidable »Styles на панели инструментов WordPress.

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

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

Если вы нажмете на раскрывающийся список рядом с вкладкой "Ярлыки полей", вы сможете изменить размер ярлыков в полях формы. Мы увеличим его с исходных 14 до 18 пикселей.

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

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

Вы также можете увеличить размер шрифта кнопки на вкладке «Кнопки». Вы также можете выбрать цвет кнопки.

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

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

Затем вы можете применить стиль к своей форме. Сначала перейдите в «Грозные» »Формы и найдите свою форму. Щелкните заголовок формы, чтобы отредактировать его, или наведите курсор на форму и щелкните ссылку «Изменить» под ней.

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

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

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

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

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

Затем вам нужно будет отредактировать существующую запись или страницу или создать новую.

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

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

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

Если есть что-то, что вы хотите изменить или настроить, просто вернитесь к своей форме на панели инструментов WordPress. Вы можете найти его в разделе «Грозные» »Формы.

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как установить WordPress - полное руководство по установке WordPress

WordPress известен как самый популярный конструктор сайтов в мире. Он обслуживает более 39% всех веб-сайтов в Интернете. Основная причина этого в том,

Как добавить определенные сообщения в меню навигации WordPress

Вы хотите добавить определенные сообщения в меню навигации WordPress? Меню в WordPress можно полностью настроить, и вы можете добавлять собственные ссылки,

Как правильно перейти с Weebly на WordPress (шаг за шагом)

Вы хотите перейти с Weebly на WordPress? Да, можно перенести весь ваш контент Weebly на WordPress, не нанимая разработчика и не зная, как программировать. Мы создали

Как изменить URL-адреса вашего сайта WordPress (шаг за шагом)

Вам нужно изменить URL-адрес WordPress? Если вы переходите с HTTP на HTTP, меняете свое доменное имя, переходите с локального сервера на действующий сайт