From 10960fad84b570b832a4e5c8d8b0ad40710a6f9b Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Mon, 2 Jun 2025 16:21:33 +0200
Subject: [PATCH 1/4] add char counter to fields

---
 src/components/forms/fields/CharCounter.tsx   | 14 +++++++++
 src/components/forms/fields/Field.tsx         | 30 ++++++++++++++-----
 src/components/forms/fields/TextAreaField.tsx | 26 +++++++++++++---
 src/components/forms/fields/TextField.tsx     | 24 +++++++++++++--
 4 files changed, 79 insertions(+), 15 deletions(-)
 create mode 100644 src/components/forms/fields/CharCounter.tsx

diff --git a/src/components/forms/fields/CharCounter.tsx b/src/components/forms/fields/CharCounter.tsx
new file mode 100644
index 00000000..4b3df4f2
--- /dev/null
+++ b/src/components/forms/fields/CharCounter.tsx
@@ -0,0 +1,14 @@
+import { Text, TextProps } from '@chakra-ui/react';
+
+interface CharCounterProps extends TextProps {
+  current: number;
+  max: number;
+}
+
+export const CharCounter = ({ current, max, ...rest }: CharCounterProps) => {
+  return (
+    <Text fontSize='xs' color={current > max ? 'red.500' : 'gray.500'} {...rest}>
+      {current}/{max}
+    </Text>
+  );
+};
diff --git a/src/components/forms/fields/Field.tsx b/src/components/forms/fields/Field.tsx
index ff5c18fd..d6de8e6b 100644
--- a/src/components/forms/fields/Field.tsx
+++ b/src/components/forms/fields/Field.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-import { Box, FormControl, FormControlProps, FormLabel } from '@chakra-ui/react';
+import { Box, Flex, FormControl, FormControlProps, FormLabel } from '@chakra-ui/react';
 import type { FieldError } from 'react-hook-form';
 
 import { PageText } from '../../UI';
@@ -10,9 +10,18 @@ export interface Props extends FormControlProps {
   label: string;
   helpText?: ReactNode;
   error?: FieldError;
+  helpIndicator?: ReactNode;
 }
 
