Embed link into a button to an Elfsight signup form

Store Design
, ,

Topic summary

A user is integrating an Elfsight signup form for a contest into their Shopify store and needs help linking buttons to open the form as a modal popup.

Initial Request:

  • Link a button in the second image banner to trigger the Elfsight signup form
  • Center-align text within the popup form instead of left-aligned

Solution Provided:
A JavaScript code snippet was shared to:

  • Add a click event listener to the primary button that prevents default behavior and opens the modal
  • CSS code to center-align text in the form container

Follow-up Issue:
The first button now works correctly, but the user needs to apply the same functionality to another button in an ‘image text’ container below. They’re asking if there’s a simpler way to link the form through theme options or how to replicate the solution for the second button.

Status: Ongoing - awaiting guidance on implementing the modal trigger for the additional button location.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Can anyone help me with the following:

I created a form with the help of the App Elfsight for people to enter a form to sign up to a contest.
I would like the button on the website in the second image banner to link to the same signup form to enter the contest. How do I best do this?

Additionally I would like the text in the pop up form to all be centred in the middle rather than aligned on the left.

The website:
https://of8tzo0kxpz2nbf2-69874974986.shopifypreview.com

Thanks in advance

2

Hi @AYLD

You can add the following code to the javascript code to open the modal instead of sending email

document.querySelector(".button.button--primary").addEventListener("click",(e) => {
	e.preventDefault();
	document.querySelector(".eapps-form-layout-floating").classList.add("eapps-form-floating-visible")
})

If you want to center the text, add the following code to the css file

.eapps-form-container {
    text-align: center;
}

Hope it helps @AYLD

1 Like
3

Hi @BSS-Commerce ,

Thanks so much! That did the trick for the first button in the image banner, however how do I get to do the same for the button in the ‘image text’ container below? Is there a way to link the form simply in the theme option?
Here’s a preview link:

https://0wy1xe6ykihurgfg-69874974986.shopifypreview.com

Thank you!