Triggering Opt-in Forms Based on CSS Selectors
Trigger opt-in forms based on the presence or contents of CSS Selectors on your page.
Our Capture app offers hundreds of ways to trigger opt-in forms based on user activity on your site.
There may be times however when you want the Capture to trigger based on something that's happening on your page.
We wanted to trigger specific opt-ins based on who was the author of specific posts on our blog.
The idea was that you could get notifications from authors you liked rather than having to opt-in to everyone.
Here's what the Capture looks like:
The problem we faced was that we had no easy way (that didn't involve code changes) to let Capture know when to trigger for a specific author.
But, that's where CSS Selectors come in ☺️
Very simply, CSS selectors are patterns used to select the element(s) you want to style on your page.
They offer very granular control over styling individual elements or sweeping changes across your page.
The CSS selector for our Author Name (on this page) is:
body > main > article > header > div.post-detail__info > div > div > div.grid__col--xs-12.grid__col--sm-5.grid__col--md-3 > div.u-vertical-align.u-text-align-left > h4
To get this you can Right Click on the element you want to use, click Inspect Element then click Copy selector:
Inside Capture we can easily setup a Trigger > Selector rule and insert the copied Selector we obtained from Chrome Inspect.
This will monitor that Selector on the page and allow us to trigger an opt-in form depending on a number of variables.
In this case we want to trigger the opt-in form when the h4 contains the author name Stuart McKeown.
The beauty of using rules to trigger these forms is that we can easily duplicate each Capture for every author without making any code changes on our site.
Nifty eh?
You don't need to limit yourself just to Authors, these Selectors can be used for an entire range of things like:
- Targeting logged in users
- Targeting users with products in their cart
- Targeting users if they have (or haven't) voted on something
- Targeting users with a specific name only
- Targeting users on a specific plan
You Might Also Like
Why Exit Intent Popups Are Awesome (And How To Set One Up In 5 Minutes)
Learn step by step how to imeplement an Exit Intent opt-in form on any website.
A Practical Guide to E-Commerce Opt-in Forms
We've broken down the different ways you can collect emails addresses for your E-commerce store.
20 Effective Email List Growth Tactics for E-Commerce
Learn some of the top tips to grow your E-commerce database from 0 to hero in this incredible how-to guide.
10 Ways To Grow Your E-Commerce Sales Using Gleam
Got an E-Commerce store? Then you'll need these 10 Gleam tips to grow your sales.
How We Increased Our Email Opt-ins By 1000%
See exactly how we increased our blog email opt-ins by 1000% using some simple tactics.
Stuart McKeown
Stuart McKeown is one of the Co-founders at Gleam. Aside from writing and helping businesses grow, he also enjoys sound design and drinking tea ☕️