Created
November 4, 2019 19:22
-
-
Save manueltuero/f74dfc6641956e28acbd18e5476865dd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState } from 'react'; | |
| import addToMailchimp from 'gatsby-plugin-mailchimp'; | |
| import './styles.css'; | |
| function SubscribeForm() { | |
| const [email, setEmail] = useState(''); | |
| const [status, setStatus] = useState(''); | |
| const [message, setMessage] = useState(''); | |
| const handleSubmit = async event => { | |
| event.preventDefault(); | |
| const { result, msg } = await addToMailchimp(email); | |
| result === 'success' && setEmail(''); | |
| // Removes the HTML returned in some response messages in case of error | |
| setMessage(msg.split('<')[0]); | |
| setStatus(result); | |
| }; | |
| const handleChange = event => setEmail(event.target.value); | |
| return ( | |
| <form className="subscribe-form"> | |
| <span className="subscribe-form__title"> | |
| Subscribe for latest updates | |
| </span> | |
| <p className="subscribe-form__text"> | |
| Sign Up for our newsletter and get notified when we publish new articles | |
| for free! | |
| </p> | |
| <div className="subscribe-form__content"> | |
| <input | |
| className="subscribe-form__input" | |
| type="email" | |
| onChange={handleChange} | |
| value={email} | |
| placeholder="[email protected]" | |
| required | |
| /> | |
| <span | |
| status={status} | |
| className={ | |
| status === 'success' | |
| ? 'subscribe-form__message_success' | |
| : 'subscribe-form__message_failure' | |
| } | |
| > | |
| {message} | |
| </span> | |
| </div> | |
| <button | |
| className="subscribe-form__button" | |
| type="submit" | |
| onClick={handleSubmit} | |
| > | |
| Subscribe | |
| </button> | |
| </form> | |
| ); | |
| } | |
| export default SubscribeForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment