# Customer form button

### **About Customer Form Button element**

The **Customer Form Button** element is designed to help you customize your [**Customer Form**](https://help.pagefly.io/shopify-elements-customer-form/). Please note that the ***Customer Form Button*** *element can't live outside a Customer Form*. Make sure that you have dragged a Customer Form element into the layout **before** adding the **Customer Form Button** element.

All data collected by the Customer Form will show up in the [Customers](https://www.shopify.com/admin/customers) of your Shopify admin.

![](/files/skaH3ztM7cplooVNs0WK)

### How To Access Customer Form Button Element

To access the feature of the Customer Form Button element, follow these steps:

* Step 1: Click on the “Element” button icon.
* Step 2: Switch to the “Shopify” tab.
* Step 3: Scroll down to the “Form” section and select the “Customer form button” option.
* Step 4: Drag and drop the “Customer form button” element into the page editor and then start using it.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcP_eqa5b3TVf3a5mApVy5UN8Lm636pjeJolLxLuDnYHmugMDvPIkrnXTPeC3RDmSzciQkLOEsK2OaL2r4_TOAi-KJ8vsnEWIzPAXsC4kukgNN2U1-jCov5yCz41tAY51pSNgPI75bMiTljC3-x1zG4BWE?key=Z2isJQhtDRVdfNWh7Wbigw" alt=""><figcaption></figcaption></figure>

### **Customer Form Button element configuration**

This element comes with plenty of parameters allowing you to fine-tune content appearance to reach the best possible conversion rate.

Select the element in the layout to see its parameters.

![](/files/lxT2a153RIou1uhpEDtT)

The **Customer Form Button** element comes with multiple variations covering most of your needs but we will continue to add more variations to help you save time.

![](/files/d7zFzppPBuUMaeEfpuNl)

### **Customer Form Button element configuration**

This element comes with plenty of parameters allowing you to fine-tune content appearance to reach the best possible conversion rate.

Select the element in the layout to see its parameters.

![](/files/XBtMkB2Hsi7S9TLIs8Fl)

The parameters in the **General** and **Styling** tabs are specific for this element.

#### General configuration

| <p><strong>Button Type:</strong> You can select:</p><p>- Text only</p><p>- Text with icon</p><p>- Icon only</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](/files/ujV8oKoHmt5GXJVUZ2iM) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| **Icon Position**: If you choose to show the icon, you can choose its position from here, either on the Left, on the Right, or on the Top of the Button Text.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | ![](/files/1TTOfLZdn6QPipdpvxSJ) |
| **Button Text:** Name of the button.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | ![](/files/ZseEkVVGU9wRw8gZQ3NJ) |
| **Enable Full Width**: You enable to show the button full width by select **Yes** or **No**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ![](/files/xeVoVVbKKPXPP7CI4gke) |
| <p><strong>TRACKING</strong><br><em>This is a place to set up:</em></p><p>- <strong>PageFly events</strong>. Check out this article to <a href="https://help.pagefly.io/manual/page-analytics/">learn more</a> about it.</p><p>- <strong>Google Analytics</strong> event to your GA account. You can find out how to set it up <a href="https://help.pagefly.io/documentation/pagefly-integrate-with-google-analytics-to-track-my-page/">here</a>.</p><p>- <strong>Facebook Pixel:</strong> when a customer clicks on the element. You can read more <a href="https://help.pagefly.io/documentation/pagefly-setup-facebook-pixel-to-my-page/">here</a>.</p> | ![](/files/Y8nC3ASbOIX0wVrw1IMc) |

***You can get further information about VISIBILITY, ATTRIBUTES, ANIMATION parameters*** [***here***](https://help.pagefly.io/manual/elements-general-settings/)

#### Styling configuration

***You can check more information about OVERALL, SPACING, TYPOGRAPHY, BACKGROUND, BORDER, DISPLAY, CUSTOM CSS in the Styling tab*** [***here***](https://help.pagefly.io/manual/elements-style-settings/)


---

# 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://help.pagefly.io/page-structure-and-elements/shopify-elements/form/shopify-elements-customer-form-button.md?ask=<question>
```

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.