Merge pull request #331 from maxmind-zendesk-theme/dallas/hubspot-form

Use HubSpot contact form

src/styles/_request.scss

@@ -7,7 +7,6 @@
   padding: var(--mm-spacing);
 }
 
-.new__request__title,
 .request__title {
   font-size: 28px;
 }
@@ -46,40 +45,26 @@
 }
 
 @media only screen and (min-width: 768px) {
-  .new__request,
   .request__page {
     padding: var(--mm-spacing);
   }
 
-  .new__request__title,
   .request__title {
     font-size: 42px;
   }
 }
 
 @media only screen and (min-width: 1200px) {
-  .new__request,
   .request__page {
     padding: var(--mm-spacing) 0;
   }
 
-  .new__request {
-    display: grid;
-    grid-template-areas:
-      'header'
-      'form'
-      'contact';
-    justify-items: center;
-  }
-
-  .new__request__header,
   .request__page__header {
     max-width: var(--mm-max-width);
     padding: 0 var(--mm-spacing) 0;
     width: 100%;
   }
 
-  .new__request__form,
   .request__container,
   .contact__container {
     max-width: var(--mm-max-width);
@@ -88,15 +73,13 @@
   }
 }
 
-.new__request__header,
 .request__page__header {
   grid-area: header;
   margin: 0;
   max-width: var(--mm-max-width);
   width: 100%;
   z-index: 5;
 
-  .new__request__title,
   .request__title {
     color: #00374c;
     font-family: var(--mm-font-stack-display);
@@ -193,27 +176,6 @@
   }
 }
 
-.new__request__form {
-  font-family: montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
-  grid-area: form;
-
-  .searchbox {
-    padding-top: 10px;
-
-    a {
-      color: var(--mm-color-display-text);
-    }
-  }
-
-  label {
-    font-family: var(--mm-font-stack-display);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1.2em;
-    position: relative;
-  }
-}
-
 .request__details {
   @include mixins.pattern-border;
   background-color: var(--mm-color-sidebar);
@@ -465,3 +427,19 @@ input[type='submit']:focus {
     display: none;
   }
 }
+
+/* HubSpot form */
+
+.hs-form-iframe {
+  min-height: 1100px;
+}
+
+.hbspt-form {
+  @media only screen and (min-width: 600px) {
+    width: 600px;
+  }
+
+  @media only screen and (min-width: 1200px) {
+    width: 880px;
+  }
+}

src/templates/new_request_page.hbs

@@ -1,35 +1,10 @@
 <div class="new__request">
-  <div class="new__request__header">
-    <h1 class="new__request__title">
-      {{t 'submit_a_request'}}
-    </h1>
-    <p>To help you get assistance faster, please include your account ID number
-      in the description of your request below.
-      <a href="/hc/en-us/articles/4409892315291-Find-my-Account-ID-Number">Learn
-      how to find your account ID number.</a>
-    </p>
-    <p>
-      <strong>Please never include your full license key in your message. We will only need the first 4 characters (when applicable) for troubleshooting.</strong>
-    </p>
-  </div>
-  <div class="new__request__form">
-    {{request_form wysiwyg=true}}
-  </div>
-  <div class="contact__container">
-    <div class="contact__section">
-      <div class="contact__section-header">
-        Emergency Contact
-      </div>
-      <p class="contact__section-para">If you are experiencing an urgent issue (e.g. your service is down or
-        billing has been interrupted) please contact us right away.
-        The "Chat" popup in the lower right corner
-        is available 3am to 7am and 10am to 9pm Eastern Time, Monday - Friday. We'll get back to you
-        within 60 seconds.
-      </p>
-      <p class="contact__section-para"> If you are contacting us outside of regular business hours, please email
-        <a href="mailto:[email protected]">[email protected]</a>.
-      </p>
-      <p class="contact__section-para">Additional contact information can be found <a href="https://www.maxmind.com/en/company/contact-us">here</a>.</p>
-    </div>
-  </div>
+  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
+  <script>
+    hbspt.forms.create({
+      region: "na1",
+      portalId: "21266834",
+      formId: "c2c3b089-9dcb-4b55-a5ac-1ef682bab490"
+    });
+  </script>
 </div>