定制

你可以自定义你的网页表单，让它更独特，并启用满足你使用场景的功能。

字段布局

你可以在网页表单字段表格中添加 Column Breaks 和 Section Breaks 来更改表单字段的布局。

多步骤网页表单

更新布局能让网页表单看起来更好，但如果网页表单有很多字段，它仍然会变得很长。
我们可以添加 Page Breaks 来将各个部分分隔到不同页面（称为多步骤网页表单）。

你最多可以添加 9 个分页符，这最多只允许 10 个页面。

下面提到的所有自定义选项都可以在网页表单文档的“自定义”选项卡中完成。

提交按钮标签

你可以更改网页表单上提交按钮的标签。

你现在可以在网页表单上添加横幅图片。

你可以通过添加 JSON 对象来自定义网页表单中的面包屑导航。

只有在网页表单启用了 [list view](/framework/v14/user/en/web-form/settings#list-settings) 时，面包屑导航才会显示。

示例：

提交后页面

你可以设置自定义的成功标题和消息，它们会在用户提交网页表单后显示。

根据访问权限，提交页面上会显示额外的按钮，例如

查看之前的回复

编辑你的回复

查看你的回复
和

提交另一条回复

如果网页表单是通过网页表单请求打开的，这些操作链接会在需要时保留请求密钥。

通过设置 success_url 字段，将你的网页表单配置为在提交后 5 秒重定向到特定 URL。

自定义 CSS

你可以添加自定义 CSS 来更改网页表单的外观

示例：

.web-form-header {
 margin-bottom: 2rem;
 border: 1px solid var(--blue-200) !important;
 border-radius: var(--border-radius);
 background-color: var(--blue-50) !important;
}

.web-form-head {
 border: none !important;
 padding-bottom: 2rem !important;
}

.web-form {
 border: 1px solid var(--dark-border-color) !important;
 border-radius: var(--border-radius);
 padding-top: 2rem !important;
}

客户端脚本

你也可以向网页表单添加自定义客户端脚本

事件处理器

编写一个事件处理器，在字段发生变化时执行操作。

frappe.web_form.on([fieldname], [handler]);
获取值

获取特定字段的值

value = frappe.web_form.get_value([fieldname]);
设置值

设置特定字段的值

frappe.web_form.set_value([fieldname], [value])
验证

frappe.web_form.validate 会在 web_form 保存之前被调用。通过重写 validate 方法来添加自定义
验证。要阻止用户保存，
请返回 false；

frappe.web_form.validate = () => {
 // return false if not valid
}
设置字段属性
frappe.web_form.set_df_property([fieldname], [property], [value]);
表单加载时触发脚本

在表单加载后使用自定义设置初始化表单

frappe.web_form.after_load = () => {
 // init script here
}

示例

如果无效则重置值
frappe.web_form.on('amount', (field, value) => {
 if (value < 1000) {
 frappe.msgprint('Value must be more than 1000');
 field.set_value(0);
 }
});
自定义验证
frappe.web_form.validate = () => {
 let data = frappe.web_form.get_values();
 if (data.amount < 1000) {
 frappe.msgprint('Value must be more than 1000');
 return false;
 }
});
根据值隐藏字段
frappe.web_form.on('amount', (field, value) => {
 if (value < 1000) {
 frappe.web_form.set_df_property('rate', 'hidden', 1);
 }
});
启动时显示消息
frappe.web_form.after_load = () => {
 frappe.msgprint('Please fill all values carefully');
}