Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
Improve User Experience with a Seamless Opt In Popup to Thank You/Offer Popup in Elementor

Improve User Experience with a Seamless Opt In Popup to Thank You/Offer Popup in Elementor

Here's another cool "Thank You" Page Popup tip to help improve your prospect's UX when signing up for one of your offers.

The idea is simple... the Popup is triggered through a (CTA) call to action. The first popup has an opt in form. Once the lead enters in their info and submits the form they are taken to a NEW "Thank You" popup (seamlessly) which includes a download OR offer link. Boom... that's it!

What you'll need

  • A WordPress website.
  • Elementor Pro plugin setup on your WordPress site.
  • Your download/offer link ready.
  • Some familiarity with Elementor Pro templates is helpful.
  • About 5-10 minutes.

We’re assuming you already have WordPress and the necessary Elementor plugins active and ready to go. If not please you may want to get your website setup first. Otherwise, much of this won’t make sense.

Let's get started

There are a total of three (four) main components for this project.

  1. The page containing the Call to Action (or button).
  2. Thank You Popup.
  3. Opt in Form Popup.
  4. Download/offer page link (optional).
NOTE: We will only be focusing on the two popup components.

Step 01 - Build Your "Thank You" Popup.

  • Create a new popup and give it a name you can easily recall. I always begin my naming with "POPUP - " to make them easier to find.
  • Update some basic Popup settings. You will use these same settings for the second popup as well. This helps create that "seamless" transition we're going for.
  • Add a new section. I'm using a 1 column section.
  • Drag in a "Header" widget and add your text.
  • Drag in a "Button" widget. Add in your offer link. Set the link to "Open in new window".
  • OPTIONAL: Add a "Close Popup" LINK.
    Although this is redundant I think it's good practice to make things as easy as possible.

    • Drag in a "Text" widget and type in "Close Popup".
    • Under link properties click "Dynamic".
    • Click the word "Popup" to reveal the settings.
    • Under the "Action" dropdown choose "Close Popup".
  • Publish your popup.
  • STEP

Step 02 - Build Your "Opt In Form" Popup.

  • Create a new popup and give it a name you can easily recall. I always begin my naming with "POPUP - " to make them easier to find.
  • Update the Popup settings to the same settings as the "Thank You" Popup.
  • Add a new section. I'm using a 1 column section.
  • Drag in a Form widget and style however you'd like.
  • Click "Actions After Submit". Under "Add Action" select "Popup".
  • OPTIONAL: Add a "Close Popup" LINK.
    Follow the instructions in "Step 01".
  • Publish your popup.

Step 03 - Link the Popup to your CTA (Call to Action).

  • Create a new page (or open up an existing one).
  • Add a button and link it to your New Opt In Popup.

Step 04 - Test it out.

  • Launch the page that has the link to the Popup and test things out.

Parting Thoughts

I think it’s important to provide a great user experience whenever possible. It shows that you actually care. At a time when most people are cutting corners it’s nice to be surprised every now and then with a website or landing page experience that is memorable, in a good way.

If you enjoyed this post please share or comment below!

Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
mw-04-10-2019-205-square
Fill out the form to get started.