Add HubSpot form and style

static_langing_page/index.html

@@ -104,54 +104,27 @@
           </div>
 
           <div class="action">
-              <img src="assets/organisations.svg" class="logo-organisations">
+            <img src="assets/organisations.svg" class="logo-organisations">
-              <h1>For organizations</h1>
+            <h1>For organizations</h1>
-              <h2>Find talented developers fast</h2>
+            <h2>Find talented developers fast</h2>
-              <p>
+            <p>
-                  Post bounties, build your team and move your project forward today.
+                Post bounties, build your team and move your project forward today.
-              </p>
+            </p>
+
+            <div class="email-form">
               <!--[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>
-                function signup() {
+                hbspt.forms.create({
-                  console.log("Signing up");
+                  css: '',
-                  hbspt.forms.create({
+                  portalId: '3954379',
-                    portalId: '3954379',
+                  formId: 'b6c83d22-0bcf-4cfa-b9df-88fbaa09dee7'
-                    formId: '9a0a26a8-3163-45a8-a933-774de4853609'
+                });
-                  });
-                }
               </script>
-
-
-              <!-- HACK(oskarth): Mailchimp - should probably be Hubspot but we can hack this with JS
-                   Also adds ad hoc margin-left to action and border radius styles.
-                   TODO Add background style.
-
-                 -->
-              <div class="email-form">
-                <!-- XXX: Mailchimp -->
-                <form action="//status.us13.list-manage.com/subscribe/post?u=d0c1a0be2adff281b52e27a7f&amp;id=09e2d9ae07" method="post" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate" _lpchecked="1">
-                  <div class="email-form__inner">
-                    <input type="email" value="" name="EMAIL" class="required email-input mce-EMAIL email-form__input email-form__input--email" placeholder="Enter your email" aria-required="true" style="border-bottom-right-radius: .5em; border-top-right-radius: .5em;">
-
-              <button style="margin-left: 1em;" onclick="signup()">Sign up for beta</button>
-                    <!-- <input type="submit" value="GET EARLY ACCESS" name="subscribe" class="button email-form__input email-form__input--sumbit mc-embedded-subscribe button email-button">
-                    -->
-                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d0c1a0be2adff281b52e27a7f_09e2d9ae07" tabindex="-1" value=""></div>
-                  </div>
-                  <div id="mce-responses" class="email-form__responces">
-                    <div class="response email-form__error-message" id="mce-error-response"></div>
-                    <div class="email-form__success-message response" id="mce-success-response"></div>
-                  </div>
-                </form>
-                <!-- End Mailchimp -->
-              </div>
-
-              <!-- <button onclick="signup()">Sign up for beta</button> -->
             </div>
-
+          </div>
 
         </div>
 

static_langing_page/src/scss/actions.scss

@@ -57,9 +57,8 @@
   color: #ffffff;
 }
 
-.action button {
+.action button,
-    width: 240px;
+.hs_submit .hs-button {
-    height: 45px;
     object-fit: contain;
     border-radius: 8px;
     background-color: #1e3751;
@@ -69,13 +68,15 @@
     font-weight: 500;
     line-height: 1.15;
     letter-spacing: 1px;
+    padding: 16px 32px;
     text-align: center;
     text-transform: uppercase;
     color: #ffffff;
     transition: opacity .2s ease;
 }
 
-.action button:hover {
+.action button:hover,
+.hs_submit .hs-button:hover {
     opacity: 0.5;
     cursor: pointer;
   }
@@ -97,4 +98,4 @@
   .logo-organisations {
     padding-top: 35px;
   }
-}
+}

static_langing_page/src/scss/email-form.scss

@@ -1,6 +1,5 @@
 .email-form {
   display: flex;
-  width: 460px;
   position: relative;
 }
 
@@ -78,25 +77,23 @@
 
 .email-form__inner {
   display: flex;
-  width: 460px;
   position: relative;
 }
 
-.email-form__input {
+.email-form .hs_email.hs-form-field label {
-  height: 45px;
+  display: none;
-  line-height: 45px;
 }
 
-.email-form__input--email {
+.email-form__input--email,
+.email-form .hs_email.hs-form-field input {
   text-align: left;
-  background-color: #F2F6F8;
+  background-color: #4c81b6;
-  color: #49555F;
+  color: #b6cbe1;
-  width: 240px;
+  padding: 16px 15px 15px 15px;
-  padding: 0 15px;
   margin: 0 0 0 0;
   font-family: 'PostGrotesk-Book', sans-serif;
   box-sizing: border-box;
-  border-radius: 8px 0 0 8px;
+  border-radius: 8px;
 
   transition: background-color .2s ease;
   font-weight: 400;
@@ -121,14 +118,8 @@ input.email-form__input--email:disabled {
 
 }
 
-.email-form__input--email::-webkit-input-placeholder {
+.email-form__input--email::-webkit-input-placeholder,
-  color: #AEB5BA;
+.email-form__input--email::-moz-placeholder,
-}
-
-.email-form__input--email::-moz-placeholder {
-  color: #AEB5BA;
-}
-
 .email-form__input--email:-ms-input-placeholder {
   color: #AEB5BA;
 }
@@ -137,11 +128,28 @@ input.email-form__input--email:disabled {
   color: rgba(255, 255, 255, .6);
 }
 
+.email-form .hbspt-form {
+  width: 100%;
+
+  & > .submitted-message {
+    color: #ffffff;
+    opacity: 0.6;
+  }
+
+  & > form > div {
+    display: inline-block;
+
+    & > div {
+      margin: 0;
+    }
+  }
+}
+
 .email-form input[type="submit"] {
-  width: 220px;
   flex-shrink: 0;
   flex-grow: 0;
-  border-radius: 0 8px 8px 0;
+  margin-left: 1em;
+  border-radius: 8px;
 }
 
 .email-form input[type="submit"]:hover {
@@ -170,17 +178,6 @@ input.email-form__input--email:disabled {
     flex-direction: column;
   }
 
-  .email-form__input--email {
-    width: 240px;
-    border-radius: 8px;
-    margin: 0 0 16px 0;
-  }
-
-  .email-form input[type="submit"] {
-    width: 240px;
-    border-radius: 8px;
-  }
-
   .email-form__responces {
     width: 240px;
     text-align: center;