---
title: "Design the signup form"
description: "Customize the 'Notify me' signup form and choose between a popup and an on-page layout."
url: https://help.stoqapp.com/back-in-stock/design-signup-form/
product: "Back in Stock"
section: "The Notify me widget"
last_updated: 2026-09-28
---

# Design the signup form

> Customize the 'Notify me' signup form and choose between a popup and an on-page layout.

Use this guide to customize the signup form customers fill in to join the waitlist for a sold-out product, its heading, description, fields, button, colors, and whether it opens as a popup or sits directly on the page. By the end, customers who click **Notify me** will see the exact form, fields, and messages you set here.

## Before you begin

| You'll need | Why |
|---|---|
| Access to the **Back in stock alerts** section | The signup widget editor opens from its **Settings** tab → **Signup widget** sub-tab |
| A paid plan (for some options) | Quantity selection, quick resubscribe, and the on-page form layout require a paid plan |

## Choose your setup

At the top of both the **Button** and **Signup form** tabs, a shared control lets you choose how the form appears to customers:

- **Button + Popup**: customers see a **Notify me** button and click it to open the signup form in a popup. This is the default and is available on all plans.
- **On page**: the signup form appears directly on the page, with no button and no popup. This requires a paid plan. STOQ shows a note that the on-page layout may need additional setup, with a chat link if you run into issues.

> **Note**
>
> Switching to **On page** turns off **Show product image** in Form content, since the on-page layout doesn't display it.

## What customers will see

- In **Button + Popup** mode: the customer clicks the **Notify me** button, and a popup opens with your header, description, optional product image, the email/SMS fields you've enabled, an optional quantity stepper, your terms message, and the submit button. After submitting, they see your success message.
- In **On page** mode: the same content appears directly embedded on the page, with no button, no popup, and no product image option.
- If a customer submits without entering required info, they see your empty-registration error message. If they try to register twice for the same product, they see your duplicate-registration error message.

## Set it up

