Skip to content

Instantly share code, notes, and snippets.

@zilahir
Created March 3, 2020 22:04
Show Gist options
  • Save zilahir/276a5342e1fb3fa69de183bae27ba938 to your computer and use it in GitHub Desktop.
Save zilahir/276a5342e1fb3fa69de183bae27ba938 to your computer and use it in GitHub Desktop.
form
import React, { useState } from 'react';
import { submitForm } from '../../store/actions/submitForm'
import Success from '../common/Success';
const ContactForm = () => {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [message, setMessage] = useState('')
const [isAnimationHidden, showAnimation] = useState(true)
const [counter, setCounter] = useState(null)
const handleSubmitForm = e => {
e.preventDefault()
showAnimation(false)
const messagePayload = {
name,
email,
message,
}
Promise.all([
submitForm(messagePayload)
]).then(res => {
console.debug('res', res)
setTimeout(() => {
showAnimation(true)
}, 11000)
})
}
console.debug('')
return (
<section className="contact-section">
{
isAnimationHidden
? (
<form
name="contact"
data-netlify="true"
data-netlify-honeypot="bot-field"
method="post"
onSubmit={handleSubmitForm}
>
<p hidden>
<label>
Don’t fill this out:{" "}
<input name="bot-field" onChange={null} />
</label>
</p>
<input type="hidden" name="form-name" value="contact" />
<div className="fields">
<div className="field half">
<label htmlFor="name">Name</label>
<input onChange={e => setName(e.target.value)} type="text" name="name" id="name" />
</div>
<div className="field half">
<label htmlFor="email">Email</label>
<input onChange={e => setEmail(e.target.value)} type="text" name="email" id="email" />
</div>
<div className="field">
<label htmlFor="message">Message</label>
<textarea onChange={e => setMessage(e.target.value)} name="message" id="message" rows="5" />
</div>
</div>
<ul className="actions">
<li>
<button className="button submit" type="submit">Send</button>
</li>
</ul>
</form>
) : <Success />
}
</section>
)
}
export default ContactForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment