A one-page landing page that turns visitors into leads for a Mumbai IT-training institute's DevOps course. We designed it from scratch and wrote it in plain HTML, CSS and JavaScript. It ships as a WordPress plugin that takes over the institute's existing course URL, so the page keeps its search ranking.
The Brief
The course page was an Elementor page. The institute wanted a new design that kept the same content (student projects, placement stories, curriculum, fees and FAQs) and was built to turn paid and search traffic into enquiries, without changing the address that already ranks.
Every lead had to reach WordPress and the admissions inbox, and then the conversation had to continue on WhatsApp. The page also had to count every lead for the ad campaigns sending traffic to it, even though visitors never see a thank-you page.
What We Built
-
✦
A page template that ignores the theme The plugin adds a page template to the existing course page (or a sidebar checkbox on block themes). On that page only, it drops the theme's header and footer and the theme and Elementor styles and scripts, while analytics and cookie-consent plugins still load. Untick the box and the original Elementor page comes back exactly as it was.
-
✦
Form to WordPress to email to WhatsApp Leads are checked, saved in WordPress before any email is sent, and emailed to the institute. WhatsApp then opens with the visitor's name, preferred mode, interest and number already filled in. If an email fails, that lead is flagged in the admin list instead of lost. The list exports to CSV, and a hook passes each lead on to a CRM or a spreadsheet. Returning visitors skip the form and go straight to WhatsApp.
-
✦
Spam protection and ad attribution A hidden spam-trap field, a signed timestamp that keeps the page cacheable, per-IP rate limits and duplicate suppression. Campaign tags and Google Ads click IDs, including the iPhone-specific ones, are saved with every lead so it can be traced to the ad click that brought it.
-
✦
Conversion features that follow Google's rules On desktop the form sits above the fold; on phones a sticky Call, WhatsApp and Demo bar stays at the bottom. The Download, Enroll and Demo buttons share one form that relabels itself to match. On phones the automatic pop-up appears only as a bottom sheet after scrolling halfway, which keeps it clear of Google's penalty for intrusive pop-ups.
-
✦
The curriculum as a CI/CD pipeline Course modules appear as the stages of a build pipeline and change from queued to running to passed as the visitor reads, which suits a DevOps course. The page is dark by default, with a light-theme toggle.
-
✦
Tracking at every step Events are recorded for CTA clicks, pop-ups, form starts and errors, submissions and the WhatsApp hand-off. Standard Google and Meta lead events fire whenever those tags are on the site, and a Google Ads conversion is sent with every successful submission.
-
✦
Social proof we can stand behind Reviews are quoted word for word from a public review listing, and every rating shown matches the live listing. A higher figure carried over from the old page was dropped because the listing did not support it. A live Google reviews widget comes from a free plugin, with a static fallback. Settings left empty stay hidden, so the page never shows "0+".
The Stack
Plain HTML, CSS and JavaScript, with no framework and no build step for the page itself. Fonts are self-hosted, icons come from a single SVG sprite, and images are WebP. Course, CourseInstance and FAQPage structured data are included. Design tokens drive both the dark and light themes, and scroll-linked effects use IntersectionObserver instead of scroll listeners. The WordPress plugin is PHP: a page template, REST endpoints for leads, a settings screen, a leads list with CSV export and a clean uninstall. If Yoast, Rank Math, AIOSEO or SEOPress is active, the plugin leaves titles and meta tags to it. A Python build script checks the page before packaging and fails if it finds more than one h1, an image without alt text or dimensions, or a scroll listener. Then it zips the plugin.
The Outcome
Delivered as a single plugin zip. Its settings screen covers lead emails, the curriculum PDF, pop-up timing and the reviews widget. A README covers installation, content editing and a pre-launch checklist of facts and permissions for the institute to confirm. The course page keeps its URL, and the old Elementor version is one checkbox away.
Paying for ads that send people to a page that does not convert? Reach out. We build landing pages that capture every lead and count every conversion.