如何设计一款有颜有款的表单?

31会议云报名表单除了功能强大之外,样式方面也迎来了一次重大升级,现在可以使用表单样式设计功能,对表单各处的文字、图片和配色进行细致的调整,打造你心目中最有颜有款的表单。

如何使用?

从哪里开始设计表单样式?

你可以在“报名表单管理” => “开启高级模式” => “选择一个表单”之后,找到“表单样式”菜单。

表单主题

在表单样式设计面板的最上方,可以选择预设的表单主题,目前预设有8套图片主题以及8套纯色主题,使用表单主题可以快速改变表单样式。

表单样式设置

在表单主题下方,是对整个表单单独的区域相关的文字样式和图片样式进行调整的地方,整个设置布局按照表单区域进行划分;首先是“全局设置”,接下来是“表头区域设置”、“内容区域设置”以及“提交区域设置”。

全局设置

全局设置中主要包含一些对整个表单都生效的选项

表单宽度

表单宽度分为电脑端宽度和移动端宽度,两个设置分别生效,互不干扰。

电脑端宽度默认为700px,加减每档为100px,也可以在输入框内直接输入表单宽度数值,能够支持精确到像素级的宽度设置,目前电脑端宽度能够设置的范围是400px~1200px,基本上能够满足大多数的需求。

移动端宽度可设置“全屏展示”或“边缘缩进”,“全屏展示”时,表单主体会占满整个屏幕,而设置“边缘缩进”时,在大于320px宽度的移动设备上,会在边缘有10px的缩进,露出下方的页面背景。

纵向间距

“纵向间距”可以调整表单元素的行高,分别可以设置为“普通”、“紧凑”以及“宽松”三种状态,针对一些字段较多的表单,可以设置为“紧凑”,而字段较少的表单则可以设置为“宽松”,使得表单的整体视觉效果更加出色。

页面背景图

页面背景图是整个表单的背景图,你可能需要一张足够大的背景图才能够将整个背景填满,或者也可以使用重复的方式来使背景图平铺满整个页面。当你设置背景图不重复时,图片的水平和垂直方向的位置和样式都是可以进行自定义调整的。

页面背景色

在没有页面背景色的情况下,整个页面背景是被页面背景色填充的,页面背景图如果不能覆盖住整个页面,也会露出下方的页面背景色。你可以尝试使用这种特性制作一些特别的效果,如页面图景图与背景色相互呼应,在相接的地方使用相同的颜色,可以避免图片被纵向拉伸而导致变形。

隐藏会议名称

在移动端最顶部会默认显示会议名称,现在你可以在“全局设置”中隐藏它。

 

表头区域设置

表头区域包含对表单头部区域,包括电脑端的步骤条以及表单标题部分的设置项

主要对以下这部分进行设置

 

表头高度设置可以调整表头区域的高度,便于在表头部分插入背景图片;表头背景图、表头背景色与页面背景图和页面背景色的调整方式一样,还可以调整透明度,露出下方的页面背景;标题样式则可以调整标题字体的样式,包括字体、字号以及颜色和特殊样式;标题的水平和垂直位置则可以调整标题的对齐方式;如果你不想显示标题和报名进度,也可以在下方选择隐藏他们。

 

内容区域设置

内容区域设置主要是指表单的主体区域,包含有表单字段的部分

主要对以下这部分进行设置

内容背景色也可以设置透明度,以便露出下方的页面背景,并可以设置字段标题、字段描述以及选项文字的字体样式,字体样式设置与标题字体样式设置相同。

 

提交区域

提交区域指的是表单的提交按钮所在区域

提交区域设置主要对以下部分进行设置

提交区域同样可以设置背景色的颜色和透明度,提交按钮的颜色和透明度,提交按钮以及上一步按钮的样式,并且可以隐藏掉上一步按钮以及明细,在隐藏掉以上两个元素后,提交按钮可以设置为与表单同宽。

以上就是整个表单样式的设计面板,我们还会继续添加更加强大的表单样式功能,以及添加更多的表单样式模板,方便用户使用。

 

Was this article helpful?

Related Articles

Leave A Comment?