-export const Field: FC<Props> = ({ children, id, label, helpText, error, ...rest }) => {
+export const Field: FC<Props> = ({
+  children,
+  id,
+  label,
+  helpText,
+  error,
+  helpIndicator,
+  ...rest
+}) => {
   return (
     <FormControl id={`${id}-control`} {...rest}>
       <FormLabel htmlFor={id}>
@@ -29,12 +38,17 @@ export const Field: FC<Props> = ({ children, id, label, helpText, error, ...rest
 
       {children}
 
-      {error && (
-        <Box mt={1}>
-          <PageText as='small' fontSize='helpText' color='red.500'>
-            {error.message}
-          </PageText>
-        </Box>
+      {(error || helpIndicator) && (
+        <Flex>
+          <Box mt={1} flex={1}>
+            {error && (
+              <PageText as='small' fontSize='helpText' color='red.500'>
+                {error.message}
+              </PageText>
+            )}
+          </Box>
+          {helpIndicator && <Box mt={1}>{helpIndicator}</Box>}
+        </Flex>
       )}
     </FormControl>
   );
diff --git a/src/components/forms/fields/TextAreaField.tsx b/src/components/forms/fields/TextAreaField.tsx
index 4929742b..73ee04ac 100644
--- a/src/components/forms/fields/TextAreaField.tsx
+++ b/src/components/forms/fields/TextAreaField.tsx
@@ -3,17 +3,35 @@ import { Textarea } from '@chakra-ui/react';
 import { useFormContext } from 'react-hook-form';
 
 import { Field, type Props as FieldProps } from './Field';
+import { CharCounter } from './CharCounter';
+import { MAX_TEXT_AREA_LENGTH } from '../../../constants';
 
-interface Props extends Omit<FieldProps, 'children' | 'error'> {}
+interface Props extends Omit<FieldProps, 'children' | 'error'> {
+  maxLength?: number;
+}
 
-export const TextAreaField: FC<Props> = ({ id, isDisabled, ...rest }) => {
+export const TextAreaField: FC<Props> = ({
+  id,
+  isDisabled,
+  maxLength = MAX_TEXT_AREA_LENGTH,
+  ...rest
+}) => {
   const {
     register,
-    formState: { errors }
+    formState: { errors },
+    watch
   } = useFormContext();
 
+  const currentValue = watch(id) || '';
+  const currentLength = currentValue.length;
+
   return (
-    <Field id={id} error={errors[id]} {...rest}>
+    <Field
+      id={id}
+      error={errors[id]}
+      helpIndicator={maxLength && <CharCounter current={currentLength} max={maxLength} />}
+      {...rest}
+    >
       <Textarea
         id={id}
         isDisabled={isDisabled}
diff --git a/src/components/forms/fields/TextField.tsx b/src/components/forms/fields/TextField.tsx
index 6a009df2..230474fe 100644
--- a/src/components/forms/fields/TextField.tsx
+++ b/src/components/forms/fields/TextField.tsx
@@ -3,19 +3,37 @@ import { Input } from '@chakra-ui/react';
 import { useFormContext } from 'react-hook-form';
 
 import { Field, type Props as FieldProps } from './Field';
+import { CharCounter } from './CharCounter';
+import { MAX_TEXT_LENGTH } from '../../../constants';
 
 interface Props extends Omit<FieldProps, 'children' | 'error'> {
   value?: string;
+  maxLength?: number;
 }
 
-export const TextField: FC<Props> = ({ id, value, isDisabled, ...rest }) => {
+export const TextField: FC<Props> = ({
+  id,
+  value,
+  isDisabled,
+  maxLength = MAX_TEXT_LENGTH,
+  ...rest
+}) => {
   const {
     register,
-    formState: { errors }
+    formState: { errors },
+    watch
   } = useFormContext();
 
+  const currentValue = watch(id) || '';
+  const currentLength = currentValue.length;
+
   return (
-    <Field id={id} error={errors[id]} {...rest}>
+    <Field
+      id={id}
+      error={errors[id]}
+      helpIndicator={maxLength && <CharCounter current={currentLength} max={maxLength} />}
+      {...rest}
+    >
       <Input
         id={id}
         value={value}

From 7212083f283312e5476e42cf971e9867e8183ada Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Mon, 2 Jun 2025 18:57:33 +0200
Subject: [PATCH 2/4] update forms to use char counter

---
 src/components/forms/AcademicGrantsForm.tsx   |    6 +-
 .../forms/DestinoDevconnectForm.tsx           |    7 +-
 src/components/forms/EPFApplicationForm.tsx   |    6 +-
 src/components/forms/PSEApplicationForm.tsx   |   12 +-
 src/components/forms/ProjectGrantsForm.tsx    | 1458 +++++------------
 src/components/forms/SmallGrantsForm.tsx      |  978 ++++-------
 .../forms/TenYearAnniversaryFrom.tsx          |   56 +-
 src/components/forms/fields/TextAreaField.tsx |    6 +-
 src/components/forms/fields/TextField.tsx     |   18 +-
 9 files changed, 792 insertions(+), 1755 deletions(-)

diff --git a/src/components/forms/AcademicGrantsForm.tsx b/src/components/forms/AcademicGrantsForm.tsx
index bd34de02..e9a1bc0c 100644
--- a/src/components/forms/AcademicGrantsForm.tsx
+++ b/src/components/forms/AcademicGrantsForm.tsx
@@ -121,12 +121,13 @@ export const AcademicGrantsForm: FC = () => {
               <TextField
                 id='firstName'
                 label='First name'
+                maxLength={40}
                 isRequired
                 mr={{ md: 12 }}
                 mb={{ base: 8, md: 0 }}
               />
 
-              <TextField id='lastName' label='Last name' isRequired />
+              <TextField id='lastName' label='Last name' maxLength={80} isRequired />
             </Flex>
 
             {!errors?.firstName && !errors?.lastName && (
@@ -400,7 +401,7 @@ export const AcademicGrantsForm: FC = () => {
                 )}
               />
 
-              <TextField id='requestAmount' label='Amount' isRequired />
+              <TextField id='requestAmount' label='Amount' hideCharCounter isRequired />
             </Flex>
           </Stack>
 
@@ -487,6 +488,7 @@ export const AcademicGrantsForm: FC = () => {
             id='alternativeContact'
             label='Telegram username or alternative contact info'
             helpText="In regards to your submission, we'll get in touch with you via email by default. As backup, if you'd like to provide alternative contact info, you may do so"
+            maxLength={150}
           />
 
           <Controller
diff --git a/src/components/forms/DestinoDevconnectForm.tsx b/src/components/forms/DestinoDevconnectForm.tsx
index 9e380502..7312781c 100644
--- a/src/components/forms/DestinoDevconnectForm.tsx
+++ b/src/components/forms/DestinoDevconnectForm.tsx
@@ -99,8 +99,8 @@ export const DestinoDevconnectForm: FC = () => {
             <PageSection>Contact Information</PageSection>
 
             <Flex direction={{ base: 'column', md: 'row' }} gap={8}>
-              <TextField id='firstName' label='First Name' isRequired />
-              <TextField id='lastName' label='Last Name' isRequired />
+              <TextField id='firstName' label='First Name' maxLength={40} isRequired />
+              <TextField id='lastName' label='Last Name' maxLength={80} isRequired />
             </Flex>
 
             <TextField id='email' label='Email' isRequired />
@@ -137,6 +137,7 @@ export const DestinoDevconnectForm: FC = () => {
             <TextField
               id='alternativeContact'
               label='Telegram Username or Alternative Contact Info'
+              maxLength={150}
             />
 
             <Flex direction={{ base: 'column', md: 'row' }} gap={8}>
@@ -376,7 +377,7 @@ export const DestinoDevconnectForm: FC = () => {
                     )}
                   />
 
-                  <TextField id='requestedAmount' label='Amount' isRequired />
+                  <TextField id='requestedAmount' label='Amount' hideCharCounter isRequired />
                 </Flex>
               </>
             )}
diff --git a/src/components/forms/EPFApplicationForm.tsx b/src/components/forms/EPFApplicationForm.tsx
index 6064457f..3436fdff 100644
--- a/src/components/forms/EPFApplicationForm.tsx
+++ b/src/components/forms/EPFApplicationForm.tsx
@@ -88,12 +88,13 @@ export const EPFApplicationForm: FC = () => {
               <TextField
                 id='firstName'
                 label='First name'
+                maxLength={40}
                 isRequired
                 mr={{ md: 12 }}
                 mb={{ base: 8, md: 0 }}
               />
 
-              <TextField id='lastName' label='Last name' isRequired />
+              <TextField id='lastName' label='Last name' maxLength={80} isRequired />
             </Flex>
 
             {!errors?.firstName && !errors?.lastName && (
@@ -247,7 +248,7 @@ export const EPFApplicationForm: FC = () => {
             )}
           />
 
-          <TextField id='requestedAmount' label='Budget request' isRequired />
+          <TextField id='requestedAmount' label='Budget request' hideCharCounter isRequired />
 
           <TextAreaField
             id='proposedTimeline'
@@ -286,6 +287,7 @@ export const EPFApplicationForm: FC = () => {
             id='alternativeContact'
             label='Telegram username or alternative contact info'
             helpText="In regards to your submission, we'll get in touch with you via email by default. As backup, if you'd like to provide alternative contact info, you may do so. Not required"
+            maxLength={150}
           />
 
           <Controller
diff --git a/src/components/forms/PSEApplicationForm.tsx b/src/components/forms/PSEApplicationForm.tsx
index dc2b5b4d..a6994a4a 100644
--- a/src/components/forms/PSEApplicationForm.tsx
+++ b/src/components/forms/PSEApplicationForm.tsx
@@ -196,15 +196,20 @@ export const PSEApplicationForm: FC = () => {
                 )}
               />
 
-              <TextField id='requestedAmount' label='Total Budget Request' isRequired />
+              <TextField
+                id='requestedAmount'
+                label='Total Budget Request'
+                hideCharCounter
+                isRequired
+              />
             </Flex>
           </Stack>
 
           <PageSection mt={12}>Applicant Details</PageSection>
 
           <Flex direction={{ base: 'column', md: 'row' }} gap={8}>
-            <TextField id='firstName' label='First Name' isRequired />
-            <TextField id='lastName' label='Last Name' isRequired />
+            <TextField id='firstName' label='First Name' maxLength={40} isRequired />
+            <TextField id='lastName' label='Last Name' maxLength={80} isRequired />
           </Flex>
 
           <TextField id='email' label='Email' isRequired />
@@ -216,6 +221,7 @@ export const PSEApplicationForm: FC = () => {
             id='alternativeContact'
             label='Notion Account'
             helpText='Insert Notion account email if different from the above email'
+            maxLength={150}
           />
           <TextField
             id='city'
diff --git a/src/components/forms/ProjectGrantsForm.tsx b/src/components/forms/ProjectGrantsForm.tsx
index bd14dfa4..94af2f5b 100644
--- a/src/components/forms/ProjectGrantsForm.tsx
+++ b/src/components/forms/ProjectGrantsForm.tsx
@@ -7,7 +7,6 @@ import {
   FormLabel,
   Input,
   Stack,
-  Textarea,
   RadioGroup,
   Radio,
   useToast
@@ -19,7 +18,7 @@ import { useRouter } from 'next/router';
 
 import { DropdownIndicator, PageText } from '../UI';
 import { SubmitButton } from '../SubmitButton';
-import { Captcha, UploadFile } from '.';
+import { Captcha, TextField, UploadFile, TextAreaField } from '.';
 
 import { api } from './api';
 
@@ -102,103 +101,42 @@ export const ProjectGrantsForm: FC = () => {
         <form id='project-grants-form' onSubmit={handleSubmit(onSubmit)}>
           <Flex direction='column' mb={8}>
             <Flex direction={{ base: 'column', md: 'row' }} mb={3}>
-              <FormControl
-                id='first-name-control'
+              <TextField
+                id='firstName'
+                label='First name'
+                maxLength={40}
                 isRequired
+                registerOptions={{
+                  required: {
+                    value: true,
+                    message: 'First name is required.'
+                  },
+                  maxLength: {
+                    value: 40,
+                    message: 'First name cannot exceed 40 characters.'
+                  },
+                  validate: value => !containURL(value) || 'First name cannot contain a URL.'
+                }}
                 mr={{ md: 12 }}
-                mb={{ base: 8, md: 0 }}
-              >
-                <FormLabel htmlFor='firstName'>
-                  <PageText display='inline' fontSize='input'>
-                    First name
-                  </PageText>
-                </FormLabel>
-
-                <Input
-                  id='firstName'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  {...register('firstName', {
-                    required: true,
-                    maxLength: 40,
-                    validate: value => !containURL(value)
-                  })}
-                />
-
-                {errors?.firstName?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      First name is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.firstName?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      First name cannot exceed 40 characters.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.firstName?.type === 'validate' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      First name cannot contain a URL.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='last-name-control' isRequired>
-                <FormLabel htmlFor='lastName'>
-                  <PageText display='inline' fontSize='input'>
-                    Last name
-                  </PageText>
-                </FormLabel>
-                <Input
-                  id='lastName'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  {...register('lastName', {
-                    required: true,
-                    maxLength: 80,
-                    validate: value => !containURL(value)
-                  })}
-                />
+              />
 
-                {errors?.lastName?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Last name is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.lastName?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Last name cannot exceed 80 characters.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.lastName?.type === 'validate' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Last name cannot contain a URL.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextField
+                id='lastName'
+                label='Last name'
+                maxLength={80}
+                isRequired
+                registerOptions={{
+                  required: {
+                    value: true,
+                    message: 'Last name is required.'
+                  },
+                  maxLength: {
+                    value: 80,
+                    message: 'Last name cannot exceed 80 characters.'
+                  },
+                  validate: value => !containURL(value) || 'Last name cannot contain a URL.'
+                }}
+              />
             </Flex>
 
             {!errors?.firstName && !errors?.lastName && (
@@ -208,289 +146,121 @@ export const ProjectGrantsForm: FC = () => {
             )}
           </Flex>
 
-          <FormControl id='email-control' isRequired mb={8}>
-            <FormLabel htmlFor='email'>
-              <PageText display='inline' fontSize='input'>
-                Email
-              </PageText>
-            </FormLabel>
-            <Input
-              id='email'
-              type='email'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              {...register('email', { required: true })}
-            />
-
-            {errors?.email?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Email is required.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='company-control' isRequired mb={8}>
-            <FormLabel htmlFor='company' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Organization name
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Name of your team or organization. If you do not have an organization name, write
-              &quot;N/A&quot;.
-            </PageText>
-
-            <Input
-              id='company'
-              type='text'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              mt={3}
-              {...register('company', {
-                required: true,
-                maxLength: MAX_TEXT_LENGTH,
-                validate: value => !containURL(value)
-              })}
-            />
-
-            {errors?.company?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Organization name is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.company?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Organization name cannot exceed {MAX_TEXT_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-            {errors?.company?.type === 'validate' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Organization name cannot contain a URL.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='team-profile-control' isRequired mb={8}>
-            <FormLabel htmlFor='teamProfile' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Team profile
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Briefly describe your organization. Provide links to previous work. How is your
-              organization suited to the project&apos;s objectives, and how does it provide the
-              necessary expertise?
-            </PageText>
-
-            <Textarea
-              id='teamProfile'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('teamProfile', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextField
+            id='email'
+            label='Email'
+            type='email'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Email is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_LENGTH,
+                message: `Email cannot exceed ${MAX_TEXT_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.teamProfile?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Team profile is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.teamProfile?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Team profile cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='twitter-control' mb={8}>
-            <FormLabel htmlFor='twitter' mb={1}>
-              <PageText fontSize='input'>Twitter</PageText>
-            </FormLabel>
-            <PageText fontSize='input' position='absolute' bottom='15.5px' left={4} zIndex={9}>
-              @
-            </PageText>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Twitter handle for your team or project.
-            </PageText>
-
-            <Input
-              id='twitter'
-              type='text'
-              placeholder='yourtwitterhandle'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              position='relative'
-              color='brand.paragraph'
-              fontSize='input'
-              pl={8}
-              mt={3}
-              {...register('twitter', {
-                maxLength: 16
-              })}
-            />
+          <TextField
+            id='company'
+            label='Organization name'
+            helpText='Name of your team or organization. If you do not have an organization name, write "N/A".'
+            maxLength={MAX_TEXT_LENGTH}
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Organization name is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_LENGTH,
+                message: `Organization name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+              },
+              validate: value => !containURL(value) || 'Organization name cannot contain a URL.'
+            }}
+            mb={8}
+          />
 
-            {errors?.twitter?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Twitter handle cannot exceed 16 characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='website-control' mb={8}>
-            <FormLabel htmlFor='website' mb={1}>
-              <PageText fontSize='input'>Website</PageText>
-            </FormLabel>
-            <PageText fontSize='input' position='absolute' bottom='15.5px' left={4} zIndex={9}>
-              https://
-            </PageText>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Link to your team or project website.
-            </PageText>
-
-            <Input
-              id='website'
-              type='text'
-              placeholder='yourwebsiteaddress.com'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              position='relative'
-              color='brand.paragraph'
-              fontSize='input'
-              pl={16}
-              mt={3}
-              {...register('website', {
-                maxLength: MAX_TEXT_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='teamProfile'
+            label='Team profile'
+            helpText="Briefly describe your organization. Provide links to previous work. How is your organization suited to the project's objectives, and how does it provide the necessary expertise?"
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Team profile is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Team profile cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.website?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Website cannot exceed {MAX_TEXT_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextField
+            id='twitter'
+            label='Twitter'
+            helpText='Twitter handle for your team or project.'
+            maxLength={16}
+            registerOptions={{
+              maxLength: {
+                value: 16,
+                message: 'Twitter handle cannot exceed 16 characters.'
+              }
+            }}
+            mb={8}
+          />
 
-          <FormControl id='project-name-control' isRequired mb={8}>
-            <FormLabel htmlFor='projectName' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Project name
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              This should be a concise description of the title of your project.
-            </PageText>
-
-            <Input
-              id='projectName'
-              type='text'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              mt={3}
-              {...register('projectName', {
-                required: true,
-                maxLength: MAX_TEXT_LENGTH
-              })}
-            />
+          <TextField
+            id='website'
+            label='Website'
+            helpText='Link to your team or project website.'
+            maxLength={MAX_TEXT_LENGTH}
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_LENGTH,
+                message: `Website cannot exceed ${MAX_TEXT_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.projectName?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Project name is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.projectName?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Project name cannot exceed {MAX_TEXT_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='project-repo-control' mb={8}>
-            <FormLabel htmlFor='projectRepo' mb={1}>
-              <PageText fontSize='input'>Project repo</PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              GitHub or other public repository of the project or related work.
-            </PageText>
-
-            <Input
-              id='projectRepo'
-              type='text'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              mt={3}
-              {...register('projectRepo', {
-                maxLength: MAX_TEXT_LENGTH
-              })}
-            />
+          <TextField
+            id='projectName'
+            label='Project name'
+            helpText='This should be a concise description of the title of your project.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Project name is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_LENGTH,
+                message: `Project name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.projectRepo?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Repo name cannot exceed {MAX_TEXT_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextField
+            id='projectRepo'
+            label='Project repo'
+            helpText='GitHub or other public repository of the project or related work.'
+            maxLength={MAX_TEXT_LENGTH}
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_LENGTH,
+                message: `Repo name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <Controller
             name='projectCategory'
@@ -534,181 +304,77 @@ export const ProjectGrantsForm: FC = () => {
             )}
           />
 
-          <FormControl id='project-description-control' isRequired mb={8}>
-            <FormLabel htmlFor='projectDescription' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Brief project summary
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Describe your project in a few sentences (you&apos;ll have the chance to go into more
-              detail in the long form). If it&apos;s already underway, provide links to any existing
-              published work.
-            </PageText>
-
-            <Textarea
-              id='projectDescription'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('projectDescription', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.projectDescription?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Project description is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.projectDescription?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Project description cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='progress-control' isRequired mb={8}>
-            <FormLabel htmlFor='progress' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Describe the current status of the project and progress achieved so far
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              For example, do you have an MVP? Please describe its functionality and limitations and
-              provide a link to it here.
-            </PageText>
-
-            <Textarea
-              id='progress'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('progress', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.progress?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.progress?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='problem-being-solved-control' isRequired mb={8}>
-            <FormLabel htmlFor='problemBeingSolved' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                What problem(s) are being solved by within the scope of the grant?
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              What is the specific problems, research questions, or needs you are trying to address?
-            </PageText>
-
-            <Textarea
-              id='problemBeingSolved'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('problemBeingSolved', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='projectDescription'
+            label='Brief project summary'
+            helpText="Describe your project in a few sentences (you'll have the chance to go into more detail in the long form). If it's already underway, provide links to any existing published work."
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Project description is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Project description cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.problemBeingSolved?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.problemBeingSolved?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='progress'
+            label='Describe the current status of the project and progress achieved so far'
+            helpText='For example, do you have an MVP? Please describe its functionality and limitations and provide a link to it here.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-          <FormControl id='proposed-timeline-control' isRequired mb={8}>
-            <FormLabel htmlFor='proposedTimeline' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Proposed tasks, roadmap and budget?
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Provide a summary that includes a timeline of the expected work and an estimated
-              budgetary breakdown.
-            </PageText>
-
-            <Textarea
-              id='proposedTimeline'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('proposedTimeline', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='problemBeingSolved'
+            label='What problem(s) are being solved by within the scope of the grant?'
+            helpText='What is the specific problems, research questions, or needs you are trying to address?'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.proposedTimeline?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.proposedTimeline?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='proposedTimeline'
+            label='Proposed tasks, roadmap and budget?'
+            helpText='Provide a summary that includes a timeline of the expected work and an estimated budgetary breakdown.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <Stack>
             <Stack>
@@ -812,347 +478,149 @@ export const ProjectGrantsForm: FC = () => {
             </Flex>
           </Stack>
 
-          <FormControl id='why-is-project-important-control' isRequired mb={8}>
-            <FormLabel htmlFor='whyIsProjectImportant' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Why is your project important?
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Why should solving these problems or addressing these needs be prioritized, what
-              evidence do you have of importance or demand?
-            </PageText>
-
-            <Textarea
-              id='whyIsProjectImportant'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('whyIsProjectImportant', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.whyIsProjectImportant?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.whyIsProjectImportant?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='how-does-your-project-differ-control' isRequired mb={8}>
-            <FormLabel htmlFor='howDoesYourProjectDiffer' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                How does your project differ from similar ones?
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              What other solutions are being worked on, what unique contribution will you make or
-              advance will you provide beyond the state of the art?
-            </PageText>
-
-            <Textarea
-              id='howDoesYourProjectDiffer'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('howDoesYourProjectDiffer', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.howDoesYourProjectDiffer?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.howDoesYourProjectDiffer?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='is-your-project-public-good-control' isRequired mb={8}>
-            <FormLabel htmlFor='isYourProjectPublicGood' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Describe how your project will result in a public good.
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Public goods are things like open source code, shared infrastructure, openly shared
-              research, documentation, community building or other benefits provided to the
-              community that are typically under-provided by the free market.
-            </PageText>
-
-            <Textarea
-              id='isYourProjectPublicGood'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('isYourProjectPublicGood', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.isYourProjectPublicGood?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.isYourProjectPublicGood?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='is-open-source-control' isRequired mb={8}>
-            <FormLabel htmlFor='isOpenSource' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Will your results be open source?
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              If not, please explain why.
-            </PageText>
-
-            <Textarea
-              id='isOpenSource'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('isOpenSource', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.isOpenSource?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.isOpenSource?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='why-ethereum-control' isRequired mb={8}>
-            <FormLabel htmlFor='whyEthereum' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Describe the expected effects of your project proposal on the Ethereum ecosystem.
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Please list the expected results of the project and explain how they will have a
-              positive effect on the Ethereum ecosystem at large.
-            </PageText>
-
-            <Textarea
-              id='whyEthereum'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('whyEthereum', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='whyIsProjectImportant'
+            label='Why is your project important?'
+            helpText='Why should solving these problems or addressing these needs be prioritized, what evidence do you have of importance or demand?'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.whyEthereum?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.whyEthereum?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='howDoesYourProjectDiffer'
+            label='How does your project differ from similar ones?'
+            helpText='What other solutions are being worked on, what unique contribution will you make or advance will you provide beyond the state of the art?'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-          <FormControl id='challenges-control' isRequired mb={8}>
-            <FormLabel htmlFor='challenges' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Describe key risks and challenges to your project.
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              What are the critical risks, relating to both project implementation and achieving
-              expected impacts?
-            </PageText>
-
-            <Textarea
-              id='challenges'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('challenges', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='isYourProjectPublicGood'
+            label='Describe how your project will result in a public good.'
+            helpText='Public goods are things like open source code, shared infrastructure, openly shared research, documentation, community building or other benefits provided to the community that are typically under-provided by the free market.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.challenges?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.challenges?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='isOpenSource'
+            label='Will your results be open source?'
+            helpText='If not, please explain why.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-          <FormControl id='sustainability-plan-control' isRequired mb={8}>
-            <FormLabel htmlFor='sustainabilityPlan' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                What are your plans after the grant is completed?
-              </PageText>
-            </FormLabel>
-
-            <Textarea
-              id='sustainabilityPlan'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('sustainabilityPlan', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='whyEthereum'
+            label='Describe the expected effects of your project proposal on the Ethereum ecosystem.'
+            helpText='Please list the expected results of the project and explain how they will have a positive effect on the Ethereum ecosystem at large.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.sustainabilityPlan?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.sustainabilityPlan?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='challenges'
+            label='Describe key risks and challenges to your project.'
+            helpText='What are the critical risks, relating to both project implementation and achieving expected impacts?'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-          <FormControl id='other-projects-control' isRequired mb={8}>
-            <FormLabel htmlFor='otherProjects' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                If you didn&apos;t work on this project, what would you work on instead?
-              </PageText>
-            </FormLabel>
-
-            <Textarea
-              id='otherProjects'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('otherProjects', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='sustainabilityPlan'
+            label='What are your plans after the grant is completed?'
+            helpText='Please describe your plans for the project after the grant period ends.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.otherProjects?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.otherProjects?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='otherProjects'
+            label="If you didn't work on this project, what would you work on instead?"
+            helpText='Please describe any other projects you are considering or planning to work on.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <Controller
             name='repeatApplicant'
@@ -1201,110 +669,54 @@ export const ProjectGrantsForm: FC = () => {
             )}
           />
 
-          <FormControl id='other-funding-control' isRequired mb={8}>
-            <FormLabel htmlFor='otherFunding' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Have you applied for or received other funding?
-              </PageText>
-            </FormLabel>
-
-            <Textarea
-              id='otherFunding'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('otherFunding', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.otherFunding?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Field is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.otherFunding?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='additional-info-control' mb={8}>
-            <FormLabel htmlFor='additionalInfo' mb={1}>
-              <PageText fontSize='input'>Anything else you&apos;d like to share?</PageText>
-            </FormLabel>
-
-            <Textarea
-              id='additionalInfo'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('additionalInfo', {
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='otherFunding'
+            label='Have you applied for or received other funding?'
+            helpText='Please describe any other funding sources you have applied for or received.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Field is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.additionalInfo?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Additional info cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='additionalInfo'
+            label="Anything else you'd like to share?"
+            helpText='Please provide any additional information that you think would be helpful for the evaluation of your application.'
+            maxLength={MAX_TEXT_AREA_LENGTH}
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Additional info cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <Flex direction='column' mb={8}>
             <Flex direction={{ base: 'column', md: 'row' }} mb={3}>
-              <FormControl id='city-control' mr={{ md: 12 }} mb={{ base: 8, md: 0 }}>
-                <FormLabel htmlFor='city'>
-                  <PageText fontSize='input'>City</PageText>
-                </FormLabel>
-
-                <Input
-                  id='city'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  {...register('city', {
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
-
-                {errors?.city?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      City name cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                    Where are you located, or where is your team located?
-                  </PageText>
-                </Box>
-              </FormControl>
+              <TextField
+                id='city'
+                label='City'
+                helpText='Where are you located, or where is your team located?'
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `City name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
+                mr={{ md: 12 }}
+                mb={{ base: 8, md: 0 }}
+              />
 
               <Controller
                 name='country'
@@ -1421,72 +833,34 @@ export const ProjectGrantsForm: FC = () => {
 
           <Box display={(referralSource as ReferralSource).value === OTHER ? 'block' : 'none'}>
             <Fade in={(referralSource as ReferralSource).value === OTHER} delay={0.25}>
-              <FormControl id='referral-source-if-other-control' mb={8}>
-                <FormLabel htmlFor='referralSourceIfOther'>
-                  <PageText fontSize='input'>If other, explain how</PageText>
-                </FormLabel>
-                <Input
-                  id='referralSourceIfOther'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  mt={3}
-                  {...register('referralSourceIfOther', {
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
-
-                {errors?.referralSourceIfOther?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Referral source cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextField
+                id='referralSourceIfOther'
+                label='If other, explain how'
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `Referral source cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
             </Fade>
           </Box>
 
-          <FormControl id='referrals' mb={8}>
-            <FormLabel htmlFor='referrals' mb={1}>
-              <PageText fontSize='input'>
-                Did anyone recommend that you submit an application to the Ecosystem Support
-                Program?
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Please include the person&apos;s name and details of their referral.
-            </PageText>
-
-            <Textarea
-              id='referrals'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('referrals', {
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.referrals?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Referral name cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='referrals'
+            label='Did anyone recommend that you submit an application to the Ecosystem Support Program?'
+            helpText="Please include the person's name and details of their referral."
+            maxLength={MAX_TEXT_AREA_LENGTH}
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Referral name cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <UploadFile
             id='proposalAttachment'
diff --git a/src/components/forms/SmallGrantsForm.tsx b/src/components/forms/SmallGrantsForm.tsx
index 610f7444..8de0913b 100644
--- a/src/components/forms/SmallGrantsForm.tsx
+++ b/src/components/forms/SmallGrantsForm.tsx
@@ -19,7 +19,8 @@ import { useRouter } from 'next/router';
 
 import { DropdownIndicator, PageText } from '../UI';
 import { SubmitButton } from '../SubmitButton';
-import { Captcha, UploadFile } from '.';
+import { Captcha, TextField, UploadFile } from '.';
+import { TextAreaField } from './fields/TextAreaField';
 
 import { api } from './api';
 
@@ -116,127 +117,62 @@ export const SmallGrantsForm: FC = () => {
     >
       <FormProvider {...methods}>
         <form id='small-grants-form' onSubmit={handleSubmit(onSubmit)}>
-          <Flex direction={{ base: 'column', md: 'row' }}>
-            <FormControl id='first-name-control' isRequired mb={8} mr={{ md: 12 }}>
-              <FormLabel htmlFor='firstName'>
-                <PageText display='inline' fontSize='input'>
-                  First name
-                </PageText>
-              </FormLabel>
-              <Input
-                id='firstName'
-                type='text'
-                bg='white'
-                borderRadius={0}
-                borderColor='brand.border'
-                h='56px'
-                _placeholder={{ fontSize: 'input' }}
-                color='brand.paragraph'
-                fontSize='input'
-                {...register('firstName', {
-                  required: true,
-                  maxLength: 40,
-                  validate: value => !containURL(value)
-                })}
-              />
-
-              {errors?.firstName?.type === 'required' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name is required.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.firstName?.type === 'maxLength' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name cannot exceed 40 characters.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.firstName?.type === 'validate' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name cannot contain a URL.
-                  </PageText>
-                </Box>
-              )}
-            </FormControl>
-
-            <FormControl id='last-name-control' isRequired mb={8}>
-              <FormLabel htmlFor='lastName'>
-                <PageText display='inline' fontSize='input'>
-                  Last name
-                </PageText>
-              </FormLabel>
-              <Input
-                id='lastName'
-                type='text'
-                bg='white'
-                borderRadius={0}
-                borderColor='brand.border'
-                h='56px'
-                _placeholder={{ fontSize: 'input' }}
-                color='brand.paragraph'
-                fontSize='input'
-                {...register('lastName', {
-                  required: true,
-                  maxLength: 80,
-                  validate: value => !containURL(value)
-                })}
-              />
-
-              {errors?.lastName?.type === 'required' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name is required.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.lastName?.type === 'maxLength' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name cannot exceed 80 characters.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.lastName?.type === 'validate' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name cannot contain a URL.
-                  </PageText>
-                </Box>
-              )}
-            </FormControl>
-          </Flex>
+          <Flex direction={{ base: 'column', md: 'row' }} mb={8}>
+            <TextField
+              id='firstName'
+              label='First name'
+              maxLength={40}
+              isRequired
+              registerOptions={{
+                required: {
+                  value: true,
+                  message: 'First name is required.'
+                },
+                maxLength: {
+                  value: 40,
+                  message: 'First name cannot exceed 40 characters.'
+                },
+                validate: value => !containURL(value) || 'First name cannot contain a URL.'
+              }}
+              mr={{ md: 12 }}
+            />
 
-          <FormControl id='email-control' isRequired mb={8}>
-            <FormLabel htmlFor='email'>
-              <PageText display='inline' fontSize='input'>
-                Email
-              </PageText>
-            </FormLabel>
-            <Input
-              id='email'
-              type='email'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              {...register('email', { required: true })}
+            <TextField
+              id='lastName'
+              label='Last name'
+              maxLength={80}
+              isRequired
+              registerOptions={{
+                required: {
+                  value: true,
+                  message: 'Last name is required.'
+                },
+                maxLength: {
+                  value: 80,
+                  message: 'Last name cannot exceed 80 characters.'
+                },
+                validate: value => !containURL(value) || 'Last name cannot contain a URL.'
+              }}
             />
+          </Flex>
 
-            {errors?.email?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Email is required.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextField
+            id='email'
+            label='Email'
+            type='email'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Email is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_LENGTH,
+                message: `Email cannot exceed ${MAX_TEXT_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           {/* If the component doesn't expose input's ref, we should use the Controller component, */}
           {/* which will take care of the registration process (https://react-hook-form.com/get-started#IntegratingwithUIlibraries) */}
@@ -290,135 +226,61 @@ export const SmallGrantsForm: FC = () => {
 
           <Box display={individualOrTeam === TEAM ? 'block' : 'none'}>
             <Fade in={individualOrTeam === TEAM} delay={0.25}>
-              <FormControl id='company-control' isRequired={individualOrTeam === TEAM} mb={8}>
-                <FormLabel htmlFor='company'>
-                  <PageText display='inline' fontSize='input'>
-                    Name of organization or entity
-                  </PageText>
-                </FormLabel>
-                <Input
-                  id='company'
-                  type='text'
-                  placeholder="Enter the name of organization or entity you're submitting for"
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  {...register('company', {
-                    required: individualOrTeam === TEAM,
-                    maxLength: 255,
-                    validate: value => !containURL(value)
-                  })}
-                />
-
-                {errors?.company?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Organization name is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.company?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Organization name cannot exceed 255 characters.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.company?.type === 'validate' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Organization name cannot contain a URL.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextField
+                id='company'
+                label='Name of organization or entity'
+                helpText="Enter the name of organization or entity you're submitting for"
+                isRequired={individualOrTeam === TEAM}
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  required: {
+                    value: individualOrTeam === TEAM,
+                    message: 'Organization name is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `Organization name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  },
+                  validate: value => !containURL(value) || 'Organization name cannot contain a URL.'
+                }}
+                mb={8}
+              />
             </Fade>
           </Box>
 
-          <FormControl id='individual-or-team-summary-control' isRequired mb={8}>
-            <FormLabel htmlFor='individualOrTeamSummary' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Individual or team summary
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Tell us about yourself, your experience, and your motivations. Feel free to link to
-              any biography pages, LinkedIn pages, etc.
-            </PageText>
-
-            <Textarea
-              id='individualOrTeamSummary'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('individualOrTeamSummary', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.individualOrTeamSummary?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Team summary is required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.individualOrTeamSummary?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Team summary cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='individualOrTeamSummary'
+            label='Individual or team summary'
+            helpText='Tell us about yourself, your experience, and your motivations. Feel free to link to any biography pages, LinkedIn pages, etc.'
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Team summary is required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Team summary cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <Flex direction='column' mb={8}>
             <Flex direction={{ base: 'column', md: 'row' }} mb={3}>
-              <FormControl id='city-control' mr={{ md: 12 }} mb={{ base: 8, md: 0 }}>
-                <FormLabel htmlFor='city'>
-                  <PageText fontSize='input'>City</PageText>
-                </FormLabel>
-
-                <Input
-                  id='city'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  {...register('city', {
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
-
-                {errors?.city?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      City name cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                    Where are you located, or where is your team located?
-                  </PageText>
-                </Box>
-              </FormControl>
+              <TextField
+                id='city'
+                label='City'
+                helpText='Where are you located, or where is your team located?'
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `City name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
+                mr={{ md: 12 }}
+              />
 
               <Controller
                 name='country'
@@ -458,75 +320,34 @@ export const SmallGrantsForm: FC = () => {
             </Flex>
           </Flex>
 
-          <FormControl id='website-control' mb={8}>
-            <FormLabel htmlFor='website'>
-              <PageText fontSize='input'>Website</PageText>
-            </FormLabel>
-            <PageText fontSize='input' position='absolute' bottom='15.5px' left={4} zIndex={9}>
-              https://
-            </PageText>
-            <Input
-              id='website'
-              type='text'
-              placeholder='yourwebsiteaddress.com'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              position='relative'
-              color='brand.paragraph'
-              fontSize='input'
-              pl={16}
-              {...register('website', {
-                maxLength: MAX_TEXT_LENGTH
-              })}
-            />
-
-            {errors?.website?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Website cannot exceed {MAX_TEXT_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='twitter-control' mb={8}>
-            <FormLabel htmlFor='twitter'>
-              <PageText fontSize='input'>Twitter</PageText>
-            </FormLabel>
-
-            <PageText fontSize='input' position='absolute' bottom='15.5px' left={4} zIndex={9}>
-              @
-            </PageText>
-
-            <Input
-              id='twitter'
-              type='text'
-              placeholder='twitter_handle'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              position='relative'
-              color='brand.paragraph'
-              fontSize='input'
-              pl={8}
-              {...register('twitter', {
-                maxLength: 16
-              })}
-            />
+          <TextField
+            id='website'
+            label='Website'
+            maxLength={MAX_TEXT_LENGTH}
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_LENGTH,
+                message: `Website cannot exceed ${MAX_TEXT_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+            pl={16}
+          />
 
-            {errors?.twitter?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Twitter handle cannot exceed 16 characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextField
+            id='twitter'
+            label='Twitter'
+            helpText='@twitter_handle'
+            maxLength={16}
+            registerOptions={{
+              maxLength: {
+                value: 16,
+                message: 'Twitter handle cannot exceed 16 characters.'
+              }
+            }}
+            mb={8}
+            pl={8}
+          />
 
           {/* Below controller determines `isAProject` and `isAnEvent` values */}
           <Controller
@@ -655,224 +476,113 @@ export const SmallGrantsForm: FC = () => {
                 )}
               </FormControl>
 
-              <FormControl id='project-previous-work-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='projectPreviousWork' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Previous work
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Please provide links to published code, research, or other documentation of what
-                  you&apos;ve worked on.
-                </PageText>
-
-                <Textarea
-                  id='projectPreviousWork'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('projectPreviousWork', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.projectPreviousWork?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Previous work is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.projectPreviousWork?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Previous work cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='project-description-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='projectDescription' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    What is the project?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Describe the main concept and components of the proposed work.
-                </PageText>
-
-                <Textarea
-                  id='projectDescription'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('projectDescription', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.projectDescription?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project description is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.projectDescription?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project description cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='problem-being-solved-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='problemBeingSolved' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    What problem(s) are being solved by within the scope of the grant?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  What are the specific problems, research questions, or needs you are trying to
-                  address?
-                </PageText>
-
-                <Textarea
-                  id='problemBeingSolved'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('problemBeingSolved', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.problemBeingSolved?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Problems being addressed is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.problemBeingSolved?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Problems being addressed cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='why-is-project-important-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='whyIsProjectImportant' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Why is your project important?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  How do you know people need what you&apos;re making? Why is this project important
-                  for your target demographic/problem area?
-                </PageText>
-
-                <Textarea
-                  id='whyIsProjectImportant'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('whyIsProjectImportant', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
+              <TextAreaField
+                id='projectPreviousWork'
+                label='Previous work'
+                helpText="Please provide links to published code, research, or other documentation of what you've worked on."
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Previous work is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Previous work cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                {errors?.whyIsProjectImportant?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project impact is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.whyIsProjectImportant?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project impact cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='projectDescription'
+                label='What is the project?'
+                helpText='Describe the main concept and components of the proposed work.'
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Project description is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Project description cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-              <FormControl id='how-does-your-project-differ-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='howDoesYourProjectDiffer' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    How does your project differ from similar ones?
-                  </PageText>
-                </FormLabel>
+              <TextAreaField
+                id='problemBeingSolved'
+                label='What problem(s) are being solved by within the scope of the grant?'
+                helpText='What are the specific problems, research questions, or needs you are trying to address?'
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Problems being addressed is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Problems being addressed cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  What other solutions are being worked on, and what alternatives do people
-                  currently rely on? Do you have unique expertise/perspective?
-                </PageText>
+              <TextAreaField
+                id='whyIsProjectImportant'
+                label='Why is your project important?'
+                helpText="How do you know people need what you're making? Why is this project important for your target demographic/problem area?"
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Project impact is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Project impact cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                <Textarea
-                  id='howDoesYourProjectDiffer'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('howDoesYourProjectDiffer', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
+              <TextAreaField
+                id='howDoesYourProjectDiffer'
+                label='How does your project differ from similar ones?'
+                helpText='What other solutions are being worked on, and what alternatives do people currently rely on? Do you have unique expertise/perspective?'
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'How is your project different is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `How is your project different cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                {errors?.howDoesYourProjectDiffer?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      How is your project different is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.howDoesYourProjectDiffer?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      How is your project different cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='isYourProjectPublicGood'
+                label='Is your project a public good?'
+                helpText='If so, how?'
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Is your project public good is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Is your project public good cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
               <Stack>
                 <Stack>
@@ -1066,129 +776,58 @@ export const SmallGrantsForm: FC = () => {
                 )}
               </FormControl>
 
-              <FormControl id='is-open-source-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='isOpenSource' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Is your project open source?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  If not, why not?
-                </PageText>
-
-                <Textarea
-                  id='isOpenSource'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('isOpenSource', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.isOpenSource?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Is your project open source is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.isOpenSource?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Is your project open source cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='sustainability-plan-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='sustainabilityPlan' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    What are your plans after the grant is completed?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  How do you aim to be sustainable after the grant? Alternatively, tell us why this
-                  project doesn&apos;t need to be sustainable!
-                </PageText>
-
-                <Textarea
-                  id='sustainabilityPlan'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('sustainabilityPlan', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.sustainabilityPlan?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Sustainability plan is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.sustainabilityPlan?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Sustainability plan cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='isOpenSource'
+                label='Is your project open source?'
+                helpText='If not, why not?'
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Is your project open source is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Is your project open source cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-              <FormControl id='other-projects-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='otherProjects'>
-                  <PageText display='inline' fontSize='input'>
-                    If you didn&apos;t work on this project, what would you work on instead?
-                  </PageText>
-                </FormLabel>
-                <Textarea
-                  id='otherProjects'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  {...register('otherProjects', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
+              <TextAreaField
+                id='sustainabilityPlan'
+                label='What are your plans after the grant is completed?'
+                helpText="How do you aim to be sustainable after the grant? Alternatively, tell us why this project doesn't need to be sustainable!"
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Sustainability plan is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Sustainability plan cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                {errors?.otherProjects?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Other projects is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.otherProjects?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Other projects cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='otherProjects'
+                label="If you didn't work on this project, what would you work on instead?"
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Other projects is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Other projects cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
               <Controller
                 name='repeatApplicant'
@@ -1247,47 +886,22 @@ export const SmallGrantsForm: FC = () => {
 
               <Box display={repeatApplicant === 'Yes' ? 'block' : 'none'}>
                 <Fade in={repeatApplicant === 'Yes'} delay={0.25}>
-                  <FormControl
+                  <TextAreaField
                     id='progress'
+                    label="If you've applied previously with the same idea, how much progress have you made since the last time you applied?"
                     isRequired={isAProject && repeatApplicant === 'Yes'}
+                    registerOptions={{
+                      required: {
+                        value: isAProject && repeatApplicant === 'Yes',
+                        message: 'Progress is required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Progress cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
                     mb={8}
-                  >
-                    <FormLabel htmlFor='progress'>
-                      <PageText display='inline' fontSize='input'>
-                        If you&apos;ve applied previously with the same idea, how much progress have
-                        you made since the last time you applied?
-                      </PageText>
-                    </FormLabel>
-                    <Textarea
-                      id='progress'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      {...register('progress', {
-                        required: isAProject && repeatApplicant === 'Yes',
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
-
-                    {errors?.progress?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Progress is required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.progress?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Progress cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  />
                 </Fade>
               </Box>
 
diff --git a/src/components/forms/TenYearAnniversaryFrom.tsx b/src/components/forms/TenYearAnniversaryFrom.tsx
index 064ddba5..85650304 100644
--- a/src/components/forms/TenYearAnniversaryFrom.tsx
+++ b/src/components/forms/TenYearAnniversaryFrom.tsx
@@ -74,16 +74,28 @@ export const TenYearAnniversaryFrom: FC = () => {
             <PageSection>Contact Information</PageSection>
 
             <Flex direction={{ base: 'column', md: 'row' }} gap={8}>
-              <TextField id='firstName' label='First Name' isRequired />
-              <TextField id='lastName' label='Last Name' isRequired />
+              <TextField id='firstName' label='First Name' maxLength={40} isRequired />
+              <TextField id='lastName' label='Last Name' maxLength={80} isRequired />
             </Flex>
 
             <TextField id='email' label='Email' isRequired />
 
-            <TextField id='company' label='Name of company, team, or organization. If you do not have an organization name, write "N/A"' isRequired />
-            <TextAreaField id='teamProfile' label='Tell us about yourself, your experience, and your motivations. Feel free to link to any biography pages, LinkedIn pages, etc.' isRequired />
-            <TextAreaField id='previousWork' label='List of any previous events you’ve organized.' isRequired />
-            <TextField id='twitter' label='Twitter Handle(s)' />
+            <TextField
+              id='company'
+              label='Name of company, team, or organization. If you do not have an organization name, write "N/A"'
+              isRequired
+            />
+            <TextAreaField
+              id='teamProfile'
+              label='Tell us about yourself, your experience, and your motivations. Feel free to link to any biography pages, LinkedIn pages, etc.'
+              isRequired
+            />
+            <TextAreaField
+              id='previousWork'
+              label='List of any previous events you’ve organized.'
+              isRequired
+            />
+            <TextField id='twitter' label='Twitter Handle(s)' maxLength={16} />
             <TextField
               id='alternativeContact'
               label="We will contact you via email by default. As backup, if you'd like to provide alternative contact info, you may do so."
@@ -140,13 +152,27 @@ export const TenYearAnniversaryFrom: FC = () => {
               <DateField id='eventDate' label='Event Date' isRequired />
             </Flex>
 
-            <TextField id='eventLink' label='Is there a website for this event? Paste the link here.' isRequired />
-            <TextAreaField id='eventDescription' label='Describe your event, including planned format and goals for the event.' isRequired />
+            <TextField
+              id='eventLink'
+              label='Is there a website for this event? Paste the link here.'
+              isRequired
+            />
+            <TextAreaField
+              id='eventDescription'
+              label='Describe your event, including planned format and goals for the event.'
+              isRequired
+            />
 
             <TextField id='eventLocation' label='Event Location' isRequired />
-            <TextAreaField id='proposedTimeline' label='The maximum sponsorship amount for this round is 500 USD. In this space, itemize your anticipated costs. Best estimates are ok if things are not yet confirmed or dependent on final attendee count.' isRequired />
+            <TextAreaField
+              id='proposedTimeline'
+              label='The maximum sponsorship amount for this round is 500 USD. In this space, itemize your anticipated costs. Best estimates are ok if things are not yet confirmed or dependent on final attendee count.'
+              isRequired
+            />
 
-            <PageSection>Choose denominated currency and enter a whole number in the Amount field</PageSection>
+            <PageSection>
+              Choose denominated currency and enter a whole number in the Amount field
+            </PageSection>
 
             <Flex direction={{ base: 'column', md: 'row' }} gap={8}>
               <Controller
@@ -171,7 +197,7 @@ export const TenYearAnniversaryFrom: FC = () => {
                 )}
               />
 
-              <TextField id='requestedAmount' label='Amount' isRequired />
+              <TextField id='requestedAmount' label='Amount' hideCharCounter isRequired />
             </Flex>
 
             <PageSection>Additional Details</PageSection>
@@ -206,8 +232,10 @@ export const TenYearAnniversaryFrom: FC = () => {
               label='Did anyone recommend that you submit an application to the Ecosystem Support Program?'
             />
 
-            <TextAreaField id='additionalInfo' label="Is there anything we didn't cover in the above questions? Feel free to add any relevant links here. This is optional." />
-            
+            <TextAreaField
+              id='additionalInfo'
+              label="Is there anything we didn't cover in the above questions? Feel free to add any relevant links here. This is optional."
+            />
 
             <Center mb={12}>
               <Captcha />
@@ -227,4 +255,4 @@ export const TenYearAnniversaryFrom: FC = () => {
       </FormProvider>
     </Stack>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/forms/fields/TextAreaField.tsx b/src/components/forms/fields/TextAreaField.tsx
index 73ee04ac..e22ca36c 100644
--- a/src/components/forms/fields/TextAreaField.tsx
+++ b/src/components/forms/fields/TextAreaField.tsx
@@ -1,17 +1,19 @@
 import React, { FC } from 'react';
 import { Textarea } from '@chakra-ui/react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, RegisterOptions } from 'react-hook-form';
 
 import { Field, type Props as FieldProps } from './Field';
 import { CharCounter } from './CharCounter';
 import { MAX_TEXT_AREA_LENGTH } from '../../../constants';
 
 interface Props extends Omit<FieldProps, 'children' | 'error'> {
+  registerOptions?: RegisterOptions;
   maxLength?: number;
 }
 
 export const TextAreaField: FC<Props> = ({
   id,
+  registerOptions,
   isDisabled,
   maxLength = MAX_TEXT_AREA_LENGTH,
   ...rest
@@ -43,7 +45,7 @@ export const TextAreaField: FC<Props> = ({
         fontSize='input'
         h='150px'
         mt={3}
-        {...register(id)}
+        {...register(id, registerOptions)}
       />
     </Field>
   );
diff --git a/src/components/forms/fields/TextField.tsx b/src/components/forms/fields/TextField.tsx
index 230474fe..0da02ef6 100644
--- a/src/components/forms/fields/TextField.tsx
+++ b/src/components/forms/fields/TextField.tsx
@@ -1,21 +1,27 @@
-import React, { FC } from 'react';
+import React, { FC, HTMLInputTypeAttribute } from 'react';
 import { Input } from '@chakra-ui/react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, RegisterOptions } from 'react-hook-form';
 
 import { Field, type Props as FieldProps } from './Field';
 import { CharCounter } from './CharCounter';
 import { MAX_TEXT_LENGTH } from '../../../constants';
 
 interface Props extends Omit<FieldProps, 'children' | 'error'> {
+  registerOptions?: RegisterOptions;
   value?: string;
   maxLength?: number;
+  hideCharCounter?: boolean;
+  type?: HTMLInputTypeAttribute;
 }
 
 export const TextField: FC<Props> = ({
   id,
+  registerOptions,
   value,
   isDisabled,
   maxLength = MAX_TEXT_LENGTH,
+  hideCharCounter = false,
+  type = 'text',
   ...rest
 }) => {
   const {
@@ -31,14 +37,16 @@ export const TextField: FC<Props> = ({
     <Field
       id={id}
       error={errors[id]}
-      helpIndicator={maxLength && <CharCounter current={currentLength} max={maxLength} />}
+      helpIndicator={
+        hideCharCounter ? null : <CharCounter current={currentLength} max={maxLength} />
+      }
       {...rest}
     >
       <Input
         id={id}
         value={value}
         isDisabled={isDisabled}
-        type='text'
+        type={type}
         bg='white'
         borderRadius={0}
         borderColor='brand.border'
@@ -46,7 +54,7 @@ export const TextField: FC<Props> = ({
         _placeholder={{ fontSize: 'input' }}
         color='brand.paragraph'
         fontSize='input'
-        {...register(id)}
+        {...register(id, registerOptions)}
       />
     </Field>
   );

From eb1207e26206bcd8e8ae934920be090b843eece8 Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Sun, 15 Jun 2025 19:10:06 +0200
Subject: [PATCH 3/4] more migration

---
 src/components/forms/OfficeHoursForm.tsx     |  480 ++---
 src/components/forms/PSESponsorshipsForm.tsx | 1751 +++++-------------
 src/components/forms/ProjectGrantsForm.tsx   |   60 +-
 src/components/forms/SmallGrantsForm.tsx     | 1198 ++++--------
 4 files changed, 994 insertions(+), 2495 deletions(-)

diff --git a/src/components/forms/OfficeHoursForm.tsx b/src/components/forms/OfficeHoursForm.tsx
index 43805d80..e9e471c5 100644
--- a/src/components/forms/OfficeHoursForm.tsx
+++ b/src/components/forms/OfficeHoursForm.tsx
@@ -5,11 +5,9 @@ import {
   Flex,
   FormControl,
   FormLabel,
-  Input,
   Radio,
   RadioGroup,
   Stack,
-  Textarea,
   useToast
 } from '@chakra-ui/react';
 import { Select } from 'chakra-react-select';
@@ -19,7 +17,8 @@ import { useRouter } from 'next/router';
 
 import { DropdownIndicator, PageText } from '../UI';
 import { SubmitButton } from '../SubmitButton';
-import { Captcha } from '.';
+import { Captcha, TextField } from '.';
+import { TextAreaField } from './fields/TextAreaField';
 
 import { api } from './api';
 
@@ -97,124 +96,63 @@ export const OfficeHoursForm: FC = () => {
     >
       <FormProvider {...methods}>
         <form id='office-hours-form' onSubmit={handleSubmit(onSubmit)}>
-          <Flex direction={{ base: 'column', md: 'row' }}>
-            <FormControl id='first-name-control' isRequired mb={8} mr={{ md: 12 }}>
-              <FormLabel htmlFor='firstName'>
-                <PageText display='inline' fontSize='input'>
-                  First name
-                </PageText>
-              </FormLabel>
-              <Input
-                id='firstName'
-                type='text'
-                bg='white'
-                borderRadius={0}
-                borderColor='brand.border'
-                h='56px'
-                color='brand.paragraph'
-                fontSize='input'
-                {...register('firstName', {
-                  required: true,
-                  maxLength: 40,
-                  validate: value => !containURL(value)
-                })}
-              />
-
-              {errors?.firstName?.type === 'required' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name is required.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.firstName?.type === 'maxLength' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name cannot exceed 40 characters.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.firstName?.type === 'validate' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name cannot contain a URL.
-                  </PageText>
-                </Box>
-              )}
-            </FormControl>
-
-            <FormControl id='last-name-control' isRequired mb={8}>
-              <FormLabel htmlFor='lastName'>
-                <PageText display='inline' fontSize='input'>
-                  Last name
-                </PageText>
-              </FormLabel>
-              <Input
-                id='lastName'
-                type='text'
-                bg='white'
-                borderRadius={0}
-                borderColor='brand.border'
-                h='56px'
-                color='brand.paragraph'
-                fontSize='input'
-                {...register('lastName', {
-                  required: true,
-                  maxLength: 80,
-                  validate: value => !containURL(value)
-                })}
-              />
-
-              {errors?.lastName?.type === 'required' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name is required.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.lastName?.type === 'maxLength' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name cannot exceed 80 characters.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.lastName?.type === 'validate' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name cannot contain a URL.
-                  </PageText>
-                </Box>
-              )}
-            </FormControl>
-          </Flex>
+          <Flex direction={{ base: 'column', md: 'row' }} mb={8}>
+            <TextField
+              id='firstName'
+              label='First name'
+              maxLength={40}
+              isRequired
+              registerOptions={{
+                required: {
+                  value: true,
+                  message: 'First name is required.'
+                },
+                maxLength: {
+                  value: 40,
+                  message: 'First name cannot exceed 40 characters.'
+                },
+                validate: {
+                  containURL: value => !containURL(value) || 'First name cannot contain a URL.'
+                }
+              }}
+              mr={{ md: 12 }}
+            />
 
-          <FormControl id='email-control' isRequired mb={8}>
-            <FormLabel htmlFor='email'>
-              <PageText display='inline' fontSize='input'>
-                Email
-              </PageText>
-            </FormLabel>
-            <Input
-              id='email'
-              type='email'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              color='brand.paragraph'
-              fontSize='input'
-              {...register('email', { required: true })}
+            <TextField
+              id='lastName'
+              label='Last name'
+              maxLength={80}
+              isRequired
+              registerOptions={{
+                required: {
+                  value: true,
+                  message: 'Last name is required.'
+                },
+                maxLength: {
+                  value: 80,
+                  message: 'Last name cannot exceed 80 characters.'
+                },
+                validate: {
+                  containURL: value => !containURL(value) || 'Last name cannot contain a URL.'
+                }
+              }}
             />
+          </Flex>
 
-            {errors?.email?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Email is required.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextField
+            id='email'
+            label='Email'
+            type='email'
+            hideCharCounter
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Email is required.'
+              }
+            }}
+            mb={8}
+          />
 
           {/* If the component doesn't expose input's ref, we should use the Controller component, */}
           {/* which will take care of the registration process (https://react-hook-form.com/get-started#IntegratingwithUIlibraries) */}
@@ -264,57 +202,27 @@ export const OfficeHoursForm: FC = () => {
 
           <Box display={isTeam ? 'block' : 'none'}>
             <Fade in={isTeam} delay={0.25}>
-              <FormControl id='company-control' isRequired={isTeam} mb={8}>
-                <FormLabel htmlFor='company' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Name of organization or entity
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Name of your team or entity you&apos;re submitting for. If your organization
-                  doesn&apos;t have a formal name, just try to describe it in a few words!
-                </PageText>
-
-                <Input
-                  id='company'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  color='brand.paragraph'
-                  fontSize='input'
-                  mt={3}
-                  {...register('company', {
-                    required: isTeam,
-                    maxLength: MAX_TEXT_LENGTH,
-                    validate: value => !containURL(value)
-                  })}
-                />
-
-                {errors?.company?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Organization name is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.company?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Organization name cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.company?.type === 'validate' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Organization name cannot contain a URL.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextField
+                id='company'
+                label='Name of organization or entity'
+                helpText="Name of your team or entity you're submitting for. If your organization doesn't have a formal name, just try to describe it in a few words!"
+                isRequired={isTeam}
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  required: {
+                    value: isTeam,
+                    message: 'Organization name is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `Organization name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  },
+                  validate: {
+                    containURL: value => !containURL(value) || 'Organization name cannot contain a URL.'
+                  }
+                }}
+                mb={8}
+              />
             </Fade>
           </Box>
 
@@ -373,142 +281,61 @@ export const OfficeHoursForm: FC = () => {
 
           <Box display={isRequestingProjectFeedback ? 'block' : 'none'}>
             <Fade in={isRequestingProjectFeedback} delay={0.25}>
-              <FormControl
-                id='project-name-control'
+              <TextField
+                id='projectName'
+                label='Project name'
                 isRequired={isRequestingProjectFeedback}
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  required: {
+                    value: isRequestingProjectFeedback,
+                    message: 'Project name is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `Project name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
                 mb={8}
-              >
-                <FormLabel htmlFor='projectName' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Project name
-                  </PageText>
-                </FormLabel>
-
-                <Input
-                  id='projectName'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  color='brand.paragraph'
-                  fontSize='input'
-                  mt={3}
-                  {...register('projectName', {
-                    required: isRequestingProjectFeedback,
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
-
-                {errors?.projectName?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project name is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.projectName?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project name cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              />
 
-              <FormControl
-                id='project-description-control'
+              <TextAreaField
+                id='projectDescription'
+                label='What is your project about?'
+                helpText='Give us a short summary of what you are hoping to accomplish. Just a paragraph will do.'
                 isRequired={isRequestingProjectFeedback}
+                maxLength={MAX_TEXT_AREA_LENGTH}
+                registerOptions={{
+                  required: {
+                    value: isRequestingProjectFeedback,
+                    message: 'Project description is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Project description cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
                 mb={8}
-              >
-                <FormLabel htmlFor='projectDescription' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    What is your project about?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Give us a short summary of what you are hoping to accomplish. Just a paragraph
-                  will do.
-                </PageText>
-
-                <Textarea
-                  id='projectDescription'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('projectDescription', {
-                    required: isRequestingProjectFeedback,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.projectDescription?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project description is required..
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.projectDescription?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project description cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              />
 
-              <FormControl
-                id='additional-info-control'
+              <TextAreaField
+                id='additionalInfo'
+                label='Where can we learn more?'
+                helpText='Please share links to any relevant Github repos, social media, websites, published work or professional profiles.'
                 isRequired={isRequestingProjectFeedback}
+                maxLength={MAX_TEXT_AREA_LENGTH}
+                registerOptions={{
+                  required: {
+                    value: isRequestingProjectFeedback,
+                    message: 'Some additional resources are required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Additional info cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
                 mb={8}
-              >
-                <FormLabel htmlFor='additionalInfo' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Where can we learn more?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Please share links to any relevant Github repos, social media, websites, published
-                  work or professional profiles.
-                </PageText>
-
-                <Textarea
-                  id='additionalInfo'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('additionalInfo', {
-                    required: isRequestingProjectFeedback,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.additionalInfo?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Some additional resources are required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.additionalInfo?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Additional info cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              />
 
               <Controller
                 name='projectCategory'
@@ -595,47 +422,24 @@ export const OfficeHoursForm: FC = () => {
             )}
           />
 
-          <FormControl id='other-reason-for-meeting-control' mb={8} isRequired>
-            <FormLabel htmlFor='otherReasonForMeeting'>
-              <PageText display='inline' fontSize='input'>
-                How are you hoping ESP can help?
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Please list any specific questions or details that would expedite the call.
-            </PageText>
-
-            <Textarea
-              id='otherReasonForMeeting'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              color='brand.paragraph'
-              fontSize='input'
-              mt={3}
-              h='150px'
-              {...register('otherReasonForMeeting', {
-                required: true,
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.otherReasonForMeeting?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Questions or details are required.
-                </PageText>
-              </Box>
-            )}
-            {errors?.otherReasonForMeeting?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Reason for meeting cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='otherReasonForMeeting'
+            label='How are you hoping ESP can help?'
+            helpText='Please list any specific questions or details that would expedite the call.'
+            isRequired
+            maxLength={MAX_TEXT_AREA_LENGTH}
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Questions or details are required.'
+              },
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Reason for meeting cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <Controller
             name='country'
diff --git a/src/components/forms/PSESponsorshipsForm.tsx b/src/components/forms/PSESponsorshipsForm.tsx
index d5d7c92a..0ca82059 100644
--- a/src/components/forms/PSESponsorshipsForm.tsx
+++ b/src/components/forms/PSESponsorshipsForm.tsx
@@ -5,11 +5,9 @@ import {
   Flex,
   FormControl,
   FormLabel,
-  Input,
   Radio,
   RadioGroup,
   Stack,
-  Textarea,
   useToast
 } from '@chakra-ui/react';
 import { Select } from 'chakra-react-select';
@@ -19,7 +17,7 @@ import { useRouter } from 'next/router';
 
 import { DropdownIndicator, PageText } from '../UI';
 import { SubmitButton } from '../SubmitButton';
-import { Captcha } from '.';
+import { Captcha, TextField, TextAreaField } from '.';
 
 import { api } from './api';
 
@@ -100,126 +98,64 @@ export const PSESponsorshipsForm: FC = () => {
       <FormProvider {...methods}>
         <form id='pse-sponsorships-form' onSubmit={handleSubmit(onSubmit)}>
           <Flex direction={{ base: 'column', md: 'row' }}>
-            <FormControl id='first-name-control' isRequired mb={8} mr={{ md: 12 }}>
-              <FormLabel htmlFor='firstName'>
-                <PageText display='inline' fontSize='input'>
-                  First name
-                </PageText>
-              </FormLabel>
-              <Input
-                id='firstName'
-                type='text'
-                bg='white'
-                borderRadius={0}
-                borderColor='brand.border'
-                h='56px'
-                _placeholder={{ fontSize: 'input' }}
-                color='brand.paragraph'
-                fontSize='input'
-                {...register('firstName', {
-                  required: true,
-                  maxLength: 40,
-                  validate: value => !containURL(value)
-                })}
-              />
-
-              {errors?.firstName?.type === 'required' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name is required.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.firstName?.type === 'maxLength' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name cannot exceed 40 characters.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.firstName?.type === 'validate' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    First name cannot contain a URL.
-                  </PageText>
-                </Box>
-              )}
-            </FormControl>
-
-            <FormControl id='last-name-control' isRequired mb={8}>
-              <FormLabel htmlFor='lastName'>
-                <PageText display='inline' fontSize='input'>
-                  Last name
-                </PageText>
-              </FormLabel>
-              <Input
-                id='lastName'
-                type='text'
-                bg='white'
-                borderRadius={0}
-                borderColor='brand.border'
-                h='56px'
-                _placeholder={{ fontSize: 'input' }}
-                color='brand.paragraph'
-                fontSize='input'
-                {...register('lastName', {
-                  required: true,
-                  maxLength: 80,
-                  validate: value => !containURL(value)
-                })}
-              />
-
-              {errors?.lastName?.type === 'required' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name is required.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.lastName?.type === 'maxLength' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name cannot exceed 80 characters.
-                  </PageText>
-                </Box>
-              )}
-              {errors?.lastName?.type === 'validate' && (
-                <Box mt={1}>
-                  <PageText as='small' fontSize='helpText' color='red.500'>
-                    Last name cannot contain a URL.
-                  </PageText>
-                </Box>
-              )}
-            </FormControl>
-          </Flex>
+            <TextField
+              id='firstName'
+              label='First name'
+              maxLength={40}
+              isRequired
+              registerOptions={{
+                required: {
+                  value: true,
+                  message: 'First name is required.'
+                },
+                maxLength: {
+                  value: 40,
+                  message: 'First name cannot exceed 40 characters.'
+                },
+                validate: {
+                  containURL: value => !containURL(value) || 'First name cannot contain a URL.'
+                }
+              }}
+              mr={{ md: 12 }}
+              mb={8}
+            />
 
-          <FormControl id='email-control' isRequired mb={8}>
-            <FormLabel htmlFor='email'>
-              <PageText display='inline' fontSize='input'>
-                Email
-              </PageText>
-            </FormLabel>
-            <Input
-              id='email'
-              type='email'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              {...register('email', { required: true })}
+            <TextField
+              id='lastName'
+              label='Last name'
+              maxLength={80}
+              isRequired
+              registerOptions={{
+                required: {
+                  value: true,
+                  message: 'Last name is required.'
+                },
+                maxLength: {
+                  value: 80,
+                  message: 'Last name cannot exceed 80 characters.'
+                },
+                validate: {
+                  containURL: value => !containURL(value) || 'Last name cannot contain a URL.'
+                }
+              }}
+              mb={8}
             />
+          </Flex>
 
-            {errors?.email?.type === 'required' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Email is required.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextField
+            id='email'
+            label='Email'
+            type='email'
+            hideCharCounter
+            isRequired
+            registerOptions={{
+              required: {
+                value: true,
+                message: 'Email is required.'
+              }
+            }}
+            mb={8}
+          />
 
           {/* If the component doesn't expose input's ref, we should use the Controller component, */}
           {/* which will take care of the registration process (https://react-hook-form.com/get-started#IntegratingwithUIlibraries) */}
@@ -274,122 +210,60 @@ export const PSESponsorshipsForm: FC = () => {
           {individualOrTeam === TEAM && (
             <>
               <Fade in={individualOrTeam === TEAM} delay={0.25}>
-                <FormControl id='company-control' isRequired={individualOrTeam === TEAM} mb={8}>
-                  <FormLabel htmlFor='company'>
-                    <PageText display='inline' fontSize='input'>
-                      Name of organization or entity
-                    </PageText>
-                  </FormLabel>
-                  <Input
-                    id='company'
-                    type='text'
-                    placeholder="Enter the name of organization or entity you're submitting for"
-                    bg='white'
-                    borderRadius={0}
-                    borderColor='brand.border'
-                    h='56px'
-                    _placeholder={{ fontSize: 'input' }}
-                    color='brand.paragraph'
-                    fontSize='input'
-                    {...register('company', {
-                      required: individualOrTeam === TEAM,
-                      maxLength: MAX_TEXT_LENGTH,
-                      validate: value => !containURL(value)
-                    })}
-                  />
-
-                  {errors?.company?.type === 'required' && (
-                    <Box mt={1}>
-                      <PageText as='small' fontSize='helpText' color='red.500'>
-                        Organization name is required.
-                      </PageText>
-                    </Box>
-                  )}
-                  {errors?.company?.type === 'maxLength' && (
-                    <Box mt={1}>
-                      <PageText as='small' fontSize='helpText' color='red.500'>
-                        Organization name cannot exceed {MAX_TEXT_LENGTH} characters.
-                      </PageText>
-                    </Box>
-                  )}
-                  {errors?.company?.type === 'validate' && (
-                    <Box mt={1}>
-                      <PageText as='small' fontSize='helpText' color='red.500'>
-                        Organization name cannot contain a URL.
-                      </PageText>
-                    </Box>
-                  )}
-                </FormControl>
+                <TextField
+                  id='company'
+                  label='Name of organization or entity'
+                  helpText="Enter the name of organization or entity you're submitting for"
+                  maxLength={MAX_TEXT_LENGTH}
+                  isRequired={individualOrTeam === TEAM}
+                  registerOptions={{
+                    required: {
+                      value: individualOrTeam === TEAM,
+                      message: 'Organization name is required.'
+                    },
+                    maxLength: {
+                      value: MAX_TEXT_LENGTH,
+                      message: `Organization name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                    },
+                    validate: {
+                      containURL: value =>
+                        !containURL(value) || 'Organization name cannot contain a URL.'
+                    }
+                  }}
+                  mb={8}
+                />
               </Fade>
             </>
           )}
 
-          <FormControl id='individual-or-team-summary-control' mb={8}>
-            <FormLabel htmlFor='individualOrTeamSummary' mb={1}>
-              <PageText display='inline' fontSize='input'>
-                Individual or team summary
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Tell us about your team and experience. Please include contact information and link to
-              any biography pages, LinkedIn pages, etc.
-            </PageText>
-
-            <Textarea
-              id='individualOrTeamSummary'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('individualOrTeamSummary', {
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.individualOrTeamSummary?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Team summary cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='individualOrTeamSummary'
+            label='Individual or team summary'
+            helpText='Tell us about your team and experience. Please include contact information and link to any biography pages, LinkedIn pages, etc.'
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Team summary cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <Flex direction='column' mb={8}>
             <Flex direction={{ base: 'column', md: 'row' }} mb={3}>
-              <FormControl id='city-control' mr={{ md: 12 }} mb={{ base: 8, md: 0 }}>
-                <FormLabel htmlFor='city'>
-                  <PageText fontSize='input'>City</PageText>
-                </FormLabel>
-
-                <Input
-                  id='city'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  {...register('city', {
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
-
-                {errors?.city?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      City name cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextField
+                id='city'
+                label='City'
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `City name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
+                mr={{ md: 12 }}
+                mb={{ base: 8, md: 0 }}
+              />
 
               <Controller
                 name='country'
@@ -423,108 +297,49 @@ export const PSESponsorshipsForm: FC = () => {
             </PageText>
           </Flex>
 
-          <FormControl id='website-control' mb={8}>
-            <FormLabel htmlFor='website'>
-              <PageText fontSize='input'>Website</PageText>
-            </FormLabel>
-            <PageText fontSize='input' position='absolute' bottom='15.5px' left={4} zIndex={9}>
-              https://
-            </PageText>
-            <Input
-              id='website'
-              type='text'
-              placeholder='yourwebsiteaddress.com'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              position='relative'
-              color='brand.paragraph'
-              fontSize='input'
-              pl={16}
-              {...register('website', {
-                maxLength: MAX_TEXT_LENGTH
-              })}
-            />
-
-            {errors?.website?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Website cannot exceed {MAX_TEXT_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='twitter-control' mb={8}>
-            <FormLabel htmlFor='twitter'>
-              <PageText fontSize='input'>Twitter</PageText>
-            </FormLabel>
-
-            <PageText fontSize='input' position='absolute' bottom='15.5px' left={4} zIndex={9}>
-              @
-            </PageText>
-
-            <Input
-              id='twitter'
-              type='text'
-              placeholder='twitter_handle'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              position='relative'
-              color='brand.paragraph'
-              fontSize='input'
-              pl={8}
-              {...register('twitter', {
-                maxLength: 16
-              })}
-            />
-
-            {errors?.twitter?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Twitter handle cannot exceed 16 characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='contact-telegram' w={{ md: '50%' }} pr={{ md: 6 }} mb={8}>
-            <FormLabel htmlFor='contact-telegram' mb={1}>
-              <PageText fontSize='input'>Contact Telegram</PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              What is the Telegram handle of your primary contact person?
-            </PageText>
+          <TextField
+            id='website'
+            label='Website'
+            helpText='Enter your website address'
+            maxLength={MAX_TEXT_LENGTH}
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_LENGTH,
+                message: `Website cannot exceed ${MAX_TEXT_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            <Input
-              id='contactTelegram'
-              type='text'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              h='56px'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              {...register('contactTelegram', {
-                maxLength: 150
-              })}
-            />
+          <TextField
+            id='twitter'
+            label='Twitter'
+            helpText='twitter_handle'
+            maxLength={16}
+            registerOptions={{
+              maxLength: {
+                value: 16,
+                message: 'Twitter handle cannot exceed 16 characters.'
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.contactTelegram?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Contact Telegram handle cannot exceed 150 characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextField
+            id='contactTelegram'
+            label='Contact Telegram'
+            helpText='What is the Telegram handle of your primary contact person?'
+            maxLength={150}
+            registerOptions={{
+              maxLength: {
+                value: 150,
+                message: 'Contact Telegram handle cannot exceed 150 characters.'
+              }
+            }}
+            w={{ md: '50%' }}
+            pr={{ md: 6 }}
+            mb={8}
+          />
 
           <Controller
             name='category'
@@ -575,320 +390,132 @@ export const PSESponsorshipsForm: FC = () => {
               {/* Community event */}
               {isCommunityEvent && (
                 <>
-                  <FormControl id='event-name-control' isRequired={isCommunityEvent} mb={8}>
-                    <FormLabel htmlFor='eventName' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Event name
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      What&apos;s the official title of your event?
-                    </PageText>
-
-                    <Input
-                      id='eventName'
-                      type='text'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      mt={3}
-                      {...register('eventName', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_LENGTH
-                      })}
-                    />
-
-                    {errors?.eventName?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event name is required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.eventName?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event name cannot exceed {MAX_TEXT_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  <TextField
+                    id='eventName'
+                    label='Event name'
+                    helpText="What's the official title of your event?"
+                    maxLength={MAX_TEXT_LENGTH}
+                    isRequired={isCommunityEvent}
+                    registerOptions={{
+                      required: {
+                        value: isCommunityEvent,
+                        message: 'Event name is required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_LENGTH,
+                        message: `Event name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                  <FormControl
-                    id='event-date-control'
+                  <TextField
+                    id='eventDate'
+                    label='Event date'
+                    helpText='Please enter the first date of your event (MM/DD/YYYY)'
+                    type='date'
+                    hideCharCounter
                     isRequired={isCommunityEvent}
+                    registerOptions={{
+                      required: {
+                        value: isCommunityEvent,
+                        message: 'Event date is required.'
+                      }
+                    }}
                     w={{ md: '50%' }}
                     pr={{ md: 6 }}
                     mb={8}
-                  >
-                    <FormLabel htmlFor='eventDate' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Event date
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Please enter the first date of your event (MM/DD/YYYY)
-                    </PageText>
-
-                    <Input
-                      id='eventDate'
-                      type='date'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      mt={3}
-                      {...register('eventDate', {
-                        required: isCommunityEvent
-                      })}
-                    />
-
-                    {errors?.eventDate?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event date is required.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='event-previous-work-control' mb={8}>
-                    <FormLabel htmlFor='eventPreviousWork' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        List of any previous events you&apos;ve organized
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      The more information the better!
-                    </PageText>
-
-                    <Textarea
-                      id='eventPreviousWork'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('eventPreviousWork', {
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
-
-                    {errors?.eventPreviousWork?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Previous work cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='event-link-control' mb={8}>
-                    <FormLabel htmlFor='eventLink' mb={1}>
-                      <PageText fontSize='input'>
-                        Is there a website for this event? Paste the link here.
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Meetup, Facebook page, event site, etc (URL only).
-                    </PageText>
-
-                    <Input
-                      id='eventLink'
-                      type='text'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      mt={3}
-                      {...register('eventLink', {
-                        maxLength: MAX_TEXT_LENGTH
-                      })}
-                    />
-
-                    {errors?.eventLink?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          URL cannot exceed {MAX_TEXT_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='event-description-control' isRequired={isCommunityEvent} mb={8}>
-                    <FormLabel htmlFor='eventDescription' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Describe your event
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      For example: Will your agenda include talks, workshops, discussions? What is
-                      your planned format - round table, showcase or a more informal setting? What
-                      are your goals for the event?
-                    </PageText>
-
-                    <Textarea
-                      id='eventDescription'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('eventDescription', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
-
-                    {errors?.eventDescription?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event details are required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.eventDescription?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event details cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='event-topics-control' isRequired={isCommunityEvent} mb={8}>
-                    <FormLabel htmlFor='eventTopics' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Event topics
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Please briefly describe the topics you plan to cover at this event. For
-                      example: staking, zero knowledge, defi, social impact, NFTs, etc.
-                    </PageText>
-
-                    <Textarea
-                      id='eventTopics'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('eventTopics', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
-
-                    {errors?.eventTopics?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event topics are required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.eventTopics?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event topics cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='referrals-control' mb={8}>
-                    <FormLabel htmlFor='referrals' mb={1}>
-                      <PageText fontSize='input'>Who referred you?</PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Please write the name of the person who shared this form with you.
-                    </PageText>
+                  />
 
-                    <Input
-                      id='referrals'
-                      type='text'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      {...register('referrals', {
-                        maxLength: MAX_TEXT_LENGTH
-                      })}
-                    />
+                  <TextAreaField
+                    id='eventPreviousWork'
+                    label="List of any previous events you've organized"
+                    helpText='The more information the better!'
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Previous work cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                    {errors?.referrals?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Referrals info cannot exceed {MAX_TEXT_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  <TextField
+                    id='eventLink'
+                    label='Is there a website for this event? Paste the link here.'
+                    helpText='Meetup, Facebook page, event site, etc (URL only).'
+                    maxLength={MAX_TEXT_LENGTH}
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_LENGTH,
+                        message: `URL cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                  <FormControl id='pse-rationale-control' mb={8}>
-                    <FormLabel htmlFor='pseRationale' mb={1}>
-                      <PageText fontSize='input'>
-                        What do you hope PSE&apos;s support will add to this event?
-                      </PageText>
-                    </FormLabel>
+                  <TextAreaField
+                    id='eventDescription'
+                    label='Describe your event'
+                    helpText='For example: Will your agenda include talks, workshops, discussions? What is your planned format - round table, showcase or a more informal setting? What are your goals for the event?'
+                    isRequired={isCommunityEvent}
+                    registerOptions={{
+                      required: {
+                        value: isCommunityEvent,
+                        message: 'Event details are required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Event details cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Are there specific topics or values that are especially relevant to PSE? Why
-                      PSE rather than EF generally?
-                    </PageText>
+                  <TextAreaField
+                    id='eventTopics'
+                    label='Event topics'
+                    helpText='Please briefly describe the topics you plan to cover at this event. For example: staking, zero knowledge, defi, social impact, NFTs, etc.'
+                    isRequired={isCommunityEvent}
+                    registerOptions={{
+                      required: {
+                        value: isCommunityEvent,
+                        message: 'Event topics are required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Event topics cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                    <Textarea
-                      id='pseRationale'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('pseRationale', {
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
+                  <TextField
+                    id='referrals'
+                    label='Who referred you?'
+                    helpText='Please write the name of the person who shared this form with you.'
+                    maxLength={MAX_TEXT_LENGTH}
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_LENGTH,
+                        message: `Referrals info cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                    {errors?.pseRationale?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          The reasons cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  <TextAreaField
+                    id='pseRationale'
+                    label="What do you hope PSE's support will add to this event?"
+                    helpText='Are there specific topics or values that are especially relevant to PSE? Why PSE rather than EF generally?'
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `The reasons cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
                   <Flex direction={{ base: 'column', lg: 'row' }}>
                     <Controller
@@ -960,667 +587,275 @@ export const PSESponsorshipsForm: FC = () => {
                   </Flex>
 
                   {HAS_EVENT_LOCATION && (
-                    <FormControl id='event-location-control' isRequired={HAS_EVENT_LOCATION} mb={8}>
-                      <FormLabel htmlFor='eventLocation'>
-                        <PageText display='inline' fontSize='input'>
-                          Event location
-                        </PageText>
-                      </FormLabel>
-
-                      <Input
-                        id='eventLocation'
-                        type='text'
-                        bg='white'
-                        borderRadius={0}
-                        borderColor='brand.border'
-                        h='56px'
-                        _placeholder={{ fontSize: 'input' }}
-                        color='brand.paragraph'
-                        fontSize='input'
-                        {...register('eventLocation', {
-                          required: HAS_EVENT_LOCATION,
-                          maxLength: MAX_TEXT_LENGTH
-                        })}
-                      />
-
-                      {errors?.eventLocation?.type === 'required' && (
-                        <Box mt={1}>
-                          <PageText as='small' fontSize='helpText' color='red.500'>
-                            Event location is required.
-                          </PageText>
-                        </Box>
-                      )}
-                      {errors?.eventLocation?.type === 'maxLength' && (
-                        <Box mt={1}>
-                          <PageText as='small' fontSize='helpText' color='red.500'>
-                            Event location cannot exceed {MAX_TEXT_LENGTH} characters.
-                          </PageText>
-                        </Box>
-                      )}
-                    </FormControl>
+                    <TextField
+                      id='eventLocation'
+                      label='Event location'
+                      maxLength={MAX_TEXT_LENGTH}
+                      isRequired={HAS_EVENT_LOCATION}
+                      registerOptions={{
+                        required: {
+                          value: HAS_EVENT_LOCATION,
+                          message: 'Event location is required.'
+                        },
+                        maxLength: {
+                          value: MAX_TEXT_LENGTH,
+                          message: `Event location cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                        }
+                      }}
+                      mb={8}
+                    />
                   )}
 
-                  <FormControl
-                    id='expected-attendees-control'
-                    mb={8}
+                  <TextField
+                    id='expectedAttendees'
+                    label='Expected number of attendees/registrants'
+                    helpText='Enter a whole number. Ex: 300.'
+                    type='number'
+                    hideCharCounter
+                    registerOptions={{
+                      maxLength: {
+                        value: 18,
+                        message: 'Expected number cannot exceed 18 characters.'
+                      }
+                    }}
                     w={{ md: '50%' }}
                     pr={{ lg: 6 }}
-                  >
-                    <FormLabel htmlFor='expectedAttendees' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Expected number of attendees/registrants
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Enter a whole number. Ex: 300.
-                    </PageText>
-
-                    <Input
-                      id='expectedAttendees'
-                      type='number'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      mt={3}
-                      {...register('expectedAttendees', {
-                        maxLength: 18
-                      })}
-                    />
-
-                    {errors?.expectedAttendees?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Expected number cannot exceed 18 characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='target-audience-control' isRequired={isCommunityEvent} mb={8}>
-                    <FormLabel htmlFor='targetAudience' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Target audience
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Ex: developers, entrepreneurs, general community.
-                    </PageText>
-
-                    <Textarea
-                      id='targetAudience'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('targetAudience', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
-
-                    {errors?.targetAudience?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Target audience is required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.targetAudience?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Target audience cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='confirmed-speakers-control' mb={8}>
-                    <FormLabel htmlFor='confirmedSpeakers' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        List any confirmed speakers
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Please list their full names and topic discussion. If you do not have any
-                      confirmed speakers, please explain why.
-                    </PageText>
-
-                    <Textarea
-                      id='confirmedSpeakers'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('confirmedSpeakers', {
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
-
-                    {errors?.confirmedSpeakers?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Confirmed speakers list cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='confirmed-sponsors-control' mb={8}>
-                    <FormLabel htmlFor='confirmedSponsors'>
-                      <PageText display='inline' fontSize='input'>
-                        List any confirmed sponsors
-                      </PageText>
-                    </FormLabel>
-                    <Textarea
-                      id='confirmedSponsors'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      {...register('confirmedSponsors', {
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
-
-                    {errors?.confirmedSponsors?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Confirmed sponsors list cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                    mb={8}
+                  />
 
-                  <FormControl
-                    id='event-budget-breakdown-control'
+                  <TextAreaField
+                    id='targetAudience'
+                    label='Target audience'
+                    helpText='Ex: developers, entrepreneurs, general community.'
                     isRequired={isCommunityEvent}
+                    registerOptions={{
+                      required: {
+                        value: isCommunityEvent,
+                        message: 'Target audience is required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Target audience cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
                     mb={8}
-                  >
-                    <FormLabel htmlFor='eventBudgetBreakdown' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Budget breakdown
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Please itemize your anticipated costs - best estimates are ok if things are
-                      not yet confirmed or dependent on final attendee count.
-                    </PageText>
+                  />
 
-                    <Textarea
-                      id='eventBudgetBreakdown'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('eventBudgetBreakdown', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
+                  <TextAreaField
+                    id='confirmedSpeakers'
+                    label='List any confirmed speakers'
+                    helpText='Please list their full names and topic discussion. If you do not have any confirmed speakers, please explain why.'
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Confirmed speakers list cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                    {errors?.eventBudgetBreakdown?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Budget breakdown is required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.eventBudgetBreakdown?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Budget breakdown cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  <TextAreaField
+                    id='confirmedSponsors'
+                    label='List any confirmed sponsors'
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Confirmed sponsors list cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                  <FormControl
-                    id='event-requested-amount-control'
+                  <TextAreaField
+                    id='eventBudgetBreakdown'
+                    label='Budget breakdown'
+                    helpText='Please itemize your anticipated costs - best estimates are ok if things are not yet confirmed or dependent on final attendee count.'
                     isRequired={isCommunityEvent}
+                    registerOptions={{
+                      required: {
+                        value: isCommunityEvent,
+                        message: 'Budget breakdown is required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Budget breakdown cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
                     mb={8}
+                  />
+
+                  <TextField
+                    id='eventRequestedAmount'
+                    label='Requested sponsorship amount'
+                    helpText='Ex: USD 500.'
+                    maxLength={MAX_TEXT_LENGTH}
+                    isRequired={isCommunityEvent}
+                    registerOptions={{
+                      required: {
+                        value: isCommunityEvent,
+                        message: 'Requested amount is required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_LENGTH,
+                        message: `Requested amount cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                      }
+                    }}
                     w={{ md: '50%' }}
                     pr={{ lg: 6 }}
-                  >
-                    <FormLabel htmlFor='eventRequestedAmount' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Requested sponsorship amount
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Ex: USD 500.
-                    </PageText>
-
-                    <Input
-                      id='eventRequestedAmount'
-                      type='text'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      mt={3}
-                      {...register('eventRequestedAmount', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_LENGTH
-                      })}
-                    />
-
-                    {errors?.eventRequestedAmount?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Requested amount is required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.eventRequestedAmount?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Requested amount cannot exceed {MAX_TEXT_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='additional-info-control' mb={8}>
-                    <FormLabel htmlFor='additionalInfo' mb={1}>
-                      <PageText fontSize='input'>Anything else you&apos;d like to share?</PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      Is there anything we should know about that hasn&apos;t been covered by the
-                      questions above? You also have the option to link any supporting documents or
-                      relevant sites here.
-                    </PageText>
-
-                    <Textarea
-                      id='additionalInfo'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('additionalInfo', {
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
+                    mb={8}
+                  />
 
-                    {errors?.additionalInfo?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Additional info cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  <TextAreaField
+                    id='additionalInfo'
+                    label="Anything else you'd like to share?"
+                    helpText="Is there anything we should know about that hasn't been covered by the questions above? You also have the option to link any supporting documents or relevant sites here."
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Additional info cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
                 </>
               )}
 
               {/* Quadratic Funding */}
               {!isCommunityEvent && (
                 <>
-                  <FormControl id='qf-event-name-control' isRequired={!isCommunityEvent} mb={8}>
-                    <FormLabel htmlFor='QFeventName' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Event name
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      What&apos;s the name of the event you&apos;ll be running the round with? If
-                      not applicable, write &quot;N/A&quot;
-                    </PageText>
-
-                    <Input
-                      id='QFeventName'
-                      type='text'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      mt={3}
-                      {...register('eventName', {
-                        required: !isCommunityEvent,
-                        maxLength: MAX_TEXT_LENGTH
-                      })}
-                    />
-
-                    {errors?.eventName?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event name is required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.eventName?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Event name cannot exceed {MAX_TEXT_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='round-description-control' mb={8}>
-                    <FormLabel htmlFor='roundDescription' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Round description
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      A short description of the round. What is the goal of the round and who is the
-                      intended audience?
-                    </PageText>
-
-                    <Textarea
-                      id='roundDescription'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      // has same SF field as eventDescription
-                      {...register('eventDescription', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
+                  <TextField
+                    id='QFeventName'
+                    label='Event name'
+                    helpText="What's the name of the event you'll be running the round with? If not applicable, write 'N/A'"
+                    maxLength={MAX_TEXT_LENGTH}
+                    isRequired={!isCommunityEvent}
+                    registerOptions={{
+                      required: {
+                        value: !isCommunityEvent,
+                        message: 'Event name is required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_LENGTH,
+                        message: `Event name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                    {errors?.eventDescription?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Round description details cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  <TextAreaField
+                    id='roundDescription'
+                    label='Round description'
+                    helpText='A short description of the round. What is the goal of the round and who is the intended audience?'
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Round description details cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
                   <Flex direction={{ base: 'column', md: 'row' }}>
-                    <FormControl
-                      id='round-date-control'
+                    <TextField
+                      id='roundDate'
+                      label='Round date'
+                      helpText='When do you expect to launch your round?'
+                      type='date'
+                      hideCharCounter
                       isRequired={!isCommunityEvent}
+                      registerOptions={{
+                        required: {
+                          value: !isCommunityEvent,
+                          message: 'Round date is required.'
+                        }
+                      }}
                       mr={{ md: 12 }}
                       mb={8}
-                    >
-                      <FormLabel htmlFor='roundDate' mb={1}>
-                        <PageText display='inline' fontSize='input'>
-                          Round date
-                        </PageText>
-                      </FormLabel>
-
-                      <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                        When do you expect to launch your round?
-                      </PageText>
-
-                      <Input
-                        id='roundDate'
-                        type='date'
-                        bg='white'
-                        borderRadius={0}
-                        borderColor='brand.border'
-                        h='56px'
-                        _placeholder={{ fontSize: 'input' }}
-                        color='brand.paragraph'
-                        fontSize='input'
-                        mt={3}
-                        // has same SF field as eventDate
-                        {...register('eventDate', {
-                          required: !isCommunityEvent
-                        })}
-                      />
-                    </FormControl>
-
-                    <FormControl id='round-size-participants-control' mb={8}>
-                      <FormLabel htmlFor='roundSizeParticipants' mb={1}>
-                        <PageText display='inline' fontSize='input'>
-                          Round size - Participants
-                        </PageText>
-                      </FormLabel>
-
-                      <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                        How many participants do you estimate will vote or contribute to the round?
-                      </PageText>
-
-                      <Input
-                        id='roundSizeParticipants'
-                        type='number'
-                        bg='white'
-                        borderRadius={0}
-                        borderColor='brand.border'
-                        h='56px'
-                        _placeholder={{ fontSize: 'input' }}
-                        color='brand.paragraph'
-                        fontSize='input'
-                        mt={3}
-                        // Same SF field as expectedAttendees
-                        {...register('expectedAttendees', {
-                          maxLength: 18
-                        })}
-                      />
-
-                      {errors?.expectedAttendees?.type === 'maxLength' && (
-                        <Box mt={1}>
-                          <PageText as='small' fontSize='helpText' color='red.500'>
-                            Expected number cannot exceed 18 characters.
-                          </PageText>
-                        </Box>
-                      )}
-                    </FormControl>
-                  </Flex>
-
-                  <FormControl id='round-size-projects-control' mb={8}>
-                    <FormLabel htmlFor='roundSizeProjects' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Round size - Projects
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      How many recipient projects do you estimate will participate in the round?
-                    </PageText>
-
-                    <Textarea
-                      id='roundSizeProjects'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      // Same SF field as targetAudience
-                      {...register('targetAudience', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
                     />
 
-                    {errors?.targetAudience?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Round size - Projects cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='qf-round-website-control' mb={8}>
-                    <FormLabel htmlFor='QFRoundWebsite' mb={1}>
-                      <PageText fontSize='input'>Round Website?</PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      URL only.
-                    </PageText>
-
-                    <Input
-                      id='QFRoundWebsite'
-                      type='text'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      mt={3}
-                      // Same SF field as eventLink
-                      {...register('eventLink', {
-                        maxLength: MAX_TEXT_LENGTH
-                      })}
-                    />
-
-                    {errors?.eventLink?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          QF Round Website URL cannot exceed {MAX_TEXT_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='qf-grant-amount-control' mb={8} w={{ md: '50%' }} pr={{ lg: 6 }}>
-                    <FormLabel htmlFor='QFGrantAmount' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Grant amount
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      What is the total amount in USD you&apos;re seeking (including for the
-                      matching pool)?
-                    </PageText>
-
-                    <Input
-                      id='QFGrantAmount'
-                      type='text'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      mt={3}
-                      // Same SF field as eventRequestedAmount
-                      {...register('eventRequestedAmount', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_LENGTH
-                      })}
+                    <TextField
+                      id='roundSizeParticipants'
+                      label='Round size - Participants'
+                      helpText='How many participants do you estimate will vote or contribute to the round?'
+                      type='number'
+                      hideCharCounter
+                      registerOptions={{
+                        maxLength: {
+                          value: 18,
+                          message: 'Expected number cannot exceed 18 characters.'
+                        }
+                      }}
+                      mb={8}
                     />
+                  </Flex>
 
-                    {errors?.eventRequestedAmount?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Grant amount cannot exceed {MAX_TEXT_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
-
-                  <FormControl id='qf-use-of-funds-control' mb={8}>
-                    <FormLabel htmlFor='QFUseOfFunds' mb={1}>
-                      <PageText display='inline' fontSize='input'>
-                        Use of funds
-                      </PageText>
-                    </FormLabel>
-
-                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                      How does your project plan to use/allocate this funding?
-                    </PageText>
-
-                    <Textarea
-                      id='QFUseOfFunds'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      // Same SF field as eventBudgetBreakdown
-                      {...register('eventBudgetBreakdown', {
-                        required: isCommunityEvent,
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
+                  <TextAreaField
+                    id='roundSizeProjects'
+                    label='Round size - Projects'
+                    helpText='How many recipient projects do you estimate will participate in the round?'
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Round size - Projects cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                    {errors?.eventBudgetBreakdown?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Use of funds details cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  <TextField
+                    id='QFRoundWebsite'
+                    label='Round Website?'
+                    helpText='URL only.'
+                    maxLength={MAX_TEXT_LENGTH}
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_LENGTH,
+                        message: `QF Round Website URL cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                  <FormControl id='why-ethereum-control' mb={8}>
-                    <FormLabel htmlFor='whyEthereum'>
-                      <PageText display='inline' fontSize='input'>
-                        Why are you interested in receiving this funding?
-                      </PageText>
-                    </FormLabel>
+                  <TextField
+                    id='QFGrantAmount'
+                    label='Grant amount'
+                    helpText="What is the total amount in USD you're seeking (including for the matching pool)?"
+                    maxLength={MAX_TEXT_LENGTH}
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_LENGTH,
+                        message: `Grant amount cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                      }
+                    }}
+                    w={{ md: '50%' }}
+                    pr={{ lg: 6 }}
+                    mb={8}
+                  />
 
-                    <Textarea
-                      id='whyEthereum'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      h='150px'
-                      mt={3}
-                      {...register('whyEthereum', {
-                        maxLength: MAX_TEXT_AREA_LENGTH
-                      })}
-                    />
+                  <TextAreaField
+                    id='QFUseOfFunds'
+                    label='Use of funds'
+                    helpText='How does your project plan to use/allocate this funding?'
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Use of funds details cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
 
-                    {errors?.whyEthereum?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  <TextAreaField
+                    id='whyEthereum'
+                    label='Why are you interested in receiving this funding?'
+                    registerOptions={{
+                      maxLength: {
+                        value: MAX_TEXT_AREA_LENGTH,
+                        message: `Cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                      }
+                    }}
+                    mb={8}
+                  />
                 </>
               )}
             </>
diff --git a/src/components/forms/ProjectGrantsForm.tsx b/src/components/forms/ProjectGrantsForm.tsx
index 94af2f5b..1bcd2cd5 100644
--- a/src/components/forms/ProjectGrantsForm.tsx
+++ b/src/components/forms/ProjectGrantsForm.tsx
@@ -5,7 +5,6 @@ import {
   Flex,
   FormControl,
   FormLabel,
-  Input,
   Stack,
   RadioGroup,
   Radio,
@@ -431,50 +430,25 @@ export const ProjectGrantsForm: FC = () => {
                 />
               </FormControl>
 
-              <FormControl
-                id='requested-amount-control'
-                isRequired
-                mb={8}
-                w={{ md: '50%' }}
-                pr={{ lg: 6 }}
-              >
-                <FormLabel htmlFor='projectRequestedAmount'>
-                  <PageText display='inline' fontSize='input'>
-                    Amount
-                  </PageText>
-                </FormLabel>
-
-                <Input
-                  id='projectRequestedAmount'
+              <Box w={{ md: '50%' }} pr={{ lg: 6 }} mb={8}>
+                <TextField
+                  id='requestedAmount'
+                  label='Amount'
                   type='number'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  {...register('requestedAmount', {
-                    required: true,
-                    maxLength: 30
-                  })}
+                  hideCharCounter
+                  isRequired
+                  registerOptions={{
+                    required: {
+                      value: true,
+                      message: 'Requested amount is required.'
+                    },
+                    maxLength: {
+                      value: 30,
+                      message: 'Requested amount cannot exceed 30 characters.'
+                    }
+                  }}
                 />
-
-                {errors?.requestedAmount?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Requested amount is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.requestedAmount?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Requested amount cannot exceed 30 characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              </Box>
             </Flex>
           </Stack>
 
diff --git a/src/components/forms/SmallGrantsForm.tsx b/src/components/forms/SmallGrantsForm.tsx
index 8de0913b..40af6a4b 100644
--- a/src/components/forms/SmallGrantsForm.tsx
+++ b/src/components/forms/SmallGrantsForm.tsx
@@ -5,11 +5,9 @@ import {
   Flex,
   FormControl,
   FormLabel,
-  Input,
   Radio,
   RadioGroup,
   Stack,
-  Textarea,
   useToast
 } from '@chakra-ui/react';
 import { Select } from 'chakra-react-select';
@@ -295,6 +293,10 @@ export const SmallGrantsForm: FC = () => {
                       </PageText>
                     </FormLabel>
 
+                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
+                      &nbsp;
+                    </PageText>
+
                     <Select
                       id='country'
                       options={COUNTRY_OPTIONS}
@@ -323,6 +325,7 @@ export const SmallGrantsForm: FC = () => {
           <TextField
             id='website'
             label='Website'
+            helpText='Enter your website address'
             maxLength={MAX_TEXT_LENGTH}
             registerOptions={{
               maxLength: {
@@ -331,7 +334,6 @@ export const SmallGrantsForm: FC = () => {
               }
             }}
             mb={8}
-            pl={16}
           />
 
           <TextField
@@ -346,7 +348,6 @@ export const SmallGrantsForm: FC = () => {
               }
             }}
             mb={8}
-            pl={8}
           />
 
           {/* Below controller determines `isAProject` and `isAnEvent` values */}
@@ -398,83 +399,39 @@ export const SmallGrantsForm: FC = () => {
 
           <Box display={isAProject ? 'block' : 'none'}>
             <Fade in={isAProject} delay={0.25}>
-              <FormControl id='project-name-control' isRequired={isAProject} mt={8} mb={8}>
-                <FormLabel htmlFor='projectName' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Project name
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  A short, concise title of what you&apos;re working on.
-                </PageText>
-
-                <Input
-                  id='projectName'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  mt={3}
-                  {...register('projectName', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
-
-                {errors?.projectName?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project name is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.projectName?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Project name cannot exceed 255 characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='project-repo-control' mb={8}>
-                <FormLabel htmlFor='projectRepo' mb={1}>
-                  <PageText fontSize='input'>Project repo</PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Github, Radicle, etc.
-                </PageText>
-
-                <Input
-                  id='projectRepo'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  mt={3}
-                  {...register('projectRepo', {
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
+              <TextField
+                id='projectName'
+                label='Project name'
+                helpText="A short, concise title of what you're working on."
+                isRequired={isAProject}
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Project name is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `Project name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
+                mt={8}
+                mb={8}
+              />
 
-                {errors?.projectRepo?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Repo name cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextField
+                id='projectRepo'
+                label='Project repo'
+                helpText='Github, Radicle, etc.'
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `Repo name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
               <TextAreaField
                 id='projectPreviousWork'
@@ -640,141 +597,63 @@ export const SmallGrantsForm: FC = () => {
                     />
                   </FormControl>
 
-                  <FormControl
-                    id='project-requested-amount-control'
-                    isRequired={isAProject}
-                    mb={8}
-                    w={{ md: '50%' }}
-                    pr={{ lg: 6 }}
-                  >
-                    <FormLabel htmlFor='projectRequestedAmount'>
-                      <PageText display='inline' fontSize='input'>
-                        Amount
-                      </PageText>
-                    </FormLabel>
-
-                    <Input
+                  <Box w={{ md: '50%' }} pr={{ lg: 6 }} mb={8}>
+                    <TextField
                       id='projectRequestedAmount'
+                      label='Amount'
                       type='number'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      {...register('projectRequestedAmount', {
-                        required: isAProject,
-                        maxLength: 30
-                      })}
+                      hideCharCounter
+                      isRequired={isAProject}
+                      registerOptions={{
+                        required: {
+                          value: isAProject,
+                          message: 'Requested amount is required.'
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: 'Requested amount cannot exceed 30 characters.'
+                        }
+                      }}
                     />
-
-                    {errors?.projectRequestedAmount?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Requested amount is required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.projectRequestedAmount?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Requested amount cannot exceed 30 characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  </Box>
                 </Flex>
               </Stack>
 
-              <FormControl id='proposed-timeline-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='proposedTimeline' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Proposed tasks, roadmap and budget
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Give us an itemized breakdown of how you&apos;ll be using the requested funds.
-                  Provide a brief timeline of the expected work and estimated budget. For each month
-                  or stage of work, list: main objectives, tasks that need to be completed to reach
-                  each objective, deliverables, and anticipated budget.
-                </PageText>
-
-                <Textarea
-                  id='proposedTimeline'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('proposedTimeline', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.proposedTimeline?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Proposed timeline is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.proposedTimeline?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Proposed timeline cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='is-your-project-public-good-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='isYourProjectPublicGood' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Is your project a public good?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  If so, how?
-                </PageText>
-
-                <Textarea
-                  id='isYourProjectPublicGood'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('isYourProjectPublicGood', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
+              <TextAreaField
+                id='proposedTimeline'
+                label='Proposed tasks, roadmap and budget'
+                helpText="Give us an itemized breakdown of how you'll be using the requested funds. Provide a brief timeline of the expected work and estimated budget. For each month or stage of work, list: main objectives, tasks that need to be completed to reach each objective, deliverables, and anticipated budget."
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Proposed timeline is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Proposed timeline cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                {errors?.isYourProjectPublicGood?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Is your project public good is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.isYourProjectPublicGood?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Is your project public good cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='isYourProjectPublicGood'
+                label='Is your project a public good?'
+                helpText='If so, how?'
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Is your project public good is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Is your project public good cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
               <TextAreaField
                 id='isOpenSource'
@@ -905,300 +784,130 @@ export const SmallGrantsForm: FC = () => {
                 </Fade>
               </Box>
 
-              <FormControl id='other-funding-control' isRequired={isAProject} mb={8}>
-                <FormLabel htmlFor='otherFunding' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Have you applied for or received other funding?
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  If so, where else did you get funding from?
-                </PageText>
-
-                <Textarea
-                  id='otherFunding'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('otherFunding', {
-                    required: isAProject,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.otherFunding?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Other funding data is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.otherFunding?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Other funding data cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='otherFunding'
+                label='Have you applied for or received other funding?'
+                helpText='If so, where else did you get funding from?'
+                isRequired={isAProject}
+                registerOptions={{
+                  required: {
+                    value: isAProject,
+                    message: 'Other funding data is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Other funding data cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
             </Fade>
           </Box>
 
           <Box display={isAnEvent ? 'block' : 'none'}>
             <Fade in={isAnEvent} delay={0.25}>
-              <FormControl id='event-name-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='eventName' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Event name
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  What&apos;s the official title of your event?
-                </PageText>
-
-                <Input
-                  id='eventName'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  mt={3}
-                  {...register('eventName', {
-                    required: isAnEvent,
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
-
-                {errors?.eventName?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Event name is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.eventName?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Event name cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextField
+                id='eventName'
+                label='Event name'
+                helpText="What's the official title of your event?"
+                isRequired={isAnEvent}
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Event name is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `Event name cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-              <FormControl id='event-date-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='eventDate' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Event date
-                  </PageText>
-                </FormLabel>
+              <TextField
+                id='eventDate'
+                label='Event date'
+                helpText='Please enter the first date of your event (DD/MM/YYYY)'
+                type='date'
+                hideCharCounter
+                isRequired={isAnEvent}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Event date is required.'
+                  }
+                }}
+                mb={8}
+              />
 
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Please enter the first date of your event (DD/MM/YYYY)
-                </PageText>
-
-                <Input
-                  id='eventDate'
-                  type='date'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  mt={3}
-                  {...register('eventDate', {
-                    required: isAnEvent
-                  })}
-                />
+              <TextAreaField
+                id='eventPreviousWork'
+                label="List of any previous events you've organized"
+                helpText='The more information the better!'
+                isRequired={isAnEvent}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Previous work is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Previous work cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                {errors?.eventDate?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Event date is required.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextField
+                id='sponsorshipLink'
+                label='Is there a website for this event? Paste the link here.'
+                helpText='Meetup, Facebook page, event site, etc (URL only).'
+                maxLength={MAX_TEXT_LENGTH}
+                registerOptions={{
+                  maxLength: {
+                    value: MAX_TEXT_LENGTH,
+                    message: `URL cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-              <FormControl id='event-previous-work-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='eventPreviousWork' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    List of any previous events you&apos;ve organized
-                  </PageText>
-                </FormLabel>
+              <TextAreaField
+                id='sponsorshipDetails'
+                label='Describe your event'
+                helpText='For example: Will your agenda include talks, workshops, discussions? What is your planned format - round table, showcase or a more informal setting? What are your goals for the event?'
+                isRequired={isAnEvent}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Event details are required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Event details cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  The more information the better!
-                </PageText>
-
-                <Textarea
-                  id='eventPreviousWork'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('eventPreviousWork', {
-                    required: isAnEvent,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.eventPreviousWork?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Previous work is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.eventPreviousWork?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Previous work cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='sponsorship-link-control' mb={8}>
-                <FormLabel htmlFor='sponsorshipLink' mb={1}>
-                  <PageText fontSize='input'>
-                    Is there a website for this event? Paste the link here.
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Meetup, Facebook page, event site, etc (URL only).
-                </PageText>
-
-                <Input
-                  id='sponsorshipLink'
-                  type='text'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  h='56px'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  mt={3}
-                  {...register('sponsorshipLink', {
-                    maxLength: MAX_TEXT_LENGTH
-                  })}
-                />
-
-                {errors?.sponsorshipLink?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      URL cannot exceed {MAX_TEXT_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='sponsorship-details-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='sponsorshipDetails' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Describe your event
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  For example: Will your agenda include talks, workshops, discussions? What is your
-                  planned format - round table, showcase or a more informal setting? What are your
-                  goals for the event?
-                </PageText>
-
-                <Textarea
-                  id='sponsorshipDetails'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('sponsorshipDetails', {
-                    required: isAnEvent,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.sponsorshipDetails?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Event details are required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.sponsorshipDetails?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Event details cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='sponsorship-topics-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='sponsorshipTopics' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Event topics
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Please briefly describe the topics you plan to cover at this event. For example:
-                  staking, zero knowledge, defi, social impact, NFTs, etc.
-                </PageText>
-
-                <Textarea
-                  id='sponsorshipTopics'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('sponsorshipTopics', {
-                    required: isAnEvent,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.sponsorshipTopics?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Event topics are required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.sponsorshipTopics?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Event topics cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='sponsorshipTopics'
+                label='Event topics'
+                helpText='Please briefly describe the topics you plan to cover at this event. For example: staking, zero knowledge, defi, social impact, NFTs, etc.'
+                isRequired={isAnEvent}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Event topics are required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Event topics cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
               <Flex direction={{ base: 'column', lg: 'row' }}>
                 <Controller
@@ -1288,271 +997,118 @@ export const SmallGrantsForm: FC = () => {
               </Flex>
 
               <Flex direction={{ base: 'column', lg: 'row' }}>
-                <FormControl
-                  id='expected-attendees-control'
-                  isRequired={isAnEvent}
-                  mb={8}
-                  mr={{ md: 12 }}
-                >
-                  <FormLabel htmlFor='expectedAttendees' mb={1}>
-                    <PageText display='inline' fontSize='input'>
-                      Expected number of attendees/registrants
-                    </PageText>
-                  </FormLabel>
-
-                  <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                    Enter a whole number. Ex: 300.
-                  </PageText>
-
-                  <Input
+                <Box mr={{ md: 12 }} mb={8}>
+                  <TextField
                     id='expectedAttendees'
+                    label='Expected number of attendees/registrants'
+                    helpText='Enter a whole number. Ex: 300.'
                     type='number'
-                    bg='white'
-                    borderRadius={0}
-                    borderColor='brand.border'
-                    h='56px'
-                    _placeholder={{ fontSize: 'input' }}
-                    color='brand.paragraph'
-                    fontSize='input'
-                    mt={3}
-                    {...register('expectedAttendees', {
-                      required: isAnEvent,
-                      maxLength: 18
-                    })}
+                    hideCharCounter
+                    isRequired={isAnEvent}
+                    registerOptions={{
+                      required: {
+                        value: isAnEvent,
+                        message: 'Expected number is required.'
+                      },
+                      maxLength: {
+                        value: 18,
+                        message: 'Expected number cannot exceed 18 characters.'
+                      }
+                    }}
                   />
+                </Box>
 
-                  {errors?.expectedAttendees?.type === 'required' && (
-                    <Box mt={1}>
-                      <PageText as='small' fontSize='helpText' color='red.500'>
-                        Expected number is required.
-                      </PageText>
-                    </Box>
-                  )}
-                  {errors?.expectedAttendees?.type === 'maxLength' && (
-                    <Box mt={1}>
-                      <PageText as='small' fontSize='helpText' color='red.500'>
-                        Expected number cannot exceed 18 characters.
-                      </PageText>
-                    </Box>
-                  )}
-                </FormControl>
-
-                <FormControl
-                  id='event-location-control'
-                  isRequired={isAnEvent && isInPersonOrHybrid}
-                  visibility={isAnEvent && isInPersonOrHybrid ? 'visible' : 'hidden'}
-                >
-                  <FormLabel htmlFor='eventLocation' mb={1}>
-                    <PageText display='inline' fontSize='input'>
-                      Event Location
-                    </PageText>
-                  </FormLabel>
-
-                  <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                    Please list the City and Country of where your event will be located
-                  </PageText>
-
-                  <Input
+                <Box visibility={isAnEvent && isInPersonOrHybrid ? 'visible' : 'hidden'}>
+                  <TextField
                     id='eventLocation'
-                    type='text'
-                    bg='white'
-                    borderRadius={0}
-                    borderColor='brand.border'
-                    h='56px'
-                    _placeholder={{ fontSize: 'input' }}
-                    color='brand.paragraph'
-                    fontSize='input'
-                    mt={3}
-                    {...register('eventLocation', {
-                      required: isAnEvent && isInPersonOrHybrid,
-                      maxLength: MAX_TEXT_LENGTH
-                    })}
+                    label='Event Location'
+                    helpText='Please list the City and Country of where your event will be located'
+                    maxLength={MAX_TEXT_LENGTH}
+                    isRequired={isAnEvent && isInPersonOrHybrid}
+                    registerOptions={{
+                      required: {
+                        value: isAnEvent && isInPersonOrHybrid,
+                        message: 'Event location is required.'
+                      },
+                      maxLength: {
+                        value: MAX_TEXT_LENGTH,
+                        message: `Event location cannot exceed ${MAX_TEXT_LENGTH} characters.`
+                      }
+                    }}
                   />
-
-                  {errors?.eventLocation?.type === 'required' && (
-                    <Box mt={1}>
-                      <PageText as='small' fontSize='helpText' color='red.500'>
-                        Event location is required.
-                      </PageText>
-                    </Box>
-                  )}
-                  {errors?.eventLocation?.type === 'maxLength' && (
-                    <Box mt={1}>
-                      <PageText as='small' fontSize='helpText' color='red.500'>
-                        Event location cannot exceed {MAX_TEXT_LENGTH} characters.
-                      </PageText>
-                    </Box>
-                  )}
-                </FormControl>
+                </Box>
               </Flex>
 
-              <FormControl id='target-audience-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='targetAudience' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Target audience
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Ex: developers, entrepreneurs, general community.
-                </PageText>
-
-                <Textarea
-                  id='targetAudience'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('targetAudience', {
-                    required: isAnEvent,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.targetAudience?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Target audience is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.targetAudience?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Target audience cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='confirmed-speakers-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='confirmedSpeakers' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    List any confirmed speakers
-                  </PageText>
-                </FormLabel>
-
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Please list their full names and topic discussion. If you do not have any
-                  confirmed speakers, please explain why.
-                </PageText>
-
-                <Textarea
-                  id='confirmedSpeakers'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('confirmedSpeakers', {
-                    required: isAnEvent,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.confirmedSpeakers?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Confirmed speakers list is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.confirmedSpeakers?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Confirmed speakers list cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
-
-              <FormControl id='confirmed-sponsors-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='confirmedSponsors'>
-                  <PageText display='inline' fontSize='input'>
-                    List any confirmed sponsors
-                  </PageText>
-                </FormLabel>
-                <Textarea
-                  id='confirmedSponsors'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  {...register('confirmedSponsors', {
-                    required: isAnEvent,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
-
-                {errors?.confirmedSponsors?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Confirmed sponsors list is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.confirmedSponsors?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Confirmed sponsors list cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='targetAudience'
+                label='Target audience'
+                helpText='Ex: developers, entrepreneurs, general community.'
+                isRequired={isAnEvent}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Target audience is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Target audience cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-              <FormControl id='event-budget-breakdown-control' isRequired={isAnEvent} mb={8}>
-                <FormLabel htmlFor='eventBudgetBreakdown' mb={1}>
-                  <PageText display='inline' fontSize='input'>
-                    Budget breakdown
-                  </PageText>
-                </FormLabel>
+              <TextAreaField
+                id='confirmedSpeakers'
+                label='List any confirmed speakers'
+                helpText='Please list their full names and topic discussion. If you do not have any confirmed speakers, please explain why.'
+                isRequired={isAnEvent}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Confirmed speakers list is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Confirmed speakers list cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                <PageText as='small' fontSize='helpText' color='brand.helpText'>
-                  Please itemize your anticipated costs - best estimates are ok if things are not
-                  yet confirmed or dependent on final attendee count.
-                </PageText>
-
-                <Textarea
-                  id='eventBudgetBreakdown'
-                  bg='white'
-                  borderRadius={0}
-                  borderColor='brand.border'
-                  _placeholder={{ fontSize: 'input' }}
-                  color='brand.paragraph'
-                  fontSize='input'
-                  h='150px'
-                  mt={3}
-                  {...register('eventBudgetBreakdown', {
-                    required: isAnEvent,
-                    maxLength: MAX_TEXT_AREA_LENGTH
-                  })}
-                />
+              <TextAreaField
+                id='confirmedSponsors'
+                label='List any confirmed sponsors'
+                isRequired={isAnEvent}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Confirmed sponsors list is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Confirmed sponsors list cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
-                {errors?.eventBudgetBreakdown?.type === 'required' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Budget breakdown is required.
-                    </PageText>
-                  </Box>
-                )}
-                {errors?.eventBudgetBreakdown?.type === 'maxLength' && (
-                  <Box mt={1}>
-                    <PageText as='small' fontSize='helpText' color='red.500'>
-                      Budget breakdown cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                    </PageText>
-                  </Box>
-                )}
-              </FormControl>
+              <TextAreaField
+                id='eventBudgetBreakdown'
+                label='Budget breakdown'
+                helpText='Please itemize your anticipated costs - best estimates are ok if things are not yet confirmed or dependent on final attendee count.'
+                isRequired={isAnEvent}
+                registerOptions={{
+                  required: {
+                    value: isAnEvent,
+                    message: 'Budget breakdown is required.'
+                  },
+                  maxLength: {
+                    value: MAX_TEXT_AREA_LENGTH,
+                    message: `Budget breakdown cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+                  }
+                }}
+                mb={8}
+              />
 
               <Stack>
                 <Stack>
@@ -1610,50 +1166,25 @@ export const SmallGrantsForm: FC = () => {
                     />
                   </FormControl>
 
-                  <FormControl
-                    id='event-requested-amount-control'
-                    isRequired={isAnEvent}
-                    mb={8}
-                    w={{ md: '50%' }}
-                    pr={{ lg: 6 }}
-                  >
-                    <FormLabel htmlFor='eventRequestedAmount'>
-                      <PageText display='inline' fontSize='input'>
-                        Amount
-                      </PageText>
-                    </FormLabel>
-
-                    <Input
+                  <Box w={{ md: '50%' }} pr={{ lg: 6 }} mb={8}>
+                    <TextField
                       id='eventRequestedAmount'
+                      label='Amount'
                       type='number'
-                      bg='white'
-                      borderRadius={0}
-                      borderColor='brand.border'
-                      h='56px'
-                      _placeholder={{ fontSize: 'input' }}
-                      color='brand.paragraph'
-                      fontSize='input'
-                      {...register('eventRequestedAmount', {
-                        required: isAnEvent,
-                        maxLength: 30
-                      })}
+                      hideCharCounter
+                      isRequired={isAnEvent}
+                      registerOptions={{
+                        required: {
+                          value: isAnEvent,
+                          message: 'Requested amount is required.'
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: 'Requested amount cannot exceed 30 characters.'
+                        }
+                      }}
                     />
-
-                    {errors?.eventRequestedAmount?.type === 'required' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Requested amount is required.
-                        </PageText>
-                      </Box>
-                    )}
-                    {errors?.eventRequestedAmount?.type === 'maxLength' && (
-                      <Box mt={1}>
-                        <PageText as='small' fontSize='helpText' color='red.500'>
-                          Requested amount cannot exceed 30 characters.
-                        </PageText>
-                      </Box>
-                    )}
-                  </FormControl>
+                  </Box>
                 </Flex>
               </Stack>
             </Fade>
@@ -1695,76 +1226,31 @@ export const SmallGrantsForm: FC = () => {
             )}
           />
 
-          <FormControl id='referrals-control' mb={8}>
-            <FormLabel htmlFor='referrals' mb={1}>
-              <PageText fontSize='input'>
-                Did anyone recommend that you submit an application to the Ecosystem Support
-                Program?
-              </PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Please include the person&apos;s name and details of their referral.
-            </PageText>
-
-            <Textarea
-              id='referrals'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('referrals', {
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
-
-            {errors?.referrals?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Referrals info cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
-
-          <FormControl id='additional-info-control' mb={8}>
-            <FormLabel htmlFor='additionalInfo' mb={1}>
-              <PageText fontSize='input'>Anything else you&apos;d like to share?</PageText>
-            </FormLabel>
-
-            <PageText as='small' fontSize='helpText' color='brand.helpText'>
-              Is there anything we should know about that hasn&apos;t been covered by the questions
-              above? You also have the option to link any supporting documents or relevant sites
-              here.
-            </PageText>
-
-            <Textarea
-              id='additionalInfo'
-              bg='white'
-              borderRadius={0}
-              borderColor='brand.border'
-              _placeholder={{ fontSize: 'input' }}
-              color='brand.paragraph'
-              fontSize='input'
-              h='150px'
-              mt={3}
-              {...register('additionalInfo', {
-                maxLength: MAX_TEXT_AREA_LENGTH
-              })}
-            />
+          <TextAreaField
+            id='referrals'
+            label='Did anyone recommend that you submit an application to the Ecosystem Support Program?'
+            helpText="Please include the person's name and details of their referral."
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Referrals info cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
-            {errors?.additionalInfo?.type === 'maxLength' && (
-              <Box mt={1}>
-                <PageText as='small' fontSize='helpText' color='red.500'>
-                  Additional info cannot exceed {MAX_TEXT_AREA_LENGTH} characters.
-                </PageText>
-              </Box>
-            )}
-          </FormControl>
+          <TextAreaField
+            id='additionalInfo'
+            label="Anything else you'd like to share?"
+            helpText="Is there anything we should know about that hasn't been covered by the questions above? You also have the option to link any supporting documents or relevant sites here."
+            registerOptions={{
+              maxLength: {
+                value: MAX_TEXT_AREA_LENGTH,
+                message: `Additional info cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
+              }
+            }}
+            mb={8}
+          />
 
           <UploadFile
             id='uploadProposal'

From 100f1301484c0dfafb607c9e8e6b35a04935d178 Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Tue, 17 Jun 2025 11:41:10 +0200
Subject: [PATCH 4/4] fixes

---
 src/components/forms/OfficeHoursForm.tsx   |  3 ++-
 src/components/forms/ProjectGrantsForm.tsx |  4 ++++
 src/components/forms/SmallGrantsForm.tsx   | 23 +++-------------------
 3 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/components/forms/OfficeHoursForm.tsx b/src/components/forms/OfficeHoursForm.tsx
index e9e471c5..3d766b71 100644
--- a/src/components/forms/OfficeHoursForm.tsx
+++ b/src/components/forms/OfficeHoursForm.tsx
@@ -218,7 +218,8 @@ export const OfficeHoursForm: FC = () => {
                     message: `Organization name cannot exceed ${MAX_TEXT_LENGTH} characters.`
                   },
                   validate: {
-                    containURL: value => !containURL(value) || 'Organization name cannot contain a URL.'
+                    containURL: value =>
+                      !containURL(value) || 'Organization name cannot contain a URL.'
                   }
                 }}
                 mb={8}
diff --git a/src/components/forms/ProjectGrantsForm.tsx b/src/components/forms/ProjectGrantsForm.tsx
index 1bcd2cd5..797e6a89 100644
--- a/src/components/forms/ProjectGrantsForm.tsx
+++ b/src/components/forms/ProjectGrantsForm.tsx
@@ -705,6 +705,10 @@ export const ProjectGrantsForm: FC = () => {
                       </PageText>
                     </FormLabel>
 
+                    <PageText as='small' fontSize='helpText' color='brand.helpText'>
+                      &nbsp;
+                    </PageText>
+
                     <Select
                       id='country'
                       options={COUNTRY_OPTIONS}
diff --git a/src/components/forms/SmallGrantsForm.tsx b/src/components/forms/SmallGrantsForm.tsx
index 40af6a4b..354c992e 100644
--- a/src/components/forms/SmallGrantsForm.tsx
+++ b/src/components/forms/SmallGrantsForm.tsx
@@ -523,24 +523,6 @@ export const SmallGrantsForm: FC = () => {
                 mb={8}
               />
 
-              <TextAreaField
-                id='isYourProjectPublicGood'
-                label='Is your project a public good?'
-                helpText='If so, how?'
-                isRequired={isAProject}
-                registerOptions={{
-                  required: {
-                    value: isAProject,
-                    message: 'Is your project public good is required.'
-                  },
-                  maxLength: {
-                    value: MAX_TEXT_AREA_LENGTH,
-                    message: `Is your project public good cannot exceed ${MAX_TEXT_AREA_LENGTH} characters.`
-                  }
-                }}
-                mb={8}
-              />
-
               <Stack>
                 <Stack>
                   <PageText display='inline' fontSize='input'>
@@ -997,7 +979,7 @@ export const SmallGrantsForm: FC = () => {
               </Flex>
 
               <Flex direction={{ base: 'column', lg: 'row' }}>
-                <Box mr={{ md: 12 }} mb={8}>
+                <Box mr={{ md: 12 }} mb={8} w='full'>
                   <TextField
                     id='expectedAttendees'
                     label='Expected number of attendees/registrants'
@@ -1018,13 +1000,14 @@ export const SmallGrantsForm: FC = () => {
                   />
                 </Box>
 
-                <Box visibility={isAnEvent && isInPersonOrHybrid ? 'visible' : 'hidden'}>
+                <Box w='full'>
                   <TextField
                     id='eventLocation'
                     label='Event Location'
                     helpText='Please list the City and Country of where your event will be located'
                     maxLength={MAX_TEXT_LENGTH}
                     isRequired={isAnEvent && isInPersonOrHybrid}
+                    visibility={isAnEvent && isInPersonOrHybrid ? 'visible' : 'hidden'}
                     registerOptions={{
                       required: {
                         value: isAnEvent && isInPersonOrHybrid,