Thank You Page
A thank-you page is the page shown after a form is successfully submitted. It confirms the submission, reassures the user, and triggers important tracking events like the Facebook Lead conversion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Thank You – We Received Your Request | Webnith</title>
<meta name="description" content="Thanks for your enquiry. We’ve received your request and our team will contact you shortly with your tailored Website Launch Package details." />
<link rel="canonical" href="https://webnith.com/thank-you" />
<style>
body {
background:#0F172A;
color:#E2E8F0;
font-family: Arial, sans-serif;
margin:0;
padding:40px;
text-align:center;
}
.box{
max-width:600px;
margin:auto;
padding:20px;
}
a.btn {
background:#4F46E5;
padding:12px 26px;
color:white;
border-radius:8px;
text-decoration:none;
font-size:15px;
display:inline-block;
margin-top:25px;
}
</style>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-a1e75f47-902e-42d8-bb6f-ca804aa4edf3: url('https://offers.webnith.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-a1e75f47-902e-42d8-bb6f-ca804aa4edf3: url('https:\/\/offers.webnith.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"a1e75f47-902e-42d8-bb6f-ca804aa4edf3","url":"https:\/\/offers.webnith.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="box">
<h1 style="font-size:32px; margin-bottom:16px;">Thank You! 🎉</h1>
<p style="font-size:18px; line-height:1.6;">
We have received your request.<br />
Our team will be in touch shortly with your tailored
<strong>Website Launch Package</strong> details.
</p>
<p style="color:#94A3B8; font-size:14px; margin-top:20px;">
If you need urgent assistance, contact us at
<strong>support@webnith.com</strong>.
</p>
<a class="btn" href="https://webnith.com">
Back to Home
</a>
</div>
<!-- Fire Lead event ONLY (global pixel already installed) -->
<script>
document.addEventListener("DOMContentLoaded", function () {
if (typeof fbq === "function") {
fbq('track', 'Lead');
}
});
</script>
<script>(()=>{class RocketElementorPreload{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}t(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this.i(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach((t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this.o(t)}catch(t){}}))}o(t){const e=JSON.parse(t.dataset.settings),i=e.m||e.animation_delay||0,n=e[this.animationSettingKeys.find((t=>e[t]))];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let o=setTimeout((()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this.l(t,e)}),i);window.addEventListener("rocket-startLoading",(function(){clearTimeout(o)}))}i(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach((t=>{e.forEach((e=>{i.push(t+e)}))})),i}l(t,e){this.i().forEach((t=>delete e[t])),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorPreload;requestAnimationFrame(t.t.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorPreload.run)})();</script></body>
</html>
❗ Total Blocking Time (TBT): 270ms (Needs improvement)
This means:
JavaScript is doing too much work
Possibly heavy libraries
Possibly animations
Maybe HubSpot code
Facebook Pixel + Meta scripts
Next.js hydration overhead
A TBT above 200ms hurts the Performance score.
Possible Solutions
Load Meta Pixel after DOM is ready
Why?
By default, Meta Pixel loads immediately and blocks the main thread.
This increases Total Blocking Time (TBT) and reduces PageSpeed mobile score.
Loading Pixel after DOMContentLoaded avoids blocking rendering.
✔ Code Example
<!-- Optimised Meta Pixel — loads after DOM is ready -->
<script>
document.addEventListener('DOMContentLoaded', function () {
!function(f,b,e,v,n,t,s){
if(f.fbq) return;
n=f.fbq=function(){
n.callMethod ? n.callMethod.apply(n,arguments) : n.queue.push(arguments)
};
if(!f._fbq) f._fbq=n;
n.push=n; n.loaded=!0; n.version='2.0';
n.queue=[];
t=b.createElement(e); t.async=!0;
t.src='https://connect.facebook.net/en_US/fbevents.js';
s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s);
}(window, document, 'script');
fbq('init', '721850810942199'); /* your pixel */
fbq('track', 'PageView');
});
</script>
<noscript>
<img decoding="async" src="https://www.facebook.com/tr?id=721850810942199&ev=PageView&noscript=1"
width="1" height="1" style="display:none">
</noscript>
Fire custom events manually (Lead, Contact, Purchase)
Why?
Facebook needs the exact conversion events to optimise your ads correctly.
<script>
function fireLeadEvent() {
if (window.fbq) {
fbq('track', 'Lead');
}
}
</script>
HubSpot Form Optimisation Techniques
HubSpot’s embed script is very heavy and blocks the main thread if loaded on page load.
Lazy-load the HubSpot script
Why?
Prevents HubSpot from blocking FCP/TBT
Loads only when the user scrolls to the form section
Massive boost to mobile PageSpeed
✔ Code Example
<script>
(function () {
var formContainer = document.getElementById('hubspot-form');
if (!formContainer) return;
function loadHubspot() {
if (loadHubspot.loaded) return;
loadHubspot.loaded = true;
var script = document.createElement('script');
script.src = 'https://js.hsforms.net/forms/v2.js';
script.async = true;
script.defer = true;
script.onload = function () {
createForm();
};
document.body.appendChild(script);
}
Use Intersection Observer (Load only when visible)
Why?
Script loads just-in-time
Best performance technique for heavy forms
✔ Code Example
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function (entries, obs) {
if (entries[0].isIntersecting) {
loadHubspot();
obs.disconnect();
}
}, {
rootMargin: '150px 0px',
threshold: 0.1
});
observer.observe(formContainer);
} else {
loadHubspot();
}
})();
</script>
Fire a Facebook Lead event after HubSpot submission
Why?
HubSpot submission must tell Facebook: “This person converted”
It improves cost per lead dramatically
✔ Code Example
<script>
function createForm() {
window.hbspt.forms.create({
region: "na1",
portalId: "YOUR_PORTAL_ID",
formId: "YOUR_FORM_ID",
target: "#hubspot-form",
onFormSubmit: function() {
if (window.fbq) {
fbq('track', 'Lead');
}
}
});
}
</script>