Turn newsletter subscription form to a pop-up form with delay

Community resources General
1

Hi all, I would really appreciate someone to review what I have done, I am stuck.

On our site, we have a component called Newsletter which is a responsive design newsletter subscription form. I have put this component into a pop-up wrapper and want to make it a pop-up window that appears after 10 seconds of navigation and closes with a close button. I want the width of the component within the Pop Up wrapper to be 67%.

I have followed carefully instructions to create a div (Pop-Up Wrapper) right before the body and put the component inside. Then I have tried to follow animation instructions. But it doesn’t work.

I apologize, I am not a seasoned developer. Could anyone review what we have and suggest step by step, clear instructions ? Here is the rad-only link :

I would be immensely grateful !

2

Hi there!

To create a pop-up that appears automatically after 10 seconds, you’ll need to combine a pop-up element with custom code. Here’s how to set it up:

First, create your pop-up:

  1. Place your Newsletter component inside a Pop-up wrapper element
  2. Position the Pop-up wrapper just before the closing body tag
  3. Set the initial Pop-up wrapper display to “None” and opacity to 0%

Then, add this custom code to your page settings to trigger the pop-up after 10 seconds:

window.addEventListener('load', function() {
    setTimeout(function() {
        $w('.popup-wrapper').show();
    }, 10000);
});

Make sure to replace ‘.popup-wrapper’ with the actual class name of your Pop-up wrapper element. You can also adjust the delay by changing the 10000 value (milliseconds) to your preferred timing.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

For anyone coming across this later, SA5 modals is free, attributes-based, and support all of the mechanics automatically including timer triggers, button triggers, scroll triggers, etc.