On a phone, this menu is collapsed. In the **Shopify mobile app**, tap the **STOQ** logo at the top of the screen to open it, then choose the section named below. There is no hamburger icon. See [Finding the STOQ menu](https://help.stoqapp.com/general/getting-started-with-stoq/#finding-the-stoq-menu).

1. **Open Form content**

   1. In the left menu bar of the STOQ app, click **Back in stock alerts**.
   2. Click the **Settings** tab.
   3. Open the **Signup widget** sub-tab.
   4. Click **Customize widget**.
   5. Open the **Signup form** tab, then choose **Form content** from the sidebar.

   [Image: The Back in stock alerts Settings tab with the Signup widget sub-tab and the Customize widget button](https://help.stoqapp.com/images/general/customizewidget.png)

   [Image: The widget editor Signup form tab with Form content in the sidebar](https://help.stoqapp.com/images/general/signupform.png)

2. **Choose Button + Popup or On page**

   1. At the top of the panel, expand the form-appearance summary.
   2. Pick **Button + Popup** or **On page**.

   [Image: The collapsed Button + Popup form appearance summary card](https://help.stoqapp.com/images/general/option.png)

   [Image: Choosing between the Button + Popup and On page form layouts](https://help.stoqapp.com/images/general/chooseoption.png)

3. **Set the Header and Description**

   Enter the heading customers see at the top of the form (default: "Notify me") and the description text below it (default: "Get a notification as soon as this product is back in stock by signing up below!"). The description field supports HTML.

   [Image: The Header and Description fields for the signup form](https://help.stoqapp.com/images/general/header.png)

4. **(Optional) Show a product image**

   In **Button + Popup** mode, check **Show product image** to show the product's image on the form (desktop only). See [Show a product image on the signup form](https://help.stoqapp.com/back-in-stock/add-product-image-to-signup-form/).

   [Image: The Show product image checkbox in the Form content panel](https://help.stoqapp.com/images/general/image.png)

5. **Set colors and border radius**

   Set the form's **Border radius** (in pixels), its **Text** color, and its **Background** color.

   [Image: The Border radius, Text color, and Background color controls for the form](https://help.stoqapp.com/images/general/br.png)

6. **Customize the Terms message and Success message**

   The **Terms message** appears under the button (default: "Promise we won't spam. You'll only receive notifications for this product."). The **Success message** appears after a customer successfully signs up (default: "Thank you! We will notify you when the product is available.").

   [Image: The Success message and Font for button and form fields](https://help.stoqapp.com/images/general/success.png)

7. **Set the font**

   Enter a font name in **Font for button and form** (default: OpenSans). This applies to the form and the submit button inside it. It doesn't change the 'Notify me' button on the product page, which uses your theme's font. Save your changes and check your storefront to confirm the font loads as expected.

   [Image: The Font for button and form field](https://help.stoqapp.com/images/general/font.png)

8. **Customize the button**

   Under **Button**, set the **Button text** (default: "Notify me when available") shown inside the form, plus its **Text** and **Background** colors. This is the form's submit button, separate from the standalone "Notify me" button that opens the form.

   [Image: The Button text, Text color, and Background color controls for the form's submit button](https://help.stoqapp.com/images/general/butcust.png)

9. **Turn on quantity selection (optional)**

   Under **Quantity**, check **Let customers specify quantity** to let shoppers choose how many units they want to be notified about. When enabled, set the **Quantity field label** shown above the quantity stepper (default: "Quantity").

   [Image: The Let customers specify quantity checkbox under Quantity](https://help.stoqapp.com/images/general/quantity.png)

10. **Turn on quick resubscribe (optional)**

    Under **Quick resubscribe**, check the **Quick resubscribe** box to let customers who try to buy a sold-out product get redirected straight into a pre-filled "Notify me" popup with one click. When enabled, customize the **Banner text** shown in that flow.

    [Image: The Quick resubscribe checkbox and its description](https://help.stoqapp.com/images/general/quickres.png)

11. **Customize alert messages (optional)**

    Select **Show** under **Alerts** to edit the **Empty registration form error message** and the **Duplicate registration error message** shown when a submission fails.

    [Image: The Empty and Duplicate registration error message fields under Alerts](https://help.stoqapp.com/images/general/alerts.png)

12. **Customize the email field (optional)**

    Select **Show** under **Email field** to edit the **Email channel label**, **Email placeholder**, and **Email error** message.

13. **Customize the phone number field (optional)**

    Select **Show** under **Phone number field** to set the **Default country selected**, optionally restrict signups to that country or to a specific list of **Allowed countries**, choose whether the SMS field should appear before the email field, and edit the **SMS channel label**, **Phone placeholder**, and **Phone error** message.

    [Image: The Phone number field settings: default country, allowed countries, and SMS labels and placeholders](https://help.stoqapp.com/images/general/phfield.png)

14. **Save your changes**

    Save, then visit your storefront (or use the live preview) to confirm the form looks and reads the way you expect.

    [Image: Saving the signup form changes](https://help.stoqapp.com/images/general/save.png)

## Check your setup

1. Open a sold-out product on your storefront.
2. Confirm the form heading, description, and button text match what you set.
3. Submit the form once to confirm the success message displays.
4. Submit again with the same details to confirm the duplicate-registration error message displays.
5. If you enabled quantity selection, confirm the quantity stepper and its label appear.

## Troubleshooting

### Show product image is missing or greyed out

It's only available in **Button + Popup** mode. Switching to **On page** turns it off automatically, since the on-page layout can't display a product image.

### Quantity selection is greyed out

**Let customers specify quantity** requires a paid plan. Upgrade your plan to unlock it.

### A font change doesn't show up in the admin preview

Save your changes and check your live storefront. The admin preview doesn't always reflect font updates right away.

### On page shows an extra setup warning

STOQ flags that the on-page layout may need additional theme setup. Use the chat link in that message if you run into issues.

## Limitations

The Header, Description, Terms message, and Success message set here apply to every product's signup form; there's no per-product override.

## FAQ

### Can I show a different form heading or description for different products?

No. The Header, Description, Terms message, and Success message set here apply to every product's signup form; there isn't a per-product override.

### Does the Description field support formatting?

Yes, the Description field supports HTML, so you can add basic formatting or links.

### What happens if a customer tries to sign up twice for the same product?

They see your duplicate-registration error message instead of a second signup being created.

### Does changing the form settings affect customers who already signed up?

No. Editing the form only changes what future visitors see when they open it; customers who already signed up aren't affected.

### Where do I edit the form text in other languages?

Use the language icon next to the Form content title, which opens the Translator to edit translations for other storefront languages.

### How do I remove the bell icon in the signup popup?

The bell next to the form header is built into the popup and has no on or off setting. To hide it, add this to the widget's **Custom CSS** field:

```css
#form-Header-Icon { display: none; }
```

The **Custom CSS** field is in the widget editor under **Dev mode**, available on every plan. See [Advanced placement and custom CSS](https://help.stoqapp.com/back-in-stock/notify-me-dev-mode-css/) for how to open it.

## Related guides

- [Design the Notify Me Button](https://help.stoqapp.com/back-in-stock/design-notify-me-button/): Customize the button that opens this form.
- [Collect Customer Names](https://help.stoqapp.com/back-in-stock/notify-me-customer-name/): Add a name field to the signup form.
- [Mailing List Opt-in](https://help.stoqapp.com/back-in-stock/notify-me-mailing-list-optin/): Let customers join your marketing list when they sign up.
- [Double Opt-in](https://help.stoqapp.com/back-in-stock/notify-me-double-opt-in/): Require customers to confirm their registration by email.
- [Set Up Back in Stock Alerts](https://help.stoqapp.com/back-in-stock/set-up-back-in-stock-alerts/): The full setup walkthrough for Back in Stock alerts.