diff --git a/js/interface.templates.js b/js/interface.templates.js
index abf24832..be0c4bf4 100644
--- a/js/interface.templates.js
+++ b/js/interface.templates.js
@@ -30,13 +30,13 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.form"] = Handle
     return "      <div class=\"form-group cleafix\">\n        <div class=\"col-xs-12\">\n          <label class=\"control-label\">Options <small>(One per line)</small></label>\n        </div>\n        <div class=\"col-xs-12\">\n          <textarea v-on:input=\"_setOptions($event.target.value)\" class=\"form-control\">{{ _options }}</textarea>\n        </div>\n      </div>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", buffer = 
-  "<form v-on:submit.prevent=\"onSubmit\" class=\"form-horizontal\">\n  <div class=\"form-fields-holder\">\n    <div v-if=\"_isFormField\">\n      <div class=\"form-group cleafix\" :class=\"{ 'has-error': _fieldLabelError && !_showNameField }\">\n        <div class=\"col-xs-12\">\n          <div class=\"row\">\n            <div class=\"col-xs-5\">\n              <label class=\"control-label\" for=\"field-label\" v-if=\"!_showNameField\">\n                Field name & label</label>\n              <label class=\"control-label\" for=\"field-label\" v-else>\n                Field label</label>\n            </div>\n            <div class=\"col-xs-7 text-right\" v-if=\"!_showNameField\">\n              <span class=\"btn-link form-fields-customize\" @click=\"addCustomName\">Customize field name <i class=\"text-muted fa fa-question-circle\" ref=\"tooltip\" data-viewport=\".modal-body\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"Customize a different field name for the data source\"></i>\n              </span>\n            </div>\n            <div class=\"col-xs-12\">\n              <input class=\"form-control\" id=\"field-label\" type=\"text\" v-model.trim=\"label\" placeholder=\"Field description\" />\n              <p class=\"help-block\" v-if=\"_fieldLabelError && !_showNameField\" v-html=\"_fieldLabelError\"></p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"form-group cleafix\" :class=\"{ 'has-error': _fieldNameError }\" v-if=\"_showNameField\">\n        <div class=\"col-xs-12\">\n          <div class=\"row\">\n            <div class=\"col-xs-6\">\n              <label class=\"control-label\" for=\"field-name\">Field name</label>\n            </div>\n            <div class=\"col-xs-6 col-xs-6 text-right\">\n          <span class=\"btn-link form-fields-customize\" @click=\"addCustomName\">\n          Auto-match with field label\n          </span>\n            </div>\n            <div class=\"col-xs-12\">\n              <input id=\"field-name\" class=\"form-control\" type=\"text\" v-model.trim=\"name\" placeholder=\"Field name\" />\n              <p class=\"help-block\" v-if=\"_fieldNameError\" v-html=\"_fieldNameError\"></p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"form-group cleafix\">\n        <div class=\"col-xs-12\">\n          <label class=\"control-label\">Is this field required?</label>\n        </div>\n        <div class=\"col-xs-12\">\n          <div class=\"radio radio-icon\">\n            <input type=\"radio\" id=\"required-yes\" name=\"required-option\" v-bind:value=\"true\" v-model=\"required\">\n            <label for=\"required-yes\">\n              <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Users will have to fill in the field\n            </label>\n          </div>\n          <div class=\"radio radio-icon\">\n            <input type=\"radio\" id=\"required-no\" name=\"required-option\" v-bind:value=\"false\" v-model=\"required\">\n            <label for=\"required-no\">\n              <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The field is optional\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n";
+  "<form v-on:submit.prevent=\"onSubmit\" class=\"form-horizontal\">\n  <div class=\"form-fields-holder\">\n    <div v-if=\"_isFormField\">\n      <div class=\"form-group cleafix\" :class=\"{ 'has-error': _fieldLabelError }\">\n        <div class=\"col-xs-12\">\n          <div class=\"row\">\n            <div class=\"col-xs-5\">\n              <label class=\"control-label\" for=\"field-label\">Field label</label>\n            </div>\n            <div class=\"col-xs-12\">\n              <input class=\"form-control\" id=\"field-label\" type=\"text\" v-model.trim=\"label\" placeholder=\"Field description\" />\n              <p class=\"help-block\" v-if=\"_fieldLabelError\" v-html=\"_fieldLabelError\"></p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"form-group cleafix\" :class=\"{ 'has-error': _fieldNameError }\">\n        <div class=\"col-xs-12\">\n          <div class=\"row\">\n            <div class=\"col-xs-5\">\n              <label class=\"control-label\" for=\"field-name\">Field name</label>\n            </div>\n            <div class=\"col-xs-7 text-right\" v-if=\"!_showNameField\">\n              <span class=\"btn-link form-fields-customize\" @click=\"addCustomName\">Customize field name <i class=\"text-muted fa fa-question-circle\" ref=\"tooltip\" data-viewport=\".modal-body\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"Customize a different field name for the data source\"></i></span>\n            </div>\n            <div class=\"col-xs-7 col-xs-7 text-right\" v-else>\n               <span class=\"btn-link form-fields-customize\" @click=\"compareFieldName\">Auto-match with field label</span>\n            </div>\n            <div class=\"col-xs-12\">\n              <p v-if=\"!_showNameField\">{{name}}</p>\n              <input v-else id=\"field-name\" class=\"form-control\" type=\"text\" v-model.trim=\"name\" placeholder=\"Field name\" />\n              <p class=\"help-block\" v-if=\"_fieldNameError\" v-html=\"_fieldNameError\"></p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"form-group cleafix\">\n        <div class=\"col-xs-12\">\n          <label class=\"control-label\">Is this field required?</label>\n        </div>\n        <div class=\"col-xs-12\">\n          <div class=\"radio radio-icon\">\n            <input type=\"radio\" id=\"required-yes\" name=\"required-option\" v-bind:value=\"true\" v-model=\"required\">\n            <label for=\"required-yes\">\n              <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Users will have to fill in the field\n            </label>\n          </div>\n          <div class=\"radio radio-icon\">\n            <input type=\"radio\" id=\"required-no\" name=\"required-option\" v-bind:value=\"false\" v-model=\"required\">\n            <label for=\"required-no\">\n              <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The field is optional\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n";
   stack1 = ((helper = (helper = helpers.hasOptions || (depth0 != null ? depth0.hasOptions : depth0)) != null ? helper : alias2),(options={"name":"hasOptions","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper));
   if (!helpers.hasOptions) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
   return buffer + "\n    <div class=\"col-xs-12\">\n      "
     + ((stack1 = ((helper = (helper = helpers.template || (depth0 != null ? depth0.template : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"template","hash":{},"data":data}) : helper))) != null ? stack1 : "")
-    + "\n    </div>\n\n  </div>\n\n  <div class=\"footer\">\n    <button type=\"submit\" class=\"btn btn-primary\" :class=\"{ disabled: (_fieldNameError && _showNameField) || (_fieldLabelError && !_showNameField) }\">Done</button>\n  </div>\n</form>";
+    + "\n    </div>\n\n  </div>\n\n  <div class=\"footer\">\n    <button type=\"submit\" class=\"btn btn-primary\" :class=\"{ disabled: _fieldNameError || _fieldLabelError }\">Done</button>\n  </div>\n</form>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.horizontalRule"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/libs/builder.js b/js/libs/builder.js
index d9ccd645..5166e66f 100644
--- a/js/libs/builder.js
+++ b/js/libs/builder.js
@@ -162,18 +162,17 @@ var app = new Vue({
 
         $(event.item).remove();
 
-        var i = (_.max(_.compact(_.map(this.fields, function (field) {
-          var idx = field.name.match(/^field-([0-9]+)/);
-          if (idx && idx.length) {
-            return parseInt(idx[1], 10);
-          }
-        }))) || 0) + 1;
+        var fieldsWithSameName = _.filter(this.fields, function(item) {
+          return item.name.match(component.name.replace('(', '\\(').replace(')', '\\)'));
+        });
+
+        var index = fieldsWithSameName.length;
 
-        this.fields.splice(event.newIndex, 0, {
+        return this.fields.splice(event.newIndex, 0, {
           _type: componentName,
           _submit: typeof component.submit !== 'undefined' ? component.submit : true,
-          name: 'field-' + i,
-          label: component.name,
+          name: component.name + (index ? '-' + index : ''),
+          label: component.name + (index ? '-' + index : ''),
           value: value.default || value.type()
         });
       }
diff --git a/js/libs/core.js b/js/libs/core.js
index e91e8409..97be337d 100644
--- a/js/libs/core.js
+++ b/js/libs/core.js
@@ -159,11 +159,7 @@ Fliplet.FormBuilder = (function() {
 
       // On submit event
       component.methods._onSubmit = function() {
-        if (this.name === '') {
-          this.name = this.label;
-        }
-        
-        if (this._fieldNameError) {
+        if (this._fieldNameError || this._fieldLabelError) {
           return;
         }
 
@@ -183,13 +179,6 @@ Fliplet.FormBuilder = (function() {
         component.methods.onSubmit = component.methods._onSubmit;
       }
 
-      if (!component.mounted) {
-        component.mounted = function() {
-          this._showNameField = this.name !== this.label;
-          this.initTooltip();
-        };
-      }
-
       component.props._fields = {
         type: Array
       };
@@ -227,7 +216,7 @@ Fliplet.FormBuilder = (function() {
   
       component.computed._fieldLabelError = function() {
         if (!this.label) {
-          return 'Please provide a Field name & label';
+          return 'Please provide a Field Label';
         }
     
         var existing = _.findIndex(this._fields, {
@@ -235,7 +224,7 @@ Fliplet.FormBuilder = (function() {
         });
     
         if (existing > -1 && existing !== this._idx) {
-          return this.name + ' is taken. Please use another Field Name.';
+          return this.name + ' is taken. Please use another Field Label.';
         }
     
         return '';
@@ -243,13 +232,21 @@ Fliplet.FormBuilder = (function() {
   
       component.methods._addCustomName = function() {
         this._showNameField = !this._showNameField;
-        this.name = this.label;
         this.initTooltip();
       };
-  
+
       if (!component.methods.addCustomName) {
         component.methods.addCustomName = component.methods._addCustomName;
       }
+
+      component.methods._compareFieldName = function() {
+        this.name = this.label;
+        this.initTooltip();
+      };
+
+      if (!component.methods.compareFieldName) {
+        component.methods.compareFieldName = component.methods._compareFieldName;
+      }
   
       component.methods._initTooltip = function() {
         var $vm = this;
diff --git a/templates/configurations/form.interface.hbs b/templates/configurations/form.interface.hbs
index cb3f3cb1..7af6ce4e 100644
--- a/templates/configurations/form.interface.hbs
+++ b/templates/configurations/form.interface.hbs
@@ -1,40 +1,35 @@
 <form v-on:submit.prevent="onSubmit" class="form-horizontal">
   <div class="form-fields-holder">
     <div v-if="_isFormField">
-      <div class="form-group cleafix" :class="{ 'has-error': _fieldLabelError && !_showNameField }">
+      <div class="form-group cleafix" :class="{ 'has-error': _fieldLabelError }">
         <div class="col-xs-12">
           <div class="row">
             <div class="col-xs-5">
-              <label class="control-label" for="field-label" v-if="!_showNameField">
-                Field name & label</label>
-              <label class="control-label" for="field-label" v-else>
-                Field label</label>
-            </div>
-            <div class="col-xs-7 text-right" v-if="!_showNameField">
-              <span class="btn-link form-fields-customize" @click="addCustomName">Customize field name <i class="text-muted fa fa-question-circle" ref="tooltip" data-viewport=".modal-body" data-toggle="tooltip" data-placement="left" title="Customize a different field name for the data source"></i>
-              </span>
+              <label class="control-label" for="field-label">Field label</label>
             </div>
             <div class="col-xs-12">
               <input class="form-control" id="field-label" type="text" v-model.trim="label" placeholder="Field description" />
-              <p class="help-block" v-if="_fieldLabelError && !_showNameField" v-html="_fieldLabelError"></p>
+              <p class="help-block" v-if="_fieldLabelError" v-html="_fieldLabelError"></p>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="form-group cleafix" :class="{ 'has-error': _fieldNameError }" v-if="_showNameField">
+      <div class="form-group cleafix" :class="{ 'has-error': _fieldNameError }">
         <div class="col-xs-12">
           <div class="row">
-            <div class="col-xs-6">
+            <div class="col-xs-5">
               <label class="control-label" for="field-name">Field name</label>
             </div>
-            <div class="col-xs-6 col-xs-6 text-right">
-          <span class="btn-link form-fields-customize" @click="addCustomName">
-          Auto-match with field label
-          </span>
+            <div class="col-xs-7 text-right" v-if="!_showNameField">
+              <span class="btn-link form-fields-customize" @click="addCustomName">Customize field name <i class="text-muted fa fa-question-circle" ref="tooltip" data-viewport=".modal-body" data-toggle="tooltip" data-placement="left" title="Customize a different field name for the data source"></i></span>
+            </div>
+            <div class="col-xs-7 col-xs-7 text-right" v-else>
+               <span class="btn-link form-fields-customize" @click="compareFieldName">Auto-match with field label</span>
             </div>
             <div class="col-xs-12">
-              <input id="field-name" class="form-control" type="text" v-model.trim="name" placeholder="Field name" />
+              <p v-if="!_showNameField">\{{name}}</p>
+              <input v-else id="field-name" class="form-control" type="text" v-model.trim="name" placeholder="Field name" />
               <p class="help-block" v-if="_fieldNameError" v-html="_fieldNameError"></p>
             </div>
           </div>
@@ -80,6 +75,6 @@
   </div>
 
   <div class="footer">
-    <button type="submit" class="btn btn-primary" :class="{ disabled: (_fieldNameError && _showNameField) || (_fieldLabelError && !_showNameField) }">Done</button>
+    <button type="submit" class="btn btn-primary" :class="{ disabled: _fieldNameError || _fieldLabelError }">Done</button>
   </div>
 </form>
\ No newline at end of file