How to Create Mobile Optimized Opt-in Forms

Mobile website traffic is increasing and will not go down anytime soon. So the question is: how do you convert those visitors into leads?

The answer is most certainly not:

  • Showing them a lightbox so big they have to scroll to find the opt-in or close button.
  • Not showing them any opt-in forms at all.
  • Shrinking your opt-in forms to fit smaller screens, making them difficult to read and impossible to fill out.

The real solution you need is to use mobile specific opt-in forms.

Discover the 3 levels of mobile optimizations available in Thrive Leads to create a pleasant experience for your mobile visitors.

More...

Level 1: Show or Hide Opt-in Form Types

Some opt-in form types are more suitable for mobile than others. 

Late last year, Google announced that it was going to start penalizing websites in the mobile search results, that were using "intrusive interstitials". These are opt-in forms (or other things such as banner ads etc.) that take up most of the above the fold space in mobile view. You can read all about it here.

In a nutshell, this means that Google doesn't like if the "real" content on the website is hidden or pushed so low that a user has to scroll to get to it.

It's important to note that this change only affects the search results on mobile devices.

You can still use a Scroll Mat, screen filler overlay or a big opt-in lightbox on your site in desktop view and use a more "mobile friendly" opt-in form type, such as a ribbon in mobile view.

This is very easy to do with Thrive Leads, simply set the toggle to "off" or "on".

IMPORTANT NOTE

If you have the same targeting for your desktop form and your mobile form, make sure to add them in the same lead group. Creating a "desktop lead group" and a "mobile lead group" will not work. One of both lead groups will never show. This is due to the lead groups display rules.

Level 2: Hide Opt-in Form Elements From Mobile View

Sometimes, you still want to show the same opt-in form type to desktop and mobile users, but you want it to be more compact on mobile.

This is possible by hiding certain elements on mobile or tablet.

This way you can have an image of an ebook on your desktop opt-in form but no image on the mobile version.

This option can be used on any element (text, button, section, content box, image,...) on your opt-in form.

To do this in Thrive Leads, click on the element you want to hide and go to the responsive menu. From there you can toggle the element "visible" or "hidden" for the different screensizes.

You would use the hide/show element for:

  • Having a different text on the button on mobile then on desktop (Eg. Tap here instead of Click here)
  • Hiding elements that aren't really necessary for conversions such as images, icons, or even a bullet point list.

Level 3: Mobile Specific Editing

The last and without a doubt most powerful level of mobile customization in Thrive Leads is the possibility to edit elements on mobile view only.

Mobile editing will work for all changes that are done from the sidebar. 

Simply go to the mobile (or tablet) view and start editing!

Mobile Specific

  • Margin & Padding
  • Font size & Line Height
  • Image size
  • Every change made from within the sidebar

Affects ALL Screensizes

  • Changing text
  • Inline font options (the options that appear when you click on a text element)
  • Actions and Animations

You can watch a full tutorial about these powerful mobile editing features here.

The Difference Between a Responsive Form and a Mobile Specific Form

Here's an opt-in form we found "in the wild", as seen on a desktop screen:

This is what the opt-in form looks like on mobile:

As you can see, the lightbox does adjust to fit the smaller screen. It's technically mobile responsive. But it sure isn't mobile friendly, because you have to scroll down to even see the opt-in form. 

What this opt-in form could look like when mobile optimized:

Here's what I did to make this opt-in form mobile optimized:

  • Hide the text element "FREE DOWNLOAD" on mobile
  • Hide the additional explainer text on mobile
  • Created a text element "FREE CHEAT SHEET" that's only showing on mobile (because that was the most important information from the now hidden explainer text)
  • Change margins and paddings to make everything look good on a small screen

Now It's Your Turn

Check your existing opt-in forms on mobile view and use the 3 levels of mobile optimization to make them perfectly mobile friendly on any screen size.

Any questions or comments? Please leave them below!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

27Comments

Hi Hanne,
Thank you for your tuttorials and all the good stuff Thrive Themes is creating for us. Since I started using the new Architect, everything is so easy to change for mobile users – including opt-in forms. Super time saver.

Stephen DB Reply

Thank you Hanne I am just in the middle of working out how thrive leads work, and this video along with all the others, the Thrive team have produced are very helpful.

As I am a new user to the thrive leads plugin, the power of it becomes more and more evident as I learn. Once again thank you.

Excellent tutorial Hanne, useful information and well explained. Many thanks.

