Update EnquiryForms

src/components/EnquiryForm.css

@@ -18,8 +18,7 @@
   flex-wrap: wrap;
 }
 
-.EnquiryForm--Input,
-.EnquiryForm--Textarea {
+.EnquiryForm--Input {
   font-family: inherit;
   font-weight: 400;
   flex-grow: 1;
@@ -38,8 +37,7 @@
   -webkit-box-shadow: 0 0 0 1000px var(--lightGrey) inset !important;
 }
 
-.EnquiryForm--Input:focus,
-.EnquiryForm--Textarea:focus {
+.EnquiryForm--Input:focus {
   outline: none;
   border-color: black;
 }
@@ -50,8 +48,7 @@
   cursor: progress;
 }
 
-.EnquiryForm--Input::placeholder,
-.EnquiryForm--Textarea {
+.EnquiryForm--Input::placeholder {
   text-transform: none;
 }
 

src/components/EnquiryFormControlled.css

@@ -0,0 +1,43 @@
+.EnquiryForm-controlled .EnquiryForm--Input {
+  border: none;
+}
+
+.EnquiryForm--Line {
+  width: 100%;
+  height: 1px;
+  stroke: #bababa;
+  stroke-width: 2px;
+}
+
+.EnquiryForm--Line .focus,
+.EnquiryForm--Line .valid,
+.EnquiryForm--Line .invalid {
+  transition: all 0.2s;
+  stroke-dasharray: 0, 20;
+  stroke-dashoffset: -20;
+}
+
+.EnquiryForm--Line .focus {
+  stroke: black;
+}
+
+.EnquiryForm--Line .valid {
+  stroke: hsl(166, 72%, 40%);
+}
+
+.EnquiryForm--Line .invalid {
+  stroke: var(--danger);
+}
+
+.EnquiryForm--Input:focus ~ .EnquiryForm--Line .focus,
+.EnquiryForm--Input:valid ~ .EnquiryForm--Line .valid,
+.EnquiryForm--Input[data-touched]:invalid ~ .EnquiryForm--Line .invalid {
+  stroke-dasharray: 40, 0;
+  stroke-dashoffset: 0;
+}
+
+.EnquiryForm--Alert {
+  background: whitesmoke;
+  width: 100%;
+  padding: 2rem;
+}

src/components/EnquiryFormControlled.js

@@ -0,0 +1,190 @@
+import React, { Component } from 'react'
+import { stringify } from 'qs'
+
+import './EnquiryForm.css'
+import './EnquiryFormControlled.css'
+
+const fetch = window.fetch
+
+class Form extends Component {
+  static defaultProps = {
+    name: 'Controlled Form'
+  }
+
+  state = {
+    name: '',
+    email: '',
+    message: '',
+    subject: `New Submission from ${this.props.siteTitle}!`,
+    _gotcha: '',
+    disabled: false,
+    alert: '',
+    action: '/contact/',
+    'form-name': this.props.name
+  }
+
+  form = null
+
+  componentDidMount () {
+    if (!this.form) return
+    const inputs = this.form.querySelectorAll('input')
+    inputs.forEach(input => {
+      input.addEventListener('invalid', () => {
+        console.log(input)
+        input.dataset.touched = true
+      })
+      input.addEventListener('blur', () => {
+        if (input.value !== '') input.dataset.touched = true
+      })
+    })
+  }
+
+  handleSubmit = e => {
+    e.preventDefault()
+    const data = {
+      name: this.state.name,
+      email: this.state.email,
+      message: this.state.message,
+      subject: this.state.subject,
+      _gotcha: this.state._gotcha,
+      'form-name': this.state['form-name']
+    }
+    this.setState({ disabled: true })
+    fetch(this.state.action + '?' + stringify(data), {
+      method: 'POST'
+    })
+      .then(res => {
+        if (res.ok) {
+          return res
+        } else {
+          throw new Error('Network error')
+        }
+      })
+      .then(res => {
+        this.setState({
+          disabled: false,
+          alert: 'Thanks for your enquiry, we will get back to you soon.',
+          name: '',
+          email: '',
+          message: '',
+          subject: `New Submission from ${this.props.siteTitle}!`,
+          _gotcha: ''
+        })
+      })
+      .catch(err => {
+        console.log(err)
+        this.setState({
+          disabled: false,
+          alert:
+            '❗️ There is a problem, your message has not been sent, please try contacting us via email'
+        })
+      })
+  }
+
+  handleChange = e =>
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+
+  render () {
+    return (
+      <form
+        className='EnquiryForm EnquiryForm-controlled'
+        name={this.state['form-name']}
+        ref={form => {
+          this.form = form
+        }}
+        action={this.state.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'
+            value={this.state.name}
+            onChange={this.handleChange}
+            type='text'
+            placeholder='Your Name'
+            name='name'
+            required
+            disabled={this.state.disabled ? 'disabled' : ''}
+          />
+          <LineGroup />
+        </label>
+        <label className='EnquiryForm--Label'>
+          <input
+            className='EnquiryForm--Input'
+            value={this.state.email}
+            onChange={this.handleChange}
+            type='email'
+            placeholder='Your Email'
+            name='email'
+            required
+            disabled={this.state.disabled ? 'disabled' : ''}
+          />
+          <LineGroup />
+        </label>
+        <label className='EnquiryForm--Label'>
+          <textarea
+            className='EnquiryForm--Input EnquiryForm--Textarea'
+            value={this.state.message}
+            onChange={this.handleChange}
+            placeholder='Message'
+            name='message'
+            rows='10'
+            required
+            disabled={this.state.disabled ? 'disabled' : ''}
+          />
+          <LineGroup />
+        </label>
+        <input
+          className='EnquiryForm--Input'
+          type='text'
+          name='_gotcha'
+          style={{ display: 'none' }}
+          value={this.state._gotcha}
+          onChange={this.handleChange}
+        />
+        <input
+          className='EnquiryForm--Input'
+          type='hidden'
+          name='subject'
+          value={this.state.subject}
+        />
+        <input
+          className='EnquiryForm--Input'
+          type='hidden'
+          name='form-name'
+          value={this.state['form-name']}
+        />
+        <button
+          className='Button EnquiryForm--SubmitButton'
+          type='submit'
+          value='Send'
+          disabled={this.state.disabled ? 'disabled' : ''}
+        >
+          Enquire
+        </button>
+      </form>
+    )
+  }
+}
+
+const LineGroup = () => (
+  <svg
+    className='EnquiryForm--Line'
+    viewBox='0 0 40 2'
+    preserveAspectRatio='none'
+  >
+    <path d='M0 1 L40 1' />
+    <path d='M0 1 L40 1' className='focus' />
+    <path d='M0 1 L40 1' className='invalid' />
+    <path d='M0 1 L40 1' className='valid' />
+  </svg>
+)
+
+export default Form

src/components/EnquiryFormSimple.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './EnquiryFormSimple.css'
+import './EnquiryForm.css'
 
 export default ({
   name = 'Simple Form',
@@ -34,7 +34,7 @@ export default ({
     </label>
     <label className='EnquiryForm--Label'>
       <textarea
-        className='EnquiryForm--Textarea'
+        className='EnquiryForm--Input EnquiryForm--Textarea'
         placeholder='Message'
         name='message'
         rows='10'

src/components/NetlifyControlledForm.js

@@ -1,233 +0,0 @@
-import React, { Component } from 'react'
-import styled from 'styled-components'
-import { stringify } from 'qs'
-import { color } from '../globalStyles'
-const fetch = window.fetch
-
-class Form extends Component {
-  static defaultProps = {
-    name: 'Controlled Form'
-  }
-
-  state = {
-    name: '',
-    email: '',
-    message: '',
-    subject: `New Submission from ${this.props.siteTitle}!`,
-    _gotcha: '',
-    disabled: false,
-    alert: '',
-    action: '/contact/',
-    'form-name': this.props.name
-  }
-
-  form = null
-
-  componentDidMount () {
-    Array.from(document.querySelectorAll('.Form .Input')).forEach(input => {
-      input.addEventListener('invalid', () => {
-        console.log(input)
-        input.dataset.touched = true
-      })
-      input.addEventListener('blur', () => {
-        if (input.value !== '') input.dataset.touched = true
-      })
-    })
-  }
-
-  handleSubmit = (e) => {
-    e.preventDefault()
-    const data = {
-      name: this.state.name,
-      email: this.state.email,
-      message: this.state.message,
-      subject: this.state.subject,
-      _gotcha: this.state._gotcha,
-      'form-name': this.state['form-name']
-    }
-    this.setState({ disabled: true })
-    fetch(this.state.action + '?' + stringify(data), {
-      method: 'POST'
-    })
-      .then(res => {
-        if (res.ok) {
-          return res
-        } else {
-          throw new Error('Network error')
-        }
-      })
-      .then(res => {
-        this.setState({
-          disabled: false,
-          alert: 'Thanks for your enquiry, we will get back to you soon.',
-          name: '',
-          email: '',
-          message: '',
-          subject: `New Submission from ${this.props.siteTitle}!`,
-          _gotcha: ''
-        })
-      })
-      .catch(err => {
-        console.log(err)
-        this.setState({
-          disabled: false,
-          alert: '❗️ There is a problem, your message has not been sent, please try contacting us via email'
-        })
-      })
-  }
-
-  handleChange = (e) => {
-    this.setState({
-      [e.target.name]: e.target.value
-    })
-  }
-
-  render () {
-    return (
-      <StyledForm
-        name={this.state['form-name']}
-        ref={(form) => { this.form = form }}
-        className='Form'
-        action={this.state.action}
-        onSubmit={this.handleSubmit}
-        data-netlify=''
-        data-netlify-honeypot='_gotcha'
-      >
-        { this.state.alert && <Alert>{this.state.alert}</Alert> }
-        <Label className='Label'>
-          <Input value={this.state.name} onChange={this.handleChange} className='Input' type='text' placeholder='Your Name' name='name' required disabled={this.state.disabled ? 'disabled' : ''} />
-          <LineGroup />
-        </Label>
-        <Label className='Label'>
-          <Input value={this.state.email} onChange={this.handleChange} className='Input' type='email' placeholder='Your Email' name='email' required disabled={this.state.disabled ? 'disabled' : ''} />
-          <LineGroup />
-        </Label>
-        <Label className='Label'>
-          <Textarea value={this.state.message} onChange={this.handleChange} className='Input' placeholder='Message' name='message' rows='10' required disabled={this.state.disabled ? 'disabled' : ''} />
-          <LineGroup />
-        </Label>
-        <Input type='text' name='_gotcha' style={{display: 'none'}} value={this.state._gotcha} onChange={this.handleChange} />
-        <Input type='hidden' name='subject' value={this.state.subject} />
-        <Input type='hidden' name='form-name' value={this.state['form-name']} />
-        <Button className='button' type='submit' value='Send' disabled={this.state.disabled ? 'disabled' : ''} />
-      </StyledForm>
-    )
-  }
-}
-
-export default Form
-
-const LineGroup = () => (
-  <Line className='Line' viewBox='0 0 40 2' preserveAspectRatio='none'>
-    <path d='M0 1 L40 1' />
-    <path d='M0 1 L40 1' className='focus' />
-    <path d='M0 1 L40 1' className='invalid' />
-    <path d='M0 1 L40 1' className='valid' />
-  </Line>
-)
-
-const StyledForm = styled.form`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  max-width: 500px;
-  margin: 2.5rem 0;
-
-  & > * + * {
-    margin-top: 1.5rem;
-  }
-`
-const Label = styled.label`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-`
-const Line = styled.svg`
-  width: 100%;
-  height: 1px;
-  stroke: #bababa;
-  stroke-width: 2px;
-
-  & .focus,
-  & .valid,
-  & .invalid {
-    transition: all 0.2s;
-    stroke-dasharray: 0, 20;
-    stroke-dashoffset: -20;
-  }
-
-  & .focus {
-    stroke: black;
-  }
-
-  & .valid {
-    stroke: hsl(166, 72%, 40%);
-  }
-
-  & .invalid {
-    stroke: var(--col1);
-  }
-`
-const Input = styled.input`
-  font-family: inherit;
-  font-weight: 400;
-  flex-grow: 1;
-  box-sizing: border-box;
-  display: block;
-  margin: 0;
-  border: none;
-  padding: 0.5em 0;
-  line-height: 1;
-  transition: border-color 0.2s;
-  resize: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus ~ ${Line} .focus,
-  &:valid ~ ${Line} .valid,
-  &[data-touched]:invalid ~ ${Line} .invalid {
-    stroke-dasharray: 40, 0;
-    stroke-dashoffset: 0;
-  }
-
-  &[disabled]{
-    opacity: .4;
-    pointer-events: none;
-    cursor: progress;
-  }
-`
-const Textarea = Input.withComponent('textarea')
-const Alert = styled.p`
-  background: whitesmoke;
-  width: 100%;
-  padding: 2rem;
-`
-const Button = styled.input`
-  background: ${color.primary};
-  color: white;
-  text-transform: uppercase;
-  text-decoration: none;
-  font-weight: 400;
-  letter-spacing: .15em;
-  font-size: 1.4rem;
-  display: inline-block;
-  padding: 1rem 2rem;
-  border: none;
-  transition: all .2s ease;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    color: white;
-  }
-
-  &[disabled] {
-    opacity: .4;
-    pointer-events: none;
-    cursor: progress;
-  }
-`

src/globalStyles.css

@@ -4,6 +4,7 @@
   --secondary: #212121;
   --lightGrey: whitesmoke;
   --midGrey: #cacaca;
+  --danger: #ff3d3d;
   --font-primary: 'Open Sans', sans-serif;
   --font-system: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
     'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

src/views/Contact.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Helmet from 'react-helmet'
 
 import PageHeader from '../components/PageHeader'
-// import NetlifyControlledForm from '../components/NetlifyControlledForm'
+import EnquiryFormControlled from '../components/EnquiryFormControlled'
 import EnquiryFormSimple from '../components/EnquiryFormSimple'
 import Content from '../components/Content'
 import './Contact.css'
@@ -14,10 +14,10 @@ export default ({ page }) => (
       <div className='Container'>
         <Content source={page.content} />
         <br />
-        <h3>{'<NetlifyControlledForm />'}</h3>
-        {/* <NetlifyControlledForm name={'Controlled Form'} /> */}
+        <h3>{'<EnquiryFormControlled />'}</h3>
+        <EnquiryFormControlled name={'Controlled Form'} />
         <br />
-        <h3>{'<NetlifySimpleForm />'}</h3>
+        <h3>{'<EnquiryFormSimple />'}</h3>
         <EnquiryFormSimple name='Simple Form' />
         <em>Note: these will only work when deployed on Netlify</em>
         <br />