diff --git a/config.js b/config.js
index fcbfa1e..7bc0a9b 100644
--- a/config.js
+++ b/config.js
@@ -1,4 +1,10 @@
+// URL for Contact Form submission
+const hooksUrl = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/'
+
 // per page variable for blog page 
-const itemsPerPage = 7;
+const itemsPerPage = 7
 
-module.exports = { itemsPerPage };
\ No newline at end of file
+module.exports = {
+  hooksUrl,
+  itemsPerPage
+}
diff --git a/src/pages/contact.mdx b/src/pages/contact.mdx
index c955bed..c3e9d97 100644
--- a/src/pages/contact.mdx
+++ b/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} id="contact-submit">
+      <InputButton/>
+    </Box>
+  </Flex>
 </form>
diff --git a/src/pages/thank-you.js b/src/pages/thank-you.js
new file mode 100644
index 0000000..c46d40f
--- /dev/null
+++ b/src/pages/thank-you.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import { Box, P } from 'bricks'
+import { Main } from 'theme-ui'
+
+const ThankYou = () => {
+  return (
+    <Main mt="7">
+      <Box textAlign="center">
+        <P fontSize="6" mb="4">Thank You!</P>
+        <P fontSize="3" mb="4">
+          We will get back to you within 24 hours. Our typical response time is 5 minutes.
+        </P>
+        <P fontSize="3">
+          <Link to="/">
+            Back to Homepage
+          </Link>
+        </P>
+      </Box>
+    </Main>
+  )
+}
+
+export default ThankYou
\ No newline at end of file
diff --git a/src/templates/header.js b/src/templates/header.js
index e467394..b7a34a5 100644
--- a/src/templates/header.js
+++ b/src/templates/header.js
@@ -1,8 +1,9 @@
+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'
+import { hooksUrl } from '../../config'
 
 const links = [
   {title: 'Work', link: '/work'},
@@ -12,20 +13,95 @@ 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('contact-submit').disabled = true
+
+          const formSubmitData = {
+            email,
+            idea,
+            userDetails,
+          }
+
+          const http = new XMLHttpRequest()
+          http.open('POST', hooksUrl)
+          http.onreadystatechange = function() {
+            if(http.readyState === XMLHttpRequest.DONE && http.status === 200) {
+              localStorage.setItem('userDetails', JSON.stringify({}))
+              document.getElementById('idea').value = ""
+              document.getElementById('email').value = ""
+              document.getElementById('contact-submit').disabled = false
+              navigate('/thank-you')
+            }
+          }
+          http.onerror = () => {
+            document.getElementById('contact-submit').disabled = false
+            alert('Sorry! something went wrong while processing your request. Please try again later')
+          }
+          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,
 }