From c488d79dcf51c1299ebc3744d784ba78f4b24d47 Mon Sep 17 00:00:00 2001
From: Nick Pedersen <admin@nickpedersen.com>
Date: Mon, 16 Mar 2020 16:46:07 +1100
Subject: [PATCH 1/2] Add formspree example

---
 formspree-form/formspree-form.js | 103 +++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 formspree-form/formspree-form.js

diff --git a/formspree-form/formspree-form.js b/formspree-form/formspree-form.js
new file mode 100644
index 0000000..8517065
--- /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 (
+				<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>
+      );
+    }
+  };
+};

From 96c73ab58c33547ec05809a5e23be0d334ed89b8 Mon Sep 17 00:00:00 2001
From: Nick Pedersen <admin@nickpedersen.com>
Date: Mon, 16 Mar 2020 16:47:43 +1100
Subject: [PATCH 2/2] Formatting fix

---
 formspree-form/formspree-form.js | 48 ++++++++++++++++----------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/formspree-form/formspree-form.js b/formspree-form/formspree-form.js
index 8517065..74abb1d 100644
--- a/formspree-form/formspree-form.js
+++ b/formspree-form/formspree-form.js
@@ -1,22 +1,22 @@
 (RaiselyComponents, React) => {
-	const { Form, styled } = RaiselyComponents;
-	
-	const formspreeUrl = 'https://formspree.io/abc123';
+  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;
-		}
-	`;
+  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 = {};
@@ -39,11 +39,11 @@
 
     FinalPage() {
       return (
-				<Wrapper>
-					<div className="contact-form-thanks">
-						<p>Thanks! We'll be in touch shortly.</p>
-					</div>
-				</Wrapper>
+        <Wrapper>
+          <div className="contact-form-thanks">
+            <p>Thanks! We'll be in touch shortly.</p>
+          </div>
+        </Wrapper>
       );
     }
 
@@ -81,8 +81,8 @@
                 id: "email",
                 required: true,
                 core: true
-							},
-							{
+              },
+              {
                 active: true,
                 visible: true,
                 label: "Message",
@@ -93,8 +93,8 @@
               }
             ]}
             values={initialValues}
-						action={this.save}
-						actionText="Send Message"
+            action={this.save}
+            actionText="Send Message"
           />
         </Wrapper>
       );