# Reka bentuk page form anda sendiri dengan Custom HTML

> Paste reka bentuk HTML anda ke dalam form BCL, pilih lokasi payment form, dan percepatkan page dengan Upload inline images.
>
> Source: https://docs.bcl.my/ms/custom-html-page/

Dengan **Custom HTML**, form memaparkan reka bentuk page anda sendiri, bukan page form yang biasa. BCL memaparkan HTML anda di bahagian atas page dan payment form di bawahnya. Guna pilihan ini apabila anda ada reka bentuk daripada designer, page builder atau tool AI.

## Custom HTML atau Landing Pages

BCL ada dua cara untuk membuat sales page penuh bagi sesuatu form. Pilih satu:

| Type of Form | Anda membuat page dengan | Guna apabila |
|---|---|---|
| **Custom HTML** | Kod HTML dan CSS anda sendiri | Anda ada reka bentuk atau fail HTML, dan anda mahu kawalan penuh terhadap rupa page |
| **Landing Pages** | Blok dalam builder, dengan template | Anda tidak menulis kod. Lihat [Bina landing page dengan blok](/ms/landing-page-builder/) |

## Tetapkan form kepada Custom HTML

Anda boleh buat langkah ini untuk form baru atau form yang sudah ada:

1. Pergi ke **Payments** → **Forms** dan buka form itu. Untuk form baru, klik **Create Form**, kemudian **Start from scratch**.
2. Buka tab **Payment Details**. Dalam **Type of Form**, klik **Custom HTML**.
3. Simpan form itu. Untuk form baru, klik **Add Payment Form**. Link **Open HTML Editor** hanya dipaparkan selepas simpanan pertama.

   *(Screenshot: Butang Type of Form, dengan Custom HTML dipilih dan link Open HTML Editor ditanda)*

4. Klik **Open HTML Editor**. BCL menyimpan form itu dahulu, kemudian membuka page **Edit Custom HTML**.

## Paste & simpan HTML anda

Editor memaparkan HTML anda pada tab **Code**. Untuk menambah reka bentuk anda:

1. Pada tab **Code**, padam HTML lama dan paste HTML anda.
2. Klik **Preview** untuk melihat page itu. Klik **Code** untuk kembali ke HTML.
3. Klik **Save HTML**. BCL memaparkan mesej dengan butang **View Form**. Butang ini membuka page live dalam tab baru.

   *(Screenshot: Editor HTML dengan tab Code dan Preview serta butang Save HTML ditanda)*

Tab **Preview** menunjukkan page itu sebelum anda simpan:

*(Screenshot: Tab Preview dalam editor HTML, dengan contoh page kelas)*

Pelanggan anda melihat page yang sama pada link form itu:

*(Screenshot: Page form live dengan contoh reka bentuk: header gelap dengan tajuk kelas dan butang Book my seat, kemudian tiga kad)*

BCL memaparkan HTML anda tanpa sebarang perubahan. BCL tidak membuang script. Paste hanya kod yang anda percayai. HTML anda boleh mengandungi shortcode untuk harga dan stok semasa. Lihat [Shortcode untuk payment form HTML](/ms/html-form-shortcodes/).

> **Caution**
> Editor tidak menyimpan secara automatik. Klik **Save HTML** sebelum anda klik **Back**.

## Lokasi payment form

BCL menambah payment form di bawah HTML anda. Anda tidak perlu menambahnya sendiri. Pelanggan mengisi butiran mereka dan membuat bayaran di situ:

*(Screenshot: Hujung contoh reka bentuk, dengan payment form di bawahnya: Your Details, Payment Method, Payment Summary dan Complete Payment)*

Anda boleh menukar lokasi ini dengan dua cara:

- **Bawa pelanggan ke form itu dari sebuah butang.** Link butang itu ke `#bcl-payment-form`, contohnya `<a href="#bcl-payment-form">Book my seat</a>`.
- **Letak form itu di tempat lain.** Copy **Embed Code** form itu dari bahagian bawah page edit form. Paste kod itu ke dalam HTML anda, di tempat form itu perlu dipaparkan. BCL tidak akan menambah form kedua. Lihat [Embed form pada laman web anda](/ms/embed-form/).

Apabila form ditutup atau berada di luar jadualnya, HTML anda masih dipaparkan. Payment form pula memaparkan mesej form ditutup atau mesej **Opening Soon**.

