How to automatically add product to cart after customer fills out popup form (Javascript?)

Hello! I'm going to start selling Squarespace templates through my website but I keep getting stuck in how to best set up my web shop. 

I need to collect my customer's email + some other info to send them their template after purchase. I've linked a popup form to the Add to cart button which I want the customer to fill out. After they hit OK, the product should then automatically be added to the product cart but I can't figure out how to do this. I'm suspecting I need a Javascript code snippet for this? 

Can someone help me figure it out? 

So the process should be something like:
1. Customer hits the button "Add to cart".
2. Popup form is displayed
3. Customer fills out their information and hits "Add to cart" again
4. Product is added to cart
5. Customer is redirected to checkout page

The URL to the product page is: https://madewithindesign.co/freyja-squarespace-template

Thanks!

Have you considered a Custom Product Form?

If you add this form to the product itself, it will automatically appear when the user clicks Add to Cart. When the user submits the form, the product will be added to the cart, complete with the data in the form.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks for your suggestion! So the thing is that I've designed my own product page since the built-in automatic product page design is so limited. That's why I need custom code for this particular button.
Unless I'm missing something and there's a way to style the product page more than I've managed to. 

I want the design to look like the one I've linked in my post, but I don't think there's a way to style the automatic product page that way, right?

Omg yay that worked!!! 🙏🏽🥳 I had no idea about that solution! Thank you so much!