Is there a popup feature that captures emails which gives access to a page once the email is submitted?

I have on my website a free photography tutorials section but when they go to the page I want a popup to appear which they have to input their email to get access to the free content. What would be the best way to go about this?

You want

Users access page > Show a popup (users can't close it) > Users need to enter an email > Click Submit > Close popup & users can see page content?

33 minutes ago, tuanphan said:

You want

Users access page > Show a popup (users can't close it) > Users need to enter an email > Click Submit > Close popup & users can see page content?

Yes that's exactly correct. Is there a way to go about that? Thank you for getting back to me.

22 hours ago, ekraja said:

Yes that's exactly correct. Is there a way to go about that? Thank you for getting back to me.

You can use Promotional Popup, then we can use code to hide it on other pages, show it on your specific page only + use code to remove Close button.

With Promotional Popup, you can enable newsletter form, then users can enter their email

Access Marketing > Promotional Popup to enable it first

48 minutes ago, tuanphan said:

You can use Promotional Popup, then we can use code to hide it on other pages, show it on your specific page only + use code to remove Close button.

With Promotional Popup, you can enable newsletter form, then users can enter their email

Access Marketing > Promotional Popup to enable it first

Can you provide the code to use and I can give it a try. Also will the code disable the ability to close the popup by just clicking off of it? Right now I think you can click the X or click off anywhere on the site and it removes the popup.

4 hours ago, ekraja said:

Can you provide the code to use and I can give it a try. Also will the code disable the ability to close the popup by just clicking off of it? Right now I think you can click the X or click off anywhere on the site and it removes the popup.

You can add it & share url, I can check easier. I Don't remember X icon code id

17 hours ago, tuanphan said:

You can add it & share url, I can check easier. I Don't remember X icon code id

Ok I have add it to https://www.fraseralmeida.com/free-lessons

On 9/20/2023 at 8:48 AM, ekraja said:

Ok I have add it to https://www.fraseralmeida.com/free-lessons

You can add this code to Website > Website Tools > Custom CSS

a.sqs-popup-overlay-close {
    display: none !important;
}

.sqs-slice-group.group-copy.copy-layer-background:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
}

.sqs-slice-group.group-copy.copy-layer-background>div {
    z-index: 100 !important;
    position: relative;
}

This code will remove Close Button + Add an overlay behind Popup. Need to add an overlay because currently users can click X or click outside the popup to close it. Using Overlay will prevent this behavior.

13 hours ago, tuanphan said:

You can add this code to Website > Website Tools > Custom CSS

a.sqs-popup-overlay-close {
    display: none !important;
}

.sqs-slice-group.group-copy.copy-layer-background:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
}

.sqs-slice-group.group-copy.copy-layer-background>div {
    z-index: 100 !important;
    position: relative;
}

This code will remove Close Button + Add an overlay behind Popup. Need to add an overlay because currently users can click X or click outside the popup to close it. Using Overlay will prevent this behavior.

That works really good, I have implemented it on my website. Is there anyway that the popup is not behind the overlay so that white rectangle looks clear and stands out?

I just realized, if you reload the page, the popup will disappear. Can you check again? I will think of another way to create a popup

9 hours ago, tuanphan said:

I just realized, if you reload the page, the popup will disappear. Can you check again? I will think of another way to create a popup

Yes you are correct. If the page reloads the popup disappears.

On 9/22/2023 at 10:18 AM, ekraja said:

Yes you are correct. If the page reloads the popup disappears.

@tuanphan Any luck with coding for a different popup which addresses those points discussed?

15 hours ago, ekraja said:

@tuanphan Any luck with coding for a different popup which addresses those points discussed?

I'm still testing this

You can remind me if you don't see a response in the next 48 hours.

@tuanphan Just following up again to see if you were able to figure any other solution?

@tuanphan Where you able to figure out anything?

Sorry for delay. Too many messages, missing your.

You try checking demo

https://tuanphan3.squarespace.com/popup-1?noredirect

pass: abc

2 hours ago, tuanphan said:

Sorry for delay. Too many messages, missing your.

You try checking demo

https://tuanphan3.squarespace.com/popup-1?noredirect

pass: abc

I looks good but if I click anywhere outside the popup then it disappears.

On 10/6/2023 at 8:31 AM, ekraja said:

I looks good but if I click anywhere outside the popup then it disappears.

Fixed. You try checking it again

3 hours ago, tuanphan said:

Fixed. You try checking it again

That works perfect, what's the code so I can add it to my website?

On 10/11/2023 at 11:36 PM, ekraja said:

That works perfect, what's the code so I can add it to my website?

@tuanphan Do you mind sharing that code?

Sorry. I used this free tool: 

https://elfsight.com/popup-widget/

and this code to Custom CSS to disable click outside popup

/* disable elf popup outside click */
 .Popup__PopupContent-sc-10hgtxd-3.eLmrKa:after {
    content: "";
    background-color: rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Note: If the code doesn't run, you can share link to the page where you use popup, I will give code