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.
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".
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!
Affects ALL Screensizes
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!
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.
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.
Stoked to hear that Stephen!
Excellent tutorial Hanne, useful information and well explained. Many thanks.
You’re welcome Helen
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!
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.
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! 🙂
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!
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 :):):)
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
Happy to hear Tom!
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?
This should have no influence on the mobile editing features.
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?
I wrote this article explaining some of the technicalities of mobile editing. In short: it’s the width of the viewport that determines which styles are shown. The exact dimensions are in the article linked above.
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.
Could you please open a support ticket on the forum if this problem persists? They will be able to help you out 🙂
how can I decrease the letter spacing in the styled list?
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 🙂
You’re welcome Mary!
the best themes in the world, I simply love, 90% of my projects I use, they are to be congratulated!
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
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
Thanks for sharing
Very helpful information I promise to get it a try thank
I loved this information on opt-forms and it brings up a question. How do you add extra question fields to your opt-in form? Sometimes you need more than just name and email. Thanks
Hi James, for that you would need to connect the form with an HTML form (and not through API)
Thank you for the explenation about the opt-in form.
Sadly i see the ribon, in content and lightbox appearing in my desktop and also on my mobile. Enfortunaly the ribbon, and in content doens’t show on my mobile. But the lightbox appears on my mobile.
So little bit strange. Can you give my advice? Thank you in advance
Not sure what you mean… Would you not want the lightbox to show?
Love your plugins, definitely some nice optins here.