(Because There Isn’t a Native One)
When I first set out to give our GoHighLevel funnel a sleek toggle switch, just like you see on most SaaS pricing pages, I hit a snag: GHL doesn’t ship with a built-in functionality like this.
There’s no “native” checkbox or element you can drag into place.
So, to get that polished, interactive experience, we built it ourselves with a pinch of HTML, CSS, and JavaScript.
How it Looks
How to Add in GHL
Custom HTML/CSS/JS: GHL Monthly & Annually Pricing Toggle
<!-- FULL PRICING SECTION: Copy & paste into your GHL Custom Code element -->
<section class="pricing-section">
<div class="pricing-header">
<h2>Flexible Plans, Transparent Pricing</h2>
<p>Pick Monthly or Annual billing to suit your budget—and save when you pay yearly.</p>
</div>
<div class="pricing-toggle">
<button id="monthlyBtn" class="active">Monthly</button>
<button id="annualBtn">Annually</button>
</div>
<!-- MONTHLY PLANS -->
<div id="monthlyPricing" class="pricing-cards">
<div class="plan-card">
<h3>Basic</h3>
<p class="plan-price"><span>$19</span>/mo</p>
<ul>
<li>1 Funnel</li>
<li>5 Automations</li>
<li>Email support</li>
</ul>
<a href="#" class="btn">Get Started</a>
</div>
<div class="plan-card featured">
<h3>Standard</h3>
<p class="plan-price"><span>$49</span>/mo</p>
<ul>
<li>5 Funnels</li>
<li>20 Automations</li>
<li>Priority email & chat</li>
</ul>
<a href="#" class="btn">Most Popular</a>
</div>
<div class="plan-card">
<h3>Pro</h3>
<p class="plan-price"><span>$99</span>/mo</p>
<ul>
<li>Unlimited Funnels</li>
<li>Unlimited Automations</li>
<li>Dedicated support</li>
</ul>
<a href="#" class="btn">Go Pro</a>
</div>
</div>
<!-- ANNUAL PLANS -->
<div id="annualPricing" class="pricing-cards" style="display:none">
<div class="plan-card">
<h3>Basic</h3>
<p class="plan-price"><span>$190</span>/yr <small>(save 16%)</small></p>
<ul>
<li>1 Funnel</li>
<li>5 Automations</li>
<li>Email support</li>
</ul>
<a href="#" class="btn">Get Started</a>
</div>
<div class="plan-card featured">
<h3>Standard</h3>
<p class="plan-price"><span>$490</span>/yr <small>(save 17%)</small></p>
<ul>
<li>5 Funnels</li>
<li>20 Automations</li>
<li>Priority email & chat</li>
</ul>
<a href="#" class="btn">Most Popular</a>
</div>
<div class="plan-card">
<h3>Pro</h3>
<p class="plan-price"><span>$990</span>/yr <small>(save 17%)</small></p>
<ul>
<li>Unlimited Funnels</li>
<li>Unlimited Automations</li>
<li>Dedicated support</li>
</ul>
<a href="#" class="btn">Go Pro</a>
</div>
</div>
</section>
<style>
:root {
--primary: #007bff;
--light: #f8f9fa;
--dark: #343a40;
--card-bg: #fff;
}
.pricing-section {
max-width: 960px;
margin: 0 auto;
padding: 4em 1em;
text-align: center;
font-family: sans-serif;
}
.pricing-header h2 {
font-size: 2.5em;
margin-bottom: .2em;
color: var(--dark);
}
.pricing-header p {
color: #555;
margin-bottom: 1.5em;
font-size: 1.1em;
}
/* Toggle Buttons */
.pricing-toggle {
display: inline-flex;
border: 1px solid #ccc;
border-radius: 6px;
overflow: hidden;
margin-bottom: 2em;
}
.pricing-toggle button {
flex: 1;
padding: .6em 1.2em;
background: none;
border: none;
cursor: pointer;
font-weight: bold;
transition: transform .2s;
}
.pricing-toggle button.active {
background: var(--primary);
color: #fff;
}
.pricing-toggle button:hover {
transform: scale(1.05);
}
/* Grid of Plan Cards */
.pricing-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
gap: 1.5em;
margin-top: 1em;
}
.plan-card {
background: var(--card-bg);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
padding: 2em 1.5em;
position: relative;
transition: transform .2s, box-shadow .2s;
}
.plan-card.featured::before {
content: "★ Recommended";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: #fff;
font-size: .8em;
padding: .2em .6em;
border-radius: 4px;
}
.plan-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.plan-card h3 {
margin-bottom: .5em;
color: var(--dark);
}
.plan-price {
font-size: 2em;
margin: .5em 0 1em;
color: var(--primary);
}
.plan-price small {
font-size: .5em;
color: #555;
}
.plan-card ul {
list-style: none;
padding: 0;
margin: 1em 0 2em;
text-align: left;
}
.plan-card li {
margin-bottom: .6em;
position: relative;
padding-left: 1.4em;
color: #555;
}
.plan-card li::before {
content: "✔";
position: absolute;
left: 0;
color: var(--primary);
}
.plan-card .btn {
display: inline-block;
padding: .8em 1.6em;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
background: var(--primary);
color: #fff;
transition: background .2s;
}
.plan-card .btn:hover {
opacity: 0.9;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
const mBtn = document.getElementById('monthlyBtn'),
aBtn = document.getElementById('annualBtn'),
mWrap = document.getElementById('monthlyPricing'),
aWrap = document.getElementById('annualPricing');
mBtn.addEventListener('click', () => {
mBtn.classList.add('active');
aBtn.classList.remove('active');
mWrap.style.display = 'grid';
aWrap.style.display = 'none';
});
aBtn.addEventListener('click', () => {
aBtn.classList.add('active');
mBtn.classList.remove('active');
aWrap.style.display = 'grid';
mWrap.style.display = 'none';
});
});
</script>
And there you have it… a fully custom monthly/annual toggle that feels right at home in your GoHighLevel funnel, without relying on any third-party widgets or half-baked hacks.
Paste the code into a Custom Code block, tweak the colors, and copy to match your brand, and hit Publish.
Your prospects will love the instant switch between plans, and you’ll love the boost in clarity and conversions that follows.
If you run into any quirks or want to add extra flair (fade-in animations, custom icons, you name it), drop a comment below or shoot me a message.
Happy building, and here’s to making your funnels feel as polished as your product!
Choose Your Plan
Monthly Flexibility
Annual Savings
Transparent Pricing
By Digillex
