> ## Documentation Index
> Fetch the complete documentation index at: https://jinshuju-20a27453.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 表单样式美化

> 当需要迅速提升表单的颜值，增加辨识度，塑造品牌个性时，可设置表单样式。

## 使用模板

我们在 [模板中心 ](https://templates.jinshuju.net/)提供各个行业常见场景表单，也都配上了漂亮的头图、背景，如果创建表单时没有头绪，可以前往 [模板中心 ](https://templates.jinshuju.net/)搜索关键词选用心仪模板。

<img src="https://mintcdn.com/jinshuju-20a27453/SB_ch2_-a6Dm3e2H/v4/attachments/aa6Xsfai9kyeziU4j8eLj2ZM.png?fit=max&auto=format&n=SB_ch2_-a6Dm3e2H&q=85&s=f0c4fc9b5bf33f241e7b081118397a7c" alt="PC|模板中心|页面顶部显示「获得灵感,快速搭建业务」宣传语和搜索框,下方按场景和行业分类展示「满意度调查问卷」「试听课预约」「活动报名」等模板卡片" width="1536" height="787" data-path="v4/attachments/aa6Xsfai9kyeziU4j8eLj2ZM.png" />

## 自定义页眉

填表人进入表单后，第一眼看到的就是顶部的图片，也就是页眉。你可以设置公司 Logo 的图片、活动相关图等，突出本次活动主题。

你可以在表单编辑页面，点击表单顶部的图片——右侧「页眉设置」。或者点击左侧的主题页面——页眉设置。页眉可以设置 3 种类型：文字、单张图、轮播图，图片的格式不限，支持 jpg、png、gif 等。

* 文字：文字颜色、字号、对齐方式等格式可以自定义。

<img src="https://mintcdn.com/jinshuju-20a27453/qCEgiy_WXHXKMNNA/v4/attachments/sob6gGgcZntm4K9TUF7bScGY.png?fit=max&auto=format&n=qCEgiy_WXHXKMNNA&q=85&s=29116b44488745b0c6662d208a6f0a83" alt="PC|表单编辑|「小金公司入职人员登记表」编辑页面,右侧「页眉设置」区域显示文字类型页眉的字号、加粗、颜色、对齐方式等格式设置选项" width="1536" height="729" data-path="v4/attachments/sob6gGgcZntm4K9TUF7bScGY.png" />

点击表单顶部图文进入页眉设置

<img src="https://mintcdn.com/jinshuju-20a27453/BxJ_garRQsmARlw6/v4/attachments/eBcPPSMLZSGH4xMTxPJAQkUh.png?fit=max&auto=format&n=BxJ_garRQsmARlw6&q=85&s=1df6acd9e24f77aab3e7d981f58f7d1f" alt="PC|表单编辑|「预约测试」表单左侧主题色块选择区,中间预览区显示插画风格页眉,右侧「表单样式」设置区显示页面背景、表单全局、按钮样式、页眉设置等选项" width="1886" height="1000" data-path="v4/attachments/eBcPPSMLZSGH4xMTxPJAQkUh.png" />

点击主题页面进入页眉设置

* 单张图：支持从本地上传、从创客贴添加，可以替换、移除。图片大小建议：1600px \* 460 px，大小不超过 5MB。

<img src="https://mintcdn.com/jinshuju-20a27453/lpVaY_eqU8NMCSd_/v4/attachments/JWYCwqXUoH1tus5EbnvDKbbR.png?fit=max&auto=format&n=lpVaY_eqU8NMCSd_&q=85&s=c34cb03bdcd53dad2b7678155957847d" alt="PC|表单编辑|「人员信息登记表」编辑页面,右侧「页眉设置」区域显示单张图类型页眉,可重新上传或删除图片,支持布局(居左/居中/居右)和底色设置" width="1536" height="731" data-path="v4/attachments/JWYCwqXUoH1tus5EbnvDKbbR.png" />

* 轮播图：可以上传 5 张图片轮播展示，图片大小建议：1470px \* 600px，不超过 5MB。

![PC|表单编辑|「人员信息登记」表单页眉采用轮播图类型,右侧「页眉设置」区域显示已上传三张花卉图片,可切换轮播样式和底色](https://help-assets.jinshuju.net/assets/file/13942/5.png)

## 表单标题和描述设置

* 表单标题：编辑页面点击表单标题，右侧设置中支持调整标题字体、字号、加粗、文字颜色。标题对齐方式支持设置左对齐、居中、右对齐。

<img src="https://mintcdn.com/jinshuju-20a27453/SB_ch2_-a6Dm3e2H/v4/attachments/ahtQCvpEMVH1RWtnW5naAh6C.png?fit=max&auto=format&n=SB_ch2_-a6Dm3e2H&q=85&s=b7e5dd470d8dbf09a9442ce4043eebd3" alt="PC|表单编辑|「测试表单」编辑页面,右侧「页眉设置」区域下方显示标题和描述样式设置,可调整字体、字号、加粗、颜色、对齐方式" width="2000" height="800" data-path="v4/attachments/ahtQCvpEMVH1RWtnW5naAh6C.png" />

* 字段提示：字段提示内的文字格式可自定义调整，当提示内容较多时，可选择开启折叠展示功能，让表单界面更简洁，用户点击即可展开查看完整提示。

<img src="https://mintcdn.com/jinshuju-20a27453/SB_ch2_-a6Dm3e2H/v4/attachments/YbddqJ2VvksSUXz4ruUeoHRf.png?fit=max&auto=format&n=SB_ch2_-a6Dm3e2H&q=85&s=80aa74c688af9b7a2155e449f7170369" alt="PC|表单编辑|「演示表单」编辑页面,右侧「页眉设置」区域显示「字段提示较长时折叠展示」功能已开启,表单预览区显示可展开/收起的公益介绍文字" width="2000" height="784" data-path="v4/attachments/YbddqJ2VvksSUXz4ruUeoHRf.png" />

## 更换全局背景

点击左侧「主题」，然后点击右侧「页面背景」，去上传图片。图片尺寸建议为：960px \* 1900px，不超过 5MB。

![PC|表单编辑|「人员信息登记」表单主题设置界面,右侧「表单样式」区域显示页面背景为图片类型,可上传自定义背景图片并设置是否重复](https://help-assets.jinshuju.net/assets/file/13945/6.png)

上传背景图片后，想要填写的板块透明，可以在「主题」页面，点击右侧「表单全局」，调整第二个滑块可以改变表单填写板块的透明度。

![PC|表单编辑|「人员信息登记」表单主题设置界面,右侧「表单全局」区域显示电脑宽度、手机宽度、底色、阴影、边框、分割线等设置选项,底色选择器已打开](https://help-assets.jinshuju.net/assets/file/13946/7.png)

## PC 端一键更换表单主题

我们自定义的页眉、背景，可能不是同一个系列的，页面看起来不统一。金数据提供金数据的设计师们提供的整套样式主题，可以一键将表单的头图、字体、颜色、宽度等各方面更换为相适应的主题，目前已经有超过 160 + 个，可以在「主题」左侧点击使用。

⚠️ 注意：有滑动效果的透明底圆弧造型的主题是 [新版系统 ](https://next.jinshuju.net/home)才支持设置。

![PC|表单编辑|「人员信息登记」表单主题设置界面,左侧主题色块选择区显示橙色调图片主题,中间预览区显示夕阳下棕榈树和汽车的页眉图片](https://help-assets.jinshuju.net/assets/file/13947/8.png)

## 微信小程序一键更换主题

添加好字段后点击保存即可一键更换主题。注意：微信小程序无法更换全局背景，需要在 PC 端进行操作。

![小程序|表单编辑|移动端表单编辑页面顶部显示「编辑表单」「预览表单」步骤,页眉区域有「换主题」「换头图」按钮,底部有「+添加字段」「保存」按钮](https://areadocs.com/attachments/bNtwFBhyWn5LD7kRth34HiKD.png)

## 手机 App 一键更换主题

手机 App 进入编辑表单右上角可以更换主题。注意：手机 App 无法更换全局背景，需要在 PC 端进行操作。

<img src="https://mintcdn.com/jinshuju-20a27453/lpVaY_eqU8NMCSd_/v4/attachments/GwzhDAXTbTnsB6j5V2xH3pEz.png?fit=max&auto=format&n=lpVaY_eqU8NMCSd_&q=85&s=cd238d4036422bab11617bc79c2019f0" alt="App|表单编辑|移动端「销售必备-深夜零食在线下单」表单编辑页面,右侧「表单样式」区域显示「封面样式」设置,可选择不同封面图片并开启「使用封面」功能" width="819" height="837" data-path="v4/attachments/GwzhDAXTbTnsB6j5V2xH3pEz.png" />

## 移动端表单封面

不想打开表单就是填表页面？想要设置一个开始填表的按钮仪式？可以开启表单封面，在移动端打开表单后可以看到封面图，点击按钮或滑动后进入表单，PC 端暂不支持封面效果。

设置步骤：进入表单编辑页，点击左侧「主题」，选择封面样式并开启使用封面。可直接选用系统提供的封面样式，也可自定义上传背景图；自定义图片建议尺寸：800px × 1442px，文件大小不超过 5MB。

<img src="https://mintcdn.com/jinshuju-20a27453/2oyR2BIOm5t2CHNt/v4/attachments/6ZveeZfpPxCVzf2Pao1aga4j.png?fit=max&auto=format&n=2oyR2BIOm5t2CHNt&q=85&s=428d657c400e92870fc05b121346a2b7" alt="PC|表单编辑|「探店博主招募」表单编辑页面,右侧「封面样式」区域显示封面图片选择、封面标题编辑、按钮样式(按钮式/滑动式)、按钮文字、底色、文字颜色等设置选项" width="1944" height="1000" data-path="v4/attachments/6ZveeZfpPxCVzf2Pao1aga4j.png" />

除此之外，封面也可自定义设置封面标题、设置封面页按钮开启方式及按钮文字、底色及文字颜色。

⚠️注意：封面标题需单独编辑修改。表单编辑页顶部修改的表单标题，不会自动同步至封面标题。

<img src="https://mintcdn.com/jinshuju-20a27453/rDRnGr4_jYen-FLI/v4/attachments/LodNyRChutdevmKwA6LPbzsF.png?fit=max&auto=format&n=rDRnGr4_jYen-FLI&q=85&s=02f4cb233c34b3280cd25611f0b19f6d" alt="PC|表单编辑|「探店博主招募」表单手机端预览显示封面为插画风格(人物、树木、自然元素),上方有「探店博主招募」标题,下方有「开始填写」按钮" width="2000" height="975" data-path="v4/attachments/LodNyRChutdevmKwA6LPbzsF.png" />

## 自定义提交按钮

提交按钮当然也要搭配表单主题色，点击「提交」按钮，右侧可以自定义文案和颜色。

![PC|表单编辑|「人员信息登记」表单编辑页面,右侧「提交按钮」设置区域显示按钮文字(如「完成报名」)、字体、底色、宽度、阴影、边框、对齐方式等设置选项](https://help-assets.jinshuju.net/assets/file/13953/9.png)

## 设置表单字号

### 设置表单字段字号

在表单编辑页面，点击左侧「主题」——右侧「表单样式」——「字段」，可以设置字段标题和选项的文字大小。设置成功后针对表单所有字段和选项生效。

<img src="https://mintcdn.com/jinshuju-20a27453/2oyR2BIOm5t2CHNt/v4/attachments/6iUoK13pmB4FVwAyjSFmt6PP.png?fit=max&auto=format&n=2oyR2BIOm5t2CHNt&q=85&s=c244c95fc8d11aec5d642e2743d31d55" alt="PC|表单编辑|「设置表单字号」表单编辑页面,右侧「表单样式」区域显示「字段」设置页,可设置标题、选项的字号、加粗、颜色、间距等" width="1536" height="736" data-path="v4/attachments/6iUoK13pmB4FVwAyjSFmt6PP.png" />

### 设置表单描述内容字号

你可以在字段提示框、表单标题下方提示框、「描述」字段，编辑提示文案以及活动介绍，设置内容字号大小。

<img src="https://mintcdn.com/jinshuju-20a27453/BxJ_garRQsmARlw6/v4/attachments/cWiQ6AmsQA8gj48YdT3MhK83.png?fit=max&auto=format&n=BxJ_garRQsmARlw6&q=85&s=2415b3ffebdca154e926813c5dd5e2a8" alt="PC|表单编辑|「设置表单字号」表单编辑页面,右侧字段设置区域显示描述字段的显示分割线、长文案折叠、字段隐藏等设置选项" width="1536" height="832" data-path="v4/attachments/cWiQ6AmsQA8gj48YdT3MhK83.png" />

<img src="https://mintcdn.com/jinshuju-20a27453/rDRnGr4_jYen-FLI/v4/attachments/NhebyWrcNm1Q97UZfqeeT7UU.png?fit=max&auto=format&n=rDRnGr4_jYen-FLI&q=85&s=57413a481b6a78a589be05c63b1ac669" alt="PC|表单编辑|「设置表单字号」表单编辑页面,右侧字段详细设置区域显示默认值、占位符、字段宽度、校验(白名单、唯一性、最少/最多字数)、字段隐藏、自动填写上次内容、自定义出错文案等设置选项" width="1536" height="748" data-path="v4/attachments/NhebyWrcNm1Q97UZfqeeT7UU.png" />

⚠️注意：表单内字体字号仅支持 PC 端操作。

## 其他功能图片推荐尺寸

* 表单描述/字段提示插入图片：5MB；

* 表单封面： 800px \* 1442px，不超过 5MB；

* 图片单选/图片多选/配图商品：280px \* 280px，不超过 5MB；

* 轮播图字段：1470px \* 600px，不超过 5MB；

* 表单背景图：960px \* 1900px，不超过 5MB；

* 对外查询公告图片：920px \* 300px，不超过 5MB；

* 现场抽奖图片：285px \* 315px，不超过 1MB；

* 表单二维码中的企业 Logo 图：不超过 74px \* 74px；

* 自定义设置微信分享图标：建议大于 300px \* 300px；

* 表单页眉单张图：1,600 \* 460px，高度最大不超过 20,000px；

* 表单页眉轮播图：1470px \* 600px，不超过 5MB；

* 客户管理系统工作台公告的封面图片：745px \* 86px。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.