diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 90ef1da30dc..e2c5eebecd4 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -203,7 +203,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus();
+  @include form-control-focus(false);
 
   // Placeholder
   &::placeholder {
@@ -251,6 +251,10 @@ $input-border: 1px solid $input-border-color;
   &--plaintext {
     white-space: unset;
   }
+
+  &--invalid {
+    @include form-control-focus(true);
+  }
 }
 
 .gf-form-hint {
diff --git a/public/sass/mixins/_forms.scss b/public/sass/mixins/_forms.scss
index 5d2a4421353..b67a303438b 100644
--- a/public/sass/mixins/_forms.scss
+++ b/public/sass/mixins/_forms.scss
@@ -30,12 +30,19 @@
   }
 }
 
-@mixin form-control-focus() {
+@mixin form-control-focus($error) {
   &:focus {
+    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 5px $input-box-shadow-focus;
     border-color: $input-border-focus;
     outline: none;
-    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-      0 0 5px $input-box-shadow-focus;
+
+    @if $error == true {
+      border-color: $brand-warning;
+      $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 5px $brand-warning;
+    }
+
     @include box-shadow($shadow);
   }
 }