Turning contact form to controlled

Adding default services to contact form
Adding scroll for mobile forms

src/components/ContactForm.js

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Heading,
@@ -16,12 +16,26 @@ import { PrimaryButton } from './core';
 
 const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 
-const ContactForm = ({ onClose }) => {
+const ContactForm = ({ onClose, defaultService }) => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [services, setServices] = useState('');
+  const [comments, setComments] = useState('');
+
   const [submitting, setSubmitting] = useState();
   const [success, setSuccess] = useState();
 
+  useEffect(() => {
+    setServices(defaultService);
+  }, [defaultService]);
+
   const handleSubmit = (event) => {
-    const data = new FormData(event.target);
+    const data = new FormData();
+    data.set('entry.1114584563', name);
+    data.set('emailAddress', email);
+    data.set('entry.533506743', services);
+    data.set('entry.297731592', comments);
+
     setSubmitting(true);
     fetch(
       'https://docs.google.com/forms/d/e/1FAIpQLScsfrAHD8yKJGKF-yI_T9676FR-LDmmuBG_m8uY2TmP_zmZUg/formResponse',
@@ -59,7 +73,7 @@ const ContactForm = ({ onClose }) => {
       <Box
         pad="medium"
         border={{ color: 'light-1', size: 'xsmall', side: 'all' }}
-        style={{ position: 'relative' }}
+        style={{ position: 'relative', overflowY: 'auto' }}
       >
         {!success && (
           <Box>
@@ -71,11 +85,15 @@ const ContactForm = ({ onClose }) => {
               in, and someone from our team will reach out soon.
             </Text>
             <Text size="small" color="accent-1">
-              Submit{' '}
+              Do not submit{' '}
+              <Text weight="bold" size="small" color="accent-1">
+                classified
+              </Text>{' '}
+              or{' '}
               <Text weight="bold" size="small" color="accent-1">
-                unclassified
+                CUI
               </Text>{' '}
-              data only.
+              data.
             </Text>
             <Form onSubmit={handleSubmit}>
               <FormField
@@ -91,7 +109,12 @@ const ContactForm = ({ onClose }) => {
                 }
                 required
               >
-                <TextInput id="text-input-name" name="entry.1114584563" />
+                <TextInput
+                  id="text-input-name"
+                  name="entry.1114584563"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
               </FormField>
               <FormField
                 name="emailAddress"
@@ -106,7 +129,12 @@ const ContactForm = ({ onClose }) => {
                 }
                 required
               >
-                <TextInput id="text-input-email" name="emailAddress" />
+                <TextInput
+                  id="text-input-email"
+                  name="emailAddress"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
               </FormField>
               <FormField
                 name="entry.533506743"
@@ -120,7 +148,12 @@ const ContactForm = ({ onClose }) => {
                   </Text>
                 }
               >
-                <TextInput id="text-input-services" name="entry.533506743" />
+                <TextInput
+                  id="text-input-services"
+                  name="entry.533506743"
+                  value={services}
+                  onChange={(e) => setServices(e.target.value)}
+                />
               </FormField>
               <FormField
                 name="entry.297731592"
@@ -137,6 +170,8 @@ const ContactForm = ({ onClose }) => {
                 <TextArea
                   id="text-input-comments"
                   name="entry.297731592"
+                  value={comments}
+                  onChange={(e) => setComments(e.target.value)}
                   style={{ height: '100px' }}
                 />
               </FormField>
@@ -207,4 +242,8 @@ const ContactForm = ({ onClose }) => {
   );
 };
 
+ContactForm.defaultProps = {
+  defaultService: '',
+};
+
 export default ContactForm;

src/components/FeedbackForm.js

@@ -57,7 +57,7 @@ const FeedbackForm = ({ onClose }) => {
         </Heading>
         <Button icon={<Close />} onClick={onClose}></Button>
       </Box>
-      <Box pad="medium" style={{ position: 'relative' }}>
+      <Box pad="medium" style={{ position: 'relative', overflowY: 'auto' }}>
         {!success && (
           <Box>
             <Form onSubmit={handleSubmit}>
@@ -95,7 +95,7 @@ const FeedbackForm = ({ onClose }) => {
                         </Text>
                         <Text size="small">
                           Help us by volunteering an occasional hour of your
-                          time to provide insights and test ideas for ow C3I&N
+                          time to provide insights and test ideas for how C3I&N
                           can best serve our IT customers.
                         </Text>
                       </Box>

src/templates/ServiceDetail.js

@@ -55,7 +55,7 @@ const ServiceDetailTemplate = ({ data }) => {
                   basis={breakLayout ? 'auto' : '460px'}
                   flex={{ shrink: 0 }}
                 >
-                  <ContactForm />
+                  <ContactForm defaultService={frontmatter.title} />
                 </Box>
               </Column>
             </ContentContainer>

src/templates/SolutionDetail.js

@@ -56,7 +56,7 @@ const SolutionDetailTemplate = ({ data }) => {
                     basis={breakLayout ? 'auto' : '460px'}
                     flex={{ shrink: 0 }}
                   >
-                    <ContactForm />
+                    <ContactForm defaultService={frontmatter.title} />
                   </Box>
                 </Box>
               </Column>