How to Create BMI Calculator in Opencart 3.x

Step1: Create language file (catalog\language\en-gb\information\bmi_calculator.php)

<?php
// Heading
$_['heading_title']  = 'BMI Calculator';

Step2: Create controller file (catalog\controller\information\bmi_calculator.php)

<?php
class ControllerInformationBmiCalculator extends Controller {
	private $error = array();
private $bmi;
private $bmi_result;
	public function index() {
		$this->load->language('information/bmi_calculator');

		$this->document->setTitle($this->language->get('heading_title'));
		$data['btn_bmi'] ='';
		if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
			
			if (isset($this->request->post['btn_bmi'])) {
				$data['btn_bmi'] = $this->request->post['btn_bmi'];
			} 
		$height_feet=	$this->request->post['height_feet'];
		$height_inches=	$this->request->post['height_inches'];
		//$cm=($height_feet * 30.48)+($height_inches * 2.54);
		$m=($height_feet * 0.3048 )+($height_inches * 0.0254 );
		$weight_kg=	$this->request->post['weight_kg'];
		$gender=	$this->request->post['gender'];
		$age=	$this->request->post['age'];
		$activity_level=	$this->request->post['activity_level'];
		$height_feet=	$this->request->post['height_feet'];
		$bmi=round($weight_kg / ($m * $m),2);
		$data['m']=$m;
		$data['bmi']=$bmi;
		if($bmi < 16.0)
		{
$bmi_result="Severely Underweight";
$texth1="Your BMI is $bmi. A BMI of bellow 16 is considered severely underweight.";
$text1="You are within the normal weight range for your height. A healthy weight for you is between 9 st 11 lbs and 13 st 3 lbs. You should consider carefully whether you need to diet.";
$texth2="Daily calorie requirements";
$text2="Based on your height, weight, age and level of exercise we estimate that you will burn 2182 calories (kcal) per day. For a healthy weight loss of 1-2lbs per week you should eat around 1482 calories per day.";
$texth3="Following the Insta Diet plan";
$text3="Once you add your daily milk, fresh fruit, vegetables and carbohydrates to your Insta Diet meals and snacks, you’ll be consuming around 1,200 calories per day. Based on your BMI you should add an extra 282 calories per day to reach your target calorie intake to ensure a steady and sustainable weight loss.";
$text4="If you're looking to lose weight or maintain your healthy BMI, our lower calorie meal plans can help.";
		}else if($bmi >= 16.0 && $bmi <= 18.4)
		{
$bmi_result="Underweight";
$texth1="Your BMI is $bmi. A BMI of 16 - 18.4 is considered underweight.";
$text1="Your BMI is considered underweight. Keep in mind that an underweight BMI calculation may pose certain health risks. Please consult with your healthcare provider for more information about BMI calculations.";
$texth2="Daily calorie requirements";
$text2="Based on your height, weight, age and level of exercise we estimate that you will burn 2182 calories (kcal) per day. For a healthy weight loss of 1-2lbs per week you should eat around 1482 calories per day.";
$texth3="Following the Insta Diet plan";
$text3="Once you add your daily milk, fresh fruit, vegetables and carbohydrates to your Insta Diet meals and snacks, you’ll be consuming around 1,200 calories per day. Based on your BMI you should add an extra 282 calories per day to reach your target calorie intake to ensure a steady and sustainable weight loss.";
$text4="If you're looking to lose weight or maintain your healthy BMI, our lower calorie meal plans can help.";

		} else if($bmi >= 18.5 && $bmi <= 24.9)
		{
$bmi_result="Normal";
$texth1="Your BMI is $bmi. A BMI of 18.5 - 24.9 is considered normal.";
$text1="Your BMI is considered normal. This healthy weight helps reduce your risk of serious health conditions and means you’re close to your fitness goals.";
$texth2="Daily calorie requirements";
$text2="Based on your height, weight, age and level of exercise we estimate that you will burn 2182 calories (kcal) per day. For a healthy weight loss of 1-2lbs per week you should eat around 1482 calories per day.";
$texth3="Following the Insta Diet plan";
$text3="Once you add your daily milk, fresh fruit, vegetables and carbohydrates to your Insta Diet meals and snacks, you’ll be consuming around 1,200 calories per day. Based on your BMI you should add an extra 282 calories per day to reach your target calorie intake to ensure a steady and sustainable weight loss.";
$text4="If you're looking to lose weight or maintain your healthy BMI, our lower calorie meal plans can help.";
		}else if($bmi >= 25.0 && $bmi <= 29.9)
		{
$bmi_result="Overweight";
$texth1="Your BMI is $bmi. A BMI of 25 - 29.9 is considered overweight.";
$text1="Your BMI is considered overweight. Being overweight may increase your risk of cardiovascular disease. Consult with your healthcare provider and consider making lifestyle changes through healthy eating and fitness to improve your health.";
$texth2="Daily calorie requirements";
$text2="Based on your height, weight, age and level of exercise we estimate that you will burn 2182 calories (kcal) per day. For a healthy weight loss of 1-2lbs per week you should eat around 1482 calories per day.";
$texth3="Following the Insta Diet plan";
$text3="Once you add your daily milk, fresh fruit, vegetables and carbohydrates to your Insta Diet meals and snacks, you’ll be consuming around 1,200 calories per day. Based on your BMI you should add an extra 282 calories per day to reach your target calorie intake to ensure a steady and sustainable weight loss.";
$text4="If you're looking to lose weight or maintain your healthy BMI, our lower calorie meal plans can help.";
		}else if($bmi >= 30.0 && $bmi <= 34.9)
		{
$bmi_result="Moderately Obese";
$texth1="Your BMI is $bmi. A BMI of 30 - 34.9 is considered moderately obese.";
$text1="Your BMI is considered obese. People with obesity are at increased risk for many diseases and health conditions, including cardiovascular disease, high blood pressure (Hypertension), Type 2 diabetes, breathing problems and more. Consult with your healthcare provider and consider making lifestyle changes through healthy eating and fitness to improve your overall health and quality of life.";
$texth2="Daily calorie requirements";
$text2="Based on your height, weight, age and level of exercise we estimate that you will burn 2182 calories (kcal) per day. For a healthy weight loss of 1-2lbs per week you should eat around 1482 calories per day.";
$texth3="Following the Insta Diet plan";
$text3="Once you add your daily milk, fresh fruit, vegetables and carbohydrates to your Insta Diet meals and snacks, you’ll be consuming around 1,200 calories per day. Based on your BMI you should add an extra 282 calories per day to reach your target calorie intake to ensure a steady and sustainable weight loss.";
$text4="If you're looking to lose weight or maintain your healthy BMI, our lower calorie meal plans can help.";
		}else if($bmi >= 35.0 && $bmi <= 39.9)
		{
$bmi_result="Severely Obese";
$texth1="Your BMI is $bmi. A BMI of 35 - 39.9 is considered severely obese.";
$text1="Your BMI is considered underweight. Keep in mind that an underweight BMI calculation may pose certain health risks. Please consult with your healthcare provider for more information about BMI calculations.";
$texth2="Daily calorie requirements";
$text2="Based on your height, weight, age and level of exercise we estimate that you will burn 2182 calories (kcal) per day. For a healthy weight loss of 1-2lbs per week you should eat around 1482 calories per day.";
$texth3="Following the Insta Diet plan";
$text3="Once you add your daily milk, fresh fruit, vegetables and carbohydrates to your Insta Diet meals and snacks, you’ll be consuming around 1,200 calories per day. Based on your BMI you should add an extra 282 calories per day to reach your target calorie intake to ensure a steady and sustainable weight loss.";
$text4="If you're looking to lose weight or maintain your healthy BMI, our lower calorie meal plans can help.";
		}else if($bmi >= 40.0)
		{
$bmi_result="Morbidly Obese";
$texth1="Your BMI is $bmi. A BMI of above 40.0 is considered morbidly obese.";
$text1="Your BMI is considered underweight. Keep in mind that an underweight BMI calculation may pose certain health risks. Please consult with your healthcare provider for more information about BMI calculations.";
$texth2="Daily calorie requirements";
$text2="Based on your height, weight, age and level of exercise we estimate that you will burn 2182 calories (kcal) per day. For a healthy weight loss of 1-2lbs per week you should eat around 1482 calories per day.";
$texth3="Following the Insta Diet plan";
$text3="Once you add your daily milk, fresh fruit, vegetables and carbohydrates to your Insta Diet meals and snacks, you’ll be consuming around 1,200 calories per day. Based on your BMI you should add an extra 282 calories per day to reach your target calorie intake to ensure a steady and sustainable weight loss.";
$text4="If you're looking to lose weight or maintain your healthy BMI, our lower calorie meal plans can help.";
		}
		$data['m']=$m;
		$data['bmi']=$bmi;
		$data['bmi_result']=$bmi_result;
		$data['texth1']=$texth1;
		$data['text1']=$text1;
		$data['texth2']=$texth2;
		$data['text2']=$text2;
		$data['texth3']=$texth3;
		$data['text3']=$text3;
		$data['text4']=$text4;
		}

