From Static to Stunning: Is This New Trend the End of Boring Opt-in Forms?

Author 
Hanne   63

I have a confession to make…

I’m a rare breed of human. The kind that actually likes it when a lightbox pops up on the screen.

Maybe I'm a geek or maybe it's a job-induced condition.

But I like to study opt-in forms.

More...

No, I said HUMAN breed!

I love to:

  • Look at the design and form type.
  • See what opt-in offer is advertised.
  • Read the copy and notice if I’m compelled to opt-in (or not)

It’s amazing how much one can learn from observing and studying what others are doing.

Now, I do realize that not everybody gets excited looking at opt-in forms…

Don’t worry I got you covered!

Instead of abusing the “Print Screen” button to capture every interesting opt-in form you come across (or is that something only I do?), you can read this article and start optimizing and testing your own opt-in forms within minutes.

And it’s getting better: Among my printscreens… guess what I discovered - A new emerging trend!

Opt-in Forms that Captivate Your Attention

You can have the most compelling opt-in offer or the best headline copy in the world but if nobody is looking at your opt-in forms to begin with, nothing happens.

No subscribers.

You know what catches the eye on a webpage? Moving elements.

That’s why animations on an opt-in form are a highly effective way to get the attention of your visitors.

Here are some of the examples I came across :

Copyhackers: Animate the Desired Action

Copyhackers uses color animation on their two-step lightbox opt-in form. This immediately grabs the attention and makes clicking on the YES button more compelling.

GoodUI: Make the Opt-in Form Unignorable

GoodUI uses 2 types of animations on their footer opt-in form.

The red bar animation occurs on page load. It grabs your attention when arriving on the website and makes you look a first time at the opt-in form. The shaking opt-in form reminds you 20 seconds later there is an opt-in form at the bottom of the page.

Groove: Show Off Progress

At Groove they have a challenge to hit a $500K monthly revenue.

They compel you to opt-in promising they’ll share everything they learn on this journey. The animated progress bar on the opt-in form shows the progress they’re making. This opt-in form is shown on a Scroll Mat on their blog homepage.

Swiped: Make It Simple, Stupid

Another example is the opt-in form on Swiped.co. This opt-in is placed at the end of the content. When the form comes into viewport, an animation occurs that puts your cursor in the name field of the opt-in form.

Without having to move your mouse, you can start filling out the form immediately.

Coschedule: Show They’re Almost Done

The last example I want to share with you is a more subtle animation. On the Coschedule lightbox pop-up, the filling of the progress bar is constantly moving.

It’s screaming “You’re halfway there, don’t stop now”.

The majority of these examples come from websites with HUGE email lists.

Coshedule claim a whopping 42,183 subscribers acquired over a one-year period. Groove was able to double their subscribers to 50,000 over the span of 6 months. As for Copyhacker, they have daily sign-ups in the triple digits range.

These major players are using these methods with great success.

Maybe you should too?

From Novelty to Oversight in the Blink of an Eye

When the first lightboxes popped up the conversion rates were amazing. It was something new and people weren’t used to this interruption.

While they are still highly effective, we saw that adding an entry animation on the pop-up boosts the conversion rates.

Why?

Because this is something your visitors rarely see!

But they will get used to it… and then the novelty effect will drop. Once again, we will need to come up with a new way to grab the attention.

Animated opt-in form are the novelty right now. To use this to your advantage, you should implement and test this as soon as possible!

5 Ways to Add Animations to Your Opt-In Forms With Thrive Leads.

If you are a ThriveLeads customer, you already have several options to add animations on your opt-in forms. 

Let me show you how to implement my 5 favorites.

Add a Progress Bar to Your Opt-in Form

You can use a progress bar to visually represent your visitor advancing through the subscription process. Or show any other progressive increase such as Groove’s monthly revenue goal.

Show a Dynamic Subscriber Counter

Showing the number of subscribers is what’s called “social proof”. In general, people don’t like to be the first to try something. Seeing many people already subscribed to this newsletter, will help to convince new visitors to join.

To show the number of subscribers on your opt-in form, you can add an animated counter.

Animate Your Text With TypeFocus

With the TypeFocus feature you can animate the text of your opt-in form. This allows you to convey your message in a highly effective way.

Add a Countdown Timer on Your Opt-in Form

Sometimes, your opt-in form can be time sensitive. Either because you’re taking away the opt-in offer or because you’re advertising a timely event such as a live webinar.In both cases, adding a countdown timer to your opt-in form can boost your conversions and emphasize on the urgency of the offer.

Use Events to Add Mouseover Animations 

With the mouseover trigger, you can animate various elements such as the image of your ebook. This can be useful when you want your visitors to pay attention to your in-content or widget opt-in forms without having a constant animation on the page.

Now it’s your turn!

  • ​Get ThriveLeads if your not a customer yet.
  • Create a clone of your current opt-in form and add one of these animations. 
  • Let me know in the comments below which one you’re testing and what the results are.

Also, let me know if this type of “Trend Report” article is useful to you and if you would like to see more of them.

by Hanne  November 20, 2015

63

Enjoyed this article ?

You might also like:

