diff --git a/formspree-form/formspree-form.js b/formspree-form/formspree-form.js new file mode 100644 index 0000000..74abb1d --- /dev/null +++ b/formspree-form/formspree-form.js @@ -0,0 +1,103 @@ +(RaiselyComponents, React) => { + const { Form, styled } = RaiselyComponents; + + const formspreeUrl = "https://formspree.io/abc123"; + + const initialValues = {}; + + const Wrapper = styled("div")` + .field-wrapper { + margin-bottom: 0.5rem; + } + .contact-form-thanks { + padding: 1rem; + text-align: center; + font-weight: bold; + background: #333; + color: white; + } + `; + + return class ContactForm extends React.Component { + state = {}; + save = async (data, options) => { + if (!data.firstName || !data.lastName || !data.email) { + throw new Error("Please fill in all the required fields"); + } + + const response = await fetch(formspreeUrl, { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json" + }, + body: JSON.stringify(data) + }); + + this.setState({ complete: true }); + }; + + FinalPage() { + return ( + +
+

Thanks! We'll be in touch shortly.

+
+
+ ); + } + + render() { + if (this.state.complete) return ; + return ( + +
+ + ); + } + }; +};