		$data['breadcrumbs'] = array();

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_home'),
			'href' => $this->url->link('common/home')
		);

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('heading_title'),
			'href' => $this->url->link('information/bmi_calculator')
		);

		if (isset($this->error['activity'])) {
			$data['error_activity'] = $this->error['activity'];
		} else {
			$data['error_activity'] = '';
		}

		if (isset($this->error['height_weight'])) {
			$data['error_height_weight'] = $this->error['height_weight'];
		} else {
			$data['error_height_weight'] = '';
		}
		
		if (isset($this->error['gender'])) {
			$data['error_gender'] = $this->error['gender'];
		} else {
			$data['error_gender'] = '';
		}
		if (isset($this->error['age'])) {
			$data['error_age'] = $this->error['age'];
		} else {
			$data['error_age'] = '';
		}
		if (isset($this->error['email'])) {
			$data['error_email'] = $this->error['email'];
		} else {
			$data['error_email'] = '';
		}

		if (isset($this->error['enquiry'])) {
			$data['error_enquiry'] = $this->error['enquiry'];
		} else {
			$data['error_enquiry'] = '';
		}

		$data['button_submit'] = $this->language->get('button_submit');

		$data['action'] = $this->url->link('information/bmi_calculator', '', true);

		$this->load->model('tool/image');

		if ($this->config->get('config_image')) {
			$data['image'] = $this->model_tool_image->resize($this->config->get('config_image'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_location_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_location_height'));
		} else {
			$data['image'] = false;
		}

		$data['store'] = $this->config->get('config_name');
		$data['address'] = nl2br($this->config->get('config_address'));
		$data['geocode'] = $this->config->get('config_geocode');
		$data['geocode_hl'] = $this->config->get('config_language');
		$data['telephone'] = $this->config->get('config_telephone');
		$data['fax'] = $this->config->get('config_fax');
		$data['open'] = nl2br($this->config->get('config_open'));
		$data['comment'] = $this->config->get('config_comment');

		$data['locations'] = array();

		$this->load->model('localisation/location');

		foreach((array)$this->config->get('config_location') as $location_id) {
			$location_info = $this->model_localisation_location->getLocation($location_id);

			if ($location_info) {
				if ($location_info['image']) {
					$image = $this->model_tool_image->resize($location_info['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_location_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_location_height'));
				} else {
					$image = false;
				}

				$data['locations'][] = array(
					'location_id' => $location_info['location_id'],
					'name'        => $location_info['name'],
					'address'     => nl2br($location_info['address']),
					'geocode'     => $location_info['geocode'],
					'telephone'   => $location_info['telephone'],
					'fax'         => $location_info['fax'],
					'image'       => $image,
					'open'        => nl2br($location_info['open']),
					'comment'     => $location_info['comment']
				);
			}
		}

		if (isset($this->request->post['height_feet'])) {
			$data['height_feet'] = $this->request->post['height_feet'];
		} else {
			$data['height_feet'] = '';
		}
		if (isset($this->request->post['height_inches'])) {
			$data['height_inches'] = $this->request->post['height_inches'];
		} else {
			$data['height_inches'] = '';
		}
		if (isset($this->request->post['weight_stone'])) {
			$data['weight_stone'] = $this->request->post['weight_stone'];
		} else {
			$data['weight_stone'] = '';
		}
		if (isset($this->request->post['weight_pounds'])) {
			$data['weight_pounds'] = $this->request->post['weight_pounds'];
		} else {
			$data['weight_pounds'] = '';
		}
		if (isset($this->request->post['weight_kg'])) {
			$data['weight_kg'] = $this->request->post['weight_kg'];
		} else {
			$data['weight_kg'] = '';
		}
		if (isset($this->request->post['age'])) {
			$data['age'] = $this->request->post['age'];
		} else {
			$data['age'] = '';
		}
		if (isset($this->request->post['gender'])) {
			$data['gender'] = $this->request->post['gender'];
		} else {
			$data['gender'] = '';
		}

		if (isset($this->request->post['activity_level'])) {
			$data['activity_level'] = $this->request->post['activity_level'];
		} else {
			$data['activity_level'] = '';
		}
		

		if (isset($this->request->post['email'])) {
			$data['email'] = $this->request->post['email'];
		} else {
			$data['email'] = '';
		}

		if (isset($this->request->post['enquiry'])) {
			$data['enquiry'] = $this->request->post['enquiry'];
		} else {
			$data['enquiry'] = '';
		}

		// Captcha
		if ($this->config->get('captcha_' . $this->config->get('config_captcha') . '_status') && in_array('contact', (array)$this->config->get('config_captcha_page'))) {
			$data['captcha'] = $this->load->controller('extension/captcha/' . $this->config->get('config_captcha'), $this->error);
		} else {
			$data['captcha'] = '';
		}

		$data['column_left'] = $this->load->controller('common/column_left');
		$data['column_right'] = $this->load->controller('common/column_right');
		$data['content_top'] = $this->load->controller('common/content_top');
		$data['content_bottom'] = $this->load->controller('common/content_bottom');
		$data['footer'] = $this->load->controller('common/footer');
		$data['header'] = $this->load->controller('common/header');

		$this->response->setOutput($this->load->view('information/bmi_calculator', $data));
	}

	protected function validate() {
		if ((trim(utf8_strlen($this->request->post['weight_kg'])) < 1) ) {
			$this->error['height_weight'] = $this->language->get('error_name');
		}
		/*if ((trim(utf8_strlen($this->request->post['weight_pounds'])) < 1) ) {
			$this->error['height_weight'] = $this->language->get('error_name');
		}
		if ((trim(utf8_strlen($this->request->post['weight_stone'])) < 1) ) {
			$this->error['height_weight'] = $this->language->get('error_name');
		}*/
		if ((trim(utf8_strlen($this->request->post['height_inches'])) < 1) ) {
			$this->error['height_weight'] = $this->language->get('error_name');
		}
		if ((trim(utf8_strlen($this->request->post['height_feet'])) < 1) ) {
			$this->error['height_weight'] = $this->language->get('error_name');
		}
		if ((trim(utf8_strlen($this->request->post['gender'])) < 1) ) {
			$this->error['gender'] = $this->language->get('error_name');
			
		}
		
		if ((trim(utf8_strlen($this->request->post['age'])) < 1) ) {
			$this->error['age'] = $this->language->get('error_name');
		}
		if ((trim(utf8_strlen($this->request->post['activity_level'])) < 1) ) {
			$this->error['activity'] = $this->language->get('error_name');
		}

		if (!filter_var($this->request->post['email'], FILTER_VALIDATE_EMAIL)) {
			$this->error['email'] = $this->language->get('error_email');
		}

		

		// Captcha
		if ($this->config->get('captcha_' . $this->config->get('config_captcha') . '_status') && in_array('contact', (array)$this->config->get('config_captcha_page'))) {
			$captcha = $this->load->controller('extension/captcha/' . $this->config->get('config_captcha') . '/validate');

			if ($captcha) {
				$this->error['captcha'] = $captcha;
			}
		}

		return !$this->error;
	}

	public function success() {
		$this->load->language('information/bmi_calculator');

		$this->document->setTitle($this->language->get('heading_title'));

		$data['breadcrumbs'] = array();

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_home'),
			'href' => $this->url->link('common/home')
		);

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('heading_title'),
			'href' => $this->url->link('information/bmi_calculator')
		);

		$data['continue'] = $this->url->link('common/home');

		$data['column_left'] = $this->load->controller('common/column_left');
		$data['column_right'] = $this->load->controller('common/column_right');
		$data['content_top'] = $this->load->controller('common/content_top');
		$data['content_bottom'] = $this->load->controller('common/content_bottom');
		$data['footer'] = $this->load->controller('common/footer');
		$data['header'] = $this->load->controller('common/header');

		$this->response->setOutput($this->load->view('common/success', $data));
	}
}

