From 08f052d1b77017c7126bde636e3ee242970fa94c Mon Sep 17 00:00:00 2001 From: Ben Wynn Date: Mon, 29 Mar 2021 10:38:04 -0400 Subject: [PATCH 01/10] Updating form with new field names for the usaf's google account. --- src/components/ContactForm.js | 43 ++++++++++++++++++++--------------- src/styles/theme.js | 5 ++++ 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js index 56ec27b..fe4818e 100644 --- a/src/components/ContactForm.js +++ b/src/components/ContactForm.js @@ -10,14 +10,17 @@ const ContactForm = () => { Request a consultation - - Use this form to get going. We'll get in touch-to-discuss the details. - + + We'd love to talk. + Tell us how we can reach you and what services you're interested in, and someone from our team will reach out soon. + + Submit unclassified data only. +
setValue(nextValue)} @@ -25,7 +28,7 @@ const ContactForm = () => { onSubmit={(event) => { const data = new FormData(event.target); fetch( - 'https://docs.google.com/forms/u/0/d/e/1FAIpQLScV4doNjISIN1IyjI8gdyv7bUsaMvAFuEkwDy-I5IyicZJSYw/formResponse', + 'https://docs.google.com/forms/d/e/1FAIpQLScsfrAHD8yKJGKF-yI_T9676FR-LDmmuBG_m8uY2TmP_zmZUg/formResponse', { mode: 'no-cors', // we don't care about the result of this request, so just do it. method: 'POST', @@ -34,31 +37,35 @@ const ContactForm = () => { ); }} > - - Required* - - + - + + + + - + diff --git a/src/styles/theme.js b/src/styles/theme.js index 083a5d3..10f6f87 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -138,6 +138,11 @@ export const themeOverrides = { paragraph: { fill: true, }, + formField: { + label: { + requiredIndicator: 'green', + } + } }; const theme = deepMerge(grommet, themeOverrides); -- GitLab From 6c4327ab3ba033bc975dda1facf556e0e3daa19c Mon Sep 17 00:00:00 2001 From: Anne Demey Date: Mon, 5 Apr 2021 15:35:51 -0500 Subject: [PATCH 02/10] Form styling updates --- src/components/ContactForm.js | 104 ++++++++++++++++++++++++++-------- src/styles/theme.js | 24 +++++++- 2 files changed, 100 insertions(+), 28 deletions(-) diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js index fe4818e..a73cb86 100644 --- a/src/components/ContactForm.js +++ b/src/components/ContactForm.js @@ -1,9 +1,42 @@ import React, { useState } from 'react'; -import { Box, Heading, Text, Form, FormField, TextInput } from 'grommet'; +import { + Box, + Heading, + Text, + Form, + FormField, + TextInput, + TextArea, +} from 'grommet'; import { PrimaryButton } from './core'; const ContactForm = () => { const [value, setValue] = useState({}); + const [submitting, setSubmitting] = useState(); + + const handleChange = (nextValue) => { + setValue(nextValue); + }; + + const handleSubmit = (event) => { + const data = new FormData(event.target); + setSubmitting(true); + fetch( + 'https://docs.google.com/forms/d/e/1FAIpQLScsfrAHD8yKJGKF-yI_T9676FR-LDmmuBG_m8uY2TmP_zmZUg/formResponse', + { + mode: 'no-cors', // we don't care about the result of this request, so just do it. + method: 'POST', + body: data, + } + ) + .then((res) => { + setSubmitting(false); + }) + .catch((e) => { + console.log('Error submitting', e); + }); + }; + return ( @@ -17,30 +50,25 @@ const ContactForm = () => { > We'd love to talk. - Tell us how we can reach you and what services you're interested in, and someone from our team will reach out soon. + Tell us how we can reach you and what services you're interested in, + and someone from our team will reach out soon. + + + Submit unclassified data only. - Submit unclassified data only. -
-
setValue(nextValue)} - onReset={() => setValue({})} - onSubmit={(event) => { - const data = new FormData(event.target); - fetch( - 'https://docs.google.com/forms/d/e/1FAIpQLScsfrAHD8yKJGKF-yI_T9676FR-LDmmuBG_m8uY2TmP_zmZUg/formResponse', - { - mode: 'no-cors', // we don't care about the result of this request, so just do it. - method: 'POST', - body: data, - } - ); - }} - > +
+ setValue({})} onSubmit={handleSubmit}> + Name{' '} + + (required) + + + } required > @@ -48,7 +76,14 @@ const ContactForm = () => { + Email address{' '} + + (required) + + + } required > @@ -56,18 +91,37 @@ const ContactForm = () => { + Services or solutions you are interested in{' '} + + (optional) + + + } > + Comments or details{' '} + + (optional) + + + } > - +