How to Add Custom HTML, CSS and JavaScript in Leadpages (2026)

Adding custom HTML in Leadpages is how you bring in things the builder does not include natively: a booking calendar, a map, a survey, a review feed, a chat widget or a form from another service. Leadpages offers two main places for code, an HTML widget that sits inside the page layout and tracking code fields that load scripts in the page's head or body, and the new app adds an Upload HTML option for whole pages. This guide shows where each one is, which to use for which kind of code, and the limits Leadpages sets on support.

Which Builder You Are Using

Leadpages has a newer app with help articles marked "New Leadpages" and the older Classic Builder, plus Page Studio pages in some accounts. The HTML widget and the tracking code fields are documented for the Classic Builder and the standard Leadpages builder settings. The new app's visual editor help covers elements, video embeds and an Inspector Panel but does not describe a custom code element, so for code-heavy pages in the new app, the Upload HTML route is the documented option. If your account shows a code element in the new editor, the same advice about testing and support applies.

How to Add Custom HTML with the HTML Widget

These steps follow Leadpages' Classic Builder article on the HTML widget:

1. Copy the embed code from the service you are adding. It is usually under an option labelled "embed", "share" or "iframe".
2. In the builder, open Widgets in the left sidebar and click Show More.
3. Drag the HTML widget onto the page where the content should appear. It can sit beside other widgets or inside a pop-up.
4. Click the widget, or hover and click the edit icon, to open its code box.
5. Paste the code and click Save inside the widget.
6. Update or publish the page, then check it in Preview or on the live page, because the HTML does not render in the editor.

Sizing and alignment come mostly from your code rather than the builder. If the embed looks off-center after publishing, Leadpages suggests wrapping the code in center tags; setting a width on the embed itself also helps on mobile, which the mobile editing guide covers in more detail.

How to Add Code to the Head or Footer

Scripts that should load on every visit, rather than appear as visible content, belong in the tracking code fields. This is also the answer to adding code "in the footer": paste it into the body section field rather than the page layout.

1. Open the page or site and click the Settings tab in the left sidebar.
2. Select the Analytics tab.
3. Paste head code into the Head Section Tracking Code field, or body code into the body section field, as the provider's instructions say.
4. Click Save, then Update.

For pop-ups, open the pop-up's Settings tab and paste the code there; Leadpages notes that code in a pop-up's body section always loads at the start of that section. On Leadpages Sites, tracking code applies site-wide rather than to single pages. Leadpages warns against entering anything other than tracking code in these fields, so keep design code out of them. Pixel, Google Analytics and A/B test setup are covered step by step in the Leadpages tracking guide.

Adding CSS and Changing Page Width

There is no documented custom CSS panel in Leadpages. The HTML widget article says styling must be done within the HTML itself, which means two practical options:

• Style your embed: include a <style> block or inline style attributes in the code you paste into the widget, scoped to your own class names.
• Use the builder's controls for fonts, colors, spacing, section widths and backgrounds. The drag-and-drop editor guide explains those settings.

Overriding the builder's own layout, such as forcing a wider site width with CSS aimed at Leadpages' internal classes or div IDs, is unsupported and can break when Leadpages updates its templates. If a template is too narrow, pick a full-width section layout or a different template rather than patching it with code.

Adding JavaScript and Third-Party Scripts

Most JavaScript you will add comes from a service: a chat widget such as Tawk.to, a heatmap tool, a review widget or a quiz. Follow the provider's instructions on placement. As a rule, scripts the provider says to put "before the closing head tag" go in the head field, and visible widgets that render where the code sits go in the HTML widget. Leadpages takes the code as is and does not validate it, so:

• Paste code exactly as supplied and do not edit it unless you know the language.
• Add one script at a time and test the page after each one, so a conflict is easy to trace.
• Watch page speed; every extra script adds load time, especially on mobile.
• Ask the provider for help with its code, since Leadpages support does not troubleshoot third-party scripts.

Embedding an External Form or HTML Form

You can paste a form embed from another service into the HTML widget, but Leadpages recommends its native integrations or Zapier first. A native Leadpages form connected to your email tool keeps leads in Leadpages' submissions, counts conversions in Leadpages analytics and works with its thank-you page actions. An embedded third-party form does its own thing: its success message or redirect comes from that service, and Leadpages may not count the sign-up as a conversion. Use the forms guide for native forms and the email and CRM integrations guide to check whether your tool connects directly.

If the HTML code from a form or phone field appears as visible text on the page, the code was likely pasted into a text element instead of the HTML widget, or it was cut off when copied. Delete it, add an HTML widget and paste the full snippet there.

Uploading a Full HTML Page

For a page coded outside Leadpages, the new app's Getting Started article lists an Upload HTML option when creating a page: drag in an HTML file of up to 5 MB or paste the code, then configure the page settings and publish. Leadpages also runs HTMLPub, a product in its help center that publishes pages from raw HTML with no block editor; editing means pasting revised HTML and publishing again. With either route, set the title, description and indexing as in the Leadpages SEO guide, and keep images and assets hosted at stable URLs.

Troubleshooting Custom Code

• Nothing appears: save inside the widget, then update the page, and check the live page rather than the editor.
• Code shows as text: it was pasted into a text element; move it into the HTML widget.
• Layout breaks on mobile: remove fixed pixel widths from the embed or set it to 100% width.
• Characters look garbled: code copied from a word processor can carry curly quotes or encoded characters; copy it again from the provider as plain text.
• Script runs twice: it is in both the tracking fields and an HTML widget, or on both a site and a page; keep one copy.
• Exported or WordPress pages: if you use HTML export, put tracking code directly in the exported source; Leadpages says code works with its WordPress publishing too.

For an overview of what the builder can do without code, see the Leadpages features guide.