ChatGPT
Claude
Perplexity
Google AI Mode
Microsoft Copilot
Grok
Mistral Le Chat用Custom HTML设计你自己的表单页面
使用Custom HTML，表单会显示你自己设计的页面，而不是标准的表单页面。BCL会在页面上方显示你的HTML，付款表单在它下面。如果你有设计师、页面编辑器或AI工具做好的设计，就可以用它。
Custom HTML还是Landing Pages
Section titled “Custom HTML还是Landing Pages”BCL有两种方法为表单制作完整的销售页面。选择其中一种：
| Type of Form | 你用什么制作页面 | 适合的情况 |
|---|---|---|
| Custom HTML | 你自己的HTML和CSS代码 | 你有设计或HTML文件，而且想完全控制页面的样子 |
| Landing Pages | 编辑器里的区块，附有模板 | 你不写代码。请看用区块搭建landing page |
把表单设为Custom HTML
Section titled “把表单设为Custom HTML”新表单或现有的表单都可以这样设置：
-
前往Payments → Forms，打开表单。如果是新表单，点击Create Form，再点击Start from scratch。
-
打开Payment Details标签页。在Type of Form，点击Custom HTML。
-
保存表单。如果是新表单，点击Add Payment Form。第一次保存之后，才会出现Open HTML Editor链接。
-
点击Open HTML Editor。BCL会先保存表单，然后打开Edit Custom HTML页面。
粘贴并保存你的HTML
Section titled “粘贴并保存你的HTML”编辑器在Code标签页显示你的HTML。加入你的设计：
-
在Code标签页，删除旧的HTML，然后粘贴你的HTML。
-
点击Preview查看页面。点击Code回到HTML。
-
点击Save HTML。BCL会显示一个带View Form按钮的信息，这个按钮会在新标签页打开上线的页面。
Preview标签页会在你保存之前显示页面：
顾客在表单链接上看到的是同一个页面：
BCL会按原样显示你的HTML，不会删除script。只粘贴你信任的代码。HTML里可以加入shortcode，显示实时价格和库存。请看HTML表单shortcode。
付款表单显示的位置
Section titled “付款表单显示的位置”BCL会在你的HTML下面加入付款表单，你不需要自己加。顾客在那里填写资料并付款：
你可以用两种方法改变这个位置：
- 用按钮把顾客带到表单。把按钮链接到
#bcl-payment-form，例如<a href="#bcl-payment-form">Book my seat</a>。 - 把表单放在其他位置。从表单编辑页面的底部复制它的Embed Code。把代码粘贴到HTML里你要显示表单的位置。这样BCL就不会再加第二个表单。请看把表单嵌入你的网站。
表单关闭或不在开放时间内时，你的HTML仍然会显示，付款表单则会显示已关闭或Opening Soon的信息。
让页面加载更快
Section titled “让页面加载更快”大图片会让页面变慢。AI工具常常把图片以base64文字放进HTML，让HTML变得很大。编辑器在Code标签页右边有三个按钮可以帮忙：
| 按钮 | 作用 |
|---|---|
| Upload inline images | 把<img>标签里的图片移到你的媒体库，并更改HTML里的链接。然后BCL会保存页面。 |
| HTML summary & tips | 显示大小、行数、图片、链接、script和style，并附上小贴士。 |
| Check HTML for errors | 找出没有关闭的标签，以及CSS和script里的错误。点击错误就会跳到那一行。 |
移动图片的方法：
-
点击Upload inline images。窗口会显示找到多少张图片。
-
点击Upload & replace。
Upload inline images支持PNG、JPG、GIF和WebP图片。它不会移动CSS里的图片，例如background图片。把那张图片放进<img>标签，或把它上传到你的媒体库，然后使用它的链接。
HTML summary & tips会提醒你base64图片、缺少viewport标签，以及超过512 KB的HTML：
编辑器不会保存超过25 MB的页面。
只显示页面，不显示表单
Section titled “只显示页面，不显示表单”如果只想显示你的HTML，不显示付款表单，就用minisite。例如用在bridge page，或有按钮带去另一个表单的优惠页面：
-
打开表单的Form Configuration标签页。
-
在Form Status，开启Use as minisite。
-
点击Update Form。
只有在表单开启并且在开放时间内，minisite才会显示。请看搭建两步式销售漏斗：先销售页面，再结账。
这些习惯让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可以查看页面大小。