WIP Form

Author: marcoacierno

src/components/contact-us/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Container from '../container';
+import Form from '../form';
+
+export default props => {
+  return (
+    <Container size="medium">
+      <h1>Contact us</h1>
+      <p>If you would like to organize a Python Pizza, get in touch!</p>
+      <Container size="small">
+        <Form />
+      </Container>
+    </Container>
+  );
+};

src/components/container/index.css

@@ -15,7 +15,8 @@
     --container-size: 120rem;
   }
 
-  h1 {
+  h1,
+  p {
     text-align: center;
   }
 }

src/components/form/index.css

@@ -0,0 +1,42 @@
+.Form {
+  label {
+    display: block;
+    text-align: center;
+
+    margin-top: 1rem;
+  }
+
+  input,
+  textarea {
+    display: block;
+    width: 100%;
+    margin-top: 0.2rem;
+  }
+
+  textarea {
+    min-height: 10rem;
+    resize: vertical;
+  }
+
+  &--submit-container {
+    text-align: center;
+    margin-top: 1rem;
+
+    button {
+      max-width: 30rem;
+      width: 100%;
+      height: 3rem;
+
+      font-family: var(--font-name--heading);
+      font-size: 1.6rem;
+
+      background: var(--primary-color);
+      border-radius: 0.4rem;
+      color: var(--white);
+      cursor: pointer;
+      border: 0;
+
+      appearance: none;
+    }
+  }
+}

src/components/form/index.js

@@ -0,0 +1,92 @@
+import React, { useState, useCallback } from 'react';
+
+import './index.css';
+
+const encode = data => {
+  return Object.keys(data)
+    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
+    .join('&');
+};
+
+export default props => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [city, setCity] = useState('');
+
+  const onChangeName = useCallback(e => setName(e.target.value), []);
+  const onChangeEmail = useCallback(e => setEmail(e.target.value), []);
+  const onChangeMessage = useCallback(e => setMessage(e.target.value), []);
+  const onChangeCity = useCallback(e => setCity(e.target.value), []);
+  const onSubmit = useCallback(
+    async e => {
+      e.preventDefault();
+
+      try {
+        const response = await fetch('/', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          body: encode({
+            'form-name': 'contact',
+            name,
+            email,
+            city,
+            message,
+          }),
+        });
+
+        console.log('response', response);
+      } catch (e) {
+        console.error('error');
+      }
+    },
+    [name, email]
+  );
+
+  return (
+    <form onSubmit={onSubmit} className="Form" name="contact">
+      <label>
+        <span>Your name</span>
+        <input
+          required
+          onChange={onChangeName}
+          value={name}
+          type="text"
+          name="name"
+        />
+      </label>
+      <label>
+        <span>Your Email</span>
+        <input
+          required
+          onChange={onChangeEmail}
+          value={email}
+          type="email"
+          name="email"
+        />
+      </label>
+      <label>
+        <span>City</span>
+        <input
+          required
+          onChange={onChangeCity}
+          value={city}
+          type="text"
+          name="city"
+        />
+      </label>
+      <label>
+        <span>Your message</span>
+        <textarea
+          required
+          onChange={onChangeMessage}
+          value={message}
+          name="email"
+        />
+      </label>
+      <div className="Form--submit-container">
+        <button type="submit">Send</button>
+      </div>
+    </form>
+  );
+};

src/pages/index.js

@@ -4,11 +4,13 @@ import Layout from '../components/layout';
 import SEO from '../components/seo';
 import Hero from '../components/hero';
 import PastEvents from '../components/past-events';
+import ContactUs from '../components/contact-us';
 
 export default props => (
   <Layout>
     <SEO title="Home" />
     <Hero />
     <PastEvents />
+    <ContactUs />
   </Layout>
 );