diff --git a/.gitignore b/.gitignore
index f240ab3..9b9245f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,5 +4,8 @@
 .project
 /.idea
 
+# Ignore .bak files
+js/widget-settings.min.js.bak
+
 # Ignore system files
 .DS_Store
diff --git a/admin.php b/admin.php
index dafcba7..e27d4a9 100755
--- a/admin.php
+++ b/admin.php
@@ -56,9 +56,9 @@ function emfluence_emailer_admin_enqueue_scripts($hook) {
   );
 
   wp_enqueue_script(
-      'emfluence-emailer-widget'
-      ,plugins_url( '/js/widget-settings.min.js', __FILE__ )
-      ,array('jquery', 'jquery-ui-accordion', 'jquery-ui-datepicker')
+    'emfluence-emailer-widget'
+    ,plugins_url( '/js/widget-settings.min.js', __FILE__ )
+    ,array('jquery', 'jquery-ui-accordion', 'jquery-ui-datepicker')
   );
 
   // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
diff --git a/css/widget-frontend.css b/css/widget-frontend.css
old mode 100644
new mode 100755
index 9f3fc78..ca8c699
--- a/css/widget-frontend.css
+++ b/css/widget-frontend.css
@@ -1,2 +1,3 @@
-.emfluence_email_signup .message.error{color:red}.emfluence_email_signup .field.row,.emfluence_email_signup .actions.row{padding:0.5em 0}
+/*.emfluence_email_signup .message.error{color:red}.emfluence_email_signup .field.row,.emfluence_email_signup .actions.row{padding:0.5em 0}*/
+.emfluence_email_signup {.message.error {color: red;}.field.row, .actions.row {padding: 0.5em 0;}.field.row label {display: block;}}
 /*# sourceMappingURL=widget-frontend.css.map */
diff --git a/css/widget-frontend.css.map b/css/widget-frontend.css.map
old mode 100644
new mode 100755
diff --git a/css/widget-frontend.scss b/css/widget-frontend.scss
old mode 100644
new mode 100755
index 59dfe17..6d92229
--- a/css/widget-frontend.scss
+++ b/css/widget-frontend.scss
@@ -6,4 +6,8 @@
   .actions.row {
     padding: 0.5em 0;
   }
+
+  .field.row label {
+    display: block;
+  }
 }
\ No newline at end of file
diff --git a/css/widget-settings.css b/css/widget-settings.css
old mode 100644
new mode 100755
index 8f358f9..33b45b6
--- a/css/widget-settings.css
+++ b/css/widget-settings.css
@@ -485,8 +485,24 @@
 .wp-emfluence { padding: 10px 0; }
 .wp-emfluence .contact-field { border-top: solid 1px #aaa; padding: 5px 0 10px; }
 .wp-emfluence p.heading label { padding-right: 10px; display: inline-block; }
+.wp-emfluence p.heading label:first-of-type { font-weight: bold !important; }
+.wp-emfluence p.heading label input.order { display: inline !important; width: 40px !important; }
 .wp-emfluence label.heading { font-weight: 600; font-size: 1rem; }
 .wp-emfluence input.hidden-value { display: none; vertical-align: middle; }
 .wp-emfluence .validation-error { color: red; display: block; }
 
+.widget-content p, .widget-content .wp-emfluence p { font-size: 12px; }
+.widget-content .wp-emfluence div.filter { display: block; width: 100%; }
+.widget-content .wp-emfluence div.selected { display: block; width: 100%; padding: 0 10px; }
+.widget-content .wp-emfluence div.selected div { display: block; }
+
+.wp-emfluence .basic-fields-adder p select { display: inline-block !important; width: 60% !important; }
+.wp-emfluence .basic-fields-adder p button { display: inline-block !important; margin-left: 6px; }
+
+.wp-emfluence .custom-variable-adder p input { width: 60% !important; display: inline-block !important; }
+.wp-emfluence .custom-variable-adder p button { display: inline-block !important; margin-left: 5px; }
+
+/* .wp-emfluence .contact-field label { display: inline !important; }
+.wp-emfluence .contact-field label input.order { width: 20px; } */
+
 /*# sourceMappingURL=widget-settings.css.map */
diff --git a/css/widget-settings.css.map b/css/widget-settings.css.map
old mode 100644
new mode 100755
diff --git a/css/widget-settings.scss b/css/widget-settings.scss
old mode 100644
new mode 100755
index 78709e8..d16e3a4
--- a/css/widget-settings.scss
+++ b/css/widget-settings.scss
@@ -10,6 +10,13 @@
     padding-right: 10px;
     display: inline-block;
   }
