Merge pull request #1033 from hackforla/mattyweb/issue864

[CMPT] Switch to hosted Contact web form

client/.eslintrc.js

@@ -47,6 +47,11 @@ module.exports = {
         roles: ["tabpanel"],
       },
     ],
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "labelComponents": ["label"],
+      "labelAttributes": ["htmlFor"],
+      "controlComponents": ["input"]
+    }],
     "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
   },
 };

client/Routes.jsx

@@ -5,6 +5,7 @@ import Reports from '@components/main/Reports';
 import Privacy from '@components/main/Privacy';
 import Faqs from '@components/main/Faqs';
 import Blog from '@components/main/Blog';
+import ContactForm from '@components/main/ContactForm';
 
 export default function Routes() {
   return (
@@ -14,6 +15,7 @@ export default function Routes() {
       <Route path="/privacy" component={Privacy} />
       <Route path="/faqs" component={Faqs} />
       <Route path="/blog" component={Blog} />
+      <Route path="/contact" component={ContactForm} />
       <Route path="/">
         <Redirect to="map" />
       </Route>

client/components/Header.jsx

@@ -106,6 +106,9 @@ const Header = () => {
         <Link to="/privacy">
           <Button className={classes.button}>Privacy</Button>
         </Link>
+        <Link to="/contact">
+          <Button className={classes.button}>Contact</Button>
+        </Link>
       </Toolbar>
     </AppBar>
   );

client/components/main/ContactForm.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { useForm } from '@formspree/react';
+import {
+  makeStyles,
+  Container,
+  Grid,
+  Button,
+} from '@material-ui/core';
+
+const useStyles = makeStyles({
+  root: {
+    color: 'black',
+    backgroundColor: 'white',
+    minHeight: '40em',
+    padding: '2em',
+    '& h1': {
+      fontSize: '2.5em',
+    },
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+      display: 'block',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+    '& label': {
+      marginTop: '1em',
+      fontWeight: 500,
+      display: 'block',
+      width: '20em',
+    },
+    '& input': {
+      width: '40em',
+      padding: '0.5em',
+    },
+    '& textarea': {
+      width: '40em',
+      padding: '0.5em',
+    },
+  },
+});
+
+const FORMSPREE_FORM_ID = 'xknkwwez';
+
+const ContactForm = () => {
+  const [state, handleSubmit] = useForm(FORMSPREE_FORM_ID);
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    console.log(state);
+  });
+
+  return (
+    <Container className={classes.root} maxWidth="md">
+      <Grid container spacing={2}>
+        <Grid item xs={9}>
+          <h1>Contact Us</h1>
+          { state.succeeded
+              && (
+                <div>
+                  Thank you for signing up! We will get back to you in 2-3 business days.
+                </div>
+              )}
+          { !state.succeeded
+              && (
+                <>
+                  <div>
+                    Don&apos;t See What You Need?
+                    We want to build a tool that works for you.
+                    We are open to suggestions and feedback and would love the opportunity
+                    to get connected.
+                    Feel free to input your information in the contact form below
+                    and we will be sure to get back to you within 2-3 business days.
+                  </div>
+                  <form id="fs-frm" onSubmit={handleSubmit} name="simple-contact-form">
+                    <div>
+                      <label htmlFor="full-name">Full Name</label>
+                      <input type="text" name="name" id="full-name" placeholder="First and Last" />
+                    </div>
+                    <div>
+                      <label htmlFor="email-address">Email Address</label>
+                      <input type="email" name="_replyto" id="email-address" placeholder="[email protected]" required="" />
+                    </div>
+                    <div>
+                      <label htmlFor="message">Message</label>
+                      <textarea rows="5" name="message" id="message" placeholder="Your message here" required="" />
+                    </div>
+                    <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission" />
+                    <Button variant="contained" color="primary" type="submit" disabled={state.submitting}>Send Message</Button>
+                  </form>
+                </>
+              )}
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default ContactForm;

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "homepage": "https://www.311-data.org/",
   "dependencies": {
+    "@formspree/react": "^2.2.3",
     "@mapbox/mapbox-gl-geocoder": "^4.7.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",