diff --git a/blueprints/form.yaml b/blueprints/form.yaml
new file mode 100644
index 0000000..08682e5
--- /dev/null
+++ b/blueprints/form.yaml
@@ -0,0 +1,169 @@
+title: Formular
+'@extends':
+  type: default
+  context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      fields:
+        form:
+          type: tab
+          title: Formular
+          fields:
+
+            title:
+              type: spacer
+              title: Formular Einstellungen
+
+            header.form.name:
+              label: Formular Name
+              type: text
+
+            # TODO: create fields that work an will be saved in the frontmatter correctly
+            fields:
+              type: section
+              title: Formular Felder
+              text: _Noch nicht implementiert._ Felder bitte via Frontmatter setzen.
+              underline: true
+              #fields:
+              #  header.form.fields:
+              #    type: list
+              #    style: vertical
+              #    label: Formular Felder
+              #    fields:
+#
+              #      .type:
+              #        type: select
+              #        label: Typ
+              #        options:
+              #          text: Text
+              #          email: E-Mail
+              #          textarea: Textarea
+              #          select: Select
+              #          radio: Radio
+              #          checkboxes: Checkboxes
+              #          hidden: Hidden
+              #          honeypot: Honeypot
+              #          columns: Columns
+#
+              #      .label:
+              #        toggleable: true
+              #        type: text
+              #        label: Label
+#
+              #      .placeholder:
+              #        toggleable: true
+              #        type: text
+              #        label: Platzhalter
+#
+              #      .classes:
+              #        toggleable: true
+              #        type: text
+              #        label: CSS Klassen
+#
+              #      .validate.required:
+              #        toggleable: true
+              #        type: toggle
+              #        label: Erforderlich
+              #        options:
+              #          1: Aktiviert
+              #          0: Deaktiviert
+#
+              #      .fields:
+              #        toggleable: true
+              #        type: list
+              #        style: horizontal
+              #        label: Felder
+              #        help: Typ muss auf Columns gesetzt sein
+              #        min: 1
+              #        max: 4
+              #        fields:
+              #          .type:
+              #            type: text
+              #            default: column
+              #            classes: hidden
+              #            readonly: true
+              #          .fields:
+              #            type: list
+              #            style: vertical
+              #            max: 1
+              #            fields:
+#
+              #              .type:
+              #                type: select
+              #                label: Typ
+              #                options:
+              #                  text: Text
+              #                  email: E-Mail
+              #                  textarea: Textarea
+              #                  select: Select
+              #                  radio: Radio
+              #                  checkboxes: Checkboxes
+              #                  hidden: Hidden
+              #                  honeypot: Honeypot
+              #                  columns: Columns
+#
+              #              .label:
+              #                toggleable: true
+              #                type: text
+              #                label: Label
+#
+              #              .placeholder:
+              #                toggleable: true
+              #                type: text
+              #                label: Platzhalter
+#
+              #              .classes:
+              #                toggleable: true
+              #                type: text
+              #                label: CSS Klassen
+#
+              #              .validate.required:
+              #                toggleable: true
+              #                type: toggle
+              #                label: Erforderlich
+              #                options:
+              #                  1: Aktiviert
+              #                  0: Deaktiviert
+
+            # TODO: add predefined buttons
+            buttons:
+              type: section
+              title: Formular Knöpfe
+              underline: true
+              fields:
+                header.form.buttons:
+                  type: list
+                  style: horizontal
+                  label: Formular Knöpfe
+                  fields:
+                    .type:
+                      type: select
+                      label: Typ
+                      options:
+                        submit: Submit
+                        reset: Reset
+                    .value:
+                      type: text
+                      label: Label
+                    .classes:
+                      toggleable: true
+                      type: text
+                      label: CSS Klassen
+
+            # TODO: add process options for email & save and eventually more
+            process:
+              type: section
+              title: Formular Verarbeitung
+              text: Weitere Optionen müssen via Frontmatter gesetzt werden.
+              underline: true
+              fields:
+                header.form.process.display:
+                  type: text
+                  label: Seite
+                  help: Seite auf die nach dem Absenden des Formulars weitergeleitet wird
+                header.form.process.message:
+                  type: text
+                  label: Nachricht
+                  help: Nachricht die nach dem Absenden des Formulars angezeigt wird
diff --git a/css/minimal.css b/css/minimal.css
index b256f2c..54b5bf3 100644
--- a/css/minimal.css
+++ b/css/minimal.css
@@ -78,6 +78,54 @@ table .text-align-left {
     text-align: right;
   }
 }
