diff --git a/assets/css/src/generic/_buttons.scss b/assets/css/src/generic/_buttons.scss
index 9046b8cdb2..ebef6b4056 100644
--- a/assets/css/src/generic/_buttons.scss
+++ b/assets/css/src/generic/_buttons.scss
@@ -128,12 +128,6 @@
   }
 }
 
-.mailpoet-button-disabled {
-  opacity: .4;
-  pointer-events: none;
-  touch-action: none;
-}
-
 .mailpoet-button-with-spinner {
   pointer-events: none;
   touch-action: none;
diff --git a/assets/css/src/generic/_helpers.scss b/assets/css/src/generic/_helpers.scss
index e04282e2f9..afd75e4b9a 100644
--- a/assets/css/src/generic/_helpers.scss
+++ b/assets/css/src/generic/_helpers.scss
@@ -6,3 +6,9 @@
   display: block;
   height: $grid-gap;
 }
+
+.mailpoet-disabled {
+  opacity: .5;
+  pointer-events: none;
+  touch-action: none;
+}
diff --git a/assets/css/src/mailpoet-plugin.scss b/assets/css/src/mailpoet-plugin.scss
index 6d5f7ab234..e8dec60b7f 100644
--- a/assets/css/src/mailpoet-plugin.scss
+++ b/assets/css/src/mailpoet-plugin.scss
@@ -36,7 +36,7 @@
 @import 'generic/forms-toggle';
 @import 'generic/forms-yesno';
 @import 'generic/grid';
-@import 'generic/helpers';
+@import 'generic/helpers'; // must be the last
 
 // Components
 // Actual UI components.
diff --git a/assets/js/src/common/button/button.tsx b/assets/js/src/common/button/button.tsx
index ede6f29d00..9f33820176 100644
--- a/assets/js/src/common/button/button.tsx
+++ b/assets/js/src/common/button/button.tsx
@@ -35,8 +35,8 @@ const Button = ({
         {
           [`mailpoet-button-${dimension}`]: dimension,
           [`mailpoet-button-${variant}`]: variant,
-          'mailpoet-button-disabled': isDisabled,
           'mailpoet-button-with-spinner': withSpinner,
+          'mailpoet-disabled': isDisabled,
           'mailpoet-full-width': isFullWidth,
         }
       )
diff --git a/assets/js/src/common/form/checkbox/checkbox.tsx b/assets/js/src/common/form/checkbox/checkbox.tsx
index 6cd701a375..7926824ae9 100644
--- a/assets/js/src/common/form/checkbox/checkbox.tsx
+++ b/assets/js/src/common/form/checkbox/checkbox.tsx
@@ -17,6 +17,7 @@ const Checkbox = ({
     className={
       classnames({
         'mailpoet-form-checkbox': true,
+        'mailpoet-disabled': attributes.disabled,
         'mailpoet-full-width': isFullWidth,
       })
     }
diff --git a/assets/js/src/common/form/input/input.tsx b/assets/js/src/common/form/input/input.tsx
index ae738e13d1..e5fc849333 100644
--- a/assets/js/src/common/form/input/input.tsx
+++ b/assets/js/src/common/form/input/input.tsx
@@ -21,6 +21,7 @@ const Input = ({
         'mailpoet-form-input',
         {
           [`mailpoet-form-input-${dimension}`]: dimension,
+          'mailpoet-disabled': attributes.disabled,
           'mailpoet-full-width': isFullWidth,
         }
       )
diff --git a/assets/js/src/common/form/radio/radio.tsx b/assets/js/src/common/form/radio/radio.tsx
index ae1db59470..d34935df10 100644
--- a/assets/js/src/common/form/radio/radio.tsx
+++ b/assets/js/src/common/form/radio/radio.tsx
@@ -17,6 +17,7 @@ const Radio = ({
     className={
       classnames({
         'mailpoet-form-radio': true,
+        'mailpoet-disabled': attributes.disabled,
         'mailpoet-full-width': isFullWidth,
       })
     }
diff --git a/assets/js/src/common/form/react_select/react_select.tsx b/assets/js/src/common/form/react_select/react_select.tsx
index 12a6d47e52..eca755f25b 100644
--- a/assets/js/src/common/form/react_select/react_select.tsx
+++ b/assets/js/src/common/form/react_select/react_select.tsx
@@ -69,6 +69,7 @@ const ReactSelect = ({
         'mailpoet-form-select',
         {
           [`mailpoet-form-input-${dimension}`]: dimension,
+          'mailpoet-disabled': props.disabled,
           'mailpoet-full-width': isFullWidth,
         }
       )
diff --git a/assets/js/src/common/form/select/select.tsx b/assets/js/src/common/form/select/select.tsx
index 5b3007fdcd..35bf511801 100644
--- a/assets/js/src/common/form/select/select.tsx
+++ b/assets/js/src/common/form/select/select.tsx
@@ -22,6 +22,7 @@ const Select = ({
         'mailpoet-form-select',
         {
           [`mailpoet-form-input-${dimension}`]: dimension,
+          'mailpoet-disabled': attributes.disabled,
           'mailpoet-full-width': isFullWidth,
         }
       )
diff --git a/assets/js/src/common/form/toggle/toggle.tsx b/assets/js/src/common/form/toggle/toggle.tsx
index 352cdcd568..2825522cea 100644
--- a/assets/js/src/common/form/toggle/toggle.tsx
+++ b/assets/js/src/common/form/toggle/toggle.tsx
@@ -16,6 +16,7 @@ const Toggle = ({
       classnames({
         'mailpoet-form-toggle': true,
         [`mailpoet-form-toggle-${dimension}`]: dimension,
+        'mailpoet-disabled': attributes.disabled,
       })
     }
   >
diff --git a/assets/js/src/common/form/yesno/yesno.tsx b/assets/js/src/common/form/yesno/yesno.tsx
index b628f47c88..392358456a 100644
--- a/assets/js/src/common/form/yesno/yesno.tsx
+++ b/assets/js/src/common/form/yesno/yesno.tsx
@@ -17,6 +17,7 @@ const YesNo = ({
       classnames({
         'mailpoet-form-yesno': true,
         'mailpoet-form-yesno-error': showError,
+        'mailpoet-disabled': attributes.disabled,
       })
     }
   >