Hi Hanne, thank you for this video. I am relatively new but very excited about using all of the Thrive Themes plugins. Right now I’m trying to understand how to integrate Thrive Leads with Thrive Architect. In the video you started out editing in TL, but then you were editing the form in TA and I’m not sure how you got there. I thought that all the form editing had to be done in TL and then the short code is added to TA – making the form uneditable in TA? Sorry… I’m still trying to learn how these two plugins talk. I guess my question is… How do you (or
CAN you) use
Thrive Architect to edit a form that you created in Thrive Leads? Thank you!

    Hanne Reply

    Hi Lisa,
    In the video I’m staying at all time in Thrive Leads… The Thrive Architect editor you’re seeing IS part of Thrive Leads so I understand your confusion :)
    Also, in the video I’m not using a shortcode form but a leadgroup. This means that you will set the targeting options on lead group level.
    So for example here, I’m creating a screenfiller and a ribbon that will show on all blog posts. For this, I never have to leave Thrive Leads.
    If you haven’t already, I suggest you have a look at the quickstart video for Thrive Leads which will clarify some of these points.

      acu.insights Reply

      Thank you for your informative explanation and link to the Knowledge Base. I think my confusion is when using the Thrive Architect LANDING PAGES, which already have awesome forms. I’m confused about how to integrate Thrive Leads with these pre-built forms, like the ones on the new Atomic Landing Pages. From what I currently understand (which is limited), I need to delete the form in the pre-built landing page and replace it with the short code from form I build in Thrive Leads? Is that right? Thank you for your patience as I get up to speed!
      PS If you ever want to do a video showing best practices on how to integrate Thrive Leads with one of the awesome pre-built landing pages in Thrive Architect, I’d be your first thumbs up! :)

      Hanne Reply

      Ok I see :)

      Yes that would be the way to go (I suggest you save the opt-in form from the landing page as a content template, that way you can use the same design when you start from a blank shortcode by simply loading the template ;-) )

      And as a matter of fact, I’m working on a tutorial Thrive Leads and landing pages so keep an eye open for that one!

Hello Hanne,
Well explained again, thanks!
I notice that a lot of new videos are coming out right now and all of them are very usefull.
What I am really hoping, wishing for is new, or improved themes from Thrive Themes for the blog part of my website. Any Idea when you are launching new themes :):):)

    Hanne Reply

    Hi Daphne,
    We’re starting on a new theme but I can not give you any ETA for that yet :)

Wanna thank you for all your tutorials. They are of great help

Stan G Reply

Hi Hanne,
Because I require additional input fields for my opt-in forms, I can’t use the Thrive Leads-Active Campaign API, but must instead use pasted HTML code. Do all the mobile design innovations work equally well when the autoresponder-Thrive Leads API is not used, or are there some limitations which we should be aware of?

    Hanne Reply

    Hi Stan,

    This should have no influence on the mobile editing features.

Stan G Reply

In my experience with both Content Builder and Thrive Leads (pre-Architect versions), my mobile designs displayed differently on not only on iOS vs Android operating systems, but also on different devices (possibly due to different screen sizes). I assume that Architect’s Responsive menu’s mobile view indicates how the page would appear with one specific screen height-width dimension. What are those height and width dimensions? Consequently, I assume that there’s no guarantee that the page would appear identically on a variety of mobile devices. If so, the prudent designer is well advised to continue to test pages on a variety of iOS and Android devices and adjust individual pages to display reasonably well on a ‘happy medium’ of devices. Is this correct?

faydeekhan Reply

When I try to put styled list or video with thrive architect, it shows Time and doesn’t save.
I use chrome and windows. Tried with other browsers but not working.

    Hanne Reply

    Hi,
    Could you please open a support ticket on the forum if this problem persists? They will be able to help you out :)

Milaua Reply

how can I decrease the letter spacing in the styled list?

    Hanne Reply

    Hi Milaua,

    You can use the “list item spacing” on the complete “styled list” element although the slider doesn’t go under zero, you can add a negative input there if necessary.

Wow, this is incredible! Thanks a lot Hanne for showing it, I had no idea Thrive Leads could do that! You guys keep improving on your awesomeness :)

the best themes in the world, I simply love, 90% of my projects I use, they are to be congratulated!

AMAZING TEAM…
Can i give you a suggestion?
probably now it is good to integrate or make a video about the new “send to messenger” plugin of facebook… The new era is coming

rgarciazama Reply

Great article, very good indeed other things to be measured are the data examples in my country Venezuela, people connect on the internet in 70% by their mobile device, 3% with tablet and the remaining 27% by desktop pc and laptop, the sad thing is that the vast majority is in some of these social networks all the time Youtube, Instagram and Facebook