---
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

Quick examples of using the save bar with forms.

### Form integration examples

## 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)