+form .form-columns {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+form .form-columns .form-column {
+  width: 100%;
+}
+form .form-field {
+  padding: 0.5rem;
+}
+form .form-field .form-data textarea:not(.no-css) {
+  width: 100%;
+  min-height: 5rem;
+  max-height: 20rem;
+  padding: 0.5rem;
+  resize: vertical;
+}
+
+form .form-field .form-data input:not(.no-css)[type=text], form .form-field .form-data input:not(.no-css)[type=email], form .form-field .form-data input:not(.no-css)[type=tel], form .form-field .form-data input:not(.no-css)[type=date], form .form-field .form-data input:not(.no-css)[type=number], form .form-field .form-data input:not(.no-css)[type=url], form .form-field .form-data input:not(.no-css)[type=range] {
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem;
+}
+
+form .form-field .form-data select:not(.no-css) {
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem;
+}
+form .form-field .form-data select:not(.no-css)[multiple] {
+  height: auto;
+  max-height: 15rem;
+}
+
+form .buttons {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.5rem;
+}
+form .buttons button {
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem;
+}
+
 .overlay-dark .image-overlay {
   background-color: rgba(0, 0, 0, 0.2);
 }
diff --git a/css/minimal.css.map b/css/minimal.css.map
index c5a2b7a..b56dcf5 100644
--- a/css/minimal.css.map
+++ b/css/minimal.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_overrides.scss","../scss/elements/_table.scss","../scss/_elements.scss","../scss/_variables.scss","../scss/_header-footer.scss","../scss/_navigation.scss","../scss/minimal.scss"],"names":[],"mappings":"AAIA;EAAW;;;AAGX;EACC;;AAEA;EAAI;;;ACNL;EACC;;AAEA;EACC;EACA;;AAGD;EAAS;;AAET;EACC;EACA;EACA;EACA;;AAGD;EAAqB;;AAErB;EAAqB;;AAErB;EAAoB;;AAEpB;EAAmB;;;AAKpB;EACC;IAAmB;;;AAIpB;EACC;IACC;IACA;;EAEA;IAAU;;EAEV;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAEA;IAAc;;EAGf;IAA0D;;;AC9D3D;EACC,kBCOa;;ADJd;EACC;;;AAMD;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EAAM;;;AEtBP;EACC;EACA;;AAEA;EAAG;;;ACHH;AAAA;EACC;;AAEA;AAAA;EAAS;;AAET;AAAA;EAAU;;;AAKZ;EACC;;AAEA;EAAK;;;AAIN;EACC,YFrBgB;;;AGGjB;EACC;;;AAID;EACC;;;AAGD;EACC;;AAEA;EAAQ;;AAER;EAAQ;;AAER;EAAM;;AAEN;EAAM","file":"minimal.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/_overrides.scss","../scss/elements/_table.scss","../scss/elements/_form.scss","../scss/_elements.scss","../scss/_variables.scss","../scss/_header-footer.scss","../scss/_navigation.scss","../scss/minimal.scss"],"names":[],"mappings":"AAIA;EAAW;;;AAGX;EACC;;AAEA;EAAI;;;ACNL;EACC;;AAEA;EACC;EACA;;AAGD;EAAS;;AAET;EACC;EACA;EACA;EACA;;AAGD;EAAqB;;AAErB;EAAqB;;AAErB;EAAoB;;AAEpB;EAAmB;;;AAKpB;EACC;IAAmB;;;AAIpB;EACC;IACC;IACA;;EAEA;IAAU;;EAEV;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAEA;IAAc;;EAGf;IAA0D;;;AC1C3D;EAXC;EACA;EACA;;AAYA;EACC;;AAIF;EACC;;AA/BQ;EAmCN;EACA;EACA;EACA,SA/BY;EAgCZ;;;AAIA;EA1BF;EACA,QAVmB;EAWnB,SAZc;;;AAPN;EAiBR;EACA,QAVmB;EAWnB,SAZc;;AAkDZ;EACC;EACA;;;AAQJ;EAxDC;EACA;EACA;EAwDA;EACA,SA/Dc;;AAiEd;EAvDA;EACA,QAVmB;EAWnB,SAZc;;;ACJf;EACC,kBCMa;;ADHd;EACC;;;AAMD;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EAAM;;;AEvBP;EACC;EACA;;AAEA;EAAG;;;ACHH;AAAA;EACC;;AAEA;AAAA;EAAS;;AAET;AAAA;EAAU;;;AAKZ;EACC;;AAEA;EAAK;;;AAIN;EACC,YFrBgB;;;AGGjB;EACC;;;AAID;EACC;;;AAGD;EACC;;AAEA;EAAQ;;AAER;EAAQ;;AAER;EAAM;;AAEN;EAAM","file":"minimal.css"}
\ No newline at end of file
diff --git a/scss/_elements.scss b/scss/_elements.scss
index 54276ff..045c0d1 100644
--- a/scss/_elements.scss
+++ b/scss/_elements.scss
@@ -2,6 +2,7 @@
 
 @import 'variables';
 @import "elements/table";
+@import "elements/form";
 
 // overlays
 .image-overlay {
diff --git a/scss/elements/_form.scss b/scss/elements/_form.scss
new file mode 100644
index 0000000..56bb6fc
--- /dev/null
+++ b/scss/elements/_form.scss
@@ -0,0 +1,82 @@
+// forms
+@use 'sass:selector';
+@import '../variables';
+
+@mixin unify-parent($child) {
+	@at-root #{selector.unify(&, $child)} {
+		@content;
+	}
+}
+
+// desktop
+form {
+	$form-padding: .5rem;
+	$form-field-height: 2.5rem;
+
+	@mixin layout {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+	}
+
+	@mixin form-field {
+		width: 100%;
+		height: $form-field-height;
+		padding: $form-padding;
+	}
+
+	.form-columns {
+		@include layout;
+
+		.form-column {
+			width: 100%;
+		}
+	}
+
+	.form-field {
+		padding: .5rem;
+
+		.form-data :not(.no-css) {
+			@include unify-parent('textarea') {
+				width: 100%;
+				min-height: 2*$form-field-height;
+				max-height: 8*$form-field-height;
+				padding: $form-padding;
+				resize: vertical;
+			}
+
+			@include unify-parent('input') {
+				&[type='text'],
+				&[type='email'],
+				&[type='tel'],
+				&[type='date'],
+				&[type='number'],
+				&[type='url'],
+				&[type='range'] {
+					@include form-field;
+				}
+			}
+
+			@include unify-parent('select') {
+				@include form-field;
+
+				&[multiple] {
+					height: auto;
+					max-height: 6*$form-field-height;
+				}
+			}
+		}
+
+	}
+
+	// TODO: unify buttons with fancy class
+	.buttons {
+		@include layout;
+		gap: 1rem;
+		padding: $form-padding;
+
+		button {
+			@include form-field;
+		}
+	}
+}