> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: ca22e709-d722-41b6-9aef-4a5175aef059
---

# Form design patterns

> Learn about the design patterns HubSpot recommends for using forms in app cards.

Use forms to enable users to submit data to HubSpot or an external system. For example, include a form in an app card to submit customer information to an external database, or to place a product order on behalf of a customer.

Follow the design patterns below to keep your app card consistent with HubSpot's designs. To learn more about implementation, check out the [Form component reference documentation](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form).

## Patterns

<Card title="Field organization">
  * Form fields should be stacked vertically, as most people are used to a vertical scroll and may not have wide enough screens to fully display horizontally stacked inputs. A good principle to follow is to include only one input per line.
  * If stacking form fields vertically would make the app card too long, break the form up into multiple steps so that the content isn't overwhelming.
</Card>

<Card title="Buttons">
  * Always include a submit button with each form.
  * For multi-step forms, include a "Next" button at the bottom of each step to guide users to the next step, with the last step ending with a submit button. See the [multi-step form in panels example](#multi-step-forms) below.
</Card>

## Examples

The examples below are taken from HubSpot's [design patterns example app](https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns) and [Figma design kit](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/overview).

### Forms in modals

<iframe width="645" height="450" src="https://embed.figma.com/design/jJ1Wq7Q3O0iLnbSZTyYjS6/HubSpot-Extensibility-Design-Kit?node-id=723-718&embed-host=share&footer=false&page-selector=false" />

[View code in GitHub](https://github.com/HubSpot/ui-extensions-examples/blob/main/design-patterns/src/app/extensions/FormModal.tsx)

### Multi-step forms

<iframe width="645" height="450" src="https://embed.figma.com/design/jJ1Wq7Q3O0iLnbSZTyYjS6/HubSpot-Extensibility-Design-Kit?node-id=723-1100&embed-host=share&footer=false&page-selector=false" />

[View code in GitHub](https://github.com/HubSpot/ui-extensions-examples/blob/main/design-patterns/src/app/extensions/FormMultistep.tsx)