Patterns
Form design patterns
Learn about the design patterns HubSpot recommends for using forms in app cards.
Last modified: August 22, 2025
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.
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.