diff --git a/datacenterlight/templates/datacenterlight/calculator_form.html b/datacenterlight/templates/datacenterlight/calculator_form.html
new file mode 100644
index 00000000..65c19c9b
--- /dev/null
+++ b/datacenterlight/templates/datacenterlight/calculator_form.html
@@ -0,0 +1,89 @@
+{% load staticfiles i18n%}
+<form id="order_form" method="POST" action="" data-toggle="validator" role="form">
+    {% csrf_token %}
+    <div class="title">
+       <h3>{% trans "VM hosting" %} </h3>
+    </div>
+    <div class="price">
+        <span id="total">15</span>
+        <span>CHF/{% trans "month" %}</span>
+        <div class="price-text">
+            <p>{% trans "VAT included" %}</p>
+        </div>
+    </div>
+    <div class="descriptions">
+        <div class="description form-group">
+            <p>{% trans "Hosted in Switzerland" %}</p>
+        </div>
+        <div class="form-group">
+            <div class="description input">
+            <i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
+            <input class="input-price select-number" type="number"  min="1" max="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" required>
+            <span> Core</span>
+            <i class="fa fa-plus-circle right" data-plus="cpu"  aria-hidden="true"></i>
+            </div>
+            <div class="help-block with-errors"></div>
+        </div>
+        <div class="form-group">
+            <div class="description input">
+            <i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
+            <input id="ramValue" class="input-price select-number" type="number"  min="2" max="200"  name="ram" data-error="{% trans 'Please enter a value greater than or equal to 2.' %}" required>
+            <span> GB RAM</span>
+            <i class="fa fa-plus-circle right" data-plus="ram"  aria-hidden="true"></i>
+            </div>
+            <div class="help-block with-errors"></div>
+        </div>
+        <div class="form-group">
+            <div class="description input">
+            <i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
+            <input id="storageValue" class="input-price select-number" type="number"  min="10" max="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" required>
+            <span>{% trans "GB Storage (SSD)" %}</span>
+            <i class="fa fa-plus-circle right" data-plus="storage"  aria-hidden="true"></i>
+            </div>
+            <div class="help-block with-errors"></div>
+        </div>
+        <div class="description select-configuration input form-group justify-center">
+            <label for="config">OS</label>
+            <select name="config" id="">
+                {% for template in templates %}
+                    <option value="{{template.id}}">{{template.name}} </option>
+                {% endfor %}
+            </select>
+        </div>
+        <input type="hidden" name="total">
+        <!--<div class="description check-ip">
+            <input type="checkbox" name="ipv6"> Ipv6 Only<br>
+        </div>-->
+        <div class="form-group">
+            <div class="description input justify-center">
+            <label for="name" class="control-label">{% trans "Name"%}</label>
+            <input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}" data-minlength="3" data-error="{% trans 'Please enter your name' %}" required>
+            </div>
+            <div class="help-block with-errors">
+                {% for message in messages %}
+                    {% if 'name' in message.tags %}
+                    <ul class="list-unstyled"><li>
+                        {{ message|safe }}
+                    </li></ul>
+                    {% endif %}
+                {% endfor %}
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="description input justify-center">
+            <label for="email" class="control-label">{% trans "Email"%}</label>
+            <input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control" placeholder="{% trans 'Your Email' %}" data-error="{% trans 'Please enter a valid email address' %}" required>
+            </div>
+            <div class="help-block with-errors">
+                {% for message in messages %}
+                    {% if 'email' in message.tags %}
+                     <ul class="list-unstyled"><li>
+                        {{ message|safe }}
+                    </li></ul>
+                    {% endif %}
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+    <input type="submit" class="btn btn-primary disabled" value="{% trans 'Order Now!' %}"></input>
+</form>