{"version":3,"file":"component---src-pages-contact-js-ba53deea910b741a7293.js","mappings":"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","sources":["webpack://thowardmediacouk/./src/components/banner.js","webpack://thowardmediacouk/./src/components/form.js","webpack://thowardmediacouk/./src/images/banner-images/contact-banner.jpg","webpack://thowardmediacouk/./src/pages/contact.js"],"sourcesContent":["import React, { Component } from 'react';\nimport styled from 'styled-components'\nimport get from 'lodash/get'\n\nclass Banner extends Component {\n    render(title, image) {\n        const bannerTitle = get(this.props, 'title')\n        const bannerImage = get(this.props, 'image')\n\n        const HeaderImage = styled.section`\n\t\t  background-image: url(${bannerImage});\n\t\t  height: 400px;\n\t\t  width: 100%;\n\t\t  background-size: cover;\n\t\t  background-repeat: no-repeat;\n\t\t  background-position: 50% 60%;\n\t\t  margin-bottom: 40px;\n\t\t  display: flex;\n\t\t  justify-content: center;\n\t\t  align-items: center;\n\t\t  background-color: #424f52;\n\t\t`\n\n\t\tconst Title = styled.h1`\n\t\t  margin: 80px 20px 0 20px;\n    \t  text-align: center;\n\t\t  color: #fff;\n\t\t  border: 4px solid;\n\t\t  padding: 10px 20px;\n\t\t  text-transform: uppercase;\n\t\t  font-weight: 100;\n\n\t\t  @media(min-width: 765px) {\n\t\t   \tmargin: 80px 0 0 0;\n    \t  \ttext-align: left;\n\t\t  }\n\t\t`\n\n        return (\n        \t<HeaderImage>\n      \t\t\t<Title>{bannerTitle}</Title>\n    \t\t</HeaderImage>\n        );\t\n    }\n}\n \n\nexport default Banner\n\n","import React from \"react\";\nimport styled from 'styled-components';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\nexport default class Form extends React.Component {\n  constructor(props) {\n    super(props);\n    this.submitForm = this.submitForm.bind(this);\n    this.state = {\n      status: \"\"\n    }; \n  }\n\n  render(props) {\n    const { status } = this.state;\n    const markup = renderToStaticMarkup(this.props.children);\n\n    return (\n\n      <HtmlForm onSubmit={this.submitForm} action={\"https://formspree.io/\" + this.props.formid} method=\"POST\">\n        \n        <div dangerouslySetInnerHTML={{__html: markup}} />\n        \n        {status === \"SUCCESS\" ? <p><br/><strong>Thanks for your message, we will get back to you soon!</strong></p> : <button>Submit</button>}\n        {status === \"ERROR\" && <p>Ooops! There was an error.</p>}\n      </HtmlForm>\n \n    );\n  }\n\n  submitForm(ev) {\n    ev.preventDefault();\n    const form = ev.target;\n    const data = new FormData(form);\n    const xhr = new XMLHttpRequest();\n    xhr.open(form.method, form.action);\n    xhr.setRequestHeader(\"Accept\", \"application/json\");\n    xhr.onreadystatechange = () => {\n      if (xhr.readyState !== XMLHttpRequest.DONE) return;\n      if (xhr.status === 200) {\n        form.reset();\n        this.setState({ status: \"SUCCESS\" });\n      } else {\n        this.setState({ status: \"ERROR\" });\n      }\n    };\n    xhr.send(data);\n  }\n}\n\nconst HtmlForm = styled.form`\n  div {\n    margin: 40px auto;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button {\n    margin-top: 20px;\n    display: flex;\n    align-self: flex-end;\n    background: #272f32;\n    border: 1px solid #fff;\n    padding: 10px 15px;\n    margin-left: 20px;\n    font-size: 16px;\n    color: #fff;\n\n    &:hover {\n      background: #fff;\n      color: #272f32;\n      cursor: pointer;\n    }\n\n    @media screen and (max-width: 479px) {\n      width: 100%;\n      text-align: center;\n      display: block;\n    }\n  }\n\n  input[type=\"text\"].gotcha {\n    margin: 0;\n    border: 0;\n    height: 0;\n    padding: 0;\n  }\n  \n  input[type=\"text\"],\n  input[type=\"email\"] {\n    background: none;\n    border-width: 0 0 2px 0;\n    border-color: red;\n    color: #fff;\n    outline: none;\n    margin-bottom: 20px;\n    font-size: 16px;\n    padding: 5px;\n\n     &:focus {\n      outline-color: red;\n    }\n  }\n\n  textarea {\n    background: none;\n    border-color: red;\n    color: #fff;\n    outline: none;\n    border-width: 0 0 2px 0;\n    margin-bottom: 20px;\n    font-size: 16px;\n    padding: 5px;\n    min-height: 100px;\n  }\n\n  input[type=checkbox] {\n    margin-right: 10px;\n    padding: 5px;\n    -webkit-appearance: none;\n    height: 20px;\n    width: 20px;\n    background: white;\n    vertical-align: middle;\n    border: 2px solid red;\n\n    &:checked {\n      background: red;\n      border: 2px solid white;\n    }\n  }\n  \n`\n    ","export default __webpack_public_path__ + \"static/contact-banner-8e12aedb6fe770e2f6bc7b9b91a04da9.jpg\";","import React from \"react\";\nimport Layout from \"../components/layout\";\nimport Seo from \"../components/seo\";\nimport styled from 'styled-components';\nimport BgImage from '../images/banner-images/contact-banner.jpg';\nimport Banner from \"../components/banner\";\nimport ContactForm from \"../components/form\";\n\n\nconst ContactPage = () => (\n  <Layout>\n    <Seo title=\"Contact\" description=\"Take the next step and get in contact today with ThowardMedia.\" />\n\n    <Banner title=\"Contact\" image={BgImage} />\n\n    <Wrapper>\n      <p>Have a project in mind or need some help? Get in contact with ThowardMedia by filling out the form below and we'll get back to you.</p>\n \n      <ContactForm formid=\"mjvarveo\" messagelabel=\"Message\">\n        <input type=\"text\" name=\"name\" placeholder=\"Your name\" required/>\n        <input type=\"email\" name=\"email\" placeholder=\"Your email address\" required />\n        <textarea name=\"message\" placeholder=\"Take the next step and get in contact today with ThowardMedia\" required />\n        <input type=\"text\" name=\"_gotcha\" style={{display: `none`}} />\n      </ContactForm>\n    </Wrapper>\n\n  </Layout>\n)\n\nexport default ContactPage\n\nconst Wrapper = styled.div`\n  max-width: 800px;\n  margin: 0 auto;\n  color: #fff;\n  \n  p {\n    text-align: center;\n  }\n\n\n  @media(max-width: 980px) {\n    padding: 0 20px;\n  }\n`"],"names":["Banner","_Component","apply","arguments","_inheritsLoose","prototype","render","title","image","bannerTitle","get","this","props","bannerImage","HeaderImage","styled","section","withConfig","displayName","componentId","Title","h1","React","Component","Form","_React$Component","_this","call","submitForm","bind","state","status","_proto","markup","renderToStaticMarkup","children","HtmlForm","onSubmit","action","formid","method","dangerouslySetInnerHTML","__html","ev","preventDefault","form","target","data","FormData","xhr","XMLHttpRequest","open","setRequestHeader","onreadystatechange","readyState","DONE","reset","setState","send","ContactPage","Layout","Seo","description","BgImage","Wrapper","ContactForm","messagelabel","type","name","placeholder","required","style","display","div"],"sourceRoot":""}