Add Hubspot forms styling

5 files changed, 255 insertions, 2 deletions

diff --git a/sass/forms.sass b/sass/forms.sass
new file mode 100644
index 0000000..505bae5
--- /dev/null
+++ b/sass/forms.sass
@@ -0,0 +1,160 @@
+@import settings.sass
+
+div.hbspt-form
+  background-image: url(../img/forms/bg.svg)
+  padding-top: 25px
+  padding-bottom: 70px
+  margin-top: 50px
+  margin-bottom: 70px
+  +resp(sm)
+    padding-bottom: 50px
+    padding-top: 15px
+  +resp(esm)
+    margin-top: 30px
+    margin-bottom: 50px
+
+  h1, h2, h3, h4, h5, h6
+    color: $white
+    text-align: center
+
+  h2
+    +resp(sm)
+      margin-bottom: 12px !important
+
+  form
+    max-width: 800px
+    margin-left: auto
+    margin-right: auto
+    +resp(md)
+      max-width: 100%
+      padding-left: 50px
+      padding-right: 50px
+    +resp(esm)
+      padding-left: 30px
+      padding-right: 30px
+
+    > fieldset
+      max-width: 100%
+      margin-bottom: 20px
+      +resp(sm)
+        margin-bottom: 15px
+
+      > div
+
+        > label
+          color: $white
+          display: block
+          font-size: 16px
+
+          > span
+            display: inline-block
+            margin-bottom: 10px
+
+            &:empty
+              display: none
+
+        > div.input
+          margin-right: 0 !important
+          display: flex
+
+          textarea, input
+            width: 100% !important
+            color: $form-fields
+            font-size: 16px
+            font-family: sans-serif
+            +resp(sm)
+              font-size: 14px
+
+            &.invalid
+              border: 2px solid red
+
+          input
+            height: 46px
+            padding: 0 15px
+            +resp(sm)
+              height: 41px
+
+          textarea
+            height: 58px
+            padding: 12px 15px
+            resize: none
+            line-height: 140%
+            +resp(sm)
+              height: 53px
+
+        > ul.hs-error-msgs
+          padding: 0 !important
+          list-style-type: none
+          color: red
+
+          > li
+            padding: 0 !important
+            margin: 7px 0 0 !important
+            font-size: 14px
+            +resp(sm)
+              margin-top: 5px !important
+
+            &:before
+              content: none !important
+
+      &.form-columns-2
+        display: flex
+        justify-content: space-between
+        +resp(sm)
+          flex-direction: column
+
+        > div
+          float: none !important
+          width: calc(50% - 10px) !important
+          +resp(sm)
+            width: 100% !important
+
+          &:first-child
+            +resp(sm)
+              margin-bottom: 15px
+
+      &.form-columns-3
+        display: flex
+        justify-content: space-between
+        +resp(sm)
+          flex-direction: column
+
+        > div
+          float: none !important
+          width: calc(33.33% - 13px) !important
+          +resp(sm)
+            width: 100% !important
+            margin-bottom: 15px
+
+            &:last-child
+              +resp(sm)
+                margin-bottom: 0
+
+    > div.hs_recaptcha
+      display: none
+
+    > div.hs_error_rollup
+      display: none
+
+    > div.hs-submit
+    
+      > div.actions
+        text-align: center
+
+        input[type=submit]
+          background-color: $orange
+          color: $black
+          font-weight: 700
+          font-size: 16px
+          width: 245px
+          height: 60px
+          cursor: pointer
+          border: 1px solid $orange
+          transition: 0.3s
+          +resp(sm)
+            height: 50px
+          +resp(esm)
+            width: 100%
+
+          &:hover
+            background-color: $white
\ No newline at end of file
diff --git a/sass/main.sass b/sass/main.sass
index 882446c..4b513cd 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -99,5 +99,6 @@ div.container
 @import front-page/main-text.sass

 @import front-page/inform-columns.sass

 @import front-page/bottom-text.sass

+@import forms.sass

 @import footer.sass

 @import google-analytics-message.sass
\ No newline at end of file
diff --git a/sass/settings.sass b/sass/settings.sass
index 01b3d95..7628830 100644
--- a/sass/settings.sass
+++ b/sass/settings.sass
@@ -4,6 +4,7 @@ $orange : #FFBE12
 $black : #18191C

 $grey : #747577

 $dark-orange: #FD8F01

+$form-fields: #666666

 

 // mixins

 @mixin resp($media)

diff --git a/site/get/contributor-subscriptions.md b/site/get/contributor-subscriptions.md
index 30ef707..937b519 100644
--- a/site/get/contributor-subscriptions.md
+++ b/site/get/contributor-subscriptions.md
@@ -24,16 +24,18 @@ please supply links to posts or recorded talks.</fn> track record of posting abo
 or speaking about it at live events (offline or online). Answering on the forums also counts.
 </dd>
 
-<h2 id="application-form">Apply for a subscription</h2>
+<div id="application-form">
 
 <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
 <script>
   hbspt.forms.create({
 	region: "na1",
 	portalId: "4129050",
-	formId: "69cc4023-7ade-4d85-a013-4ce620ef5e47"
+	formId: "3c2d93a2-e9a9-49b8-b493-38369aa9cca5"
 });
 </script>
 
+</div>
+
 <hr>
 <div id="footnotes"> </div>
diff --git a/site/img/forms/bg.svg b/site/img/forms/bg.svg
new file mode 100644
index 0000000..89fd785
--- /dev/null
+++ b/site/img/forms/bg.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1340"
+   height="341"
+   viewBox="0 0 1340 341"
+   fill="none"
+   version="1.1"
+   id="svg39"
+   sodipodi:docname="CTA.svg"
+   inkscape:version="0.92.4 (33fec40, 2019-01-16)">
+  <metadata
+     id="metadata43">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview41"
+     showgrid="false"
+     inkscape:zoom="0.26492537"
+     inkscape:cx="702.82024"
+     inkscape:cy="206.96837"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g32" />
+  <g
+     clip-path="url(#clip0)"
+     id="g32">
+    <rect
+       width="1340"
+       height="344"
+       fill="#18191C"
+       id="rect2" />
+    <g
+       opacity="0.05"
+       id="g12">
+      <path
+         d="M149.75 -71H191V66.5H224V-104H149.75V-71Z"
+         fill="white"
+         id="path4" />
+      <path
+         d="M119.5 -104H-51V-29.75H-18V-71H119.5V-104Z"
+         fill="white"
+         id="path6" />
+      <path
+         d="M-18 0.5H-51V171H23.25V138H-18V0.5Z"
+         fill="white"
+         id="path8" />
+      <path
+         d="M53.5 138V171H224V96.75H191V138H53.5Z"
+         fill="white"
+         id="path10" />
+    </g>
+  </g>
+  <defs
+     id="defs37">
+    <clipPath
+       id="clip0">
+      <rect
+         width="1340"
+         height="341"
+         fill="white"
+         id="rect34" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file