diff --git a/app/assets/javascripts/users/settings/webhooks/index.js b/app/assets/javascripts/users/settings/webhooks/index.js
index 555b86a0d..cdfceb8da 100644
--- a/app/assets/javascripts/users/settings/webhooks/index.js
+++ b/app/assets/javascripts/users/settings/webhooks/index.js
@@ -24,7 +24,13 @@
     });
   }
   $('.activity-filters-list').on('ajax:error', '.webhook-form', function(e, data) {
-    $(this).renderFormErrors('webhook', data.responseJSON.errors);
+    const { errors } = data.responseJSON;
+    // display url errors with data-error-text attribute
+    if (errors.url) {
+      $(this).find('.url-input-container').addClass('error').attr('data-error-text', `${errors.url.join(', ')}`);
+      delete errors.url;
+    }
+    $(this).renderFormErrors('webhook', errors);
   });
 
   $('.activity-filters-list').on('click', '.create-webhook', function() {
@@ -33,6 +39,11 @@
     filterElement.find('.create-webhook-container').removeClass('hidden');
   });
 
+  // clear url form errors
+  $('.activity-filters-list').on('click', '.cancel-action, .save-webhook', () => {
+    $('.url-input-container').removeClass('error').attr('data-error-text', '');
+  });
+
   $('.activity-filters-list').on('click', '.create-webhook-container .cancel-action', function(e) {
     let webhookContainer = $(this).closest('.create-webhook-container');
     e.preventDefault();
diff --git a/app/views/users/settings/webhooks/index.html.erb b/app/views/users/settings/webhooks/index.html.erb
index d28590c81..221cd01ed 100644
--- a/app/views/users/settings/webhooks/index.html.erb
+++ b/app/views/users/settings/webhooks/index.html.erb
@@ -111,7 +111,7 @@
                 </div>
               </div>
               <div class="edit-webhook-container hidden">
-                <%= form_with model: webhook, url: users_settings_webhook_path(webhook, filter_id: filter.id, sort: @current_sort), class: 'webhook-form', method: :patch do |f| %>
+                <%= form_with model: webhook, url: users_settings_webhook_path(webhook, filter_id: filter.id, sort: @current_sort), class: 'webhook-form', method: :patch, data: { remote: true } do |f| %>
                   <%= render partial: 'webhook_form', locals: {f: f} %>
                 <% end %>
               </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 2c406c746..a868045f1 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -220,7 +220,7 @@ en:
             configuration:
               disabled: 'Webhooks are disabled'
             url:
-              not_valid: 'Not valid URL'
+              not_valid: 'not valid URL'
         result_text:
           attributes:
             text: