Merge pull request #9 from Jinksi/SimpleFormAjax

Add SimpleForm Ajax

package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@researchgate/react-intersection-observer": "^0.6.0",
     "core-js": "^2.5.3",
+    "dom-form-serializer": "^1.0.7",
     "intersection-observer": "^0.5.0",
     "lodash": "^4.17.4",
     "netlify-identity-widget": "^1.2.0",

src/components/EnquiryForm.css

@@ -62,7 +62,8 @@
   border-color: black;
 }
 
-.EnquiryForm--Input[disabled] {
+.EnquiryForm--Input[disabled],
+.EnquiryForm--SubmitButton[disabled] {
   opacity: 0.4;
   pointer-events: none;
   cursor: progress;
@@ -72,5 +73,9 @@
   text-transform: none;
 }
 
-.EnquiryForm--SubmitButton {
+.EnquiryForm--Alert {
+  background: var(--lightGrey);
+  width: 100%;
+  text-align: center;
+  padding: 2rem;
 }

src/components/EnquiryFormControlled.css

@@ -35,10 +35,3 @@
   stroke-dasharray: 40, 0;
   stroke-dashoffset: 0;
 }
-
-.EnquiryForm--Alert {
-  background: whitesmoke;
-  width: 100%;
-  text-align: center;
-  padding: 2rem;
-}

src/components/EnquiryFormSimple.js

@@ -36,10 +36,10 @@ export default ({
       <select
         className='EnquiryForm--Input EnquiryForm--Select'
         name='type'
-        placeholder='Type of enquiry'
+        defaultValue='Type of Enquiry'
         required
       >
-        <option selected disabled hidden>
+        <option disabled hidden>
           Type of Enquiry
         </option>
         <option>Need to know more</option>

src/components/EnquiryFormSimpleAjax.js

@@ -0,0 +1,128 @@
+import React from 'react'
+import { stringify } from 'qs'
+import { serialize } from 'dom-form-serializer'
+
+import './EnquiryForm.css'
+
+const fetch = window.fetch
+
+class Form extends React.Component {
+  static defaultProps = {
+    name: 'Simple Form Ajax',
+    subject: '', // optional subject of the notification email
+    action: '',
+    successMessage: 'Thanks for your enquiry, we will get back to you soon',
+    errorMessage:
+      'There is a problem, your message has not been sent, please try contacting us via email'
+  }
+
+  state = {
+    alert: '',
+    disabled: false
+  }
+
+  handleSubmit = e => {
+    e.preventDefault()
+    if (this.state.disabled) return
+
+    const form = e.target
+    const data = serialize(form)
+    this.setState({ disabled: true })
+    fetch(form.action + '?' + stringify(data), {
+      method: 'POST'
+    })
+      .then(res => {
+        if (res.ok) {
+          return res
+        } else {
+          throw new Error('Network error')
+        }
+      })
+      .then(() => {
+        form.reset()
+        this.setState({
+          alert: this.props.successMessage,
+          disabled: false
+        })
+      })
+      .catch(err => {
+        console.error(err)
+        this.setState({
+          disabled: false,
+          alert: this.props.errorMessage
+        })
+      })
+  }
+
+  render () {
+    const { name, subject, action } = this.props
+
+    return (
+      <form
+        className='EnquiryForm'
+        name={name}
+        action={action}
+        onSubmit={this.handleSubmit}
+        data-netlify=''
+        data-netlify-honeypot='_gotcha'
+      >
+        {this.state.alert && (
+          <div className='EnquiryForm--Alert'>{this.state.alert}</div>
+        )}
+        <label className='EnquiryForm--Label'>
+          <input
+            className='EnquiryForm--Input'
+            type='text'
+            placeholder='Name'
+            name='name'
+            required
+          />
+        </label>
+        <label className='EnquiryForm--Label'>
+          <input
+            className='EnquiryForm--Input'
+            type='email'
+            placeholder='Email'
+            name='email'
+            required
+          />
+        </label>
+        <label className='EnquiryForm--Label has-arrow'>
+          <select
+            className='EnquiryForm--Input EnquiryForm--Select'
+            name='type'
+            defaultValue='Type of Enquiry'
+            required
+          >
+            <option disabled hidden>
+              Type of Enquiry
+            </option>
+            <option>Need to know more</option>
+            <option>Found a bug</option>
+            <option>Want to say hello</option>
+          </select>
+        </label>
+        <label className='EnquiryForm--Label'>
+          <textarea
+            className='EnquiryForm--Input EnquiryForm--Textarea'
+            placeholder='Message'
+            name='message'
+            rows='10'
+            required
+          />
+        </label>
+        <input type='text' name='_gotcha' style={{ display: 'none' }} />
+        {!!subject && <input type='hidden' name='subject' value={subject} />}
+        <input type='hidden' name='form-name' value={name} />
+        <input
+          className='Button EnquiryForm--SubmitButton'
+          type='submit'
+          value='Enquire'
+          disabled={this.state.disabled}
+        />
+      </form>
+    )
+  }
+}
+
+export default Form

src/views/Contact.js

@@ -4,6 +4,7 @@ import Helmet from 'react-helmet'
 import PageHeader from '../components/PageHeader'
 import EnquiryFormControlled from '../components/EnquiryFormControlled'
 import EnquiryFormSimple from '../components/EnquiryFormSimple'
+import EnquiryFormSimpleAjax from '../components/EnquiryFormSimpleAjax'
 import Content from '../components/Content'
 import './Contact.css'
 
@@ -13,12 +14,15 @@ export default ({ page, siteTitle }) => (
     <div className='Section thin'>
       <div className='Container'>
         <Content source={page.content} />
+        <h3>{'<EnquiryFormSimple />'}</h3>
+        <EnquiryFormSimple name='Simple Form' />
+        <br />
+        <h3>{'<EnquiryFormSimpleAjax />'}</h3>
+        <EnquiryFormSimpleAjax name='Simple Form Ajax' />
         <br />
         <h3>{'<EnquiryFormControlled />'}</h3>
         <EnquiryFormControlled siteTitle={siteTitle} name={'Controlled Form'} />
         <br />
-        <h3>{'<EnquiryFormSimple />'}</h3>
-        <EnquiryFormSimple siteTitle={siteTitle} name='Simple Form' />
         <em>Note: these will only work when deployed on Netlify</em>
         <br />
         <em>Also, they are active and I will receive submissions</em> 😉

yarn.lock

@@ -2141,6 +2141,12 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-form-serializer@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/dom-form-serializer/-/dom-form-serializer-1.0.7.tgz#19a90f56b4d342040bf9fcc78e4f380396d3baa5"
+  dependencies:
+    matches-selector "^1.0.0"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -4630,6 +4636,10 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
+matches-selector@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/matches-selector/-/matches-selector-1.2.0.tgz#d1814e7e8f43e69d22ac33c9af727dc884ecf12a"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"