+  p.heading label:first-of-type { 
+    font-weight: bold !important; 
+  }
+  p.heading label input.order {
+    display: inline !important;
+    width: 40px !important;
+  }
   label.heading {
     font-weight: 600;
     font-size: 1rem;
@@ -22,4 +29,49 @@
     color: red;
     display: block;
   }
+
+  p {
+    font-size: 12px;
+  }
+
+  div.filter { 
+    display: block; width: 100%; 
+  }
+
+  div.selected { 
+    display: block; 
+    width: 100%; 
+    padding: 0 10px; 
+
+    div { 
+      display: block; 
+    }
+  }
+
+  .basic-fields-adder {
+    p {
+      select {
+        display: inline-block !important; width: 60% !important;
+      }
+
+      button {
+        display: inline-block !important; margin-left: 6px;
+      }
+    }
+  }
+
+  .custom-variable-adder p input { 
+    width: 60% !important; 
+    display: inline-block !important;
+  }
+  .custom-variable-adder p button { 
+    display: inline-block !important;
+    margin-left: 5px;
+  }
+}
+
+.widget-content {
+  p {
+    font-size: 12px;
+  }
 }
diff --git a/emfluence.php b/emfluence.php
index 8f4c5f7..adbe717 100755
--- a/emfluence.php
+++ b/emfluence.php
@@ -4,7 +4,7 @@
 Plugin URI: https://github.com/emfluencekc/wp-emfluence
 Description: Easily add forms to your website for contacts to add or update their details in your emfluence Marketing Platform account.
 Author: emfluence Digital Marketing
-Version: 2.13
+Version: 2.14
 Author URI: https://www.emfluence.com
 Text Domain: emfl_form
 */
diff --git a/js/widget-settings.js b/js/widget-settings.js
index 19d25c6..98cd250 100755
--- a/js/widget-settings.js
+++ b/js/widget-settings.js
@@ -1,5 +1,6 @@
 // Multiple instances of the widget may exist on the widget settings page.
 // This is completely functional programming.
