diff --git a/frappe/website/doctype/web_form/web_form.js b/frappe/website/doctype/web_form/web_form.js
index ab911e2465..68ebb5cb24 100644
--- a/frappe/website/doctype/web_form/web_form.js
+++ b/frappe/website/doctype/web_form/web_form.js
@@ -1,4 +1,28 @@
 frappe.ui.form.on("Web Form", {
+	setup: function (frm) {
+		frappe.meta.docfield_map["Web Form Field"].fieldtype.formatter = (value) => {
+			const prefix = {
+				"Page Break": "--red-600",
+				"Section Break": "--blue-600",
+				"Column Break": "--yellow-600",
+			};
+			if (prefix[value]) {
+				value = `<span class="bold" style="color: var(${prefix[value]})">${value}</span>`;
+			}
+			return value;
+		};
+
+		frappe.meta.docfield_map["Web Form Field"].fieldname.formatter = (value) => {
+			if (!value) return;
+			return frappe.unscrub(value);
+		};
+
+		frappe.meta.docfield_map["Web Form List Column"].fieldname.formatter = (value) => {
+			if (!value) return;
+			return frappe.unscrub(value);
+		};
+	},
+
 	refresh: function (frm) {
 		// show is-standard only if developer mode
 		frm.get_field("is_standard").toggle(frappe.boot.developer_mode);
@@ -105,7 +129,7 @@ frappe.ui.form.on("Web Form", {
 
 		get_fields_for_doctype(doc.doc_type).then((fields) => {
 			let as_select_option = (df) => ({
-				label: df.label + " (" + df.fieldtype + ")",
+				label: df.label,
 				value: df.fieldname,
 			});
 			update_options(fields.map(as_select_option));
@@ -168,6 +192,7 @@ frappe.ui.form.on("Web Form Field", {
 		if (["Section Break", "Column Break", "Page Break"].includes(doc.fieldtype)) {
 			doc.fieldname = "";
 			doc.options = "";
+			doc.label = "";
 			frm.refresh_field("web_form_fields");
 		}
 	},
diff --git a/frappe/website/doctype/web_form_field/web_form_field.json b/frappe/website/doctype/web_form_field/web_form_field.json
index dbadf52881..7fa1c4d6cf 100644
--- a/frappe/website/doctype/web_form_field/web_form_field.json
+++ b/frappe/website/doctype/web_form_field/web_form_field.json
@@ -32,7 +32,7 @@
    "fieldname": "fieldname",
    "fieldtype": "Select",
    "in_list_view": 1,
-   "label": "Fieldname"
+   "label": "Field"
   },
   {
    "fieldname": "fieldtype",
@@ -45,7 +45,7 @@
    "fieldname": "label",
    "fieldtype": "Data",
    "in_list_view": 1,
-   "label": "Label"
+   "label": "Custom Label"
   },
   {
    "default": "0",
@@ -58,6 +58,7 @@
    "default": "0",
    "fieldname": "reqd",
    "fieldtype": "Check",
+   "in_list_view": 1,
    "label": "Mandatory"
   },
   {
@@ -146,7 +147,7 @@
  ],
  "istable": 1,
  "links": [],
- "modified": "2022-08-10 12:59:51.170546",
+ "modified": "2022-08-17 19:10:02.567957",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Web Form Field",
diff --git a/frappe/website/doctype/web_form_list_column/web_form_list_column.json b/frappe/website/doctype/web_form_list_column/web_form_list_column.json
index e55aeadca6..8be724f426 100644
--- a/frappe/website/doctype/web_form_list_column/web_form_list_column.json
+++ b/frappe/website/doctype/web_form_list_column/web_form_list_column.json
@@ -15,14 +15,14 @@
    "fieldname": "fieldname",
    "fieldtype": "Select",
    "in_list_view": 1,
-   "label": "Fieldname",
+   "label": "Field",
    "reqd": 1
   },
   {
    "fieldname": "label",
    "fieldtype": "Data",
    "in_list_view": 1,
-   "label": "Label"
+   "label": "Custom Label"
   },
   {
    "fieldname": "fieldtype",
@@ -35,7 +35,7 @@
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2022-06-21 17:22:14.978947",
+ "modified": "2022-08-17 19:09:01.417841",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Web Form List Column",