Overview

Merchants use Form pages to make changes and submit data to create objects or edit existing ones such as products, sellers or promotions.

Examples

Check out examples of Form pages in tune with our design system.

Promotions

Figma

Categories

Figma

FAQ

When should I use a Form page on my project?

Use a Form page when merchants need to create or edit an object, such as products, sellers or promotions. They will define an object by inputting data, selecting options and submitting them.

What are the basic features of a Form page?

A Form page usually includes:

• A Save Button for merchants to submit data when creating or editing an object.
• A Cancel Button for merchants to discard any changes and leave the form.
• A Back Button for merchants to go back to the previous screen and leave the form.
• A Menu with default actions like Copy URL, Export and Delete that usually appears in the Edit view, when the object already exists in the system. They can be adjusted according the the context you are working with.
• Static validation, which happens on the front end right after the user types anything.
• Dynamic validation, which happens on the back end after data is submitted.
• Form sections to separate different moments of the form, which may include:
  • Input fields: TextInput, TextArea, NumberInput, DatePicker and Combobox.
  • Controls: Checkbox, Radio, Select and Switch.
  • List: DataView

Related components

Page

Merchants identify where they are, have access to the main actions and view content.

Form

Merchants use the Form to submit data to create items and edit existing objects such as
products, sellers or promotions.

DataView

Merchants view a list of items with search, filters and pagination.