# 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
3\. Select the display of the form – **popup**
đź“Ś In the Publish window:
* Select your **theme**
* Select **Which page type you want to display**
* Under **Popup triggers**, choose **Form button**
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
***
### 🛠️ **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**
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**
5\. Select the position **Custom location > copy the short code of the form**
Example code:
**``**
#### đź“ť 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**
2. In the theme editor, open the **default** product template
3. Add an **app section** > select **Powerful Form Builder**
4. Paste the button code to the app section/block
5. Save.
***
### ✏️ 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:
```
```
Replace **Open form** with the button text you want. E.g. **Contact us**
Change to
```
```
#### ⚙️ 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:** \
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.powerfulform.com/display-and-placement/pop-up-form-on-a-new-button.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.