# Doc: https://www.hipaatizer.com/docs/tutorials/add-form-to-shopify-product-page

> LLM view for https://www.hipaatizer.com/docs/tutorials/add-form-to-shopify-product-page

This file contains all documentation content in a single document following the llmstxt.org standard.

## Add a HIPAAtizer Form to a Shopify Product Page

<meta name="robots" content="noindex" />

You can collect PHI directly on a Shopify product page when a customer must provide prescription information before adding a product to the cart.

In this guide, you will embed an existing HIPAAtizer form on a Shopify product page and automatically submit it when the customer clicks **Add to cart**. If any required fields in the HIPAAtizer form are missing, the form will display validation errors and Shopify will block the add-to-cart action until the form is valid.

:::::warning[IMPORTANT]
This guide is written for the **Dawn theme**.

If you are using a different Shopify theme, file names and JavaScript entry points may differ. You may need to:
- Modify a different template or JavaScript file
- Adjust selectors used for the **Add to cart** logic
:::::

## What this setup does

- Embeds a HIPAAtizer form (iframe) on a Shopify product page
- Intercepts the **Add to cart** action
- Uses `postMessage` to submit the embedded HIPAAtizer form
- Waits for a response containing a `submissionUrl`
- Stores the submission URL in Shopify cart attributes under `HIPAA URL`
- Continues with the normal Shopify add-to-cart flow once the form is valid

## Prerequisites

- A published HIPAAtizer form embedded on the product page as an iframe
- Access to Shopify theme code
- The **Workflow ID** (Form ID) of your HIPAAtizer form
  *(available in **Form Settings → Integrations** in the HIPAAtizer dashboard)*

## Step 1 -- Hide the Submit button in the HIPAAtizer Form Builder

1. Open your form in the **HIPAAtizer Form Builder**
2. Click **Edit** on the **Submit** button element
3. Enable **Hide Button**
4. Click **Save**
5. **Publish** the form so the changes apply to the live embed

This ensures the form can only be submitted programmatically from Shopify.

![HIPAAtizer form builder with the Submit button settings open and the Hide Button option enabled](https://www.hipaatizer.com/docs/assets/images/image-1-823de033ce72193e0018201dcc724a10.png)

## Step 2 -- Open the Shopify theme code editor

1. In Shopify Admin, go to **Online Store → Themes**
2. On your active theme, click **Edit code**

## Step 3 -- Intercept Add to cart and submit the HIPAAtizer form (Dawn theme)

In the Dawn theme, product submission logic lives in `product-form.js`.

### 1. Open the product form script

Open:

```
assets/product-form.js
```

### 2. Make the submit handler async

Find the `onSubmitHandler(evt)` method and make it async:

```js
async onSubmitHandler(evt)
```

### 3. Inject the HIPAAtizer submission logic

Inside `onSubmitHandler`, locate the following guard clause:

```js
if (this.submitButton.getAttribute('aria-disabled') === 'true') return;
```

Immediately **after** it, add the code below.

> Replace `FORM_ID` with your HIPAAtizer **Workflow ID**.

```js
const res = await fetch('/cart.js');
const cart = await res.json();
const hipaaURL = cart.attributes?.['HIPAA URL'];

if (!hipaaURL) {
  const FORM_ID = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';

  const hipaaFrame = document.getElementById(`${FORM_ID}-iframe`);
  if (!hipaaFrame?.contentWindow) return;

  hipaaFrame.contentWindow.postMessage({ submitForm: true }, '*');

  const submissionPromise = new Promise((resolve, reject) => {
    const listener = (event) => {
      if (event.data?.isFormValid === false) {
        window.removeEventListener('message', listener);
        reject('Form is invalid');
      }

      if (event.data?.isFormValid && event.data?.submissionUrl) {
        window.removeEventListener('message', listener);
        resolve(event.data.submissionUrl);
      }
    };

    window.addEventListener('message', listener);
  });

  const submissionUrl = await submissionPromise;

  await fetch('/cart/update.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      attributes: {
        'HIPAA URL': submissionUrl,
      },
    }),
  });
}
```

![Shopify product-form.js code with the HIPAAtizer submission logic injected into the onSubmitHandler method](https://www.hipaatizer.com/docs/assets/images/image-3a8b28af9d5954519ab5f1fe3a556f41.png)

### How this works

- Checks whether a HIPAAtizer submission URL already exists in cart attributes
- If not present:
  - Triggers the embedded HIPAAtizer form submission
  - Waits for validation and a `submissionUrl`
  - Stores the URL in the Shopify cart under `HIPAA URL`
- Allows the original Shopify submission flow to continue

## Step 4 -- Hide the "Buy it now" button

If the **Buy it now** button is enabled, customers can bypass the Add to cart flow and skip the form entirely.

To prevent this:

1. In Shopify Admin, go to **Online Store → Themes → Customize**
2. Open the product template
3. Disable **dynamic checkout buttons** (label may vary by theme)

## Notes

- If you use a theme other than Dawn, apply the same logic in the theme's equivalent product submission handler