Step3: Create view file (catalog\view\theme\default\template\information\bmi_calculator.twig)

{{ header }}
<style>
.inner {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 30px auto;
}
  .bmi-results {
    background-color: #fff;
    position: relative;
    -webkit-box-shadow: 0px -10px 50px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -10px 50px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    /* display: none; */
}
 .bmi-results:before {
    top: -20px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 20px solid #fff;
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-left: -20px;
    -webkit-transition: top 0.3s linear;
    transition: top 0.3s linear;
}
  .information-container {
    position: relative;
    z-index: 1;
  padding:5px 15px;
  background-color:white;
}
  .top h1 {
    padding-top: 10px;
}
  .information-container p {
    font-size: 16px;
    line-height: 1.5;
}
</style>
<div id="information-contact" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1>{{ heading_title }}</h1>     
      
      <form action="{{ action }}" method="post" enctype="multipart/form-data" class="form-horizontal">
        <fieldset>
          <legend>{{ text_contact }}</legend>
          <div class="block calculator-container">
  <div class="bmi-calculator">
    <div class="bmi-calculator-inner">
      <div class="top panel-with-shadow">
        <div class="dial-icon-container"></div>
        <h3><strong>FREE</strong> BMI Calculator</h3>
      </div>
      <div class="form-container">
          <div class="bmi-row units-row block-container">
            <div class="input-container units block">
              <label> Height<br>
              </label>
              <div class="select-style">
                <select name="height_feet" id="id_height_feet" required="">
                  <option value="" selected="">ft</option>
                  <option value="3">3ft</option>
                  <option value="4">4ft</option>
                  <option value="5">5ft</option>
                  <option value="6">6ft</option>
                  <option value="7">7ft</option>
                </select>
              </div>
              <div class="select-style">
                <select name="height_inches" id="id_height_inches" required="">
                  <option value="" selected="">in</option>
                  <option value="0">0in</option>
                  <option value="1">1in</option>
                  <option value="2">2in</option>
                  <option value="3">3in</option>
                  <option value="4">4in</option>
                  <option value="5">5in</option>
                  <option value="6">6in</option>
                  <option value="7">7in</option>
                  <option value="8">8in</option>
                  <option value="9">9in</option>
                  <option value="10">10in</option>
                  <option value="11">11in</option>
                </select>
              </div>
            </div>
            <div class="input-container text-container units block">
              <label>Weight<br>
              </label>
            <!--  <div class="select-style">
                <select name="weight_stone" id="id_weight_stone" required="">
                  <option value="" selected="">st</option>
                  <option value="6">6st</option>
                  <option value="7">7st</option>
                  <option value="8">8st</option>
                  <option value="9">9st</option>
                  <option value="10">10st</option>
                  <option value="11">11st</option>
                  <option value="12">12st</option>
                  <option value="13">13st</option>
                  <option value="14">14st</option>
                  <option value="15">15st</option>
                  <option value="16">16st</option>
                  <option value="17">17st</option>
                  <option value="18">18st</option>
                  <option value="19">19st</option>
                  <option value="20">20st</option>
                  <option value="21">21st</option>
                  <option value="22">22st</option>
                  <option value="23">23st</option>
                  <option value="24">24st</option>
                  <option value="25">25st</option>
                  <option value="26">26st</option>
                  <option value="27">27st</option>
                  <option value="28">28st</option>
                  <option value="29">29st</option>
                  <option value="30">30st</option>
                </select>
              </div>
              <div class="select-style">
                <select name="weight_pounds" id="id_weight_pounds" required="">
                  <option value="" selected="">lbs</option>
                  <option value="0">0lbs</option>
                  <option value="1">1lbs</option>
                  <option value="2">2lbs</option>
                  <option value="3">3lbs</option>
                  <option value="4">4lbs</option>
                  <option value="5">5lbs</option>
                  <option value="6">6lbs</option>
                  <option value="7">7lbs</option>
                  <option value="8">8lbs</option>
                  <option value="9">9lbs</option>
                  <option value="10">10lbs</option>
                  <option value="11">11lbs</option>
                  <option value="12">12lbs</option>
                  <option value="13">13lbs</option>
                </select>
              </div>-->
             <input type="text" name="weight_kg" id="id_weight_kg" placeholder="Your weight in KG" size="15" required value="{{ weight_kg }}" >
            </div>
             {% if error_height_weight %}
              <div class="text-danger">{{ error_name }}</div>
              {% endif %}
          </div>
          <div class="bmi-row">
            <div class="input-container radios">
              <label class="pdl">Gender<br><br>
              </label>
              <label class="radio-style">
              <input type="radio" id="id_gender_M" value="M" name="gender">
              <span></span>
              <label for="id_gender_0">Male</label>
              </label>
              <label class="radio-style">
              <input type="radio" id="id_gender_F" value="F" name="gender" checked="">
              <span></span>
              <label for="id_gender_1">Female</label>
              </label>
            </div>
             {% if error_gender %}
              <div class="text-danger">{{ error_name }}</div>
              {% endif %}
          </div>
          <div class="bmi-row">
            <div class="input-container select-container">
              <label>Age<br>
              </label>
              <div class="select-style">
                <select name="age" id="id_age" required="">
                  <option value="" selected="">Age</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>
                  <option value="26">26</option>
                  <option value="27">27</option>
                  <option value="28">28</option>
                  <option value="29">29</option>
                  <option value="30">30</option>
                  <option value="31">31</option>
                  <option value="32">32</option>
                  <option value="33">33</option>
                  <option value="34">34</option>
                  <option value="35">35</option>
                  <option value="36">36</option>
                  <option value="37">37</option>
                  <option value="38">38</option>
                  <option value="39">39</option>
                  <option value="40">40</option>
                  <option value="41">41</option>
                  <option value="42">42</option>
                  <option value="43">43</option>
                  <option value="44">44</option>
                  <option value="45">45</option>
                  <option value="46">46</option>
                  <option value="47">47</option>
                  <option value="48">48</option>
                  <option value="49">49</option>
                  <option value="50">50</option>
                  <option value="51">51</option>
                  <option value="52">52</option>
                  <option value="53">53</option>
                  <option value="54">54</option>
                  <option value="55">55</option>
                  <option value="56">56</option>
                  <option value="57">57</option>
                  <option value="58">58</option>
                  <option value="59">59</option>
                  <option value="60">60</option>
                  <option value="61">61</option>
                  <option value="62">62</option>
                  <option value="63">63</option>
                  <option value="64">64</option>
                  <option value="65">65</option>
                  <option value="66">66</option>
                  <option value="67">67</option>
                  <option value="68">68</option>
                  <option value="69">69</option>
                  <option value="70">70</option>
                  <option value="71">71</option>
                  <option value="72">72</option>
                  <option value="73">73</option>
                  <option value="74">74</option>
                  <option value="75">75</option>
                  <option value="76">76</option>
                  <option value="77">77</option>
                  <option value="78">78</option>
                  <option value="79">79</option>
                  <option value="80">80</option>
                  <option value="81">81</option>
                  <option value="82">82</option>
                  <option value="83">83</option>
                  <option value="84">84</option>
                  <option value="85">85</option>
                  <option value="86">86</option>
                  <option value="87">87</option>
                  <option value="88">88</option>
                  <option value="89">89</option>
                  <option value="90">90</option>
                </select>
              </div>
               {% if error_age %}
              <div class="text-danger">{{ error_name }}</div>
              {% endif %}
            </div>
          </div>
          <div class="bmi-row">
            <div class="input-container select-container">
              <label>Activity Level<br>
              </label>
              <div class="select-style">
                <select name="activity_level" id="id_activity_level" required="">
                  <option value="" selected="">Activity level</option>
                  <option value="1">None or very little</option>
                  <option value="2">Light exercise 1-3 days a week</option>
                  <option value="3">Moderate exercise 3-5 days a week</option>
                  <option value="4">Hard exercise 6-7 days a week</option>
                  <option value="5">Very hard exercise and physical job</option>
                </select>                
              </div>
              {% if error_activity %}
              <div class="text-danger">{{ error_name }}</div>
              {% endif %}
            </div>
          </div>
          <div class="bmi-row">
            <div class="input-container text-container">
              <label for="id_email">Email Address<br>
              </label>
              <input type="email" name="email" id="id_email" placeholder="Your email address" size="15" required value="{{ email }}" >
              {% if error_email %}
              <div class="text-danger">{{ error_email }}</div>
              {% endif %}
              <span class="icon-i information-dropdown">
              <div class="dropdown">We'll email you a copy of your profile</div>
              </span> </div>
          </div>
         <div class="bmi-row">
            <div class="input-container radios">
              <label class="pdl">Send me diet tips &amp; offers<br><br>
              </label>
              <label class="radio-style">
              <input type="radio" id="diet_tips_0" value="1" name="diet_tips">
              <span></span>
              <label for="id_gender_0">Yes</label>
              </label>
              <label class="radio-style">
              <input type="radio" id="diet_tips_1" value="0" name="diet_tips" checked="">
              <span></span>
              <label for="id_gender_1">No</label>
              </label>
            </div>
          </div>
         
          <div class="bmi-row signup-row">
            <button class="button burgundy" type="submit" name="btn_bmi" value="{{ button_submit }}">Show my results</button>
          </div>
        
      </div>
    </div>
  </div>
