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.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.
Patterns
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.
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 below.
Examples
The examples below are taken from HubSpot’s design patterns example app and Figma design kit.Forms in modals
View code in GitHub
Multi-step forms
View code in GitHub