diff --git a/app/assets/javascripts/samples/sample_datatable.js b/app/assets/javascripts/samples/sample_datatable.js
index 1058268d2..e808da65b 100644
--- a/app/assets/javascripts/samples/sample_datatable.js
+++ b/app/assets/javascripts/samples/sample_datatable.js
@@ -760,6 +760,86 @@ function changeToEditMode() {
 
   var dropdownList = $('#samples-columns-list');
 
+  function initNewColumnForm() {
+    $('#samples-columns-dropdown').on('show.bs.dropdown', function() {
+      // Clear input and errors when dropdown is opened
+      var input = $(this).find('input#new-column-name');
+      input.val('');
+      var form = $('#new-column-form');
+      if (form.hasClass('has-error')) {
+        form.removeClass('has-error');
+      }
+      form.find('.help-block').remove();
+    });
+
+    $('#samples-columns-dropdown').on('hide.bs.dropdown', function() {
+      // Check if we have any new columns and reload the page if any
+      if ($('#samples-columns-list').find('li.new-samples-column').length) {
+        window.location.href = addParam(window.location.href, 'new_col');
+        location.reload();
+      }
+    });
+
+    $('#add-new-column-button').click(function(e) {
+      // Make an Ajax request to custom_fields_controller
+      var url = $('#new-column-form').data('action');
+      e.stopPropagation();
+      var columnName = $('#new-column-name').val();
+      if (columnName.length > 0) {
+        $.ajax({
+          method: 'POST',
+          dataType: 'json',
+          data: {custom_field: {name: columnName}},
+          error: function(data) {
+            var form = $('#new-column-form');
+            form.addClass('has-error');
+            form.find('.help-block').remove();
+            form.append('<span class="help-block alert alert-danger">' +
+              data.responseJSON.name +
+              '</span>');
+          },
+          success: function() {
+            var form = $('#new-column-form');
+            form.find('.help-block').remove();
+            if (form.hasClass('has-error')) {
+              form.removeClass('has-error');
+            }
+            $('#samples-columns-list')
+              .append(newSamplesColumnLi(columnName, false));
+            $('#new-column-name').val('');
+            form.append('<span class="help-block alert alert-success">' +
+              I18n.t('samples.js.column_added') +
+              '</span>');
+          },
+          url: url
+        });
+      } else {
+        var form = $('#new-column-form');
+        form.addClass('has-error');
+        form.find('.help-block').remove();
+        form.append('<span class="help-block alert alert-danger">' +
+          I18n.t('samples.js.empty_column_name') +
+          '</span>');
+      }
+    });
+
+    function newSamplesColumnLi(name, visible) {
+      var colIndex = parseInt($('#samples-columns-list li')
+        .last().attr('data-position'), 10) + 1;
+      var visClass = (visible) ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+      var visLi = (visible) ? '' : 'col-invisible';
+      var html = '<li data-position="' + colIndex +
+        '" class="new-samples-column ' +
+        visLi + '"><i class="grippy"></i> <span class="text">' +
+        name + '</span> <span class="pull-right controls">' +
+        '<span class="vis glyphicon ' + visClass + '"></span> ' +
+        '<span class="edit glyphicon glyphicon-pencil"></span> ' +
+        '<span class="del glyphicon glyphicon-trash"></span>' +
+        '</span></li>';
+      return html;
+    }
+  }
+
   // loads the columns names in the dropdown list
   function loadColumnsNames() {
     // First, clear the list
@@ -842,6 +922,7 @@ function changeToEditMode() {
   // initialze dropdown after the table is loaded
   function initDropdown() {
     table.on('draw.dt', function() {
+      initNewColumnForm();
       loadColumnsNames();
       initSorting();
     });
diff --git a/app/views/custom_fields/_new_modal.html.erb b/app/views/custom_fields/_new_modal.html.erb
deleted file mode 100644
index 868edc1a9..000000000
--- a/app/views/custom_fields/_new_modal.html.erb
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="modal fade" id="modal-create-custom-field" tabindex="-1" role="dialog" aria-labelledby="modal-create-custom-field-label">
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-				<h4 class="modal-title"><%= t("samples.modal_add_custom_field.title_html", organization: @organization.name) %></h4>
-			</div>
-			<%= bootstrap_form_for CustomField.new, remote: true, url: organization_custom_fields_path(@organization), id: "new-custom-field" do |f| %>
-			<div class="modal-body">
-					<%= f.text_field :name, id: "name-input" %>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-default" data-dismiss="modal"><%= t("general.cancel")%></button>
-				<input type="submit" class="btn btn-primary" value="<%= t("samples.modal_add_custom_field.create")%>"</input>
-			</div>
-			<% end %>
-		</div>
-	</div>
-</div>
diff --git a/app/views/shared/_samples.html.erb b/app/views/shared/_samples.html.erb
index 1c33de901..05f3e63c8 100644
--- a/app/views/shared/_samples.html.erb
+++ b/app/views/shared/_samples.html.erb
@@ -1,4 +1,3 @@
-<%= render partial: "custom_fields/new_modal" %>
 <%= render partial: "samples/import_samples_modal" %>
 <%= render partial: "samples/delete_samples_modal" %>
 <%= render partial: "samples/create_sample_group_modal" %>