</div>
          {{ captcha }}
        </fieldset>
        <!--<div class="buttons">
          <div class="pull-right">
            <input class="btn btn-primary" type="submit" value="{{ button_submit }}" />
          </div>
        </div>-->
      </form>
      <script>
          {% if height_feet %}
       $('#id_height_feet').val({{ height_feet }});
              {% endif %}
          {% if height_inches %}
       $('#id_height_inches').val({{ height_inches }});
              {% endif %}
          {% if weight_stone %}
       $('#id_weight_stone').val({{ weight_stone }});
              {% endif %}
        {% if weight_pounds %}
       $('#id_weight_pounds').val({{ weight_pounds }});
              {% endif %}
        {% if age %}
       $('#id_age').val({{ age }});
              {% endif %}
        {% if activity_level %}
       $('#id_activity_level').val({{ activity_level }});
              {% endif %}
         {% if gender %}
       $('#id_gender_{{ gender }}').prop("checked", true);
              {% endif %}
      </script>
       {% if btn_bmi %}
      <div class="inner bmi-results-container">
        <div class="bmi-results open">
          <div class="top panel-with-shadow"> <h1 class="text-center">Your BMI Result</h1></div>
          <div class="information-container">
            <h2>{{ texth1 }}</h2>
            <p>{{ text1 }}</p>
            <h2>{{ texth2 }}</h2>
            <p>{{ text2 }}</p>
            <h2>{{ texth3 }}</h2>
            <p>{{ text3 }}</p>
            <p>{{ text4 }}</p>
            
          </div>
        </div>
       
      </div>
              {% endif %}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }}


Leave a Reply