# 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. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-76877a31f95af7800a21a38f78df9751a070dae7%2F1-1-scaled%20\(1\).jpg?alt=media) ### 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.
### **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. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-2ae51fa28c490307428e51bc5c919295b696d0aa%2F01-1.gif?alt=media) 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. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-13967e0c11fe4118f237c2311e5c3f707da40026%2F01-1.png?alt=media) ### **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. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-999e1fa1dd7cb353f14ba22bd8a44d0d14e0890d%2F02-1.png?alt=media) The parameters in the **General** and **Styling** tabs are specific for this element. #### General configuration |

Button Type: You can select:

- Text only

- Text with icon

- Icon only

| ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-52807210b12c481a8a666648f634cbdb4139a4db%2F03-1.png?alt=media) | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **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. | ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-6f9da2d9c9599d79af8486153433c60f4b71d1b8%2F04-1.png?alt=media) | | **Button Text:** Name of the button. | ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-8c6ca269d4ddbf8dd8faaaa44bf985ab0dde23e6%2F02-1.gif?alt=media) | | **Enable Full Width**: You enable to show the button full width by select **Yes** or **No** | ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-db6efc11204a90c6f85b8a662d00a1256c77ba14%2F03-1.gif?alt=media) | |

TRACKING
This is a place to set up:

- PageFly events. Check out this article to learn more about it.

- Google Analytics event to your GA account. You can find out how to set it up here.

- Facebook Pixel: when a customer clicks on the element. You can read more here.

| ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-bad0a8a23b80a0d5aced19df023089d4a5005497%2F05-1.png?alt=media) | ***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/)