Contact - Pipedrive

src/pages/contact.mdx

@@ -26,18 +26,31 @@ San Francisco
 
 #### Or leave us a msg :)
 
-<form
-  action="https://formspree.io/anand@codebrahma.com"
-  method="post" target='/thanks'>
-    <Flex flexWrap='wrap' flexDirection='column'>
-      <Box width={[1,1/3]}>
-        <InputText size='25' rows="5" style={{width:'100%'}} required as='textarea' name='msg' placeholder='Tell us about your idea'/>
-      </Box>
-      <Box width={[1,1/3]} mt={1}>
-        <InputText style={{width:'100%'}} name='email' type='email' required placeholder='Email address'/>
-      </Box>
-      <Box width={[1,1/3]} mt={1}>
-        <InputButton/>
-      </Box>
-    </Flex>
+<form id="contact-form">
+  <Flex flexWrap='wrap' flexDirection='column'>
+    <Box width={[1,1/3]}>
+      <InputText
+        id="idea" 
+        size='25'
+        rows="5"
+        style={{width:'100%'}}
+        required as='textarea'
+        name='msg'
+        placeholder='Tell us about your idea'
+      />
+    </Box>
+    <Box width={[1,1/3]} mt={1}>
+      <InputText
+      id="email" 
+      style={{width:'100%'}}
+      name='email'
+      type='email'
+      required
+      placeholder='Email address'
+    />
+    </Box>
+    <Box width={[1,1/3]} mt={1}>
+      <InputButton/>
+    </Box>
+  </Flex>
 </form>

src/pages/thank-you.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const ThankYou = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100vw',
+      height: '100vh',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}>
+      <p style={{ fontSize: '30px' }} >Thank You!</p>
+      <br />
+      <p style={{ fontSize: '20px' }}>We will get back to you within 24 hours. Our typical response time is 5 minutes.</p>
+      <br />
+      <Link 
+        to="/"
+      >
+        Back to Homepage
+      </Link>
+    </div>
+  )
+}
+
+export default ThankYou;

src/templates/header.js

@@ -1,8 +1,8 @@
+import React, { Component } from "react"
 import PropTypes from "prop-types"
-import React from "react"
 import { Nav } from 'bricks'
 import { Logo } from '../components/logo'
-import { Link } from 'gatsby'
+import { Link, navigate } from 'gatsby'
 
 const links = [
   {title: 'Work', link: '/work'},
@@ -11,20 +11,91 @@ const links = [
   {title: 'Contact', link: '/contact'},
 ]
 
-const Header = ({ siteTitle }) => {
-  return (
-  <header>
-    <div>
-      <Nav 
-        logo={Logo({title: siteTitle})}
-        links={links}
-        GatsbyLink={Link}
-      />
-    </div>
-  </header>
-)
+class Header extends Component {
+
+  componentDidMount() {
+    if(typeof window !== 'undefined') {
+      let userDetails = {}
+      let SITE_NAME = window.location.origin;
+      document.getElementById('contact-form') &&
+      document
+        .getElementById('contact-form')
+        .addEventListener('submit', (e => {
+          e.preventDefault()
+          const idea = document.getElementById('idea').value
+          const email = document.getElementById('email').value
+          document.getElementById('idea').value = ""
+          document.getElementById('email').value = ""
+
+          const formSubmitData = {
+            email,
+            idea,
+            userDetails,
+          }
+
+          const url = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/'
+
+          const http = new XMLHttpRequest();
+          http.open('POST', url)
+          http.onreadystatechange = function() {
+            if(http.readyState === 4 && http.status === 200) {
+              localStorage.setItem('userDetails', JSON.stringify({}))
+              navigate('thank-you')
+            }
+          }
+          http.send(JSON.stringify(formSubmitData));
+      }))
+
+      const isObjectEmpty = (obj = {}) => {
+        return Object.keys(obj).length === 0 && obj.constructor === Object
+      }
+
+      const distinct = (value, index, self) => {
+        return self.indexOf(value) === index;
+      }
+
+      const updateUserDetailsWithCurrentUrl = (userDetails, currentUrl) => {
+        userDetails.browsedLinks = [...userDetails.browsedLinks, currentUrl]
+        userDetails.browsedLinks = userDetails.browsedLinks.filter(distinct)
+        localStorage.setItem('userDetails', JSON.stringify(userDetails))
+      }
+
+      userDetails = JSON.parse(localStorage.getItem('userDetails')) || {};
+      // User already entered site atleast once
+      if (!isObjectEmpty(userDetails)) {
+        // Extract userDetails from localStorage
+        userDetails = JSON.parse(localStorage.getItem('userDetails'));
+        updateUserDetailsWithCurrentUrl(userDetails, document.URL);
+      } else {
+        // If entering first time
+        // Set referrer
+        userDetails.referrer = (!document.referrer.includes(SITE_NAME) && document.referrer) || '';
+        // Clear past links or set it empty
+        userDetails.browsedLinks = []
+        const currentTimeZone = `${parseInt(new Date().getTimezoneOffset() / -60)}:${Math.abs(new Date().getTimezoneOffset() % 60)}`
+        userDetails.timeZone = `UTC${currentTimeZone.startsWith('-') ? '' : '+'}${currentTimeZone}`
+        updateUserDetailsWithCurrentUrl(userDetails, document.URL)
+      }
+    }
+  }
+
+  render() {
+    const { siteTitle } = this.props;
+    return (
+      <header>
+        <div>
+          <Nav 
+            logo={Logo({title: siteTitle})}
+            links={links}
+            GatsbyLink={Link}
+          />
+        </div>
+      </header>
+    )	
+  }
 }
 
+
 Header.propTypes = {
   siteTitle: PropTypes.string,
 }