Reka bentuk page form anda sendiri dengan Custom HTML

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

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.

   

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.

   

Tab Preview menunjukkan page itu sebelum anda simpan:

Pelanggan anda melihat page yang sama pada link form itu:

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.

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:

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.

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.

   

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:

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.

   

3. Klik Update Form.

Minisite hanya dipaparkan apabila form itu aktif dan berada dalam jadualnya. Lihat Bina funnel dua langkah: sales page, kemudian checkout.

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-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.

Lihat dalam langkah-langkah

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.

Lihat dalam langkah-langkah

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.

Lihat dalam langkah-langkah

Artikel berkaitan

• Pilih jenis form yang sesuai
• Shortcode untuk payment form HTML
• Bina landing page dengan blok
• Embed form pada laman web anda