diff --git a/frappe/public/js/form_builder/components/FieldTypes.vue b/frappe/public/js/form_builder/components/FieldTypes.vue
index 3e10ea6b36..0c7def7811 100644
--- a/frappe/public/js/form_builder/components/FieldTypes.vue
+++ b/frappe/public/js/form_builder/components/FieldTypes.vue
@@ -2,7 +2,9 @@
 import SearchBox from "./SearchBox.vue";
 import draggable from "vuedraggable";
 import { ref, computed } from "vue";
+import { useStore } from "../store";
 
+let store = useStore();
 let search_text = ref("");
 
 function clone_field(field) {
@@ -27,12 +29,7 @@ let fields = computed(() => {
 		})
 		.map(df => {
 			let out = {
-				df: {
-					label: "",
-					fieldname: "",
-					fieldtype: df,
-					options: "",
-				},
+				df: store.get_df(df),
 				table_columns: [],
 				new_field: true,
 			};
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index b3394342e7..fa56cb5c5f 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -10,19 +10,21 @@ let store = useStore();
 
 let hovered = ref(false);
 
+let visible_columns = computed(() => props.section.columns.filter(c => !c.remove));
+
 function add_column() {
-	if (props.section.columns.length < 4) {
+	if (visible_columns.value.length < 4) {
 		props.section.columns.push({
-			df: { fieldtype: "Column Break" },
+			df: store.get_df("Column Break", "column_break_" + frappe.utils.get_random(4)),
 			new_field: true,
-			fields: []
+			fields: [],
 		});
 	}
 }
 function remove_column() {
-	if (props.section.columns.length <= 1) return;
+	if (visible_columns.value.length <= 1) return;
 
-	let columns = props.section.columns.slice();
+	let columns = visible_columns.value.slice();
 	let last_column_fields = columns.slice(-1)[0].fields.slice();
 	let index = columns.length - 1;
 	columns = columns.slice(0, index);
@@ -36,25 +38,24 @@ let section_options = computed(() => {
 	return [
 		{
 			label: __("Add section above"),
-			action: () => emit("add_section_above")
+			action: () => emit("add_section_above"),
 		},
 		{
 			label: __("Add column"),
 			action: add_column,
-			condition: () => props.section.columns.length < 4
+			condition: () => visible_columns.value.length < 4,
 		},
 		{
 			label: __("Remove column"),
 			action: remove_column,
-			condition: () => props.section.columns.length > 1
+			condition: () => visible_columns.value.length > 1,
 		},
 		{
 			label: __("Remove section"),
-			action: () => props.section.remove = true
+			action: () => props.section.remove = true,
 		}
 	].filter(option => (option.condition ? option.condition() : true));
 });
-
 </script>
 
 <template>
@@ -102,7 +103,7 @@ let section_options = computed(() => {
 			<div class="section-columns">
 				<div
 					class="column col"
-					v-for="(column, i) in section.columns"
+					v-for="(column, i) in visible_columns"
 					:key="i"
 					@mouseover.stop="hovered = false"
 				>
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 0cfd7c6a15..e5317e795c 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -23,22 +23,33 @@ function drag_over(tab) {
 		}, 500);
 }
 
+function section_boilerplate() {
+	return [
+		{
+			df: store.get_df("Section Break"),
+			columns: [
+				{
+					df: store.get_df("Column Break", "column_break_" + frappe.utils.get_random(4)),
+					fields: [],
+					new_field: true,
+				},
+				{
+					df: store.get_df("Column Break", "column_break_" + frappe.utils.get_random(4)),
+					fields: [],
+					new_field: true,
+				}
+			],
+			new_field: true,
+		}
+	];
+}
+
 function add_section_above(section) {
 	let sections = [];
 	let current_tab = layout.value.tabs.find(tab => tab.df.name == store.active_tab);
 	for (let _section of current_tab.sections) {
 		if (_section === section) {
-			sections.push({
-				df: {
-					name: frappe.utils.get_random(8),
-					fieldtype: "Section Break"
-				},
-				new_field: true,
-				columns: [
-					{ df: { fieldtype: "Column Break" }, new_field: true, fields: [] },
-					{ df: { fieldtype: "Column Break" }, new_field: true, fields: [] }
-				]
-			});
+			sections.push(section_boilerplate());
 		}
 		sections.push(_section);
 	}
@@ -47,24 +58,10 @@ function add_section_above(section) {
 
 function add_new_tab() {
 	let tab = {
-		df: {
-			label: "Tab " + (layout.value.tabs.length + 1),
-			name: frappe.utils.get_random(8),
-			fieldtype: "Tab Break"
-		},
-		sections: [{
-			df: {
-				name: frappe.utils.get_random(8),
-				fieldtype: "Section Break"
-			},
-			columns: [
-				{ df: { fieldtype: "Column Break" }, fields: [], new_field: true },
-				{ df: { fieldtype: "Column Break" }, fields: [], new_field: true }
-			],
-			new_field: true,
-		}],
-		new_field: true,
-	}
+		df: store.get_df("Tab Break", "", "Tab " + (layout.value.tabs.length + 1)),
+		sections: section_boilerplate(),
+	};
+
 	layout.value.tabs.push(tab);
 	activate_tab(tab);
 }
@@ -111,7 +108,7 @@ function remove_tab() {
 					<use href="#icon-add"></use>
 				</svg>
 				<div class="add-btn-text" v-else>
-					{{ __('Add new tab') }}
+					{{ __("Add new tab") }}
 				</div>
 			</button>
 			<button
diff --git a/frappe/public/js/form_builder/store.js b/frappe/public/js/form_builder/store.js
index e3eb1c502f..d83d0776f2 100644
--- a/frappe/public/js/form_builder/store.js
+++ b/frappe/public/js/form_builder/store.js
@@ -16,6 +16,16 @@ export const useStore = defineStore("store", {
 		selected: (state) => {
 			return (name) => state.selected_field?.name == name;
 		},
+		get_df() {
+			return (fieldtype, fieldname = "", label = "") => {
+				let df = frappe.model.get_new_doc("DocField");
+				df.name = frappe.utils.get_random(8);
+				df.fieldtype = fieldtype;
+				df.fieldname = fieldname;
+				df.label = label;
+				return df;
+			};
+		},
 	},
 	actions: {
 		async fetch() {
@@ -38,7 +48,7 @@ export const useStore = defineStore("store", {
 			this.selected_field = first_tab.df;
 		},
 		get_layout() {
-			return create_layout(this.fields);
+			return create_layout(this.fields, this.get_df);
 		},
 	},
 });
diff --git a/frappe/public/js/form_builder/utils.js b/frappe/public/js/form_builder/utils.js
index 6513f9710b..65e2949ec1 100644
--- a/frappe/public/js/form_builder/utils.js
+++ b/frappe/public/js/form_builder/utils.js
@@ -1,4 +1,4 @@
-export function create_layout(fields) {
+export function create_layout(fields, get_df) {
 	let layout = {
 		tabs: [],
 	};
@@ -32,10 +32,7 @@ export function create_layout(fields) {
 	function get_new_tab(df) {
 		let _tab = {};
 		if (!df) {
-			df = {
-				label: __("Details"),
-				fieldtype: "Tab Break",
-			};
+			df = get_df("Tab Break", "", __("Details"));
 			_tab.new_field = true;
 		}
 		_tab.df = df;
@@ -46,10 +43,7 @@ export function create_layout(fields) {
 	function get_new_section(df) {
 		let _section = {};
 		if (!df) {
-			df = {
-				name: frappe.utils.get_random(8),
-				fieldtype: "Section Break",
-			};
+			df = get_df("Section Break");
 			_section.new_field = true;
 		}
 		_section.df = df;
@@ -60,7 +54,7 @@ export function create_layout(fields) {
 	function get_new_column(df) {
 		let _column = {};
 		if (!df) {
-			df = { fieldtype: "Column Break" };
+			df = get_df("Column Break", "column_break_" + frappe.utils.get_random(4));
 			_column.new_field = true;
 		}
 		_column.df = df;