diff --git a/packages/paste-website/src/pages/patterns/form/index.mdx b/packages/paste-website/src/pages/patterns/form/index.mdx
index e7d8e0e5b1..3f38c64964 100644
--- a/packages/paste-website/src/pages/patterns/form/index.mdx
+++ b/packages/paste-website/src/pages/patterns/form/index.mdx
@@ -67,6 +67,7 @@ import {
import {UnorderedList, OrderedList, ListItem} from '@twilio-paste/list'
import {Table, THead, Tr, Th, TBody, Td, TFoot} from '@twilio-paste/table';
import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
+import {InlineCode} from '@twilio-paste/inline-code';
import DefaultLayout from '../../../layouts/DefaultLayout';
import {getFeature, getNavigationData} from '../../../utils/api';
@@ -166,7 +167,7 @@ Before designing a form you should:
Don't ask for the same information twice in the same session. Reference: WCAGProvide accessible error identification and messaging. Reference: WCAG
- Group related fields using fieldsets and legends with `FormSection` and `FormSectionHeading` from the Form layout component, which render an HTML fieldset and legend. Reference: WebAIM
+ Group related fields using fieldsets and legends with FormSection and FormSectionHeading from the Form layout component, which render an HTML fieldset and legend. Reference: WebAIMThe order in which form elements are presented on a webpage should be logical and meaningful. Reference: WCAG
@@ -184,7 +185,7 @@ The different parts of a form are:
- Form layout component: A wrapper layout component that sets layout and spacing between form elements.
+ Form layout component: A wrapper layout component that sets layout and spacing between form elements.
Form element: Any UI component in a form. Examples: Input, Button, Callout.
@@ -214,7 +215,7 @@ The different parts of a form are:
-
Form layout
+
Form layout
Arranges a layout of form elements with preset spacing.
@@ -382,7 +383,7 @@ Use single-step forms for:
Tasks that users can complete in one go without interruptions or needing external references.
- Low cognitive load forms that require a maximum of 8 fields. For longer forms, use a Multi-step form or for settings, use the Settings template and divide the fields with In Page Navigation or Tabs.
+ Low cognitive load forms that require a maximum of 8 fields. For longer forms, use a Multi-step form or for settings, use the Settings template and divide the fields with In Page Navigation or Tabs.
@@ -659,7 +660,7 @@ Inline forms use our [Popover](/components/popover) component. Use Inline forms
## Composition
Designing a good form requires making decisions about composition, sequence, form elements, copy, and feedback.
-Use the [Form layout component](/components/form) to arrange a layout of form elements with preset spacing.
+Use the [Form layout component](/components/form-layout) to arrange a layout of form elements with preset spacing.
### Number of form elements
@@ -705,7 +706,7 @@ When ordering your form, place fields in a logical order from a user’s perspec
#### Organization: When to break into sections or new pages
-After determining the number of form fields, decide how to group them into sections, using `FormSection` from the [Form layout component](/components/form). If a form naturally breaks down into short sections, a [single step form](https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.3vpocpbk0gl7) is likely to be a good way to organize the form. When a form becomes long and has more than 8 questions that are only related by a few topics, [multi-step form](https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.yi4naptd6s8d) would be a better way to organize the form.
+After determining the number of form fields, decide how to group them into sections, using `FormSection` from the [Form layout component](/components/form-layout). If a form naturally breaks down into short sections, a [single step form](#single-step-or-page-forms) is likely to be a good way to organize the form. When a form becomes long and has more than 8 questions that are only related by a few topics, [multi-step form](#multi-step-forms) would be a better way to organize the form.
### Form field composition
@@ -818,10 +819,10 @@ The primary Button placement depends on the form type:
- For Single Step Forms, Side Modals, Side Panels, Minimizable Dialogs and Popover forms, keep the primary button left-aligned, and placed before secondary buttons for better scannability of the content and its related actions.
+ For Single Step Forms, Side Modals, Side Panels, Minimizable Dialogs and Popover forms, keep the primary button left-aligned, and placed before secondary buttons for better scannability of the content and its related actions.
- For Multi-step Forms and Wizards, keep the primary button right-aligned, placed after secondary buttons to indicate the direction of the form. Refer to our Wizards action footer guidelines for additional guidance.
+ For Multi-step Forms and Wizards, keep the primary button right-aligned, placed after secondary buttons to indicate the direction of the form. Refer to our Wizards action footer guidelines for additional guidance.