# 用Custom HTML设计你自己的表单页面

> 把你的HTML设计粘贴到BCL表单，选择付款表单显示的位置，并用Upload inline images让页面加载更快。
>
> Source: https://docs.bcl.my/zh/custom-html-page/

使用**Custom HTML**，表单会显示你自己设计的页面，而不是标准的表单页面。BCL会在页面上方显示你的HTML，付款表单在它下面。如果你有设计师、页面编辑器或AI工具做好的设计，就可以用它。

## Custom HTML还是Landing Pages

BCL有两种方法为表单制作完整的销售页面。选择其中一种：

| Type of Form | 你用什么制作页面 | 适合的情况 |
|---|---|---|
| **Custom HTML** | 你自己的HTML和CSS代码 | 你有设计或HTML文件，而且想完全控制页面的样子 |
| **Landing Pages** | 编辑器里的区块，附有模板 | 你不写代码。请看[用区块搭建landing page](/zh/landing-page-builder/) |

## 把表单设为Custom HTML

新表单或现有的表单都可以这样设置：

1. 前往**Payments** → **Forms**，打开表单。如果是新表单，点击**Create Form**，再点击**Start from scratch**。
2. 打开**Payment Details**标签页。在**Type of Form**，点击**Custom HTML**。
3. 保存表单。如果是新表单，点击**Add Payment Form**。第一次保存之后，才会出现**Open HTML Editor**链接。

   *(Screenshot: Type of Form按钮，已选择Custom HTML，并已标示Open HTML Editor链接)*

4. 点击**Open HTML Editor**。BCL会先保存表单，然后打开**Edit Custom HTML**页面。

## 粘贴并保存你的HTML

编辑器在**Code**标签页显示你的HTML。加入你的设计：

1. 在**Code**标签页，删除旧的HTML，然后粘贴你的HTML。
2. 点击**Preview**查看页面。点击**Code**回到HTML。
3. 点击**Save HTML**。BCL会显示一个带**View Form**按钮的信息，这个按钮会在新标签页打开上线的页面。

   *(Screenshot: HTML编辑器，已标示Code和Preview标签页以及Save HTML按钮)*

**Preview**标签页会在你保存之前显示页面：

*(Screenshot: HTML编辑器的Preview标签页，显示示例课程页面)*

顾客在表单链接上看到的是同一个页面：

*(Screenshot: 使用示例设计的上线表单页面：深色页首，有课程标题和Book my seat按钮，下面是三张卡片)*

BCL会按原样显示你的HTML，不会删除script。只粘贴你信任的代码。HTML里可以加入shortcode，显示实时价格和库存。请看[HTML表单shortcode](/zh/html-form-shortcodes/)。

> **Caution**
> 编辑器不会自动保存。点击**Back**之前，先点击**Save HTML**。

## 付款表单显示的位置

BCL会在你的HTML下面加入付款表单，你不需要自己加。顾客在那里填写资料并付款：

*(Screenshot: 示例设计的底部，下面是付款表单：Your Details、Payment Method、Payment Summary和Complete Payment)*

你可以用两种方法改变这个位置：

- **用按钮把顾客带到表单**。把按钮链接到`#bcl-payment-form`，例如`<a href="#bcl-payment-form">Book my seat</a>`。
- **把表单放在其他位置**。从表单编辑页面的底部复制它的**Embed Code**。把代码粘贴到HTML里你要显示表单的位置。这样BCL就不会再加第二个表单。请看[把表单嵌入你的网站](/zh/embed-form/)。

表单关闭或不在开放时间内时，你的HTML仍然会显示，付款表单则会显示已关闭或**Opening Soon**的信息。

## 让页面加载更快

大图片会让页面变慢。AI工具常常把图片以base64文字放进HTML，让HTML变得很大。编辑器在**Code**标签页右边有三个按钮可以帮忙：

| 按钮 | 作用 |
|---|---|
| **Upload inline images** | 把`<img>`标签里的图片移到你的媒体库，并更改HTML里的链接。然后BCL会保存页面。 |
| **HTML summary & tips** | 显示大小、行数、图片、链接、script和style，并附上小贴士。 |
| **Check HTML for errors** | 找出没有关闭的标签，以及CSS和script里的错误。点击错误就会跳到那一行。 |

移动图片的方法：

1. 点击**Upload inline images**。窗口会显示找到多少张图片。
2. 点击**Upload & replace**。

   *(Screenshot: Upload inline images窗口，有1张嵌入的图片，并已标示Upload & replace按钮)*

**Upload inline images**支持PNG、JPG、GIF和WebP图片。它不会移动CSS里的图片，例如`background`图片。把那张图片放进`<img>`标签，或把它上传到你的媒体库，然后使用它的链接。

**HTML summary & tips**会提醒你base64图片、缺少viewport标签，以及超过512 KB的HTML：

*(Screenshot: HTML summary窗口：大小、行数、图片、链接、script和style，以及一条关于一张base64图片的小贴士)*

编辑器不会保存超过25 MB的页面。

## 只显示页面，不显示表单

如果只想显示你的HTML，不显示付款表单，就用minisite。例如用在bridge page，或有按钮带去另一个表单的优惠页面：

1. 打开表单的**Form Configuration**标签页。
2. 在**Form Status**，开启**Use as minisite**。

   *(Screenshot: Form Status框，已标示Use as minisite开关)*

3. 点击**Update Form**。

只有在表单开启并且在开放时间内，minisite才会显示。请看[搭建两步式销售漏斗：先销售页面，再结账](/zh/two-step-funnel/)。

## 小贴士

这些习惯让Custom HTML页面保持快速，也容易修改：

- **只要一个HTML文件**。拿一个文件，CSS放在文件里面。也要加上viewport标签，让页面适合手机屏幕。
- **用图片链接，不要用base64**。先把图片上传到你的媒体库，然后使用它们的链接。或在粘贴HTML之后点击**Upload inline images**。
- **保留一份HTML**。BCL只保存最后一次保存的版本。也在你的电脑里保存一份文件。

## 常见问题

### 我想用自己的设计做销售页面，像其他BCL表单上的课程页面那样，要怎么做？

那些页面用的是Custom HTML。用HTML设计页面，或请设计师或AI工具给你一个HTML文件。然后打开你的表单，在Payment Details标签页把Type of Form设为Custom HTML，再点击Open HTML Editor。粘贴HTML，然后点击Save HTML。BCL会在你的设计下面显示付款表单。

### 我可以把付款表单放在页面中间，而不是最下面吗？

可以。从表单编辑页面的底部复制它的Embed Code。把代码粘贴到HTML里你要显示表单的位置，然后点击Save HTML。这样BCL就不会在页面最后再加一个表单。如果要用按钮把顾客带到表单，把按钮链接到#bcl-payment-form。

### 我已经点击了Upload inline images，为什么页面还是很慢？

Upload inline images只会移动<img>标签里的图片。CSS里的图片，例如background图片，会留在HTML里。把那张图片移到<img>标签，或把它上传到你的媒体库，然后使用它的链接。点击HTML summary & tips可以查看页面大小。