style forms and add form validation and form status block

public/images/icon-error.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M-2-2h24v24H-2z"/>
+    <path fill="#CD3F39" fill-rule="nonzero" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z"/>
+  </g>
+</svg>

public/images/icon-success.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+  <path fill="none" d="M-1-1h582v402H-1z"/>
+  <path fill="#0EB87F" fill-rule="evenodd" d="M10 15.5c-2.33 0-4.31-1.46-5.11-3.5h10.22c-.8 2.04-2.78 3.5-5.11 3.5M13.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 1 1 0 3m-7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 1 1 0 3m3.5 9c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8m.01-18C15.53 0 20 4.48 20 10s-4.47 10-9.99 10C4.48 20 0 15.52 0 10S4.48 0 10.01 0"/>
+</svg>

public/stylesheets/style.css

@@ -561,13 +561,14 @@ datalist {
 
 label {
   display: block;
-  margin: 22px 0;
+  margin: 22px 0 0 0;
   text-align: left;
-  font-weight: bold
+  font-weight: bold;
+  font-size: 0.875em
 }
 
 label + input {
-  margin-top: -11px;
+  margin-top: 5.5px;
 }
 
 /* Input & Textarea ------------------ */
@@ -719,9 +720,13 @@ button[disabled] {
 input:focus,
 textarea:focus,
 select:focus,
-option:focus,
+option:focus {
+  border-color: #5c9fef;
+  color: rgb(40, 40, 40);
+}
+
 button:focus,
-.cta:focus  {
+.cta:focus {
   background-color: rgb(125, 178, 242);
   color: #fff;
 }
@@ -749,10 +754,70 @@ input[type="reset"]:focus,
   margin-top: 22px;
 }
 
-.form-item .help-text {
-  font-size: 0.9em;
-  color: #8091a5;
-  margin-top: -22px;
+.form-item input {
+  margin-bottom: 5.5px;
+}
+
+.form-item__help-text {
+    font-size: 0.875em;
+    color: #8091a5;
+}
+
+.form-item__error-message {
+    font-size: 0.875em;
+    color: #cd3f39;
+}
+
+.form-item__error-message:before {
+  content: '';
+  display: inline-block;
+  background: url('/images/icon-error.svg') no-repeat left center;
+  background-size: contain;
+  width: 12px;
+  height: 12px;
+  padding-right: 0.3em;
+}
+
+.status-block {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 22px 0;
+  padding: 22px;
+  border-radius: 4px;
+
+  font-size: 0.875em;
+}
+
+.status-block--success {
+    background: #f4fffb;
+}
+
+.status-block--error {
+    background: #fbe3e2;
+}
+
+.status-block__icon {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    width: 24px;
+    height: 24px;
+    margin-right: 11px;
+}
+
+.status-block__content {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+}
+
+.status-block__title {
+    font-weight: bold;
+}
+
+.status-block__message {
+    color: #536171;
 }
 
 .layout-centered {