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.
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!