maverick/netlify-cms-react-starter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

<EnquiryFormSimpleAjax /> alert state

Browse source
This commit is contained in:
Eric Jinks 2018-01-24 12:41:10 +10:00
parent 8e516df834
commit f939621338
4 changed files with 129 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/EnquiryForm.css
View file

@ -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;
}

7
src/components/EnquiryFormControlled.css
View file

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

4
src/components/EnquiryFormSimple.js
View file

@ -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>

200
src/components/EnquiryFormSimpleAjax.js
View file

@ -1,88 +1,128 @@
import React from 'react'
import { stringify } from 'qs'
import { serialize } from 'dom-form-serializer'
import './EnquiryForm.css'
const handleSubmit = e => {
e.preventDefault()
const form = e.target
const data = serialize(form)
console.log(data)
fetch(form.action + '?' + stringify(data), {
method: 'POST'
})
.then(res => {
if (res.ok) {
return res
} else {
throw new Error('Network error')
}
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'
})
.catch(console.error)
.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 ({
name = 'Simple Form Ajax',
subject = '', // optional subject of the notification email
action = ''
}) => (
<form
className='EnquiryForm'
name={name}
action={action}
onSubmit={handleSubmit}
data-netlify=''
data-netlify-honeypot='_gotcha'
>
<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'
placeholder='Type of enquiry'
required
>
<option selected 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'
/>
</form>
)
export default Form