# Pop-up form on a New Button

This guide explains two easy ways to display a popup form button on your Shopify store:

* **Method 1:** Assign the popup form button to a specific page (automatic placement)
* **Method 2:** Copy the popup code and insert the button anywhere on your page (custom placement)

Choose the method that fits your needs.

### 🛠️ **Method 1 — Assign the Button to a Page (Automatic)**

✨ *Fastest & easiest — the app inserts the popup button for you.*

**Step to add form**

1\. Open the app > click **Forms** > open the form you want to display or create the new one

2\. Click **Publish** button at top right

<figure><img src="https://3488889492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEGgRVSDpMlcGFz1igK0s%2Fuploads%2FQobTicJnQs65kwPmPsqa%2Fimage.png?alt=media&#x26;token=0cf902c6-353c-4819-81b5-e3ee79513945" alt=""><figcaption></figcaption></figure>

3\. Select the display of the form – **popup**

<figure><img src="https://3488889492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEGgRVSDpMlcGFz1igK0s%2Fuploads%2FFjRZ5HfQVIL9qV8Rhdor%2Fimage.png?alt=media&#x26;token=13fabdf6-cae8-4556-98bc-4203e9170751" alt=""><figcaption></figcaption></figure>

📌 In the Publish window:

* Select your **theme**
* Select **Which page type you want to display**
* Under **Popup triggers**, choose **Form button**

<figure><img src="https://3488889492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEGgRVSDpMlcGFz1igK0s%2Fuploads%2Fyy7CaSZsabKDPPBTKewR%2Fimage.png?alt=media&#x26;token=7c49475c-8382-437b-b439-9d8c48fba14c" alt=""><figcaption></figcaption></figure>

4. Choose where to insert the button (Top / Bottom / Custom location)
5. Click **Publish** to apply.

Then click **View page** to see how it looks on the site

<figure><img src="https://3488889492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEGgRVSDpMlcGFz1igK0s%2Fuploads%2FZlCG3Mz4qJENWJm4L3Dv%2Fimage.png?alt=media&#x26;token=f0a7531c-b10c-418c-8092-7dff4f989dad" alt=""><figcaption></figcaption></figure>

***

### 🛠️ **Method 2 — Add Popup Button with Code (Custom Placement)**

🎯 *Use this when you want the button to appear at an exact position on your page.*

#### 📝 Step 1: Copy the popup form code

1\. Open the app > click **Forms** > open the form you want to display or create the new one

2\. Click **Publish** button at top right > select the display of the form – **popup**

<figure><img src="https://docs.powerfulform.com/~gitbook/image?url=https%3A%2F%2Fda76v9kevdkud.cloudfront.net%2Fwp-content%2Fuploads%2F2024%2F08%2F2024-08-27_11-12-12-1024x548.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=893fbb62&#x26;sv=2" alt=""><figcaption></figcaption></figure>

3\. On the popup, select the theme and the page you want to display the form on > Click **Go to theme** to enable the app embed to show form. If you enabled it, you can ignore the message

4\. In **Popup triggers** field, select **Form button**

<figure><img src="https://docs.powerfulform.com/~gitbook/image?url=https%3A%2F%2Fda76v9kevdkud.cloudfront.net%2Fwp-content%2Fuploads%2F2024%2F08%2F2024-08-27_11-11-41-1024x552.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=680340b0&#x26;sv=2" alt=""><figcaption></figcaption></figure>

5\. Select the position **Custom location > copy the short code of the form**

<figure><img src="https://docs.powerfulform.com/~gitbook/image?url=https%3A%2F%2Fda76v9kevdkud.cloudfront.net%2Fwp-content%2Fuploads%2F2024%2F08%2F2024-08-27_13-28-45-1024x669.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=ff80866f&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Example code:&#x20;

**`<button data-id=”MTIyNzg4″ class=”button btn globo-formbuilder-open”>Contact us</button>`**

#### 📝 Step 2: Add button code to the position you want

For example : I want to add button to product pages. \
1\. From Shopify admin → **Online Store > Themes > Edit theme**&#x20;

2. In the theme editor, open the **default** product template&#x20;
3. Add an **app section** > select **Powerful Form Builder**&#x20;
4. Paste the  button code to the app section/block&#x20;
5. Save.&#x20;

<figure><img src="https://3488889492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEGgRVSDpMlcGFz1igK0s%2Fuploads%2FEOEkxvV71jrbhQuNUYL4%2F2025-11-27_17-18-30.png?alt=media&#x26;token=c9873ca9-15e6-4a14-b15e-644e45d0578e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3488889492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEGgRVSDpMlcGFz1igK0s%2Fuploads%2FGbjaPZzLHoF1Hw6Fmudy%2F2025-11-27_17-17-59.png?alt=media&#x26;token=f537c782-3cda-4b1c-b607-2d7c5f699918" alt=""><figcaption></figcaption></figure>

***

### ✏️ Edit the Popup Button (Text & Style)

Once the popup button is added to your page, you can customize its **text** or **style** directly in the page editor.

#### ⚙️ Edit the Button Text

📝 *Change what the button says*

Example code:&#x20;

```
<button class="butt

on btn globo-formbuilder-open" data-id="MTI1ODc3">Open form</button>
```

Replace **Open form** with the button text you want. E.g. **Contact us**

Change to&#x20;

```
<button class="button btn globo-formbuilder-open" data-id="MTI1ODc3">Contact us</button>
```

#### ⚙️ Change the Button Style

🎨 *Adjust color, border, size, etc.*

The popup button automatically uses your theme’s default button style.

At the moment, the app does not include built-in styling options inside the editor.

If you want a custom style:

Our support team can style the button for you (colors, borders, font, spacing, hover effects, etc.).

📩 **Email:** <support@powerfulform.com>\
Please include:

* The page link
* The form ID
* A description or example of the style you want\
  (For example: “green background”, “rounded corners”, “larger button”, etc.)

We’ll be happy to customize it for you.

***

#### Need More Help?

If you still need assistance, please contact us at [**support@powerfulform.com**](mailto:support@powerfulform.com). Our team will be happy to help you resolve any issues or guide you further.