Leave a Comment

  • Love, love, love Thrive Leads.
    Are you ever going to have an “end test and do nothing” option?
    I hate setting the tests and then … oops! I forgot to do something, and then having to reset it all again after being forced to choose a winner. It would be better to have an “end test and just stop” option too?

      • Hi Hanne,
        the feature Tao mentions is something I really like as well.

        A lot of times, I have forgotten something in a test, and I have to reset the whole test.

        Pausing a test (just showing the original) and editing the alternatives, and resume the test would be very much appreciated.

  • How do I Illuminate a button and/or add the little guy like copyhackers? Also it would be very nice if you could add the option to remove the exit cross in the upper right and instead “force” the customer to say yes or no. Also like copyhackers 😉

    • Anders I created an animated GIF and plan to use that as a button linking to opt in form or download page. You probably already knew that hack, and I’m certain there’s a better method but I think it’ll work well enough.

    • Hey Anders, you cannot do exactly the same as the Copyhackers one for the moment and William had a suggestion for the GIF which you can test 🙂
      And the cross is still there actually (just has been cropped in the GIF 🙂 )

  • You guys are so amazing, I love every time I get an email from Thrive Team.
    Using your tools, I can be very creative in my sites…conversion rate is increasing an it’s fun to test new stuff.

    Using Thrive Leads I found out that the ribbons and Focus area are converting more in my sites….even better than lightboxes. Lateral Widgets don’t convert at all, no matter how good they look, I think people create a automatic blindness for sidebars.

    Thanks for this post Hanne… now I have a lot more ideas to play with.

  • Great features, I can’t wait to implement these. You’ve easily the best lightbox out there, even before these features!

  • Yet another set of features I didn’t know about. Very inspiring, I love Thrive Leads.
    I too would like to know about the little guy. Can you add any kind of animated gif maybe?

    • Hi Kim,
      Not sure. Gif might work but I would rather test different opt-in forms than spend too much time tweaking this 🙂

  • Great timing as I work on a redux of my site! Thanks for reminders of what a great tool we have in Thrive!

  • Thrive Leads is getting so far better than anything out there today and every week I see amazing new features.
    I sometimes completely forget some of the features and this article highlights and brings it back to memory, those which I have not used.
    Keep up the amazing developments –
    Thanks again for probably the best investment I have made thus far for my website platforms.

  • Awesome. Thanks Hanne for this and will put into effect. Had not animated my opt-in forms. Interested to test and see results. And yes, I find these trend reports and tutorials helpful.

  • Love your continuous updates, tutorials and overall insights you guys constantly put into your products and blog posts.

    I most liked in the progress bar, as I feel (psychologically speaking) it subconsciously makes a person somewhat feel obligated to ‘finish’ a task that is not completed, thus visually prodding a visitor to fill in the form.

    I truly feel the countdown opt-in has its advantages and can be used in certain instances, thus having it be a great option. However for me personally, I would never use it, as I feel it looks extremely gimmicky, non-authentic, and VERY IM-ish, since it’s been around for ages.

    Having said that, I can’t express enough how darn pleased I am to have discovered you guys back in late 2013. You take ‘awesome’ to a new level and thank you sincerely for everything you do!

  • Hi Guys,

    Although I’ve been wanting to get Thrive Leads for quite some time, I’ve put it off due to other obligations, but this post has made me decide to finally get it (which I should have done long ago).

    However, is it possible for me to buy this separately so I’m not committed to getting the entire package you currently are now promoting? I clicked on the link for Thrive Leads and when clicking through to purchase, it shows I need to buy all the products at the current price.

    Even though your current price is great for all your products/membership, but I don’t need additional products other than what I’ve already bought from you – except Thrive Leads.

    Thanks Guys!

  • I’m just the opposite with animation. It annoys me. When I see something moving I can’t close it fast enough. I rarely even read the offer. I just look for the X or click to close. The GoodUI example makes me think of those nagging ads usually trying to sell insurance. I wouldn’t want my opt-in form to get that association. I prefer the very simple ones that in a second or two you know what it is and what to do. Not trying to follow the jumping text or bouncing box 🙂

  • Animations can be great in the right place. Test, and follow the conversions!

    Thrive is amazing. My favorite emails in my inbox are those from Thrive. You guys are awesome. Just awesome. Thank you!

  • Great post! Question: Is it possible to change the animation styling of the progress bar? For instance, to have something more like the Coschedule example you gave above? I prefer that style to the solid and quickly static progress bar shown in the tutorial video. Either way, though, great stuff!

    • Hi Daniel, no for the moment that is not an option that’s available. I invite you to start by testing the progress bar from the tutorial. If this gives you a boost in conversions, you might try finding another solution to have the other one (maybe a gif instead of a dynamic animation?)
      But the thing is; the biggest change (and thus biggest chance to see a real boost in the conversion rates) will be between testing with and without the progress bar on your opt-in form. After you test BIG you can start tweaking (test different progress bar colors, etc.) but these tests will probably make less of a difference 🙂

  • Kool…

    There’s a lot of talk about using gif’s for animation.

    Does anyone know of a good source to create gif’s or a tutorial on them.

    I know there are a million sites that will do this for free which means it’s going to “cost” you in other ways.

    What I like the most about this community is being able to get ideas and suggestions from others I trust that have already had experience and are not trying to “get” something from me.

    Looking forward to anyone’s suggestions on gif creation.

    PS I use paint.net for my graphics program if anyone knows how to make a gif using paint that would be awesome.

  • These are great examples. It’s quite telling to see that these excellent brands (who would arguably get my email anyway) invest so much thought into the design details of their opt-ins.

    Thanks!

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >