diff --git a/dev/multipleforms/app.vue b/dev/multipleforms/app.vue
new file mode 100644
index 00000000..62443ca8
--- /dev/null
+++ b/dev/multipleforms/app.vue
@@ -0,0 +1,78 @@
+<template lang="html">
+	<form>
+		<vue-form-generator :schema="section1" :model="model" :options="formOptions"></vue-form-generator>
+		<vue-form-generator :schema="section2" :model="model" :options="formOptions"></vue-form-generator>
+	</form>
+</template>
+
+<script>
+import Vue from "vue";
+
+export default {
+	data () {
+		return {
+			model: {
+				name: 'Brian Blessed',
+				email: "brian@hawkman.mongo",
+				pref_1: 'blah'
+			},
+
+			section1: {
+			    groups:[{
+                    legend: "Contact Details",
+                    fields: [
+                        {
+                            type: "input",
+                            inputType: "text",
+                            label: "Name",
+                            model: "name"
+                        },
+                        {
+                            type: "input",
+                            inputType: "email",
+                            label: "Email",
+                            model: "email"
+                        }
+                    ]
+				},{
+                    legend: "Other Details",
+                    fields: [
+                        {
+                            type: "input",
+                            inputType: "text",
+                            label: "More",
+                            model: "more"
+                        },
+                        {
+                            type: "input",
+                            inputType: "text",
+                            label: "Things",
+                            model: "things"
+                        }
+                    ]
+                }]
+
+			},
+
+			section2: {
+				fields: [
+					{
+						type: "input",
+						inputType: "text",
+						label: "Pref 1",
+						model: "pref_1"
+					}
+				]
+			},
+
+			formOptions: {
+				fieldIdPrefix: 'frm1_'
+			}
+		}
+	},
+
+	created() {
+		window.app = this;
+	}
+}
+</script>
diff --git a/dev/multipleforms/index.html b/dev/multipleforms/index.html
new file mode 100644
index 00000000..3e4ca015
--- /dev/null
+++ b/dev/multipleforms/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-form-generator multiple forms demo</title>
+  </head>
+  <body>
+    <div class="container-fluid"></div>
+    <div id="app"></div>
+  	<script src="/mforms.js"></script>
+  </body>
+</html>
diff --git a/dev/multipleforms/main.js b/dev/multipleforms/main.js
new file mode 100644
index 00000000..88e4ffc5
--- /dev/null
+++ b/dev/multipleforms/main.js
@@ -0,0 +1,9 @@
+import Vue from "vue";
+import VueFormGenerator from "../../src";
+Vue.use(VueFormGenerator);
+
+import App from './app.vue';
+
+new Vue({
+    ...App
+}).$mount('#app');
\ No newline at end of file
diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
index 0600cd92..e4c8080f 100644
--- a/src/fields/abstractField.js
+++ b/src/fields/abstractField.js
@@ -167,10 +167,10 @@ export default {
 			// then slugify it.
 			if (typeof schema.id !== "undefined") {
 				// If an ID's been explicitly set, use it unchanged
-				return schema.id;
+				return schema.idPrefix + schema.id;
 			} else {
 				// Return the slugified version of either:
-				return (schema.inputName || schema.label || schema.model)
+				return schema.idPrefix + (schema.inputName || schema.label || schema.model)
 				// NB: This is a very simple, conservative, slugify function,
 				// avoiding extra dependencies.
 				.toString()
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index cb111129..fbe425f1 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-div
-	fieldset.vue-form-generator(v-if='schema != null', :is='tag')
-		template(v-for='field in fields')
+div.vue-form-generator(v-if='schema != null')
+	template(v-for='field in fields')
+		fieldset(v-if='schema != null', :is='tag')
 			.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
 				label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
 					| {{ field.label }}
@@ -15,6 +15,23 @@ div
 				.hint(v-if='field.hint') {{ field.hint }}
 				.errors.help-block(v-if='fieldErrors(field).length > 0')
 					span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}
+	template(v-for='group in groups')
+		fieldset(v-if='schema != null', :is='tag')
+			legend(v-if='group.legend') {{ group.legend }}
+			template(v-for='field in group.fields')
+				.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
+					label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
+						| {{ field.label }}
+						span.help(v-if='field.help')
+							i.icon
+							.helpText(v-html='field.help')
+					.field-wrap
+						component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema.sync='field', @model-updated='modelUpdated', @validated="onFieldValidated")
+						.buttons(v-if='buttonVisibility(field)')
+							button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field)', :class='btn.classes') {{ btn.label }}
+					.hint(v-if='field.hint') {{ field.hint }}
+					.errors.help-block(v-if='fieldErrors(field).length > 0')
+						span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}
 </template>
 
 <script>
@@ -91,17 +108,27 @@ div
 		},
 
 		computed: {
-			fields() {
-				let res = [];
-				if (this.schema) {
-					each(this.schema.fields, (field) => {
-						if (!this.multiple || field.multi === true)
-							res.push(field);
-					});
-				}
-
-				return res;
-			}
+            fields() {
+                let res = [];
+                if (this.schema && this.schema.fields) {
+                    each(this.schema.fields, (field) => {
+                        if (!this.multiple || field.multi === true)
+                            res.push(field);
+                    });
+                }
+
+                return res;
+            },
+            groups() {
+                let res = [];
+                if (this.schema && this.schema.groups) {
+                    each(this.schema.groups, (group) => {
+                            res.push(group);
+                    });
+                }
+
+                return res;
+            }
 		},
 
 		watch: {
@@ -122,6 +149,13 @@ div
 			}
 		},
 
+		beforeMount() {
+			// Add idPrefix to fields if fieldIdPrefix is set
+			for (let field of this.schema.fields) {
+				field.idPrefix = this.options.fieldIdPrefix || "";
+			}
+		},
+
 		mounted() {
 			this.$nextTick(() => {
 				if (this.model) {
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index e126721b..d13cb98a 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -17,23 +17,24 @@ var loaders = [
 		test: /\.json$/,
 		loader: 'json'
 	},
-	{ 
-		test: /\.(woff2?|svg)$/, 
-		loader: "url" 
-		//loader: "url?limit=10000" 
+	{
+		test: /\.(woff2?|svg)$/,
+		loader: "url"
+		//loader: "url?limit=10000"
 	},
-	{ 
-		test: /\.(ttf|eot)$/, 
-		loader: "url" 
+	{
+		test: /\.(ttf|eot)$/,
+		loader: "url"
 	}
 ];
 
 module.exports = {
 	devtool: "source-map",
-	
+
 	entry: {
 		full: path.resolve("dev", "full", "main.js"),
 		mselect: path.resolve("dev", "multiselect", "main.js"),
+		mforms: path.resolve("dev", "multipleforms", "main.js"),
 		checklist: path.resolve("dev", "checklist", "main.js")
 	},
 