+
 emfluenceEmailerWidget = {
 
   init: function() {
@@ -9,6 +10,7 @@ emfluenceEmailerWidget = {
       collapsible: true,
       active: false
     });
+    
     jQuery('.wp-emfluence .type-selector').each(function(index, el) {
       emfluenceEmailerWidget.fields.typeSelected(jQuery(el).parents('.type-section'));
     });
@@ -55,9 +57,12 @@ emfluenceEmailerWidget = {
     add: function(element){
       $widget = jQuery(element).parents('.widget');
       $input = this.getInput($widget);
+      
+      $groupIdsContainer = this.getGroupIdsContainer($widget);
 
       // Validate the value
       var values = this.processValue($input.val());
+      
       if( !values ){
         return;
       }
@@ -71,14 +76,45 @@ emfluenceEmailerWidget = {
       }
 
       $checkboxesContainer.append( this.createCheckbox($widget, values) );
+      
+      if($groupIdsContainer.val().length === 0) {
+        $groupIdsContainer.val( values.id );
+      } else {
+        $groupIdsContainer.val( $groupIdsContainer.val() + ',' + values.id );
+      }
+
       $input.val(null);
     }
+    
+    ,removeGroup: function(element) {
+      $widget = jQuery(element).parents('.widget');
+      $groupIdsContainer = this.getGroupIdsContainer($widget);
+      $currentGroupId = jQuery(element).attr("value");
+      $groupIdsArray = $groupIdsContainer.val().split(',');
+
+      if(jQuery(element).is(":checked")) {
+        $groupIdsArray.push($currentGroupId);
+      } else {
+        $groupIdsArray = jQuery.grep( $groupIdsArray, function(value) {
+          return value != $currentGroupId;
+        });
+      }
+
+      $commaString = $groupIdsArray.join(",");
+      $groupIdsContainer.val($commaString);
+    }
+
     ,getInput: function($widget){
       return $widget.find('.groups input[list]');
     }
     ,getCheckboxesContainer: function($widget){
       return $widget.find('.groups .selected');
     }
+
+    ,getGroupIdsContainer: function($widget) {
+      return $widget.find('.begroups');
+    }
+
     ,processValue: function(value){
       // Seperate the name and id
       // It should be in the format of name [##]
@@ -92,8 +128,20 @@ emfluenceEmailerWidget = {
       }
     }
     ,createCheckbox: function($widget, values){
-      var widgetId = $widget.attr('id').slice(-1);
-      var id = 'groups-' + widgetId + '-' + values.id;
+
+      var widgetId = '';
+      var id = '';
+      
+      try{
+        widgetId = $widget.attr('id').slice(-1);
+        id = 'groups-' + widgetId + '-' + values.id;
+      }
+      catch {
+        instance_number = jQuery("#emfluence_email_signup_instance").val();
+        widgetId = 'widget-7_emfluence_email_signup-' + instance_number.slice(-1);
+        id = 'groups-' + instance_number + '-' + values.id;
+      }
+      
       var html =
         '<div><label for="' + id + '">\
           <input id="' + id + '" type="checkbox" value="' + values.id + '" name="groups[]" checked /> ' + values.name + '\
diff --git a/js/widget-settings.min.js b/js/widget-settings.min.js
index ff2ec61..6e4c07e 100755
--- a/js/widget-settings.min.js
+++ b/js/widget-settings.min.js
@@ -1 +1 @@
-emfluenceEmailerWidget={init:function(){$container=jQuery(".wp-emfluence"),$container.accordion({heightStyle:"content",collapsible:!0,active:!1}),jQuery(".wp-emfluence .type-selector").each(function(e,t){emfluenceEmailerWidget.fields.typeSelected(jQuery(t).parents(".type-section"))}),$container.on("change",".type-selector",function(){emfluenceEmailerWidget.fields.typeSelected(jQuery(this).parents(".type-section"))}),emfluenceEmailerWidget.initValidationRedirectField()},initValidationRedirectField:function(){var e=jQuery(".wp-emfluence .redirect-url");e.change(function(){var e=jQuery(this);""===e.val()||emfluenceEmailerWidget.validURL(e.val())?e.siblings(".validation-error").remove():0===e.siblings(".validation-error").length&&e.after('<span class="validation-error">Invalid URL format</span>')}),e.keyup(function(){var e=jQuery(this);0!==e.siblings(".validation-error").length&&(""===e.val()||emfluenceEmailerWidget.validURL(e.val()))&&e.siblings(".validation-error").remove()}),e.each(function(){var e=jQuery(this);0===e.siblings(".validation-error").length&&(""===e.val()||emfluenceEmailerWidget.validURL(e.val())||e.after('<span class="validation-error">Invalid URL format</span>'))})},validURL:function(e){return/^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(e)},groups:{add:function(e){$widget=jQuery(e).parents(".widget"),$input=this.getInput($widget);var t=this.processValue($input.val());t&&($checkboxesContainer=this.getCheckboxesContainer($widget),$checkboxesContainer.find('input[type="checkbox"][value="'+t.id+'"]').length>0?alert(t.name+" is already in the selected groups."):($checkboxesContainer.append(this.createCheckbox($widget,t)),$input.val(null)))},getInput:function(e){return e.find(".groups input[list]")},getCheckboxesContainer:function(e){return e.find(".groups .selected")},processValue:function(e){var t=e.match(/(.+)\s\[(\d+)\]/);return!!t&&{name:t[1],id:t[2]}},createCheckbox:function(e,t){var i="groups-"+e.attr("id").slice(-1)+"-"+t.id;return'<div><label for="'+i+'">          <input id="'+i+'" type="checkbox" value="'+t.id+'" name="groups[]" checked /> '+t.name+"        </label></div>"}},fields:{add:function(e){$widget=jQuery(e).parents(".widget"),$input=this.getInput($widget);var t=$input.val(),i=$input.find("option:selected").data("settings");if(!t||!i)return console.error("Field not found.");$container=this.getContainer($widget),$container.find('[data-variable-key="'+t+'"]').length>0?alert(i.name+" is already in the selected contact fields."):($container.append(this.createSection($widget,t,i)),$input.val(null))},getInput:function(e){return e.find(".basic-fields-adder select")},getContainer:function(e){return e.find(".basic_contact_fields")},getCustomTemplate:function(e){return e.find(".basic_contact_field_template").html()},createSection:function(e,t,i){var n=1;e.find(".basic_contact_fields .contact-field input.order").each(function(e,t){var i=parseInt(t.value);isNaN(i)||(n=Math.max(n,i))});return this.getCustomTemplate(e).replace(new RegExp("CONTACT_FIELD_NAME","g"),i.name).replace(new RegExp("CONTACT_FIELD_KEY","g"),t).replace(new RegExp("CONTACT_FIELD_REQUIRED_MESSAGE","g"),i.required_message).replace(new RegExp("CONTACT_FIELD_LABEL","g"),i.label).replace(new RegExp("CONTACT_FIELD_ORDER","g"),n+1)},typeSelected:function(e){var t=e.find(".type-selector option:selected").text();switch(e.find(".hidden-value").hide(),t){case"hidden":e.find(".hidden-value").show()}}},variables:{add:function(e){$widget=jQuery(e).parents(".widget"),$input=this.getInput($widget);var t=$input.val();t&&($customVariablesContainer=this.getCustomVariablesContainer($widget),$customVariablesContainer.find('[data-variable-key="custom_'+t+'"]').length>0?alert(t+" is already in the selected custom variables."):($customVariablesContainer.append(this.createVariableSection($widget,t)),$input.val(null)))},getInput:function(e){return e.find(".custom-variable-adder input")},getCustomVariablesContainer:function(e){return e.find(".custom_variables")},getCustomVariablesTemplate:function(e){return e.find(".custom_variable_template").html()},createVariableSection:function(e,t){return this.getCustomVariablesTemplate(e).replace(new RegExp("CUSTOM_VARIABLE_NUMBER","g"),t)}}},jQuery(function(){$=jQuery,emfluenceEmailerWidget.init(),$(document).ajaxSuccess(emfluenceEmailerWidget.init)});
\ No newline at end of file
+emfluenceEmailerWidget={init:function(){($container=jQuery(".wp-emfluence")).accordion({heightStyle:"content",collapsible:!0,active:!1}),jQuery(".wp-emfluence .type-selector").each(function(e,t){emfluenceEmailerWidget.fields.typeSelected(jQuery(t).parents(".type-section"))}),$container.on("change",".type-selector",function(){emfluenceEmailerWidget.fields.typeSelected(jQuery(this).parents(".type-section"))}),emfluenceEmailerWidget.initValidationRedirectField()},initValidationRedirectField:function(){var e=jQuery(".wp-emfluence .redirect-url");e.change(function(){var e=jQuery(this);""===e.val()||emfluenceEmailerWidget.validURL(e.val())?e.siblings(".validation-error").remove():0===e.siblings(".validation-error").length&&e.after('<span class="validation-error">Invalid URL format</span>')}),e.keyup(function(){var e=jQuery(this);0!==e.siblings(".validation-error").length&&(""===e.val()||emfluenceEmailerWidget.validURL(e.val()))&&e.siblings(".validation-error").remove()}),e.each(function(){var e=jQuery(this);0!==e.siblings(".validation-error").length||""===e.val()||emfluenceEmailerWidget.validURL(e.val())||e.after('<span class="validation-error">Invalid URL format</span>')})},validURL:function(e){return/^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(e)},groups:{add:function(e){$widget=jQuery(e).parents(".widget"),$input=this.getInput($widget),$groupIdsContainer=this.getGroupIdsContainer($widget);var t=this.processValue($input.val());if(t){if(($checkboxesContainer=this.getCheckboxesContainer($widget)).find('input[type="checkbox"][value="'+t.id+'"]').length>0){alert(t.name+" is already in the selected groups.");return}$checkboxesContainer.append(this.createCheckbox($widget,t)),0===$groupIdsContainer.val().length?$groupIdsContainer.val(t.id):$groupIdsContainer.val($groupIdsContainer.val()+","+t.id),$input.val(null)}},removeGroup:function(e){$widget=jQuery(e).parents(".widget"),$groupIdsContainer=this.getGroupIdsContainer($widget),$currentGroupId=jQuery(e).attr("value"),$groupIdsArray=$groupIdsContainer.val().split(","),jQuery(e).is(":checked")?$groupIdsArray.push($currentGroupId):$groupIdsArray=jQuery.grep($groupIdsArray,function(e){return e!=$currentGroupId}),$commaString=$groupIdsArray.join(","),$groupIdsContainer.val($commaString)},getInput:function(e){return e.find(".groups input[list]")},getCheckboxesContainer:function(e){return e.find(".groups .selected")},getGroupIdsContainer:function(e){return e.find(".begroups")},processValue:function(e){var t=e.match(/(.+)\s\[(\d+)\]/);return!!t&&{name:t[1],id:t[2]}},createCheckbox:function(e,t){var i="",n="";try{i=e.attr("id").slice(-1),n="groups-"+i+"-"+t.id}catch{i="widget-7_emfluence_email_signup-"+(instance_number=jQuery("#emfluence_email_signup_instance").val()).slice(-1),n="groups-"+instance_number+"-"+t.id}return'<div><label for="'+n+'">          <input id="'+n+'" type="checkbox" value="'+t.id+'" name="groups[]" checked /> '+t.name+"        </label></div>"}},fields:{add:function(e){$widget=jQuery(e).parents(".widget");var t=($input=this.getInput($widget)).val(),i=$input.find("option:selected").data("settings");if(!t||!i)return console.error("Field not found.");if(($container=this.getContainer($widget)).find('[data-variable-key="'+t+'"]').length>0){alert(i.name+" is already in the selected contact fields.");return}$container.append(this.createSection($widget,t,i)),$input.val(null)},getInput:function(e){return e.find(".basic-fields-adder select")},getContainer:function(e){return e.find(".basic_contact_fields")},getCustomTemplate:function(e){return e.find(".basic_contact_field_template").html()},createSection:function(e,t,i){var n=1;return e.find(".basic_contact_fields .contact-field input.order").each(function(e,t){var i=parseInt(t.value);isNaN(i)||(n=Math.max(n,i))}),this.getCustomTemplate(e).replace(RegExp("CONTACT_FIELD_NAME","g"),i.name).replace(RegExp("CONTACT_FIELD_KEY","g"),t).replace(RegExp("CONTACT_FIELD_REQUIRED_MESSAGE","g"),i.required_message).replace(RegExp("CONTACT_FIELD_LABEL","g"),i.label).replace(RegExp("CONTACT_FIELD_ORDER","g"),n+1)},typeSelected:function(e){var t=e.find(".type-selector option:selected").text();e.find(".hidden-value").hide(),"hidden"===t&&e.find(".hidden-value").show()}},variables:{add:function(e){$widget=jQuery(e).parents(".widget");var t=($input=this.getInput($widget)).val();if(t){if(($customVariablesContainer=this.getCustomVariablesContainer($widget)).find('[data-variable-key="custom_'+t+'"]').length>0){alert(t+" is already in the selected custom variables.");return}$customVariablesContainer.append(this.createVariableSection($widget,t)),$input.val(null)}},getInput:function(e){return e.find(".custom-variable-adder input")},getCustomVariablesContainer:function(e){return e.find(".custom_variables")},getCustomVariablesTemplate:function(e){return e.find(".custom_variable_template").html()},createVariableSection:function(e,t){return this.getCustomVariablesTemplate(e).replace(RegExp("CUSTOM_VARIABLE_NUMBER","g"),t)}}},jQuery(function(){$=jQuery,emfluenceEmailerWidget.init(),$(document).ajaxSuccess(emfluenceEmailerWidget.init)});
\ No newline at end of file
diff --git a/readme.txt b/readme.txt
index beb7694..4bba8dd 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,8 +1,8 @@
 === emfluence Marketing Platform ===
 Tags: email, email marketing, emailmarketing, emfluence, api, marketing automation, widget, email widget, email signup, mailing list, newsletter, form, automation
 Requires at least: 4.0
-Tested up to: 6.0
-Stable tag: 2.13
+Tested up to: 6.3.2
+Stable tag: 2.14
 Requires PHP: 5.6
 Contributors: emfluencekc, mightyturtle
 License: GPLv2 or later
@@ -57,6 +57,10 @@ choose date as your type for your field on your widget too.
 
 == Changelog ==
 
+= 2.14 =
+* Error fixes for block widget editor
+* Two new fields "Form name" and "Form ID" are added
+
 = 2.13 =
 * PHP error fixes
 
diff --git a/widget.php b/widget.php
index d71348b..21ec714 100644
--- a/widget.php
+++ b/widget.php
@@ -46,6 +46,7 @@ static function get_groups(){
           'page' => $page_number,
           'type' => 'Static'
       ));
+      
       if( !$response || !$response->success ){
         $more = FALSE;
         break;
@@ -172,7 +173,7 @@ protected function widget_wrap_content($args, $content, $instance) {
     $title = apply_filters( 'Email Signup', empty( $instance[ 'title' ] ) ? __( 'Email Signup' ) : $instance[ 'title' ] );
     if( $title ) $title = $args['before_title'] . '<span>' . $title . '</span>' . $args['after_title'];
 
-    $output = $args['before_widget'] . '<form id="' . esc_attr($args['widget_id']) . '" class="mail-form" method="post" action="#' . esc_attr($args['widget_id']) . '"><div class="holder"><div class="frame">';
+    $output = $args['before_widget'] . '<form id="' . esc_attr($args['widget_id']) . '" name="' . esc_attr($args['widget_id']) . '" class="mail-form" method="post" action="#' . esc_attr($args['widget_id']) . '"><div class="holder"><div class="frame">';
     $output .= $title;
     $output .= $content;
     $output .= '</div></div></form>' . $args['after_widget'];
@@ -504,6 +505,11 @@ protected function explode_emails($address_string) {
    * @return string
    */
   protected function form_template_groups($instance, $groups) {
+
+    if( ! empty( $instance['begroups'] )) {
+      $group_values = sanitize_text_field( $instance['begroups'] );
+    }
+
     $output = '
       <h3>' . __('Groups') . '</h3>
       <div class="groups">
@@ -512,17 +518,20 @@ protected function form_template_groups($instance, $groups) {
           <p>
             <input list="emfluence-emailer-groups-list"/>
             <button type="button" onclick="emfluenceEmailerWidget.groups.add(this)">' . __('Add') . '</button>
+            <input class="begroups" type="text" id="' . $this->get_field_id( 'begroups' ) . '" name="' . $this->get_field_name( 'begroups' ) . '" value="' . $group_values . '" style="display:none;" />
           </p>
         </div>
         <div class="selected">' . "\n";
+
     if( !empty($instance['groups']) ) {
       foreach ($instance['groups'] as $groupID) {
         $group = $groups[$groupID];
         $id = 'groups-' . $this->number . '-' . $groupID;
+
         $output .= '
               <div>
                 <label for="' . $id . '">
-                  <input id="' . $id . '" type="checkbox" value="' . $groupID . '" name="groups[]" checked /> ' . $group->groupName . '
+                  <input onclick="emfluenceEmailerWidget.groups.removeGroup(this)" id="' . esc_attr( $id ) . '" type="checkbox" value="' . esc_attr( $groupID ) . '" name="groups[]" checked /> ' . sanitize_text_field( $group->groupName ) . '
                 </label>
               </div>';
       }
@@ -549,6 +558,7 @@ protected function form_template_text_display($instance) {
           <label for="' . $this->get_field_id( 'text' ) . '">' . __('Text') . ':</label>
           <textarea id="' . $this->get_field_id( 'text' ) . '" name="' . $this->get_field_name( 'text' ) . '" style="width:100%;" >' . $instance['text'] . '</textarea>
         </p>
+
         <p>
           <label for="' . $this->get_field_id( 'submit' ) . '">' . __('Submit button') . ':</label>
           <input type="text" id="' . $this->get_field_id( 'submit' ) . '" name="' . $this->get_field_name( 'submit' ) . '" value="' . $instance['submit'] . '" style="width:100%;" />
@@ -575,6 +585,31 @@ protected function form_template_text_display($instance) {
     return $output;
   }
 
+  /**
+   * @param $instance
+   * @return string
+   */
+
+   function form_template_form_fields($instance) {
+    $output = '
+      <h3>' . __('Form Identification') . '</h3>
+      <div class="text_display">
+        <p>
+          <label for="' . $this->get_field_id( 'form_id' ) . '">' . __('Form ID') . ':</label>
+          <input type="text" maxlength="20" id="' . $this->get_field_id( 'form_id' ) . '" name="' . $this->get_field_name( 'form_id' ) . '" value="' . sanitize_text_field( $instance['form_id'] ) . '" style="width:100%;" />
+          Give a meaningful ID for this form. Leave empty if not required.
+        </p>
+
+        <p>
+          <label for="' . $this->get_field_id( 'form_name' ) . '">' . __('Form Name') . ':</label>
+          <input type="text" maxlength="30" id="' . $this->get_field_id( 'form_name' ) . '" name="' . $this->get_field_name( 'form_name' ) . '" value="' . sanitize_text_field( $instance['form_name'] ) . '" style="width:100%;" />
+          Give a meaningful name for this form. Leave empty if not required.
+        </p>
+      </div>' . "\n";
+
+      return $output;
+   }
+
   /**
    * @param $instance
    * @return string
@@ -853,6 +888,7 @@ protected function form_get_defaults() {
     $defaults = array(
         'title' => __('Email Signup'),
         'text' => '',
+        'begroups' => '',
         'redirect' => '',
         'groups' => array(),
         'custom_fields' => array(),
@@ -974,7 +1010,7 @@ protected function form_get_defaults() {
             'label' => 'Memo:',
             'type' => 'textarea',
             'platform' => 'memo'
-        )
+        ),
     );
 
     foreach($contact_field_defaults as $name=>$field) {
@@ -1008,16 +1044,21 @@ public function form( $instance ) {
     $instance = wp_parse_args( (array) $instance, $defaults );
     $groups = emfluence_email_signup::get_groups();
 
-    $output = $this->form_template_text_display($instance);
+    $output  = $this->form_template_text_display($instance);
     $output .= $this->form_template_groups($instance, $groups);
     $output .= $this->form_template_basic_fields($defaults, $instance);
     $output .= $this->form_template_custom_variables($defaults, $instance);
     $output .= $this->form_template_notification($instance);
+    
+    $output .= $this->form_template_form_fields($instance);
+
     $extra_sections = apply_filters('emfl_widget_editor_after_sections', $instance, $this);
     if(is_string($extra_sections)) $output .= $extra_sections;
 
+
     // Output the datalist for groups just once
-    if( intval($this->number) == 0  ) {
+    if( intval($this->number) >= 0  ) {
+      $output .= '<input type="hidden" id="emfluence_email_signup_instance" value="' . sanitize_text_field( $this->number ) . '" />';
       $output .= '<datalist id="emfluence-emailer-groups-list" style="display: none;">';
       foreach ($groups as $group) {
         $output .= '<option>' . $group->groupName . ' [' . $group->groupID . ']' . '</option>';
@@ -1035,7 +1076,6 @@ public function form( $instance ) {
    */
   function update( $new_instance, $old_instance ) {
     $instance = $new_instance;
-
     $instance['fields'] = array();
 
     // Force certain settings for email field
@@ -1099,11 +1139,24 @@ function update( $new_instance, $old_instance ) {
     }
 
     // Unfortunately, these don't come through $new_instance
-    $instance['groups'] = is_array($_POST['groups']) ? array_values($_POST['groups']) : array();
+    // We take the values from begroups field (for block editors) becaise $_POST is not recognized.
+
+    if( is_array($_POST['groups']) ) {
+      $instance['groups'] = array_values($_POST['groups']);
+    } else if(strlen( $new_instance['begroups'] ) > 0) {
+      $selected_group_ids = $new_instance['begroups'];
+      $instance['groups'] = preg_split("/\,/", $selected_group_ids);
+    } else {
+      $instance['groups'] = array();
+    }
 
     // Clean up the free-form areas
+    $instance['form_name'] = stripslashes($new_instance['form_name']);
+    $instance['form_id'] = stripslashes($new_instance['form_id']);
+
     $instance['title'] = stripslashes($new_instance['title']);
     $instance['text'] = stripslashes($new_instance['text']);
+    $instance['begroups'] = stripslashes($new_instance['begroups']);
     $instance['submit'] = stripslashes($new_instance['submit']);
     $instance['success'] = stripslashes($new_instance['success']);
     $instance['redirect'] = stripslashes($new_instance['redirect']);
@@ -1113,8 +1166,12 @@ function update( $new_instance, $old_instance ) {
 
     // If the current user isn't allowed to use unfiltered HTML, filter it
     if ( !current_user_can('unfiltered_html') ) {
+      $instance['form_name'] = strip_tags($new_instance['form_name']);
+      $instance['form_id'] = strip_tags($new_instance['form_id']);
+
       $instance['title'] = strip_tags($new_instance['title']);
       $instance['text'] = strip_tags($new_instance['text']);
+      $instance['begroups'] = strip_tags($new_instance['begroups']);
       $instance['submit'] = strip_tags($new_instance['submit']);
       $instance['success'] = strip_tags($new_instance['success']);
       foreach($instance['fields'] as &$field){
@@ -1125,4 +1182,4 @@ function update( $new_instance, $old_instance ) {
 
     return $instance;
   }
-}
+}
\ No newline at end of file