diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 1f69448..88aa51b 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -110,6 +110,15 @@ function bartik_preprocess_menu(&$variables) {
 }
 
 /**
+ * Implements hook_theme_suggestions_HOOK_alter() for form templates.
+ */
+function bartik_theme_suggestions_form_alter(array &$suggestions, array $variables) {
+  if ($variables['element']['#form_id'] == 'search_block_form') {
+    $suggestions[] = 'form__search_block_form';
+  }
+}
+
+/**
  * Helper function for handling the site name and slogan.
  */
 function _bartik_process_page(&$variables) {
diff --git a/core/themes/bartik/css/components/search.css b/core/themes/bartik/css/components/search.css
index 146d189..60dc6e4 100644
--- a/core/themes/bartik/css/components/search.css
+++ b/core/themes/bartik/css/components/search.css
@@ -1,35 +1,30 @@
 /* --------------- Search Form ---------------- */
 
-#block-search-form {
+.block-search-form {
   padding-bottom: 7px;
 }
-#block-search-form .content {
+.block-search-form .content {
   margin-top: 0;
 }
-#search-form input[type="search"],
-#block-search-form input[type="search"] {
+.search-form input[type="search"] {
   box-sizing: border-box;
   padding: 4px;
   -webkit-appearance: textfield;
 }
-#search-form input[type="search"]::-webkit-search-decoration,
-#block-search-form input[type="search"]::-webkit-search-decoration {
+.search-form input[type="search"]::-webkit-search-decoration {
   display: none;
 }
-#search-form input#edit-keys,
-#block-search-form .form-item-search-block-form input {
+.search-form input#edit-keys {
   float: left; /* LTR */
   font-size: 1em;
   margin-right: 5px; /* LTR */
 }
-[dir="rtl"] #search-form input#edit-keys,
-[dir="rtl"] #block-search-form .form-item-search-block-form input {
+[dir="rtl"] .search-form input#edit-keys {
   float: right;
   margin-left: 5px;
   margin-right: 0;
 }
-#search-block-form input.form-submit,
-#search-form input.form-submit {
+.search-form input.form-submit {
   margin-left: 0;
   margin-right: 0;
   height: 25px;
@@ -41,12 +36,10 @@
   background: #f0f0f0 url(../../../../misc/icons/505050/loupe.svg) no-repeat center;
   overflow: hidden;
 }
-#search-block-form input.form-submit:hover,
-#search-block-form input.form-submit:focus,
-#search-form input.form-submit:hover,
-#search-form input.form-submit:focus {
+.search-form input.form-submit:hover,
+.search-form input.form-submit:focus {
   background: #dedede url(../../../../misc/icons/424242/loupe.svg) no-repeat center;
 }
-#search-form .form-item-keys label {
+.search-form .form-item-keys label {
   display: block;
 }
diff --git a/core/themes/bartik/templates/form--search-block-form.html.twig b/core/themes/bartik/templates/form--search-block-form.html.twig
new file mode 100644
index 0000000..fa2753a
--- /dev/null
+++ b/core/themes/bartik/templates/form--search-block-form.html.twig
@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a 'form' element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - children: The child elements of the form.
+ *
+ * @see template_preprocess_form()
+ *
+ * @ingroup themeable
+ */
+#}
+<form{{ attributes.addClass('search-form','search-block-form') }}>
+  {{ children }}
+</form>