Product signup links

src/components/deploy/FeaturePageHero.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid } from '../grid/Grid';
 import styles from './FeaturePageHero.module.css';
-import { LeadForm } from '../lead-form/LeadForm';
+import { SignupForm } from '../signup-form/SignupForm';
 
 export default ({ h1, summary, leadFormId }) => (
   <div className={styles.container}>
@@ -11,7 +11,7 @@ export default ({ h1, summary, leadFormId }) => (
         {h1}
         {summary}
         <div className={styles.leadForm}>
-          <LeadForm id={leadFormId} />
+          <SignupForm id={leadFormId} />
         </div>
       </div>
     </Grid>

src/components/lead-form/LeadForm.js

@@ -3,7 +3,7 @@ import { navigate } from 'gatsby'
 import cn from 'classnames';
 import styles from './LeadForm.module.css';
 import buttonStyles from '../buttons/Button.module.css';
-import { submitHubspotForm, HUBSPOT_FORM_DEMO } from '../../lib/hubspot.js';
+import { submitHubspotForm, HUBSPOT_FORM_HIPAA_GUIDE } from '../../lib/hubspot.js';
 
 export const LeadForm = ({
   id,
@@ -26,7 +26,7 @@ export const LeadForm = ({
   };
 
   const onSubmit = () => {
-    const result = submitHubspotForm(HUBSPOT_FORM_DEMO, email, true);
+    const result = submitHubspotForm(HUBSPOT_FORM_HIPAA_GUIDE, email, true);
     if (!result.ok) {
       setError(result.message);
       return;

src/components/signup-form/SignupForm.js

@@ -1,68 +1,41 @@
-import React, { useState } from 'react';
+import React from 'react';
 import cn from 'classnames';
 import styles from './SignupForm.module.css';
 import buttonStyles from '../buttons/Button.module.css';
-import { submitHubspotForm, HUBSPOT_FORM_PRODUCT_SIGNUP } from '../../lib/hubspot.js';
+import { analytics } from '../../lib/aptible';
+import Button from '../buttons/Button';
 
 export const SignupForm = ({
-  id,
   btnText = 'Sign Up For Free',
-  inputPlaceholder = 'Enter your email',
-  allowPersonalEmails = true,
-  onSuccess = () => { },
+  theme = '',
+  size = '',
 }) => {
-  const [submitted, setSubmitted] = useState(false);
-  const [email, setEmail] = useState('');
-  const [error, setError] = useState('');
+  const onSubmit = () => {
+    let url = 'https://dashboard.aptible.com/signup';
+    const utms = analytics.allUtmVars();
 
-  const onKeypress = (e) => {
-    if (e.key === 'Enter') {
-      onSubmit();
-    }
-  };
+    if (Object.keys(utms).length > 0) {
+      const params = [];
+      for (let param in utms) {
+        params.push(`${param}=${utms[param]}`);
+      }
 
-  const onSubmit = () => {
-    const result = submitHubspotForm(HUBSPOT_FORM_PRODUCT_SIGNUP, email, allowPersonalEmails);
-    if (!result.ok) {
-      setError(result.message);
-      return;
+      url += `?${params.join('&')}`;
     }
 
-    setSubmitted(true);
-    setError('');
-    onSuccess();
-
-    // Give time for HubSpot & analytics to fire
-    setTimeout(() => {
-      window.location = `https://dashboard.aptible.com/signup?email=${encodeURIComponent(email)}`;
-    }, 250);
+    window.location = url;
   };
 
   return (
     <div>
-      <div
-        className={styles.signupFormContainer}
-        style={{ opacity: submitted ? 0 : 1 }}
+      <Button
+        className={cn(buttonStyles.button, styles.button)}
+        onClickFn={onSubmit}
+        theme={theme}
+        size={size}
       >
-        <div className={styles.signupForm} id={id}>
-          <input
-            required
-            className={styles.signupFormInput}
-            onKeyPress={onKeypress}
-            onChange={e => setEmail(e.target.value)}
-            type="email"
-            placeholder={inputPlaceholder}
-          />
-          <button
-            className={cn(buttonStyles.button, styles.button)}
-            type="submit"
-            onClick={onSubmit}
-          >
-            {btnText}
-          </button>
-        </div>
-        <div className={styles.error}>{error ? error : ''}</div>
-      </div>
+        {btnText}
+      </Button>
     </div>
   );
 };

src/components/signup/SignupButton.js

@@ -1,38 +1,14 @@
 import React from 'react';
-import Button from '../buttons/Button';
-import Signup from '../signup/Signup';
-
-class SignupButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false,
-    };
-  }
-
-  openForm() {
-    this.setState({ open: true });
-  }
-
-  closeForm() {
-    this.setState({ open: false });
-  }
-
-  render() {
-    return (
-      <>
-        <Button
-          onClickFn={() => this.openForm()}
-          theme={this.props.theme}
-          size={this.props.size}
-        >
-          {this.props.text}
-        </Button>
-
-        {this.state.open && <Signup product="deploy" closeFn={() => this.closeForm()} />}
-      </>
-    );
-  }
-}
-
-export default SignupButton;
+import SignupForm from '../signup-form';
+
+const SignupButton = ({
+  text = 'Sign Up For Free',
+  theme = '',
+  size = '',
+}) => {
+  return (
+    <SignupForm btnText={text} theme={theme} size={size} />
+  );
+};
+
+export default SignupButton

src/html.js

@@ -64,14 +64,6 @@ export default function HTML(props) {
           dangerouslySetInnerHTML={{ __html: props.body }}
         />
         {props.postBodyComponents}
-
-        <script
-          type="text/javascript"
-          id="hs-script-loader"
-          async
-          defer
-          src="//js.hs-scripts.com/20235662.js"
-        />
       </body>
     </html>
   );

src/lib/aptible/analytics.js

@@ -1,8 +1,12 @@
+import * as cookies from './cookies.js';
+
+
 export const utmVars = [
   'utm_source',
   'utm_medium',
   'utm_campaign',
   'utm_content',
+  'utm_term',
   'gclid',
 ];
 
@@ -40,10 +44,18 @@ export function getParam(key) {
 export function allUtmVars() {
   let utms = {};
 
-  const params = allParams();
-  for (let key in params) {
-    if (utmVars.indexOf(key) !== -1) {
-      utms[key] = params[key];
+  // First grab them from the cookies
+  for (let param of utmVars) {
+    if (cookies.get(param)) {
+      utms[param] = cookies.get(param);
+    }
+  }
+
+  // Then take them from the URL (and overwrite cookie values if necessary)
+  const urlParams = allParams();
+  for (let param of utmVars) {
+    if (urlParams[param]) {
+      utms[param] = urlParams[param];
     }
   }
 

src/lib/hubspot.js

@@ -6,7 +6,7 @@ const HUBSPOT_ACCOUNT_ID = '20235662';
 const HUBSPOT_COOKIE = 'hubspotutk';
 
 export const HUBSPOT_FORM_PRODUCT_SIGNUP = '9ff54b8a-a71e-464c-95e5-a7fff6511cac';
-export const HUBSPOT_FORM_DEMO = '87365f9e-d16c-4df4-92a1-8cae85d67bd7';
+export const HUBSPOT_FORM_HIPAA_GUIDE = '87365f9e-d16c-4df4-92a1-8cae85d67bd7';
 export const HUBSPOT_FORM_AWS_ACTIVATE = '04eddc8b-cadb-416a-869f-8d5d1f518b40';
 
 const validateEmail = (email, allowPersonalEmails) => {
@@ -23,11 +23,6 @@ const validateEmail = (email, allowPersonalEmails) => {
 };
 
 const generateField = (field, value) => {
-  // Rename gclid for HubSpot
-  if (field === 'gclid') {
-    field = 'hs_google_click_id';
-  }
-
   return {
     objectTypeId: '0-1', // 0-1 is used for Contacts
     name: field,
@@ -36,23 +31,7 @@ const generateField = (field, value) => {
 };
 
 const addUtmsToFields = (fields) => {
-  const utms = {};
-
-  // First grab them from the cookies
-  for (let param of analytics.utmVars) {
-    if (cookies.get(param)) {
-      utms[param] = cookies.get(param);
-    }
-  }
-
-  // Then take them from the URL (and overwrite cookie values if necessary)
-  const urlUtms = analytics.allUtmVars();
-  for (let param of analytics.utmVars) {
-    if (urlUtms[param]) {
-      utms[param] = urlUtms[param];
-    }
-  }
-
+  const utms = analytics.allUtmVars();
   for (let param in utms) {
     fields.push(generateField(param, utms[param]));
   }

src/pages/p/hipaa-readiness-in-deploy.js

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Title from './components/Title';
 import Video from './components/Video';
 import Testimonial from './components/Testimonial';
-import LeadForm from '../../components/lead-form';
+import SignupForm from '../../components/signup-form';
 import styles from './VideoLandingPage.module.css';
 
 export default () => {
@@ -32,7 +32,7 @@ export default () => {
           />
 
           <div className={styles.formWrapper}>
-            <LeadForm
+            <SignupForm
               id="HIPAA Readiness Video Campaign - 1"
               inputPlaceholder="Enter your work email"
             />

src/pages/p/hitrust-readiness-in-deploy.js

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Title from './components/Title';
 import Video from './components/Video';
 import Testimonial from './components/Testimonial';
-import LeadForm from '../../components/lead-form';
+import SignupForm from '../../components/signup-form';
 
 import styles from './VideoLandingPage.module.css';
 
@@ -33,7 +33,7 @@ export default () => {
           />
 
           <div className={styles.formWrapper}>
-            <LeadForm
+            <SignupForm
               id="HITRUST Readiness Video Campaign - 1"
               inputPlaceholder="Enter your work email"
             />