## Percepatkan page anda

Gambar yang besar melambatkan page. Tool AI sering meletakkan gambar di dalam HTML sebagai teks base64, jadi saiz HTML menjadi sangat besar. Editor ada tiga butang di sebelah kanan tab **Code** untuk membantu:

| Butang | Fungsi |
|---|---|
| **Upload inline images** | Memindahkan gambar dalam tag `<img>` ke media library anda dan menukar link gambar itu dalam HTML. Kemudian BCL menyimpan page itu. |
| **HTML summary & tips** | Memaparkan saiz, bilangan baris, gambar, link, script dan style, bersama tips. |
| **Check HTML for errors** | Mencari tag yang tidak ditutup dan ralat dalam CSS dan script. Klik sesuatu ralat untuk pergi ke barisnya. |

Untuk memindahkan gambar:

1. Klik **Upload inline images**. Tetingkap itu menunjukkan bilangan gambar yang dijumpai.
2. Klik **Upload & replace**.

   *(Screenshot: Tetingkap Upload inline images dengan 1 gambar embedded dan butang Upload & replace ditanda)*

**Upload inline images** menerima gambar PNG, JPG, GIF dan WebP. Butang ini tidak memindahkan gambar dalam CSS, contohnya gambar `background`. Letak gambar itu dalam tag `<img>`, atau upload gambar itu ke media library anda dan guna link-nya.

**HTML summary & tips** memberi amaran tentang gambar base64, tag viewport yang tiada dan HTML yang melebihi 512 KB:

*(Screenshot: Tetingkap HTML summary: saiz, baris, gambar, link, script dan style, serta tip tentang satu gambar base64)*

Editor tidak menyimpan page yang melebihi 25 MB.

## Paparkan page anda tanpa form

Untuk memaparkan HTML anda sahaja, tanpa payment form, guna minisite. Contohnya, guna minisite untuk bridge page, atau page tawaran dengan butang ke form yang lain:

1. Buka tab **Form Configuration** pada form itu.
2. Dalam **Form Status**, on-kan **Use as minisite**.

   *(Screenshot: Kotak Form Status dengan suis Use as minisite ditanda)*

3. Klik **Update Form**.

Minisite hanya dipaparkan apabila form itu aktif dan berada dalam jadualnya. Lihat [Bina funnel dua langkah: sales page, kemudian checkout](/ms/two-step-funnel/).

## Tips

Habit ini memastikan page Custom HTML anda laju dan mudah diubah:

- **Minta satu fail HTML.** Dapatkan satu fail, dengan CSS di dalamnya. Minta juga tag viewport, supaya page itu muat pada skrin telefon.
- **Guna link gambar, bukan base64.** Upload gambar anda ke media library dahulu dan guna link-nya. Atau klik **Upload inline images** selepas anda paste HTML itu.
- **Simpan salinan HTML anda.** BCL hanya menyimpan versi terakhir yang disimpan. Simpan juga fail itu dalam komputer anda.

## Isu biasa

### Bagaimana saya buat sales page dengan reka bentuk saya sendiri, seperti page kelas pada form BCL yang lain?

Page itu menggunakan Custom HTML. Reka bentuk page itu dalam HTML, atau minta satu fail HTML daripada designer atau tool AI. Kemudian buka form anda, tetapkan Type of Form kepada Custom HTML pada tab Payment Details dan klik Open HTML Editor. Paste HTML itu dan klik Save HTML. BCL memaparkan payment form di bawah reka bentuk anda.

### Boleh saya letak payment form di tengah page, bukan di hujung?

Boleh. Copy Embed Code form itu dari bahagian bawah page edit form. Paste kod itu ke dalam HTML anda, di tempat form itu perlu dipaparkan, dan klik Save HTML. BCL tidak akan menambah form kedua di hujung page. Untuk membawa pelanggan ke form itu dari sebuah butang, link butang itu ke #bcl-payment-form.

### Kenapa page saya masih lambat walaupun saya sudah klik Upload inline images?

Upload inline images hanya memindahkan gambar dalam tag <img>. Gambar dalam CSS, contohnya gambar background, kekal dalam HTML. Pindahkan gambar itu ke tag <img>, atau upload gambar itu ke media library anda dan guna link-nya. Klik HTML summary & tips untuk melihat saiz page.