# Design your own form page with Custom HTML

> Paste your own HTML design into a BCL form, choose where the payment form shows, and make the page load fast with Upload inline images.
>
> Source: https://docs.bcl.my/custom-html-page/

With **Custom HTML**, a form shows your own page design instead of the standard form page. BCL shows your HTML at the top of the page and the payment form under it. Use it when you have a design from a designer, a page builder or an AI tool.

## Custom HTML or Landing Pages

BCL has two ways to make a full sales page for a form. Choose one:

| Type of Form | You make the page with | Use it when |
|---|---|---|
| **Custom HTML** | Your own HTML and CSS code | You have a design or HTML file, and you want full control of how it looks |
| **Landing Pages** | Blocks in a builder, with templates | You do not write code. See [Build a landing page with blocks](/landing-page-builder/) |

## Set the form to Custom HTML

You can do this for a new form or for an existing form:

1. Go to **Payments** → **Forms** and open the form. For a new form, click **Create Form**, then **Start from scratch**.
2. Open the **Payment Details** tab. In **Type of Form**, click **Custom HTML**.
3. Save the form. For a new form, click **Add Payment Form**. The **Open HTML Editor** link shows only after the first save.

   *(Screenshot: The Type of Form buttons with Custom HTML selected and the Open HTML Editor link highlighted)*

4. Click **Open HTML Editor**. BCL saves the form first, then opens the **Edit Custom HTML** page.

## Paste and save your HTML

The editor shows your HTML on the **Code** tab. To add your design:

1. On the **Code** tab, delete any old HTML and paste your HTML.
2. Click **Preview** to see the page. Click **Code** to go back to the HTML.
3. Click **Save HTML**. BCL shows a message with a **View Form** button, which opens the live page in a new tab.

   *(Screenshot: The HTML editor with the Code and Preview tabs and the Save HTML button highlighted)*

The **Preview** tab shows the page before you save:

*(Screenshot: The Preview tab of the HTML editor, with the sample class page)*

Your customers see the same page on the form's link:

*(Screenshot: The live form page with the sample design: a dark header with the class title and a Book my seat button, then three cards)*

BCL shows your HTML as it is. It does not remove scripts. Paste only code that you trust. The HTML can have shortcodes for live prices and stock. See [HTML form shortcodes](/html-form-shortcodes/).

> **Caution**
> The editor does not save by itself. Click **Save HTML** before you click **Back**.

## Where the payment form shows

BCL adds the payment form under your HTML. You do not add it yourself. The customer fills in their details and pays there:

*(Screenshot: The end of the sample design, with the payment form under it: Your Details, Payment Method, Payment Summary and Complete Payment)*

You can change this in two ways:

- **Send customers to the form from a button.** Link the button to `#bcl-payment-form`, for example `<a href="#bcl-payment-form">Book my seat</a>`.
- **Put the form in a different place.** Copy the form's **Embed Code** from the bottom of its edit page. Paste it into your HTML where the form must show. BCL then does not add a second form. See [Embed a form on your website](/embed-form/).

When the form is closed or outside its schedule, your HTML still shows. The payment form shows a closed or **Opening Soon** message instead.

## Make the page load fast

Big pictures make a page slow. AI tools often put pictures inside the HTML as base64 text, which makes the HTML very big. The editor has three buttons on the right side of the **Code** tab to help:

| Button | What it does |
|---|---|
| **Upload inline images** | Moves the pictures in `<img>` tags to your media library and changes their links in the HTML. Then BCL saves the page. |
| **HTML summary & tips** | Shows the size, the lines, the images, the links, the scripts and the styles, with tips. |
| **Check HTML for errors** | Finds tags that are not closed and errors in the CSS and scripts. Click an error to go to its line. |

To move the pictures:

1. Click **Upload inline images**. The window shows how many pictures it found.
2. Click **Upload & replace**.

   *(Screenshot: The Upload inline images window with 1 embedded image and the Upload & replace button highlighted)*

**Upload inline images** accepts PNG, JPG, GIF and WebP pictures. It does not move a picture in the CSS, for example a `background` image. Put that picture in an `<img>` tag, or upload it to your media library and use its link.

**HTML summary & tips** warns you about base64 pictures, a missing viewport tag and HTML over 512 KB:

*(Screenshot: The HTML summary window: size, lines, images, links, scripts and styles, and a tip about one base64 image)*

The editor does not save a page over 25 MB.

## Show your page without a form

To show only your HTML, with no payment form, use a minisite. For example, use it for a bridge page or an offer page with a button to another form:

1. Open the **Form Configuration** tab of the form.
2. In **Form Status**, turn on **Use as minisite**.

   *(Screenshot: The Form Status box with the Use as minisite switch highlighted)*

3. Click **Update Form**.

A minisite shows only when the form is active and inside its schedule. See [Build a two-step funnel](/two-step-funnel/).

## Tips

These habits keep a Custom HTML page fast and easy to change:

- **Ask for one HTML file.** Get one file, with the CSS inside it. Also ask for a viewport tag, so that the page fits on a phone.
- **Use picture links, not base64.** Upload your pictures to your media library first and use their links. Or click **Upload inline images** after you paste the HTML.
- **Keep a copy of your HTML.** BCL keeps only the last saved version. Keep the file on your computer too.

## Common issues

### How do I make a sales page with my own design, like the class pages I see on other BCL forms?

Those pages use Custom HTML. Design the page in HTML, or ask a designer or an AI tool for one HTML file. Then open your form, set Type of Form to Custom HTML on the Payment Details tab and click Open HTML Editor. Paste the HTML and click Save HTML. BCL shows the payment form under your design.

### Can I put the payment form in the middle of my page, not at the end?

Yes. Copy the form's Embed Code from the bottom of its edit page. Paste it into your HTML where the form must show, and click Save HTML. BCL then does not add a second form at the end. To send customers to the form from a button, link the button to #bcl-payment-form.

### I clicked Upload inline images, but my page is still slow. Why?

Upload inline images moves only the pictures in <img> tags. A picture in the CSS, for example a background image, stays in the HTML. Move that picture to an <img> tag, or upload it to your media library and use its link. Click HTML summary & tips to see the page size.