# HTML form shortcodes

> Shortcodes that show live prices, stock and form details inside a Custom HTML payment form.
>
> Source: https://docs.bcl.my/html-form-shortcodes/

Shortcodes let your own HTML show live details from the form, such as an item's price or how many are left in stock. BCL replaces each shortcode with the current value each time the page loads. So you do not need to edit the HTML when a price or stock level changes.

Shortcodes work in a payment form whose **Type of Form** is **Custom HTML**, and in a **Donation** form whose **Content Type** is **Custom HTML**.

## Add shortcodes to your form

Type the shortcodes into the form's HTML editor:

1. Go to **Payments** → **Forms** and click **Edit** on your form.
2. Click **Open HTML Editor**. BCL saves the form first, then opens the editor.

   *(Screenshot: The Edit Payment Form page with the Open HTML Editor button highlighted)*

3. Type the shortcodes where you want the values to appear, then click **Save HTML**. Click **Preview** to see your design. BCL fills in the shortcodes only on the live form.

   *(Screenshot: The HTML editor with shortcodes in the code and the Save HTML button highlighted)*

4. Click **Back**, then **View Form** to see the live values.

   *(Screenshot: A live Custom HTML form showing item names, prices and status badges from shortcodes)*

## Find an item's ID

The item shortcodes need the item's ID, and the form must use **Multiple Items**. To find the ID:

1. Open the form and scroll to **List of Items**, below the tabs.
2. Click **More** on the item.

   *(Screenshot: The List of Items with the More button of the first item highlighted)*

3. Read the number after `#` in the panel title, for example **House Blend 250g Settings (#87)**.

   *(Screenshot: The item panel title showing the item ID 87)*

## Shortcode list

Replace `123` with your item's ID. Each item shortcode accepts either `product=` or `id=`.

| Shortcode | Shows | Example output |
| --- | --- | --- |
| `[stock product=123]` | Stock level | "25 available", "Out of Stock", or "In Stock" when stock is not tracked |
| `[price product=123]` | Item price | "RM 28.00" |
| `[product_name id=123]` | Item name | "House Blend 250g" |
| `[status product=123]` | Status badge | "Available", "Coming Soon" or "Out of Stock" |
| `[form_title]` | Form title | "Kopi Kampung Coffee Beans" |
| `[form_slug]` | Form URL slug | "kopi-kampung-coffee-beans" |
| `[total_products]` | Number of items on the form | "12" |
| `[available_products]` | Items that customers can buy now (not upcoming, not sold out) | "8" |

## Style the status badge

`[status]` outputs a `<span>` with the class `badge` plus `badge-success` (Available), `badge-warning` (Coming Soon) or `badge-danger` (Out of Stock). Add CSS for these classes in your HTML to colour the badge.

## Common issues

### My shortcode shows up as plain text on the form. Why?

Check the spelling and the brackets, for example [price product=123]. BCL leaves an unknown shortcode as it is. A known shortcode with a wrong item ID shows nothing. Shortcodes work only in the HTML of a Custom HTML form.

### The price shortcode shows the old price, not my sale price.

[price] shows the item's Amount (RM). It does not show the Sale Price (Optional) set under More.

### My Custom HTML form loads slowly. Is there a setting to make it faster?

No. BCL shows your HTML as you wrote it, so the speed depends on the HTML itself. Big pictures are the usual cause, mostly pictures embedded in the HTML as base64 text, which AI tools often make. In the HTML editor, click Upload inline images, then Upload & replace. BCL moves the embedded and outside pictures to your media library. BCL also updates each link in the HTML. Also make each picture no bigger than the space it fills on the page.