---
title: Forms
description: >-
  Enable automatic save bar integration for HTML forms by adding the
  `data-save-bar` attribute to your form element. When form data changes, a save
  bar automatically appears, prompting users to save or discard their changes.


  Alternatively, use the global `shopify.saveBar` API for programmatic control
  over the save bar behavior. Programmatic control of the save bar is available
  as `shopify.saveBar.show()`, `shopify.saveBar.hide()`, and
  `shopify.saveBar.toggle()`.


  **Note:** The save bar functionality requires the full App Bridge UI library
  to be loaded via a [script tag](/docs/api/app-home/using-polaris-components).
api_name: app-home
source_url:
  html: 'https://shopify.dev/docs/api/app-home/app-bridge-web-components/forms'
  md: 'https://shopify.dev/docs/api/app-home/app-bridge-web-components/forms.md'
---

# Forms

Enable automatic save bar integration for HTML forms by adding the `data-save-bar` attribute to your form element. When form data changes, a save bar automatically appears, prompting users to save or discard their changes.

Alternatively, use the global `shopify.saveBar` API for programmatic control over the save bar behavior. Programmatic control of the save bar is available as `shopify.saveBar.show()`, `shopify.saveBar.hide()`, and `shopify.saveBar.toggle()`.

**Note:** The save bar functionality requires the full App Bridge UI library to be loaded via a [script tag](https://shopify.dev/docs/api/app-home/using-polaris-components).

## Enable save bar on forms

Simply add `data-save-bar` to your `<form>` element:

```html
<form data-save-bar>
  <!-- Your form fields -->
</form>
```

* data-discard-confirmation

  boolean

* data-save-bar

  boolean

* onreset

  (event: Event) => void

* onsubmit

  (event: SubmitEvent) => void

### Examples

* #### Form with automatic save bar

  ##### Default

  ```html
  <form data-save-bar>
    <s-text-field
      label="Product Title"
      name="title"
      required
    ></s-text-field>

    <s-text-area
      label="Description"
      name="description"
      rows="4"
    ></s-text-area>

    <s-text-field
      label="Price"
      name="price"
      type="number"
      step="0.01"
      min="0"
    ></s-text-field>
  </form>
  ```

## Examples

Quick examples of using the save bar with forms.

### Form integration examples

Simple form with save bar

Basic form with automatic save bar functionality.

Programmatic save bar control

Using the programmatic API for custom save logic.

Form with onsubmit and onreset events

Using the onsubmit and onreset events to handle form submission and reset.

### Examples

* #### Simple form with save bar

  ##### Description

  Basic form with automatic save bar functionality.

  ##### Default

  ```html
  <form data-save-bar>
    <s-text-field
      label="Product Title"
      name="title"
      required
    ></s-text-field>

    <s-text-area
      label="Description"
      name="description"
      rows="4"
    ></s-text-area>

    <s-text-field
      label="Price"
      name="price"
      type="number"
      step="0.01"
      min="0"
    ></s-text-field>
  </form>
  ```

* #### Programmatic save bar control

  ##### Description

  Using the programmatic API for custom save logic.

  ##### Default

  ```html
  <form id="custom-form">
    <s-text-field
      id="settings-name"
      label="Store Name"
    ></s-text-field>

    <s-checkbox
      id="settings-notifications"
      label="Enable email notifications"
    ></s-checkbox>
  </form>

  <script>
    // Track form changes manually
    const form = document.getElementById('custom-form');
    let hasChanges = false;

    form.addEventListener('input', () => {
      if (!hasChanges) {
        hasChanges = true;
        // Show save bar programmatically
        shopify.saveBar.show({
          onSave: async () => {
            // Custom save logic
            console.log('Saving form data...');
            // Simulate API call
            await new Promise(resolve => setTimeout(resolve, 1000));
            hasChanges = false;
            shopify.saveBar.hide();
          },
          onDiscard: () => {
            // Reset form
            form.reset();
            hasChanges = false;
            shopify.saveBar.hide();
          }
        });
      }
    });
  </script>
  ```

* #### Form with onsubmit and onreset events

  ##### Description

  Using the onsubmit and onreset events to handle form submission and reset.

  ##### Default

  ```html
  <form
    data-save-bar
    onsubmit="console.log('submit');"
    onreset="console.log('reset');"
  >
    <s-text-field label="Name" name="name"></s-text-field>
    <s-button type="submit">Submit</s-button>
    <s-button type="reset">Reset</s-button>
  </form>
  ```

## Related

[API - Save bar](https://shopify.dev/docs/api/app-bridge/apis/save-bar)

[Guide - Form validation](https://shopify.dev/docs/api/app-bridge/guides/form-validation)

[Guide - Data management](https://shopify.dev/docs/api/app-bridge/guides/data-management)