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 every time the page loads, so you never have 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.

   

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

   

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

   

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.

   

3. Read the number after # in the panel title, for example House Blend 250g Settings (#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 can be bought 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]. An unknown shortcode is left as it is. A known shortcode with a wrong item ID shows nothing. Shortcodes only work 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 and updates each link in the HTML. Also make each picture no bigger than the space it fills on the page.

Related articles

• Choose the right form type
• Turn a form into a sales page
• Fix a form that shows twice after a Canva embed
• Sell digital products