Link a button to a form

[albaq]

I want to link a button on my page to a pop-up form for our visitors to fill in. How can I do that? 

I currently use the forms app on Shopify.

[zaczee]

Hi,

Can you let us know which page do you want the form to link

[albaq]

I want the button to link to a form. And I want that form to collect emails. 

[zaczee]

HI,

Are you using any apps to create forms or you need to code to create the popup and form

[albaq]

I currently use the forms app on Shopify.

[BSS-Commerce]

Hi @albaq ,

You can try this way:

Step 1:  Hide your form by adding the following code to the file (theme.css, global.css, ...)

.your_form{
  display:none;
}

Step 2:  Add this code to your js (global.js or theme.js, ..)

const btn = document.querySelector(".your_button");
const form = document.querySelector(".your_form");
const close_form = document.querySelector(".your_close_form");
if(btn){
  btn.addEventListener("click" ,() => {
    form.classList.add("active");
  })
}
if(close_form){
  close_form.addEventListener("click" ,() => {
    form.classList.remove("active");
  })
}

Step 3: Add the following code into the css file (theme.css, global.css,...) to display the form after clicking the button

.active{
  display:block!important;
}

Hope it helps @albaq !