Merge pull request #10 from raisely/add-formspree-example

Add Formspree Example

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 (
+        <Wrapper>
+          <div className="contact-form-thanks">
+            <p>Thanks! We'll be in touch shortly.</p>
+          </div>
+        </Wrapper>
+      );
+    }
+
+    render() {
+      if (this.state.complete) return <this.FinalPage />;
+      return (
+        <Wrapper>
+          <Form
+            global={this.props.global}
+            unlocked
+            fields={[
+              {
+                active: true,
+                visible: true,
+                label: "First Name",
+                type: "text",
+                id: "firstName",
+                required: true,
+                core: true
+              },
+              {
+                active: true,
+                visible: true,
+                label: "Last Name",
+                type: "text",
+                id: "lastName",
+                required: true,
+                core: true
+              },
+              {
+                active: true,
+                visible: true,
+                label: "Email",
+                type: "email",
+                id: "email",
+                required: true,
+                core: true
+              },
+              {
+                active: true,
+                visible: true,
+                label: "Message",
+                type: "textarea",
+                id: "message",
+                required: false,
+                core: true
+              }
+            ]}
+            values={initialValues}
+            action={this.save}
+            actionText="Send Message"
+          />
+        </Wrapper>
+      );
+    }
+  };
+};