<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/crm/"><img src="{% static 'css/images/logo.png' %}" height="35px" style="margin-top:-10px;"></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href=/crm/farmer/search/> <strong><span class="glyphicon glyphicon-user blue"></span>Farmer </strong></a></li>
<li><a href="/crm/catalog/view"><strong><span class="glyphicon glyphicon-grain blue"></span>Products</strong></a></li>
<li><a href="/crm/salesorder/search/"><strong><span class="glyphicon glyphicon-shopping-cart blue"></span> Orders</strong> </a></li>
<li><a href="/crm/salesorder/calls/"> <strong><span class="glyphicon glyphicon-earphone"></span>Manage Calls</strong> </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:0099FF" href="/logout"><span class="glyphicon glyphicon-log-out"></span>Logout</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container" style="margin-top:50px;">
<form class="form-horizontal" method="post" action="">
<fieldset>
<div id="edit_farmer" style="display:none"></div>
<div class="row">
<div class="col-md-2 panel panel-heading">Contact Information</div>
<div class="col-md-4 panel panel-heading" style="display:none; color:red" id="contact_error"></div>
</div>
<div class="row form-group">
<label class="col-md-2 control-label" for="mobile">Contact No.</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-phone"></i>
</span>
<input id="mobile" maxlength="10" name="mobile" placeholder="xxxxxxxxxxxx" class="form-control input-md ac_mobile" type="number" value={{mobile}} >
</div>
</div>
<label class="col-md-1 control-label" for="sms">Language</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-list"></i>
</span>
<select id="sms" name="sms" class="form-control input-md">
<option value="en">English</option>
<option value="gu">Gujarati</option>
<option value="mr">Marathi</option>
<option value="hi">Hindi</option>
</select>
</div>
</div>
<div class="col-md-1">
<a id="add_mobile" onclick=add_mobile()><i class="glyphicon glyphicon-plus"></i></a>
</div>
</div>
<div class="row form-group">
<div class="col-md-8" id="mobile_numbers"></div>
</div>
<div class="row form-group">
<label class="col-md-1 control-label" for="first_name">First Name</label>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input id="first_name" name="first_name" placeholder="" class="form-control input-md" type="text">
</div></div>
<label class="col-md-1 control-label" for="middle_name">Mid Name</label>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input id="middle_name" name="middle_name" placeholder="" class="form-control input-md" type="text">
</div>
</div>
<label class="col-md-1 control-label" for="last_name">Last Name</label>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input id="last_name" name="last_name" placeholder="" class="form-control input-md" type="text">
</div>
</div>
</div>
<div class="row form-group">
<label class="col-md-2 control-label" for="farmer_type">Farmer Type</label>
<div class="col-md-4">
<label class="radio-inline"><input type="radio" name="farmer_type" value="Farmer" checked>Farmer</label>
<label class="radio-inline"><input type="radio" name="farmer_type" value="Politician">Politician</label>
<label class="radio-inline"><input type="radio" name="farmer_type" value="Retailer">Retailer</label>
<label class="radio-inline"><input type="radio" name="farmer_type" value="Supplier">Supplier</label>
</div>
<label class="col-md-1 control-label" for="description">Description</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-pencil"></i>
</span>
<textarea class="form-control" id="description" name="description" placeholder="Description"></textarea>
</div></div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="smartphone">Has Touchscreen Phone ?</label>
<div class="col-md-3">
<label class="radio-inline"><input type="radio" name="smartphone" value=true>Yes</label>
<label class="radio-inline"><input type="radio" name="smartphone" value=false>No</label>
<label class="radio-inline"><input type="radio" name="smartphone" value=null checked>Don't Know</label>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2 panel panel-heading">Address Information</div>
<div class="col-md-4 panel panel-heading" style="display:none; color:red" id="address_error"></div>
</div>
<div class="row form-group">
<label class="col-md-2 control-label" for="village">Village</label>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-home"></i>
</span>
<input id="village" name="village" placeholder="" class="form-control input-md ac_village" required="" type="text">
</div> </div>
<label class="col-md-1 control-label" for="state">State</label>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-list"></i>
</span>
<input id="state" name="state" placeholder="" class="form-control input-md ac_state" required="" type="text">
</div></div>
<label class="col-md-1 control-label" for="district">District</label>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-list"></i>
</span>
<input id="district" name="district" placeholder="" class="form-control input-md ac_district" required="" type="text">
</div>
</div>
</div>
<div class="row form-group">
<label class="col-md-2 control-label" for="taluka">Taluka</label>
<div class="col-md-2">
<input id="taluka" name="taluka" placeholder="" class="form-control input-md ac_taluka" required="" type="text">
</div>
<label class="col-md-1 control-label" for="other_taluka">Other Taluka</label>
<div class="col-md-2">
<input id="other_taluka" name="other_taluka" disabled="true" class="form-control input-md ac_taluka" type="text">
</div>
<label class="col-md-1 control-label" for="post_office">Post Office</label>
<div class="col-md-2">
<input id="post_office" name="post_office" placeholder="" class="form-control input-md ac_post_office" required="" type="text">
</div>
</div>
<div class="row form-group">
<label class="col-md-2 control-label" for="pin_code">Pin Code</label>
<div class="col-md-2">
<input id="pin_code" name="pin_code" placeholder="" disabled="true" class="form-control input-md" required="" type="text">
</div>
<label class="col-md-3 control-label" for="street_address">Address Line 1</label>
<div class="col-md-5">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-pencil"></i>
</span>
<textarea class="form-control" id="street_address" name="street_address" placeholder="Addess Details..."></textarea>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-8 text-center">
<button id="save" name="save" class="btn btn-large btn-success"> Save Farmer Information</button>
<button class="btn btn-large btn-danger" type="button" onclick=history.go(-1)> Cancel </button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="b">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2016 - Site Built By
<a href="http://www.nimbrisk.com">NimbriskTechnology.com</a>
</p>
<a href="" class="navbar-btn btn-danger btn-xs btn pull-right">
<span class="glyphicon glyphicon-star"></span> Subscribe on YouTube</a>
</div>
</div>
</div>
li:hover {
background-color: #C8C8C8 ;
}
.blue {
color: green;
}
form {
padding-left: 20px;
padding-right: 10px;
}
.b
{
margin-bottom:90px;
}