How can I link a page button to a pop-up form on my site?

[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 ! 

[parisiem]

Hi there,

I saw your solution for linking a page button to a pop-up form and I'm hoping you might be able to help with a similar issue I'm trying to solve.

I want to add a button on the product page that says "Add a gift message 🎁" which links to a pop-up form where people can add or edit a gift message that I will hand write with their order. There's a Shopify app that does something similar but it emails the gift recipient instead of just adding a note to the back end of their order.

Is this something you might be able to help with?

Many thanks,

Emma