start on contact form

Mark Durrant · Mark Durrant · commit db9e263f4334 · 2016-06-23T17:23:08.000+01:00
diff --git a/_layouts/contact.html b/_layouts/contact.html
@@ -20,12 +20,19 @@
           <a href="https://www.google.co.uk/maps/place/pebble+%7Bcode%7D/@51.485665,-0.118521,15z/data=!4m5!3m4!1s0x0:0xb39ad30b38f1e82a!8m2!3d51.485665!4d-0.118521" title="View pebble {code} London office on Google Maps" target="_blank">W214 Westminster Business Square<br> Durham Street<br> London<br> SE11 5JH</a>
         </li>
         <li class="contact-col-item col-1-2">
-          <div class="contact-item contact-item-phone">
-            <a href="tel:+442033273940">+44 (0) 20 3327 3940</a>
-          </div>
-          <div class="contact-item contact-item-email">
-            <a href="mailto:hello@pebblecode.com">hello@pebblecode.com</a>
-          </div>
+
+          <!--[if lte IE 8]>
+          <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
+          <![endif]-->
+          <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
+          <script>
+            hbspt.forms.create({
+              css: '',
+              portalId: '2277134',
+              formId: 'cc06259d-3ffc-4f5c-a0a7-ebf9f87f3dad'
+            });
+          </script>
+
         </li>
       </ul>
     </section>
diff --git a/_sass/components/_hs-components.scss b/_sass/components/_hs-components.scss
@@ -0,0 +1,48 @@
+//===============================================================================
+// HUBSPOT COMPONENTS
+//===============================================================================
+.contact .hbspt-form {
+  margin-top: 20px;
+
+  label {
+    color: $white;
+    font-family: $brandon;
+    font-size: $eta;
+    font-weight: $font-regular !important;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .hs-error-msgs {
+    opacity: .7;
+  }
+
+  .hs-form-required {
+    color: $pink;
+    margin-left: 2px;
+  }
+
+  input[type="text"],
+  input[type="email"] {
+    color: rgba(white, 0.9);
+    border: 3px solid rgba(white, 0.2);
+    background-color: transparent;
+    padding: 8px 8px 4px 8px;
+    width: 100%;
+    transition: border-color .2s;
+    border-radius: 4px;
+    margin-bottom: 8px;
+
+    &:focus { border-color: rgba(white, 0.5); }
+  }
+
+  input[type="submit"] {
+    @extend .btn, .btn-light, .btn-lrg;
+
+    margin-top: 8px;
+  }
+
+  .submitted-message {
+    margin-top: 45px;
+    color: $white;
+  }
+}
diff --git a/css/main.scss b/css/main.scss
@@ -32,6 +32,7 @@
 @import "components/_share";
 @import "components/_related";
 @import "components/_media";
+@import "components/_hs-components";
 
 @import "pages/_home";
 @import "pages/_contact";
