diff --git a/app/assets/javascripts/colourPreview.js b/app/assets/javascripts/colourPreview.js
index 52e2d4f4d..20b5e0498 100644
--- a/app/assets/javascripts/colourPreview.js
+++ b/app/assets/javascripts/colourPreview.js
@@ -8,9 +8,9 @@
 
     this.start = component => {
 
-      this.$input = $('input', component);
+      this.$input = $(component);
 
-      $(component).append(
+      this.$input.closest('.govuk-form-group').append(
         this.$preview = $('<span class="textbox-colour-preview"></span>')
       );
 
diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss
index 80cce8a3b..8197b34ad 100644
--- a/app/assets/stylesheets/govuk-frontend/extensions.scss
+++ b/app/assets/stylesheets/govuk-frontend/extensions.scss
@@ -48,3 +48,7 @@ $govuk-grid-widths: (
   seven-eighths: 87.5%,
   full: 100%
 );
+
+.govuk-input--width-6 {
+  max-width: 14ex;
+}
diff --git a/app/main/forms.py b/app/main/forms.py
index c3d72b74d..ca30ae3d3 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -1554,13 +1554,17 @@ class PreviewBranding(StripWhitespaceForm):
 
 
 class ServiceUpdateEmailBranding(StripWhitespaceForm):
-    name = StringField('Name of brand')
-    text = StringField('Text')
-    colour = StringField(
+    name = GovukTextInputField('Name of brand')
+    text = GovukTextInputField('Text')
+    colour = GovukTextInputField(
         'Colour',
         validators=[
             Regexp(regex="^$|^#(?:[0-9a-fA-F]{3}){1,2}$", message='Must be a valid color hex code (starting with #)')
-        ]
+        ],
+        param_extensions={
+            "classes": "govuk-input--width-6",
+            "attributes": {"data-module": "colour-preview"}
+        }
     )
     file = FileField_wtf('Upload a PNG logo', validators=[FileAllowed(['png'], 'PNG Images only!')])
     brand_type = RadioField(
diff --git a/app/templates/views/email-branding/manage-branding.html b/app/templates/views/email-branding/manage-branding.html
index 7d757aec3..440e5d204 100644
--- a/app/templates/views/email-branding/manage-branding.html
+++ b/app/templates/views/email-branding/manage-branding.html
@@ -29,10 +29,10 @@
       {{ file_upload(form.file, button_text='{} logo'.format('Update' if email_branding else 'Upload')) }}
       {% call form_wrapper() %}
         <div class="form-group">
-          <div style='margin-top:15px;'>{{textbox(form.name)}}</div>
-          <div style='margin-top:15px;'>{{textbox(form.text)}}</div>
-          {{ textbox(form.colour, width='1-4', colour_preview=True) }}
-           {{ radios(form.brand_type) }}
+          <div style='margin-top:15px;'>{{form.name}}</div>
+          <div style='margin-top:15px;'>{{form.text}}</div>
+          {{ form.colour }}
+          {{ radios(form.brand_type) }}
           {{ page_footer(
             'Save',
             button_name='operation',
diff --git a/tests/app/main/views/test_email_branding.py b/tests/app/main/views/test_email_branding.py
index adfc89f87..787e108c2 100644
--- a/tests/app/main/views/test_email_branding.py
+++ b/tests/app/main/views/test_email_branding.py
@@ -78,9 +78,9 @@ def test_create_email_branding_does_not_show_any_branding_info(
     page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
 
     assert page.select_one('#logo-img > img') is None
-    assert page.select_one('#name').attrs.get('value') == ''
-    assert page.select_one('#text').attrs.get('value') == ''
-    assert page.select_one('#colour').attrs.get('value') == ''
+    assert page.select_one('#name').attrs.get('value') is None
+    assert page.select_one('#text').attrs.get('value') is None
+    assert page.select_one('#colour').attrs.get('value') is None
 
 
 def test_create_new_email_branding_without_logo(
@@ -141,7 +141,7 @@ def test_create_email_branding_requires_a_name_when_submitting_logo_details(
         _expected_status=200,
     )
 
-    assert page.select_one('.error-message').text.strip() == 'This field is required'
+    assert page.select_one('.govuk-error-message').text.strip() == 'Error: This field is required'
     assert mock_create_email_branding.called is False
 
 
diff --git a/tests/javascripts/colourPreview.test.js b/tests/javascripts/colourPreview.test.js
index 92a511781..ab37f8e7e 100644
--- a/tests/javascripts/colourPreview.test.js
+++ b/tests/javascripts/colourPreview.test.js
@@ -18,14 +18,14 @@ describe('Colour preview', () => {
 
     // set up DOM
     document.body.innerHTML = `
-      <div class="form-group" data-module="colour-preview">
-        <label class="form-label" for="colour">
+      <div class="govuk-form-group">
+        <label class="govuk-form-label" for="colour">
           Colour
         </label>
-        <input class="form-control form-control-1-4" id="colour" name="colour" rows="8" type="text" value="">
+        <input class="govuk-input govuk-input--width-6" id="colour" name="colour" rows="8" type="text" value="" data-module="colour-preview">
       </div>`;
 
-    field = document.querySelector('.form-group');
+    field = document.querySelector('.govuk-form-group');
     textbox = document.querySelector('input[type=text]');
 
   });