diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index de4978f318..acbb5ed24b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -18,8 +18,11 @@ jobs:
       - name: Compile assets
         run: npm run production
 
+      - name: Compile frontend assets
+        run: npm run frontend-prod
+
       - name: Create zip
-        run: cd resources && tar -czvf dist.tar.gz dist
+        run: cd resources && tar -czvf dist.tar.gz dist dist-frontend
 
       - name: Get Changelog
         id: changelog
diff --git a/.gitignore b/.gitignore
index 6286b23fc6..758b4b407d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,5 @@ node_modules
 .phpunit.result.cache
 tests/Fakes/Composer/Package/test-package/composer.json
 resources/dist
+resources/dist-frontend
 composer.lock
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000000..f243a1f0ee
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ]
+};
diff --git a/composer.json b/composer.json
index 6b59456bb7..8577045468 100644
--- a/composer.json
+++ b/composer.json
@@ -51,7 +51,7 @@
     "extra": {
         "download-dist": {
             "url": "https://github.com/statamic/cms/releases/download/{$version}/dist.tar.gz",
-            "path": "resources/dist"
+            "path": "resources"
         },
         "laravel": {
             "providers": [
diff --git a/frontend.mix.js b/frontend.mix.js
new file mode 100644
index 0000000000..7979780d3e
--- /dev/null
+++ b/frontend.mix.js
@@ -0,0 +1,9 @@
+const mix = require('laravel-mix');
+const src = 'resources';
+const dest = 'resources/dist-frontend';
+
+mix.setPublicPath('./resources/dist-frontend');
+
+mix.js(`${src}/js/frontend/helpers.js`, `${dest}/js`)
+
+mix.sourceMaps();
diff --git a/jest.config.js b/jest.config.js
index 0b97ca2d84..7bc6acd31f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -129,7 +129,7 @@ module.exports = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "node",
+  testEnvironment: "jsdom",
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
@@ -167,9 +167,9 @@ module.exports = {
   // transform: null,
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  transformIgnorePatterns: [
+    'node_modules/(?!(underscore)/)'
+  ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,
diff --git a/package-lock.json b/package-lock.json
index 82e3b94152..e474da6b02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "svgo": "^2.6.1",
         "sweetalert": "~1.0.1",
         "tiptap-extensions": "^1.28.6",
-        "underscore": "~1.9.2",
+        "underscore": "~1.13.2",
         "uniqid": "^5.2.0",
         "v-calendar": "^1.0.1",
         "v-tooltip": "^2.0.3",
@@ -16984,9 +16984,9 @@
       }
     },
     "node_modules/underscore": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.2.tgz",
-      "integrity": "sha512-D39qtimx0c1fI3ya1Lnhk3E9nONswSKhnffBI0gME9C99fYOkNi04xs8K6pePLhvl1frbDemkaBQ5ikWllR2HQ=="
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.2.tgz",
+      "integrity": "sha512-ekY1NhRzq0B08g4bGuX4wd2jZx5GnKz6mKSqFL4nqBlfyMGiG10gDFhDTMEfYmDL6Jy0FUIZp7wiRB+0BP7J2g=="
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
@@ -32214,9 +32214,9 @@
       }
     },
     "underscore": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.2.tgz",
-      "integrity": "sha512-D39qtimx0c1fI3ya1Lnhk3E9nONswSKhnffBI0gME9C99fYOkNi04xs8K6pePLhvl1frbDemkaBQ5ikWllR2HQ=="
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.2.tgz",
+      "integrity": "sha512-ekY1NhRzq0B08g4bGuX4wd2jZx5GnKz6mKSqFL4nqBlfyMGiG10gDFhDTMEfYmDL6Jy0FUIZp7wiRB+0BP7J2g=="
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
diff --git a/package.json b/package.json
index cf55759b39..fb6b760c8a 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,11 @@
     "prod": "npm run production",
     "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "svgo": "svgo -f ./resources/svg/  -r",
-    "test": "cross-env NODE_ENV=test jest",
-    "test-watch": "npm run test -- --watch --notify"
+    "test": "cross-env NODE_ENV=test jest --silent",
+    "test-watch": "npm run test -- --watch --notify",
+    "frontend-dev": "npm run development -- --env.mixfile=frontend.mix",
+    "frontend-prod": "npm run production -- --env.mixfile=frontend.mix",
+    "frontend-watch": "npm run watch -- --env.mixfile=frontend.mix"
   },
   "dependencies": {
     "@popperjs/core": "^2.5.3",
@@ -51,7 +54,7 @@
     "svgo": "^2.6.1",
     "sweetalert": "~1.0.1",
     "tiptap-extensions": "^1.28.6",
-    "underscore": "~1.9.2",
+    "underscore": "~1.13.2",
     "uniqid": "^5.2.0",
     "v-calendar": "^1.0.1",
     "v-tooltip": "^2.0.3",
diff --git a/resources/js/app.js b/resources/js/app.js
index 0c5da68d2b..cd53de3c8d 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -2,6 +2,11 @@ import Vue from 'vue';
 import Toast from './mixins/Toast.js';
 import Statamic from './components/Statamic.js';
 import Alpine from 'alpinejs'
+import * as Globals from './bootstrap/globals'
+
+let global_functions = Object.keys(Globals)
+global_functions.forEach(fnName => { global[fnName] = Globals[fnName] })
+global.Cookies = require('cookies-js');
 
 Vue.config.silent = false;
 Vue.config.devtools = true;
@@ -14,7 +19,6 @@ window._ = require('underscore');
 window.$ = window.jQuery = require('jquery');
 window.rangy = require('rangy');
 
-require('./bootstrap/globals');
 require('./bootstrap/polyfills');
 require('./bootstrap/underscore-mixins');
 require('./bootstrap/jquery-plugins');
diff --git a/resources/js/bootstrap/globals.js b/resources/js/bootstrap/globals.js
index ec7dcd4663..b5379393d9 100644
--- a/resources/js/bootstrap/globals.js
+++ b/resources/js/bootstrap/globals.js
@@ -1,52 +1,50 @@
 import { marked } from 'marked';
 import { translate, translateChoice } from '../translations/translator';
 
-global.cp_url = function(url) {
+export function cp_url(url) {
     url = Statamic.$config.get('cpUrl') + '/' + url;
     return tidy_url(url);
 };
 
-global.docs_url = function(url) {
+export function docs_url(url) {
     return tidy_url('https://statamic.dev/' + url);
 };
 
-global.resource_url = function(url) {
+export function resource_url(url) {
     url = Statamic.$config.get('resourceUrl') + '/' + url;
     return tidy_url(url);
 };
 
-global.tidy_url = function(url) {
+export function tidy_url(url) {
     return url.replace(/([^:])(\/\/+)/g, '$1/')
 }
 
-global.relative_url = function(url) {
+export function relative_url(url) {
     return url.replace(/^(?:\/\/|[^/]+)*\//, '/');
 }
 
-global.file_icon = function(extension) {
+export function file_icon(extension) {
     return resource_url('img/filetypes/'+ extension +'.png');
 };
 
-global.dd = function(args) {
+export function dd(args) {
     console.log(args);
 };
 
-global.data_get = function(obj, path, fallback=null) {
+export function data_get(obj, path, fallback=null) {
     // Source: https://stackoverflow.com/a/22129960
     var properties = Array.isArray(path) ? path : path.split('.');
     var value = properties.reduce((prev, curr) => prev && prev[curr], obj);
     return value !== undefined ? value : fallback;
 };
 
-global.clone = function (value) {
+export function clone(value) {
     if (value === undefined) return undefined;
 
     return JSON.parse(JSON.stringify(value));
 }
 
-global.Cookies = require('cookies-js');
-
-global.tailwind_width_class = function (width) {
+export function tailwind_width_class(width) {
     const widths = {
         25: '1/4',
         33: '1/3',
@@ -59,18 +57,18 @@ global.tailwind_width_class = function (width) {
     return `w-${widths[width] || 'full'}`;
 }
 
-global.markdown = function (value) {
+export function markdown(value) {
     return marked(value);
 };
 
-global.__ = function (string, replacements) {
+export function __(string, replacements) {
     return translate(string, replacements);
 }
-global.__n = function (string, number, replacements) {
+export function __n(string, number, replacements) {
     return translateChoice(string, number, replacements);
 }
 
-global.utf8btoa = function (stringToEncode) {
+export function utf8btoa(stringToEncode) {
     // first we convert it to utf-8
     const utf8String = encodeURIComponent(stringToEncode)
       .replace(/%([0-9A-F]{2})/g, (_, code) => String.fromCharCode(`0x${code}`));
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index c4f5223a40..7882f8bbaa 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -117,7 +117,7 @@
 
                 <publish-container
                     v-if="fields"
-                    name="publishContainer"
+                    :name="publishContainer"
                     :blueprint="fieldset"
                     :values="values"
                     :meta="meta"
@@ -185,9 +185,14 @@
 import EditorActions from './EditorActions.vue';
 import FocalPointEditor from './FocalPointEditor.vue';
 import PublishFields from '../../publish/Fields.vue';
+import HasHiddenFields from '../../data-list/HasHiddenFields';
 
 export default {
 
+    mixins: [
+        HasHiddenFields,
+    ],
+
     components: {
         EditorActions,
         FocalPointEditor,
@@ -332,7 +337,7 @@ export default {
             this.saving = true;
             const url = cp_url(`assets/${utf8btoa(this.id)}`);
 
-            this.$axios.patch(url, this.values).then(response => {
+            this.$axios.patch(url, this.visibleValues).then(response => {
                 this.$emit('saved', response.data.asset);
                 this.$toast.success(__('Saved'));
                 this.saving = false;
diff --git a/resources/js/components/data-list/HasHiddenFields.js b/resources/js/components/data-list/HasHiddenFields.js
new file mode 100644
index 0000000000..131f2cf10b
--- /dev/null
+++ b/resources/js/components/data-list/HasHiddenFields.js
@@ -0,0 +1,17 @@
+export default {
+
+    computed: {
+
+        hiddenFields() {
+            return this.$store.state.publish[this.publishContainer].hiddenFields;
+        },
+
+        visibleValues() {
+            return _.omit(this.values, (_, handle) => {
+                return this.hiddenFields[handle];
+            });
+        },
+
+    }
+
+}
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 5227e6c9be..8840bd16c0 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -257,11 +257,13 @@ import PublishActions from './PublishActions';
 import SaveButtonOptions from '../publish/SaveButtonOptions';
 import RevisionHistory from '../revision-history/History';
 import HasPreferences from '../data-list/HasPreferences';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
     mixins: [
         HasPreferences,
+        HasHiddenFields,
     ],
 
     components: {
@@ -464,7 +466,7 @@ export default {
         performSaveRequest() {
             // Once the hook has completed, we need to make the actual request.
             // We build the payload here because the before hook may have modified values.
-            const payload = { ...this.values, ...{
+            const payload = { ...this.visibleValues, ...{
                 _blueprint: this.fieldset.handle,
                 _localized: this.localizedFields,
             }};
diff --git a/resources/js/components/field-conditions/Converter.js b/resources/js/components/field-conditions/Converter.js
index d2fe6593f1..6b18fe67a9 100644
--- a/resources/js/components/field-conditions/Converter.js
+++ b/resources/js/components/field-conditions/Converter.js
@@ -1,15 +1,22 @@
 import { OPERATORS, ALIASES } from './Constants.js';
+import map from 'underscore/modules/map.js'
+import each from 'underscore/modules/each.js'
+import filter from 'underscore/modules/filter.js'
+import chain from 'underscore/modules/chain.js'
+import chainable from 'underscore/modules/mixin.js'
+
+chainable({ chain, filter, each });
 
 export default class {
 
     fromBlueprint(conditions, prefix=null) {
-        return _.map(conditions, (condition, field) => this.splitRhs(field, condition, prefix));
+        return map(conditions, (condition, field) => this.splitRhs(field, condition, prefix));
     }
 
     toBlueprint(conditions) {
         let converted = {};
 
-        _.each(conditions, condition => {
+        each(conditions, condition => {
             converted[condition.field] = this.combineRhs(condition);
         });
 
@@ -35,7 +42,7 @@ export default class {
     getOperatorFromRhs(condition) {
         let operator = '==';
 
-        _.chain(this.getOperatorsAndAliases())
+        chain(this.getOperatorsAndAliases())
             .filter(value => new RegExp(`^${value} [^=]`).test(this.normalizeConditionString(condition)))
             .each(value => operator = value);
 
@@ -51,7 +58,7 @@ export default class {
     getValueFromRhs(condition) {
         let rhs = this.normalizeConditionString(condition);
 
-        _.chain(this.getOperatorsAndAliases())
+        chain(this.getOperatorsAndAliases())
             .filter(value => new RegExp(`^${value} [^=]`).test(rhs))
             .each(value => rhs = rhs.replace(new RegExp(`^${value}[ ]*`), ''));
 
diff --git a/resources/js/components/field-conditions/Validator.js b/resources/js/components/field-conditions/Validator.js
index c340e8d725..f227b89d47 100644
--- a/resources/js/components/field-conditions/Validator.js
+++ b/resources/js/components/field-conditions/Validator.js
@@ -1,5 +1,19 @@
 import Converter from './Converter.js';
 import { KEYS } from './Constants.js';
+import { data_get } from  '../../bootstrap/globals.js'
+import isString from 'underscore/modules/isString.js'
+import isObject from 'underscore/modules/isObject.js'
+import isEmpty from 'underscore/modules/isEmpty.js'
+import intersection from 'underscore/modules/intersection.js'
+import map from 'underscore/modules/map.js'
+import each from 'underscore/modules/each.js'
+import filter from 'underscore/modules/filter.js'
+import reject from 'underscore/modules/reject.js'
+import first from 'underscore/modules/first.js'
+import chain from 'underscore/modules/chain.js'
+import chainable from 'underscore/modules/mixin.js'
+
+chainable({ chain, map, each, filter, reject, first, isEmpty });
 
 const NUMBER_SPECIFIC_COMPARISONS = [
     '>', '>=', '<', '<='
@@ -9,7 +23,7 @@ export default class {
     constructor(field, values, store, storeName) {
         this.field = field;
         this.values = values;
-        this.rootValues = store.state.publish[storeName].values;
+        this.rootValues = store ? store.state.publish[storeName].values : false;
         this.store = store;
         this.storeName = storeName;
         this.passOnAny = false;
@@ -22,7 +36,7 @@ export default class {
 
         if (conditions === undefined) {
             return true;
-        } else if (_.isString(conditions)) {
+        } else if (isString(conditions)) {
             return this.passesCustomCondition(this.prepareCondition(conditions));
         }
 
@@ -36,7 +50,7 @@ export default class {
     }
 
     getConditions() {
-        let key = _.chain(KEYS)
+        let key = chain(KEYS)
             .filter(key => this.field[key])
             .first()
             .value();
@@ -57,7 +71,7 @@ export default class {
     }
 
     passesAllConditions(conditions) {
-        return _.chain(conditions)
+        return chain(conditions)
             .map(condition => this.prepareCondition(condition))
             .reject(condition => this.passesCondition(condition))
             .isEmpty()
@@ -65,7 +79,7 @@ export default class {
     }
 
     passesAnyConditions(conditions) {
-        return ! _.chain(conditions)
+        return ! chain(conditions)
             .map(condition => this.prepareCondition(condition))
             .filter(condition => this.passesCondition(condition))
             .isEmpty()
@@ -73,7 +87,7 @@ export default class {
     }
 
     prepareCondition(condition) {
-        if (_.isString(condition) || condition.operator === 'custom') {
+        if (isString(condition) || condition.operator === 'custom') {
             return this.prepareCustomCondition(condition);
         }
 
@@ -115,17 +129,17 @@ export default class {
         }
 
         // When performing lhs.includes(), if lhs is not an object or array, cast to string.
-        if (operator === 'includes' && ! _.isObject(lhs)) {
+        if (operator === 'includes' && ! isObject(lhs)) {
             return lhs ? lhs.toString() : '';
         }
 
         // When lhs is an empty string, cast to null.
-        if (_.isString(lhs) && _.isEmpty(lhs)) {
+        if (isString(lhs) && isEmpty(lhs)) {
             lhs = null;
         }
 
         // Prepare for eval() and return.
-        return _.isString(lhs)
+        return isString(lhs)
             ? JSON.stringify(lhs.trim())
             : lhs;
     }
@@ -152,7 +166,7 @@ export default class {
         }
 
         // Prepare for eval() and return.
-        return _.isString(rhs)
+        return isString(rhs)
             ? JSON.stringify(rhs.trim())
             : rhs;
     }
@@ -202,11 +216,11 @@ export default class {
         }
 
         if (condition.rhs === 'empty') {
-            condition.lhs = _.isEmpty(condition.lhs);
+            condition.lhs = isEmpty(condition.lhs);
             condition.rhs = true;
         }
 
-        if (_.isObject(condition.lhs)) {
+        if (isObject(condition.lhs)) {
             return false;
         }
 
@@ -221,7 +235,7 @@ export default class {
         let values = condition.rhs.split(',').map(string => string.trim());
 
         if (Array.isArray(condition.lhs)) {
-            return _.intersection(condition.lhs, values).length;
+            return intersection(condition.lhs, values).length;
         }
 
         return new RegExp(values.join('|')).test(condition.lhs);
diff --git a/resources/js/components/field-conditions/ValidatorMixin.js b/resources/js/components/field-conditions/ValidatorMixin.js
index e13baa676b..05c1f88b5d 100644
--- a/resources/js/components/field-conditions/ValidatorMixin.js
+++ b/resources/js/components/field-conditions/ValidatorMixin.js
@@ -9,9 +9,14 @@ export default {
 
     methods: {
         showField(field) {
-            let validator = new Validator(field, this.values, this.$store, this.storeName);
+            let passes = new Validator(field, this.values, this.$store, this.storeName).passesConditions();
 
-            return validator.passesConditions();
+            this.$store.commit(`publish/${this.storeName}/setHiddenField`, {
+                handle: field.handle,
+                hidden: ! passes,
+            });
+
+            return passes;
         }
     }
 }
diff --git a/resources/js/components/field-validation/Rules.js b/resources/js/components/field-validation/Rules.js
index 38daf9a180..abfb7aeeae 100644
--- a/resources/js/components/field-validation/Rules.js
+++ b/resources/js/components/field-validation/Rules.js
@@ -283,6 +283,10 @@ export default [
         value: 'size:',
         example: 'size:value'
     },
+    {
+        label: 'Sometimes',
+        value: 'sometimes',
+    },
     {
         label: 'Starts With',
         value: 'starts_with:',
diff --git a/resources/js/components/globals/PublishForm.vue b/resources/js/components/globals/PublishForm.vue
index f7339ab56d..5b304a5f81 100644
--- a/resources/js/components/globals/PublishForm.vue
+++ b/resources/js/components/globals/PublishForm.vue
@@ -85,9 +85,14 @@
 
 <script>
 import SiteSelector from '../SiteSelector.vue';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
+    mixins: [
+        HasHiddenFields,
+    ],
+
     components: {
         SiteSelector
     },
@@ -193,7 +198,7 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            const payload = { ...this.values, ...{
+            const payload = { ...this.visibleValues, ...{
                 blueprint: this.fieldset.handle,
                 _localized: this.localizedFields,
             }};
diff --git a/resources/js/components/publish/Container.vue b/resources/js/components/publish/Container.vue
index e119a13f6b..a065517c22 100644
--- a/resources/js/components/publish/Container.vue
+++ b/resources/js/components/publish/Container.vue
@@ -96,6 +96,7 @@ export default {
                 state: {
                     blueprint: initial.blueprint,
                     values: initial.values,
+                    hiddenFields: {},
                     meta: initial.meta,
                     localizedFields: initial.localizedFields,
                     site: initial.site,
@@ -112,6 +113,9 @@ export default {
                     setValues(state, values) {
                         state.values = values;
                     },
+                    setHiddenField(state, field) {
+                        state.hiddenFields[field.handle] = field.hidden;
+                    },
                     setMeta(state, meta) {
                         state.meta = meta;
                     },
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index 03cb4f2c78..4bec4a1515 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -235,11 +235,13 @@ import PublishActions from './PublishActions.vue';
 import SaveButtonOptions from '../publish/SaveButtonOptions';
 import RevisionHistory from '../revision-history/History.vue';
 import HasPreferences from '../data-list/HasPreferences';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
     mixins: [
         HasPreferences,
+        HasHiddenFields,
     ],
 
     components: {
@@ -419,7 +421,7 @@ export default {
         },
 
         performSaveRequest() {
-            const payload = { ...this.values, ...{
+            const payload = { ...this.visibleValues, ...{
                 _blueprint: this.fieldset.handle,
                 published: this.published,
                 _localized: this.localizedFields,
diff --git a/resources/js/components/users/PublishForm.vue b/resources/js/components/users/PublishForm.vue
index 9b8901ddf3..63bac6a702 100644
--- a/resources/js/components/users/PublishForm.vue
+++ b/resources/js/components/users/PublishForm.vue
@@ -54,9 +54,14 @@
 
 <script>
 import ChangePassword from './ChangePassword.vue';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
+    mixins: [
+        HasHiddenFields,
+    ],
+
     components: {
         ChangePassword,
     },
@@ -103,7 +108,7 @@ export default {
         save() {
             this.clearErrors();
 
-            this.$axios[this.method](this.actions.save, this.values).then(response => {
+            this.$axios[this.method](this.actions.save, this.visibleValues).then(response => {
                 this.title = response.data.title;
                 if (!this.isCreating) this.$toast.success(__('Saved'));
                 this.$refs.container.saved();
diff --git a/resources/js/frontend/components/FieldConditions.js b/resources/js/frontend/components/FieldConditions.js
new file mode 100644
index 0000000000..f592215062
--- /dev/null
+++ b/resources/js/frontend/components/FieldConditions.js
@@ -0,0 +1,7 @@
+import Validator from '../../components/field-conditions/Validator.js';
+
+export default class {
+    showField(field, data) {
+        return new Validator(field, data).passesConditions();
+    }
+}
diff --git a/resources/js/frontend/helpers.js b/resources/js/frontend/helpers.js
new file mode 100644
index 0000000000..f4564df788
--- /dev/null
+++ b/resources/js/frontend/helpers.js
@@ -0,0 +1,9 @@
+import FieldConditions from './components/FieldConditions.js';
+
+class Statamic {
+    constructor() {
+        this.$conditions = new FieldConditions;
+    }
+}
+
+window.Statamic = new Statamic;
diff --git a/resources/js/tests/FieldConditionsValidator.test.js b/resources/js/tests/FieldConditionsValidator.test.js
index 6d2dc86994..06ffb69e91 100644
--- a/resources/js/tests/FieldConditionsValidator.test.js
+++ b/resources/js/tests/FieldConditionsValidator.test.js
@@ -1,8 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import ValidatesFieldConditions from '../components/field-conditions/ValidatorMixin.js';
-require('../bootstrap/globals');
-global._ = require('underscore');
 Vue.use(Vuex);
 
 const Store = new Vuex.Store({
diff --git a/resources/js/tests/Frontend/FieldConditionsTest.test.js b/resources/js/tests/Frontend/FieldConditionsTest.test.js
new file mode 100644
index 0000000000..67502f236f
--- /dev/null
+++ b/resources/js/tests/Frontend/FieldConditionsTest.test.js
@@ -0,0 +1,26 @@
+import '../../frontend/helpers.js';
+
+let formData = {
+    first_name: 'Bilbo',
+    last_name: 'Baggins',
+    hobby: '',
+    bio: null,
+};
+
+test('it shows field by default', () => {
+    expect(Statamic.$conditions.showField([], formData)).toBe(true);
+    expect(Statamic.$conditions.showField({}, formData)).toBe(true);
+});
+
+test('it can show field based on empty checks', () => {
+    expect(Statamic.$conditions.showField({if: {hobby: 'empty'}}, formData)).toBe(true);
+    expect(Statamic.$conditions.showField({if: {bio: 'empty'}}, formData)).toBe(true);
+    expect(Statamic.$conditions.showField({if: {first_name: 'empty'}}, formData)).toBe(false);
+    expect(Statamic.$conditions.showField({if: {first_name: 'not empty'}}, formData)).toBe(true);
+});
+
+test('it can show field if multiple conditions are met', () => {
+    expect(Statamic.$conditions.showField({if: {first_name: 'Bilbo', last_name: 'Baggins'}}, formData)).toBe(true);
+    expect(Statamic.$conditions.showField({if: {first_name: 'Frodo', last_name: 'Baggins'}}, formData)).toBe(false);
+    expect(Statamic.$conditions.showField({if_any: {first_name: 'Frodo', last_name: 'Baggins'}}, formData)).toBe(true);
+});
diff --git a/resources/js/tests/Globals.test.js b/resources/js/tests/Globals.test.js
index da89fd0a2e..598d800c0a 100644
--- a/resources/js/tests/Globals.test.js
+++ b/resources/js/tests/Globals.test.js
@@ -1,4 +1,4 @@
-require('../bootstrap/globals');
+import { tidy_url } from '../bootstrap/globals'
 
 test('it tidies urls', () => {
     expect(tidy_url('foo/bar')).toBe('foo/bar');
diff --git a/resources/views/extend/forms/fields/assets.antlers.html b/resources/views/extend/forms/fields/assets.antlers.html
index 2557267d8f..0f0aa3c0c4 100644
--- a/resources/views/extend/forms/fields/assets.antlers.html
+++ b/resources/views/extend/forms/fields/assets.antlers.html
@@ -1,5 +1,7 @@
-{{ if max_files === 1 }}
-    <input type="file" name="{{ handle }}"{{ if validate|contains:required }} required{{ /if }}>
-{{ else }}
-    <input type="file" name="{{ handle }}[]" multiple{{ if validate|contains:required }} required{{ /if }}>
-{{ /if }}
+<input
+    type="file"
+    name="{{ handle }}{{ if max_files !== 1 }}[]{{ /if }}"
+    {{ if js_driver }}{{ js_attributes }}{{ /if }}
+    {{ if max_files !== 1 }}multiple{{ /if }}
+    {{ if validate|contains:required }}required{{ /if }}
+>
diff --git a/resources/views/extend/forms/fields/checkboxes.antlers.html b/resources/views/extend/forms/fields/checkboxes.antlers.html
index 9afdeddbfd..5864bdb289 100644
--- a/resources/views/extend/forms/fields/checkboxes.antlers.html
+++ b/resources/views/extend/forms/fields/checkboxes.antlers.html
@@ -1,7 +1,15 @@
 {{ foreach:options as="value|label" }}
     <label>
-        <input type="checkbox" name="{{ handle }}[]" value="{{ value }}"{{ if (old | in_array:value) }} checked{{ /if }}{{ if ! old && value === default }} checked{{ /if }}{{ if validate|contains:required }} required{{ /if }}>
-        {{ label }}
+        <input
+            type="checkbox"
+            name="{{ handle }}[]"
+            value="{{ value }}"
+            {{ if js_driver }}{{ js_attributes }}{{ /if }}
+            {{ if (old | in_array:value) }}checked{{ /if }}
+            {{ if ! old && value === default }}checked{{ /if }}
+            {{ if validate|contains:required }}required{{ /if }}
+        >
+        {{ label !== null ? label : value }}
     </label>
     {{ unless inline }}
         <br>
diff --git a/resources/views/extend/forms/fields/default.antlers.html b/resources/views/extend/forms/fields/default.antlers.html
index 2d9da2db6b..dc01262b2a 100644
--- a/resources/views/extend/forms/fields/default.antlers.html
+++ b/resources/views/extend/forms/fields/default.antlers.html
@@ -1 +1,9 @@
-<input type="text" name="{{ handle }}"{{ if placeholder }} placeholder="{{ placeholder }}"{{ /if }} value="{{ old ?? default}}"{{ if validate|contains:required }} required{{ /if }}{{ if character_limit }} maxlength="{{ character_limit }}"{{ /if }}>
+<input
+    type="text"
+    name="{{ handle }}"
+    value="{{ old ?? default}}"
+    {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
+    {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
+    {{ if js_driver }}{{ js_attributes }}{{ /if }}
+    {{ if validate|contains:required }}required{{ /if }}
+>
diff --git a/resources/views/extend/forms/fields/radio.antlers.html b/resources/views/extend/forms/fields/radio.antlers.html
index ddedda8c2a..f366c8f72b 100644
--- a/resources/views/extend/forms/fields/radio.antlers.html
+++ b/resources/views/extend/forms/fields/radio.antlers.html
@@ -1,7 +1,15 @@
 {{ foreach:options as="value|label" }}
     <label>
-        <input type="radio" name="{{ handle }}" value="{{ value }}"{{ old === value ?= " checked" }}{{ ! old && value === default ?= " checked" }}{{ if validate|contains:required }} required{{ /if }}>
-        {{ label }}
+        <input
+            type="radio"
+            name="{{ handle }}"
+            value="{{ value }}"
+            {{ if js_driver }}{{ js_attributes }}{{ /if }}
+            {{ if old === value }}checked{{ /if }}
+            {{ if ! old && value === default }}checked{{ /if }}
+            {{ if validate|contains:required }}required{{ /if }}
+        >
+        {{ label !== null ? label : value }}
     </label>
     {{ unless inline }}
         <br>
diff --git a/resources/views/extend/forms/fields/select.antlers.html b/resources/views/extend/forms/fields/select.antlers.html
index f318144042..90513d1791 100644
--- a/resources/views/extend/forms/fields/select.antlers.html
+++ b/resources/views/extend/forms/fields/select.antlers.html
@@ -1,8 +1,15 @@
-<select name="{{ handle }}{{ multiple ?= "[]" }}"{{ multiple ?= " multiple" }}{{ if validate|contains:required }} required{{ /if }}>
+<select
+    name="{{ handle }}{{ multiple ?= "[]" }}"
+    {{ if js_driver }}{{ js_attributes }}{{ /if }}
+    {{ if multiple }}multiple{{ /if }}
+    {{ if validate|contains:required }}required{{ /if }}
+>
     {{ unless multiple }}
         <option value>{{ trans key="Please select..." }}</option>
     {{ /unless }}
     {{ foreach:options as="value|label" }}
-        <option value="{{ value }}"{{ if old|in_array:value or old === value }} selected{{ /if }}{{ if ! old && default === value }} selected{{ /if }}>{{ label }}</option>
+        <option value="{{ value }}"{{ if old|in_array:value or old === value }} selected{{ /if }}{{ if ! old && default === value }} selected{{ /if }}>
+            {{ label !== null ? label : value }}
+        </option>
     {{ /foreach:options }}
 </select>
diff --git a/resources/views/extend/forms/fields/text.antlers.html b/resources/views/extend/forms/fields/text.antlers.html
index b537585b57..5b7803cffb 100644
--- a/resources/views/extend/forms/fields/text.antlers.html
+++ b/resources/views/extend/forms/fields/text.antlers.html
@@ -1 +1,9 @@
-<input type="{{ input_type ?? 'text' }}" name="{{ handle }}"{{ if placeholder }} placeholder="{{ placeholder }}"{{ /if }} value="{{ old ?? default}}"{{ if validate|contains:required }} required{{ /if }}{{ if character_limit }} maxlength="{{ character_limit }}"{{ /if }}>
+<input
+    type="{{ input_type ?? 'text' }}"
+    name="{{ handle }}"
+    value="{{ old ?? default }}"
+    {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
+    {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
+    {{ if js_driver }}{{ js_attributes }}{{ /if }}
+    {{ if validate|contains:required }}required{{ /if }}
+>
diff --git a/resources/views/extend/forms/fields/textarea.antlers.html b/resources/views/extend/forms/fields/textarea.antlers.html
index 9ac09b466d..14b9d90916 100644
--- a/resources/views/extend/forms/fields/textarea.antlers.html
+++ b/resources/views/extend/forms/fields/textarea.antlers.html
@@ -1 +1,10 @@
-<textarea name="{{ handle }}" rows="5"{{ if placeholder }} placeholder="{{ placeholder }}"{{ /if }}{{ if validate|contains:required }} required{{ /if }}{{ if character_limit }} maxlength="{{ character_limit }}"{{ /if }}>{{ old ?? default }}</textarea>
+<textarea
+    name="{{ handle }}"
+    rows="5"
+    {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
+    {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
+    {{ if js_driver }}{{ js_attributes }}{{ /if }}
+    {{ if validate|contains:required }}required{{ /if }}
+>
+    {{ old ?? default }}
+</textarea>
diff --git a/src/Console/Commands/Install.php b/src/Console/Commands/Install.php
index d24786d7d5..cd0cfebb22 100644
--- a/src/Console/Commands/Install.php
+++ b/src/Console/Commands/Install.php
@@ -87,6 +87,7 @@ protected function publish()
     {
         $this->call('vendor:publish', ['--tag' => 'statamic']);
         $this->call('vendor:publish', ['--tag' => 'statamic-cp', '--force' => true]);
+        $this->call('vendor:publish', ['--tag' => 'statamic-frontend', '--force' => true]);
 
         return $this;
     }
diff --git a/src/Fields/Field.php b/src/Fields/Field.php
index ee3d6d9d0b..98974b7689 100644
--- a/src/Fields/Field.php
+++ b/src/Fields/Field.php
@@ -19,6 +19,7 @@ class Field implements Arrayable
     protected $value;
     protected $parent;
     protected $parentField;
+    protected $filled = false;
     protected $validationContext;
 
     public function __construct($handle, array $config)
@@ -32,7 +33,8 @@ public function newInstance()
         return (new static($this->handle, $this->config))
             ->setParent($this->parent)
             ->setParentField($this->parentField)
-            ->setValue($this->value);
+            ->setValue($this->value)
+            ->setFilled($this->filled);
     }
 
     public function setHandle(string $handle)
@@ -199,6 +201,11 @@ public function isFilterable()
         return (bool) $this->get('filterable');
     }
 
+    public function isFilled()
+    {
+        return (bool) $this->filled;
+    }
+
     public function toPublishArray()
     {
         return array_merge($this->preProcessedConfig(), [
@@ -225,6 +232,13 @@ public function toBlueprintArray()
         ];
     }
 
+    public function setFilled($filled)
+    {
+        $this->filled = $filled;
+
+        return $this;
+    }
+
     public function setValue($value)
     {
         $this->value = $value;
@@ -232,6 +246,14 @@ public function setValue($value)
         return $this;
     }
 
+    public function fillValue($value)
+    {
+        $this->value = $value;
+        $this->filled = true;
+
+        return $this;
+    }
+
     public function value()
     {
         return $this->value;
@@ -335,6 +357,20 @@ public function config(): array
         return $this->config;
     }
 
+    public function conditions(): array
+    {
+        return collect($this->config)->only([
+            'if',
+            'if_any',
+            'show_when',
+            'show_when_any',
+            'unless',
+            'unless_any',
+            'hide_when',
+            'hide_when_any',
+        ])->all();
+    }
+
     public function get(string $key, $fallback = null)
     {
         return array_get($this->config, $key, $fallback);
diff --git a/src/Fields/Fields.php b/src/Fields/Fields.php
index ddb9c2ccc1..ba494006ed 100644
--- a/src/Fields/Fields.php
+++ b/src/Fields/Fields.php
@@ -7,6 +7,7 @@
 use Facades\Statamic\Fields\Validator;
 use Illuminate\Support\Collection;
 use Statamic\Facades\Blink;
+use Statamic\Support\Arr;
 
 class Fields
 {
@@ -118,7 +119,9 @@ public function toPublishArray()
     public function addValues(array $values)
     {
         $fields = $this->fields->map(function ($field) use ($values) {
-            return $field->newInstance()->setValue(array_get($values, $field->handle()));
+            return Arr::has($values, $field->handle())
+                ? $field->newInstance()->fillValue(Arr::get($values, $field->handle()))
+                : $field->newInstance();
         });
 
         return $this->newInstance()->setFields($fields);
@@ -131,6 +134,13 @@ public function values()
         });
     }
 
+    public function validatableValues()
+    {
+        return $this->values()->filter(function ($value, $handle) {
+            return $this->fields->get($handle)->isFilled();
+        });
+    }
+
     public function process()
     {
         return $this->newInstance()->setFields(
diff --git a/src/Fields/Validator.php b/src/Fields/Validator.php
index 1ad589c990..412af149da 100644
--- a/src/Fields/Validator.php
+++ b/src/Fields/Validator.php
@@ -96,7 +96,7 @@ public function withReplacements($replacements)
     public function validate()
     {
         return LaravelValidator::validate(
-            $this->fields->preProcessValidatables()->values()->all(),
+            $this->fields->preProcessValidatables()->validatableValues()->all(),
             $this->rules(),
             $this->customMessages,
             $this->attributes()
diff --git a/src/Forms/JsDrivers/AbstractJsDriver.php b/src/Forms/JsDrivers/AbstractJsDriver.php
new file mode 100644
index 0000000000..146c18ebf1
--- /dev/null
+++ b/src/Forms/JsDrivers/AbstractJsDriver.php
@@ -0,0 +1,184 @@
+<?php
+
+namespace Statamic\Forms\JsDrivers;
+
+use Statamic\Forms\Form;
+use Statamic\Support\Str;
+
+abstract class AbstractJsDriver implements JsDriver
+{
+    protected $form;
+    protected $options;
+
+    /**
+     * Instantiate JS driver.
+     *
+     * @param  Form  $form
+     * @param  array  $options
+     */
+    public function __construct(Form $form, $options = [])
+    {
+        $this->form = $form;
+        $this->options = $options;
+
+        if (method_exists($this, 'parseOptions')) {
+            $this->parseOptions($options);
+        }
+
+        $this->validateRenderMethodReturnsHtml();
+    }
+
+    /**
+     * Add to form view data.
+     *
+     * @param  array  $data
+     * @return array
+     */
+    public function addToFormData($data)
+    {
+        return [];
+    }
+
+    /**
+     * Add to form html tag attributes.
+     *
+     * @return array
+     */
+    public function addToFormAttributes()
+    {
+        return [];
+    }
+
+    /**
+     * Add to renderable field view data.
+     *
+     * @param  \Statamic\Fields\Field  $field
+     * @param  array  $data
+     * @return array
+     */
+    public function addToRenderableFieldData($field, $data)
+    {
+        return [];
+    }
+
+    /**
+     * Add to renderable field html tag attributes.
+     *
+     * @param  \Statamic\Fields\Field  $field
+     * @return array
+     */
+    public function addToRenderableFieldAttributes($field)
+    {
+        return [];
+    }
+
+    /**
+     * Render form html.
+     *
+     * @param  string  $html
+     * @return string
+     */
+    public function render($html)
+    {
+        return $html;
+    }
+
+    /**
+     * Copy renderable `show_field` JS from each individual field for hardcoding field html using top-level form data.
+     *
+     * @param  array  $fields
+     * @return array
+     */
+    public function copyShowFieldToFormData($fields)
+    {
+        return $this->validateShowFieldDefined(collect($fields))->pluck('show_field', 'handle')->all();
+    }
+
+    /**
+     * Validate that `show_field` is defined in `addToRenderableFieldData()` output.
+     *
+     * @param  \Illuminate\Support\Collection  $fields
+     * @return \Illuminate\Support\Collection
+     *
+     * @throws \Exception
+     */
+    protected function validateShowFieldDefined($fields)
+    {
+        return $fields->each(function ($field) {
+            if (! isset($field['show_field'])) {
+                throw new \Exception('JS driver requires [show_field] to be defined in [addToRenderableFieldData()] output!');
+            }
+        });
+    }
+
+    /**
+     * Validate that render method returns `$html` var.
+     *
+     * @throws \Exception
+     */
+    protected function validateRenderMethodReturnsHtml()
+    {
+        if (! Str::contains($this->render('<VALIDATING-HTML />'), '<VALIDATING-HTML />')) {
+            throw new \Exception('JS driver requires [$html] to be returned in [render()] output!');
+        }
+    }
+
+    /**
+     * Json encode for html attribute.
+     *
+     * @param  mixed  $value
+     * @return string
+     */
+    protected function jsonEncodeForHtmlAttribute($value)
+    {
+        return str_replace('"', '\'', json_encode($value));
+    }
+
+    /**
+     * Get initial form data.
+     *
+     * @return array
+     */
+    protected function getInitialFormData()
+    {
+        $oldValues = collect(old());
+
+        return $this->form
+            ->blueprint()
+            ->fields()
+            ->preProcess()
+            ->values()
+            ->map(function ($defaultProcessedValue, $handle) use ($oldValues) {
+                return $oldValues->has($handle)
+                    ? $oldValues->get($handle)
+                    : $defaultProcessedValue;
+            })
+            ->all();
+    }
+
+    /**
+     * Get JS driver handle from class name.
+     *
+     * @return string
+     */
+    public static function handle()
+    {
+        $className = collect(explode('\\', static::class))->last();
+
+        return Str::snake($className);
+    }
+
+    /**
+     * Register driver with Statamic.
+     */
+    public static function register()
+    {
+        if (! app()->has('statamic.form-js-drivers')) {
+            return;
+        }
+
+        $handle = static::handle();
+
+        app('statamic.form-js-drivers')[$handle] = static::class;
+    }
+}
diff --git a/src/Forms/JsDrivers/Alpine.php b/src/Forms/JsDrivers/Alpine.php
new file mode 100644
index 0000000000..4dc929a85a
--- /dev/null
+++ b/src/Forms/JsDrivers/Alpine.php
@@ -0,0 +1,109 @@
+<?php
+
+namespace Statamic\Forms\JsDrivers;
+
+class Alpine extends AbstractJsDriver
+{
+    protected $scope;
+
+    /**
+     * Parse driver options.
+     *
+     * @param  array  $options
+     */
+    protected function parseOptions($options)
+    {
+        $this->scope = $options[0] ?? null;
+    }
+
+    /**
+     * Add to form html tag attributes.
+     *
+     * @return array
+     */
+    public function addToFormAttributes()
+    {
+        return [
+            'x-data' => $this->renderAlpineXData($this->getInitialFormData(), $this->scope),
+        ];
+    }
+
+    /**
+     * Add to renderable field view data.
+     *
+     * @param  \Statamic\Fields\Field  $field
+     * @param  array  $data
+     * @return array
+     */
+    public function addToRenderableFieldData($field, $data)
+    {
+        return [
+            'show_field' => $this->renderAlpineShowFieldJs($field->conditions(), $this->scope),
+        ];
+    }
+
+    /**
+     * Add to renderable field html tag attributes.
+     *
+     * @param  \Statamic\Fields\Field  $field
+     * @return array
+     */
+    public function addToRenderableFieldAttributes($field)
+    {
+        return [
+            'x-model' => $this->getAlpineXDataKey($field->handle(), $this->scope),
+        ];
+    }
+
+    /**
+     * Render alpine x-data string for fields, with scope if necessary.
+     *
+     * @param  array  $xData
+     * @param  bool|string  $alpineScope
+     * @return string
+     */
+    protected function renderAlpineXData($xData, $alpineScope)
+    {
+        if (is_string($alpineScope)) {
+            $xData = [
+                $alpineScope => $xData,
+            ];
+        }
+
+        return $this->jsonEncodeForHtmlAttribute($xData);
+    }
+
+    /**
+     * Get alpine x-data key, with scope if necessary.
+     *
+     * @param  string  $fieldHandle
+     * @param  bool|string  $alpineScope
+     * @return string
+     */
+    protected function getAlpineXDataKey($fieldHandle, $alpineScope)
+    {
+        return is_string($alpineScope)
+            ? "{$alpineScope}.{$fieldHandle}"
+            : $fieldHandle;
+    }
+
+    /**
+     * Render alpine `x-if` show field JS logic.
+     *
+     * @param  array  $conditions
+     * @param  string  $alpineScope
+     * @return string
+     */
+    protected function renderAlpineShowFieldJs($conditions, $alpineScope)
+    {
+        $attrFriendlyConditions = $this->jsonEncodeForHtmlAttribute($conditions);
+
+        $data = '$data';
+
+        if (is_string($alpineScope)) {
+            $data .= ".{$alpineScope}";
+        }
+
+        return 'Statamic.$conditions.showField('.$attrFriendlyConditions.', '.$data.')';
+    }
+}
diff --git a/src/Forms/JsDrivers/JsDriver.php b/src/Forms/JsDrivers/JsDriver.php
new file mode 100644
index 0000000000..12e6504d37
--- /dev/null
+++ b/src/Forms/JsDrivers/JsDriver.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Statamic\Forms\JsDrivers;
+
+interface JsDriver
+{
+    public function addToFormData($data);
+
+    public function addToFormAttributes();
+
+    public function addToRenderableFieldData($field, $data);
+
+    public function addToRenderableFieldAttributes($field);
+
+    public function render($html);
+
+    public function copyShowFieldToFormData($fields);
+}
diff --git a/src/Forms/Tags.php b/src/Forms/Tags.php
index 3ade992c8e..ce7beae5a3 100644
--- a/src/Forms/Tags.php
+++ b/src/Forms/Tags.php
@@ -7,7 +7,9 @@
 use Statamic\Facades\Blink;
 use Statamic\Facades\Form;
 use Statamic\Facades\URL;
+use Statamic\Forms\JsDrivers\JsDriver;
 use Statamic\Support\Arr;
+use Statamic\Support\Str;
 use Statamic\Tags\Concerns;
 use Statamic\Tags\Tags as BaseTags;
 
@@ -57,21 +59,38 @@ public function create()
         $form = $this->form();
 
         $data = $this->getFormSession($this->sessionHandle());
-        $data['fields'] = $this->getFields($this->sessionHandle());
+
+        $jsDriver = $this->parseJsParamDriverAndOptions($this->params->get('js'), $form);
+
+        $data['fields'] = $this->getFields($this->sessionHandle(), $jsDriver);
         $data['honeypot'] = $form->honeypot();
 
+        if ($jsDriver) {
+            $data['js_driver'] = $jsDriver->handle();
+            $data['show_field'] = $jsDriver->copyShowFieldToFormData($data['fields']);
+            $data = array_merge($data, $jsDriver->addToFormData($form, $data));
+        }
+
         $this->addToDebugBar($data, $formHandle);
 
         if (! $this->params->has('files')) {
             $this->params->put('files', $form->hasFiles());
         }
 
-        $knownParams = array_merge(static::HANDLE_PARAM, ['redirect', 'error_redirect', 'allow_request_redirect', 'files']);
+        $knownParams = array_merge(static::HANDLE_PARAM, [
+            'redirect', 'error_redirect', 'allow_request_redirect', 'files', 'js',
+        ]);
 
         $action = $this->params->get('action', route('statamic.forms.submit', $formHandle));
         $method = $this->params->get('method', 'POST');
 
-        $html = $this->formOpen($action, $method, $knownParams);
+        $attrs = [];
+
+        if ($jsDriver) {
+            $attrs = array_merge($attrs, $jsDriver->addToFormAttributes($form));
+        }
+
+        $html = $this->formOpen($action, $method, $knownParams, $attrs);
 
         $params = [];
 
@@ -89,6 +108,10 @@ public function create()
 
         $html .= $this->formClose();
 
+        if ($jsDriver) {
+            return $jsDriver->render($html);
+        }
+
         return $html;
     }
 
@@ -182,18 +205,75 @@ protected function getForm()
      * Get fields with extra data for looping over and rendering.
      *
      * @param  string  $sessionHandle
+     * @param  JsDriver  $jsDriver
      * @return array
      */
-    protected function getFields($sessionHandle)
+    protected function getFields($sessionHandle, $jsDriver)
     {
         return $this->form()->fields()
-            ->map(function ($field) use ($sessionHandle) {
-                return $this->getRenderableField($field, $sessionHandle);
+            ->map(function ($field) use ($sessionHandle, $jsDriver) {
+                return $this->getRenderableField($field, $sessionHandle, function ($data, $field) use ($jsDriver) {
+                    return $jsDriver
+                        ? $this->mergeJsDataWithRenderableFieldData($data, $field, $jsDriver)
+                        : $data;
+                });
             })
             ->values()
             ->all();
     }
 
+    /**
+     * Merge JS field data with renderable field data.
+     *
+     * @param  array  $data
+     * @param  \Statamic\Fields\Field  $field
+     * @param  JsDriver  $jsDriver
+     * @return array
+     */
+    protected function mergeJsDataWithRenderableFieldData($data, $field, $jsDriver)
+    {
+        $data['js_driver'] = $jsDriver->handle();
+        $data['js_attributes'] = $this->renderAttributes($jsDriver->addToRenderableFieldAttributes($field));
+
+        return array_merge($data, $jsDriver->addToRenderableFieldData($field, $data));
+    }
+
+    /**
+     * Parse JS param to get driver and related options.
+     *
+     * @param  null|string  $value
+     * @param  \Statamic\Forms\Form  $form
+     * @return bool|JsDriver
+     */
+    protected function parseJsParamDriverAndOptions($value, $form)
+    {
+        if (! $value) {
+            return false;
+        }
+
+        $handle = $value;
+        $options = [];
+
+        if (Str::contains($value, ':')) {
+            $options = explode(':', $value);
+            $handle = array_shift($options);
+        }
+
+        $class = app('statamic.form-js-drivers')->get($handle);
+
+        if (! $class) {
+            throw new \Exception("Cannot find JS driver class for [{$handle}]!");
+        }
+
+        $instance = new $class($form, $options);
+
+        if (! $instance instanceof JsDriver) {
+            throw new \Exception("JS driver must implement [Statamic\Forms\JsDrivers\JsDriver] interface!");
+        }
+
+        return $instance;
+    }
+
     /**
      * Add data to the debug bar.
      *
diff --git a/src/Providers/AppServiceProvider.php b/src/Providers/AppServiceProvider.php
index 4974193259..eabe6d7491 100644
--- a/src/Providers/AppServiceProvider.php
+++ b/src/Providers/AppServiceProvider.php
@@ -47,6 +47,10 @@ public function boot()
             "{$this->root}/resources/dist" => public_path('vendor/statamic/cp'),
         ], 'statamic-cp');
 
+        $this->publishes([
+            "{$this->root}/resources/dist-frontend" => public_path('vendor/statamic/frontend'),
+        ], 'statamic-frontend');
+
         $this->loadTranslationsFrom("{$this->root}/resources/lang", 'statamic');
         $this->loadJsonTranslationsFrom("{$this->root}/resources/lang");
 
diff --git a/src/Providers/ExtensionServiceProvider.php b/src/Providers/ExtensionServiceProvider.php
index f82ebb95f5..fd049ca0f1 100644
--- a/src/Providers/ExtensionServiceProvider.php
+++ b/src/Providers/ExtensionServiceProvider.php
@@ -9,6 +9,7 @@
 use Statamic\Extend\Manifest;
 use Statamic\Fields\Fieldtype;
 use Statamic\Fieldtypes;
+use Statamic\Forms\JsDrivers;
 use Statamic\Modifiers\CoreModifiers;
 use Statamic\Modifiers\Modifier;
 use Statamic\Query\Scopes;
@@ -188,6 +189,10 @@ class ExtensionServiceProvider extends ServiceProvider
         \Statamic\Forms\Widget::class,
     ];
 
+    protected $formJsDrivers = [
+        JsDrivers\Alpine::class,
+    ];
+
     protected $updateScripts = [
         Updates\AddPerEntryPermissions::class,
         Updates\UseDedicatedTrees::class,
@@ -198,6 +203,7 @@ public function register()
     {
         $this->registerExtensions();
         $this->registerAddonManifest();
+        $this->registerFormJsDrivers();
         $this->registerUpdateScripts();
     }
 
@@ -302,6 +308,15 @@ protected function registerCoreModifiers()
             ->merge($modifiers);
     }
 
+    protected function registerFormJsDrivers()
+    {
+        $this->app->instance('statamic.form-js-drivers', collect());
+
+        foreach ($this->formJsDrivers as $class) {
+            $class::register();
+        }
+    }
+
     protected function registerUpdateScripts()
     {
         $this->app->instance('statamic.update-scripts', collect());
diff --git a/src/Tags/Concerns/RendersForms.php b/src/Tags/Concerns/RendersForms.php
index 731778dcb6..29eb6223ab 100644
--- a/src/Tags/Concerns/RendersForms.php
+++ b/src/Tags/Concerns/RendersForms.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\Tags\Concerns;
 
+use Closure;
 use Illuminate\Support\MessageBag;
 
 trait RendersForms
@@ -12,25 +13,28 @@ trait RendersForms
      * Open a form.
      *
      * @param  string  $action
+     * @param  string  $method
+     * @param  array  $knownTagParams
+     * @param  array  $additionalAttrs
      * @return string
      */
-    protected function formOpen($action, $method = 'POST', $knownTagParams = [])
+    protected function formOpen($action, $method = 'POST', $knownTagParams = [], $additionalAttrs = [])
     {
         $formMethod = $method === 'GET' ? 'GET' : 'POST';
 
-        $defaultAttrs = [
+        $attrs = array_merge([
             'method' => $formMethod,
             'action' => $action,
-        ];
+        ], $additionalAttrs);
 
         if ($this->params->bool('files')) {
-            $defaultAttrs['enctype'] = 'multipart/form-data';
+            $attrs['enctype'] = 'multipart/form-data';
         }
 
-        $defaultAttrs = $this->renderAttributes($defaultAttrs);
-        $additionalAttrs = $this->renderAttributesFromParams(array_merge(['method', 'action'], $knownTagParams));
+        $attrs = $this->renderAttributes($attrs);
+        $paramAttrs = $this->renderAttributesFromParams(array_merge(['method', 'action'], $knownTagParams));
 
-        $html = collect(['<form', $defaultAttrs, $additionalAttrs])->filter()->implode(' ').'>';
+        $html = collect(['<form', $attrs, $paramAttrs])->filter()->implode(' ').'>';
         $html .= csrf_field();
 
         $method = strtoupper($method);
@@ -65,9 +69,11 @@ protected function formClose()
      * Get field with extra data for rendering.
      *
      * @param  \Statamic\Fields\Field  $field
+     * @param  string  $errorBag
+     * @param  bool|Closure  $manipulateDataCallback
      * @return array
      */
-    protected function getRenderableField($field, $errorBag = 'default')
+    protected function getRenderableField($field, $errorBag = 'default', $manipulateDataCallback = false)
     {
         $errors = session('errors') ? session('errors')->getBag($errorBag) : new MessageBag;
 
@@ -76,8 +82,26 @@ protected function getRenderableField($field, $errorBag = 'default')
             'old' => old($field->handle()),
         ]);
 
-        $data['field'] = view($field->fieldtype()->view(), $data);
+        if ($manipulateDataCallback instanceof Closure) {
+            $data = $manipulateDataCallback($data, $field);
+        }
+
+        $data['field'] = $this->minifyFieldHtml(view($field->fieldtype()->view(), $data)->render());
 
         return $data;
     }
+
+    /**
+     * Minify field html.
+     *
+     * @param  string  $html
+     * @return string
+     */
+    protected function minifyFieldHtml($html)
+    {
+        // Trim whitespace between elements.
+        $html = preg_replace('/>\s*([^<>]*)\s*</', '>$1<', $html);
+
+        return $html;
+    }
 }
diff --git a/tests/Fields/FieldsTest.php b/tests/Fields/FieldsTest.php
index 75c6bfeb63..2a97950929 100644
--- a/tests/Fields/FieldsTest.php
+++ b/tests/Fields/FieldsTest.php
@@ -535,6 +535,32 @@ public function it_adds_values_to_fields()
         $this->assertEquals(['one' => 'foo', 'two' => 'bar'], $return->values()->all());
     }
 
+    /** @test */
+    public function adding_values_sets_filled_status_on_fields_for_validation()
+    {
+        FieldRepository::shouldReceive('find')->with('one')->andReturnUsing(function () {
+            return new Field('one', []);
+        });
+
+        FieldRepository::shouldReceive('find')->with('two')->andReturnUsing(function () {
+            return new Field('two', []);
+        });
+
+        $fields = new Fields([
+            ['handle' => 'one', 'field' => 'one'],
+            ['handle' => 'two', 'field' => 'two'],
+        ]);
+
+        $this->assertEquals(['one' => null, 'two' => null], $fields->values()->all());
+
+        $fields = $fields->addValues(['one' => 'foo']);
+
+        $this->assertTrue($fields->get('one')->isFilled());
+        $this->assertFalse($fields->get('two')->isFilled());
+        $this->assertEquals(['one' => 'foo', 'two' => null], $fields->values()->all());
+        $this->assertEquals(['one' => 'foo'], $fields->validatableValues()->all());
+    }
+
     /** @test */
     public function it_processes_each_fields_values_by_its_fieldtype()
     {
@@ -762,6 +788,33 @@ public function it_validates_immediately_with_extra_rules()
         $fields->validate(['foo' => 'bar']);
     }
 
+    /** @test */
+    public function it_validates_properly_against_filled_fields_with_sometimes_rule()
+    {
+        FieldRepository::shouldReceive('find')->with('one')->andReturnUsing(function () {
+            return new Field('one', ['type' => 'text']);
+        });
+        FieldRepository::shouldReceive('find')->with('two')->andReturnUsing(function () {
+            return new Field('two', ['type' => 'text']);
+        });
+
+        $fields = (new Fields([
+            ['handle' => 'one', 'field' => 'one'],
+            ['handle' => 'two', 'field' => 'two'],
+        ]))->addValues(['one' => 'filled']);
+
+        Validator::fields($fields)->withRules([])->validate();
+        Validator::fields($fields)->withRules(['two' => ['sometimes', 'required']])->validate();
+
+        try {
+            Validator::fields($fields)->withRules(['two' => ['required']])->validate();
+        } catch (\Illuminate\Validation\ValidationException $e) {
+            //
+        }
+
+        $this->assertInstanceOf(\Illuminate\Validation\ValidationException::class, $e);
+    }
+
     /**
      * @test
      * @group graphql
diff --git a/tests/NormalizesHtml.php b/tests/NormalizesHtml.php
index 562e711173..ff35eba02e 100644
--- a/tests/NormalizesHtml.php
+++ b/tests/NormalizesHtml.php
@@ -14,12 +14,15 @@ protected function normalizeHtml($html)
         // Remove new lines.
         $html = str_replace(["\n", "\r"], '', $html);
 
-        // Remove whitespace between elements.
-        $html = preg_replace('/(>)\s*(<)/', '$1$2', $html);
+        // Trim whitespace between elements.
+        $html = preg_replace('/>\s*([^<>]*)\s*</', '>$1<', $html);
 
         // Remove whitespace around radio and checkbox labels, etc.
         $html = preg_replace('/(>)\s*([^\s]+)\s*(<)/', '$1$2$3', $html);
 
+        // Trim extraneous whitespace to a single space.
+        $html = preg_replace('/\s+/m', ' ', $html);
+
         // Remove spaces at end of element where attributes are conditionally rendered.
         $html = str_replace(' >', '>', $html);
 
diff --git a/tests/Tags/Form/FormCreateAlpineTest.php b/tests/Tags/Form/FormCreateAlpineTest.php
new file mode 100644
index 0000000000..377226237f
--- /dev/null
+++ b/tests/Tags/Form/FormCreateAlpineTest.php
@@ -0,0 +1,390 @@
+<?php
+
+namespace Tests\Tags\Form;
+
+class FormCreateAlpineTest extends FormTestCase
+{
+    protected $defaultFields = [
+        [
+            'handle' => 'name',
+            'field' => [
+                'type' => 'text',
+                'display' => 'Full Name',
+                'validate' => 'min:3|alpha_num',
+            ],
+        ],
+        [
+            'handle' => 'email',
+            'field' => [
+                'type' => 'text',
+                'input_type' => 'email',
+                'display' => 'Email Address',
+                'validate' => 'required|email',
+            ],
+        ],
+        [
+            'handle' => 'message',
+            'field' => [
+                'type' => 'textarea',
+                'display' => 'Message',
+                'validate' => 'required',
+                'if' => [
+                    'email' => 'not empty',
+                ],
+            ],
+        ],
+        [
+            'handle' => 'fav_animals',
+            'field' => [
+                'type' => 'checkboxes',
+                'display' => 'Fav Animals',
+                'options' => [
+                    'cat' => 'Cat',
+                    'armadillo' => 'Armadillo',
+                    'rat' => 'Rat',
+                ],
+            ],
+        ],
+        [
+            'handle' => 'fav_colour',
+            'field' => [
+                'type' => 'radio',
+                'display' => 'Fav Colour',
+                'options' => [
+                    'red' => 'Red',
+                    'blue' => 'Blue',
+                ],
+            ],
+        ],
+        [
+            'handle' => 'fav_subject',
+            'field' => [
+                'type' => 'select',
+                'display' => 'Fav Subject',
+                'options' => [
+                    'math' => 'Math',
+                    'english' => 'English',
+                ],
+            ],
+        ],
+    ];
+
+    /** @test */
+    public function it_shows_js_driver_in_form_data()
+    {
+        $this->assertStringContainsString(
+            '<span></span>',
+            $this->tag('{{ form:contact }}<span>{{ js_driver }}</span>{{ /form:contact }}')
+        );
+
+        $this->assertStringContainsString(
+            '<span>alpine</span>',
+            $this->tag('{{ form:contact js="alpine" }}<span>{{ js_driver }}</span>{{ /form:contact }}')
+        );
+    }
+
+    /** @test */
+    public function it_renders_x_data_on_form_tag()
+    {
+        $output = $this->tag('{{ form:contact js="alpine" }}{{ /form:contact }}');
+
+        $expectedXData = "{'name':null,'email':null,'message':null,'fav_animals':[],'fav_colour':null,'fav_subject':null}";
+        $expected = '<form method="POST" action="http://localhost/!/forms/contact" x-data="'.$expectedXData.'">';
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function it_renders_x_data_with_old_data_on_form_tag()
+    {
+        $this
+            ->post('/!/forms/contact', [
+                'name' => 'Frodo Braggins',
+            ])
+            ->assertSessionHasErrors(['email', 'message'], null, 'form.contact');
+
+        $output = $this->tag('{{ form:contact js="alpine" }}{{ /form:contact }}');
+
+        $expectedXData = "{'name':'Frodo Braggins','email':null,'message':null,'fav_animals':[],'fav_colour':null,'fav_subject':null}";
+        $expected = '<form method="POST" action="http://localhost/!/forms/contact" x-data="'.$expectedXData.'">';
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function it_renders_scoped_x_data_on_form_tag()
+    {
+        $output = $this->tag('{{ form:contact js="alpine:my_form" }}{{ /form:contact }}');
+
+        $expectedXData = "{'my_form':{'name':null,'email':null,'message':null,'fav_animals':[],'fav_colour':null,'fav_subject':null}}";
+        $expected = '<form method="POST" action="http://localhost/!/forms/contact" x-data="'.$expectedXData.'">';
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function it_renders_scoped_x_data_with_old_data_on_form_tag()
+    {
+        $this
+            ->post('/!/forms/contact', [
+                'name' => 'Frodo Braggins',
+                'fav_animals' => ['cat'],
+            ])
+            ->assertSessionHasErrors(['email', 'message'], null, 'form.contact');
+
+        $output = $this->tag('{{ form:contact js="alpine:my_form" }}{{ /form:contact }}');
+
+        $expectedXData = "{'my_form':{'name':'Frodo Braggins','email':null,'message':null,'fav_animals':['cat'],'fav_colour':null,'fav_subject':null}}";
+        $expected = '<form method="POST" action="http://localhost/!/forms/contact" x-data="'.$expectedXData.'">';
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function it_renders_proper_x_data_for_multiple_select_field()
+    {
+        $config = [
+            'handle' => 'favourite_animals',
+            'field' => [
+                'type' => 'select',
+                'multiple' => true,
+                'options' => [
+                    'cat' => 'Cat',
+                    'armadillo' => 'Armadillo',
+                    'rat' => 'Rat',
+                ],
+            ],
+        ];
+
+        $expectedXData = "x-data=\"{'favourite_animals':[]}\"";
+
+        $this->assertFieldRendersHtml($expectedXData, $config, [], ['js' => 'alpine']);
+    }
+
+    /** @test */
+    public function it_renders_proper_x_data_for_multiple_assets_field()
+    {
+        $config = [
+            'handle' => 'selfies',
+            'field' => [
+                'type' => 'assets',
+                'display' => 'Selfies',
+                'max_files' => 3,
+            ],
+        ];
+
+        $expectedXData = "x-data=\"{'selfies':[]}\"";
+
+        $this->assertFieldRendersHtml($expectedXData, $config, [], ['js' => 'alpine']);
+    }
+
+    /** @test */
+    public function it_renders_show_field_js()
+    {
+        $outputWithJsDisabled = $this->tag('{{ form:contact }}{{ /form:contact }}');
+
+        $output = $this->tag(<<<'EOT'
+{{ form:contact js="alpine" }}
+    <template x-if="{{ show_field:name }}"></template>
+    <template x-if="{{ show_field:message }}"></template>
+    {{ fields }}
+        <template x-if="{{ show_field }}"></template>
+    {{ /fields }}
+{{ /form:contact }}
+EOT
+        );
+
+        preg_match_all('/<template x-if="(.+)"><\/template>/U', $output, $js);
+
+        $expected = [
+            'Statamic.$conditions.showField([], $data)',
+            'Statamic.$conditions.showField({\'if\':{\'email\':\'not empty\'}}, $data)',
+            'Statamic.$conditions.showField([], $data)',
+            'Statamic.$conditions.showField([], $data)',
+            'Statamic.$conditions.showField({\'if\':{\'email\':\'not empty\'}}, $data)',
+            'Statamic.$conditions.showField([], $data)',
+            'Statamic.$conditions.showField([], $data)',
+            'Statamic.$conditions.showField([], $data)',
+        ];
+
+        $this->assertStringNotContainsString('Statamic.$conditions', $outputWithJsDisabled);
+        $this->assertEquals($expected, $js[1]);
+    }
+
+    /** @test */
+    public function it_renders_scoped_show_field_js()
+    {
+        $outputWithJsDisabled = $this->tag('{{ form:contact }}{{ /form:contact }}');
+
+        $output = $this->tag(<<<'EOT'
+{{ form:contact js="alpine:my_form" }}
+    <template x-if="{{ show_field:name }}"></template>
+    <template x-if="{{ show_field:message }}"></template>
+    {{ fields }}
+        <template x-if="{{ show_field }}"></template>
+    {{ /fields }}
+{{ /form:contact }}
+EOT
+        );
+
+        preg_match_all('/<template x-if="(.+)"><\/template>/U', $output, $js);
+
+        $expected = [
+            'Statamic.$conditions.showField([], $data.my_form)',
+            'Statamic.$conditions.showField({\'if\':{\'email\':\'not empty\'}}, $data.my_form)',
+            'Statamic.$conditions.showField([], $data.my_form)',
+            'Statamic.$conditions.showField([], $data.my_form)',
+            'Statamic.$conditions.showField({\'if\':{\'email\':\'not empty\'}}, $data.my_form)',
+            'Statamic.$conditions.showField([], $data.my_form)',
+            'Statamic.$conditions.showField([], $data.my_form)',
+            'Statamic.$conditions.showField([], $data.my_form)',
+        ];
+
+        $this->assertStringNotContainsString('Statamic.$conditions', $outputWithJsDisabled);
+        $this->assertEquals($expected, $js[1]);
+    }
+
+    /** @test */
+    public function it_dynamically_renders_text_field_x_model()
+    {
+        $config = [
+            'handle' => 'name',
+            'field' => [
+                'type' => 'text',
+            ],
+        ];
+
+        $this->assertFieldRendersHtml(['<input type="text" name="name" value="" x-model="name">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input type="text" name="name" value="" x-model="my_form.name">'], $config, [], ['js' => 'alpine:my_form']);
+    }
+
+    /** @test */
+    public function it_dynamically_renders_textarea_field_x_model()
+    {
+        $config = [
+            'handle' => 'comment',
+            'field' => [
+                'type' => 'textarea',
+            ],
+        ];
+
+        $this->assertFieldRendersHtml(['<textarea name="comment" rows="5" x-model="comment"></textarea>'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<textarea name="comment" rows="5" x-model="my_form.comment"></textarea>'], $config, [], ['js' => 'alpine:my_form']);
+    }
+
+    /** @test */
+    public function it_dynamically_renders_checkboxes_field_x_model()
+    {
+        $config = [
+            'handle' => 'fav_animals',
+            'field' => [
+                'type' => 'checkboxes',
+                'options' => [
+                    'cat' => 'Cat',
+                    'armadillo' => 'Armadillo',
+                    'rat' => 'Rat',
+                ],
+            ],
+        ];
+
+        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="cat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="rat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="armadillo" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+
+        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="cat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="rat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="armadillo" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+    }
+
+    /** @test */
+    public function it_dynamically_renders_radio_field_x_model()
+    {
+        $config = [
+            'handle' => 'fav_animal',
+            'field' => [
+                'type' => 'radio',
+                'options' => [
+                    'cat' => 'Cat',
+                    'armadillo' => 'Armadillo',
+                    'rat' => 'Rat',
+                ],
+            ],
+        ];
+
+        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="cat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="rat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="armadillo" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+
+        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="cat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="rat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="armadillo" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+    }
+
+    /** @test */
+    public function it_dynamically_renders_select_field_x_model()
+    {
+        $config = [
+            'handle' => 'favourite_animal',
+            'field' => [
+                'type' => 'select',
+                'options' => [
+                    'cat' => 'Cat',
+                    'armadillo' => 'Armadillo',
+                    'rat' => 'Rat',
+                ],
+            ],
+        ];
+
+        $expected = [
+            '<select name="favourite_animal" x-model="favourite_animal">',
+            '<option value>Please select...</option>',
+            '<option value="cat">Cat</option>',
+            '<option value="armadillo">Armadillo</option>',
+            '<option value="rat">Rat</option>',
+            '</select>',
+        ];
+
+        $this->assertFieldRendersHtml($expected, $config, [], ['js' => 'alpine']);
+
+        $expectedScoped = [
+            '<select name="favourite_animal" x-model="my_form.favourite_animal">',
+            '<option value>Please select...</option>',
+            '<option value="cat">Cat</option>',
+            '<option value="armadillo">Armadillo</option>',
+            '<option value="rat">Rat</option>',
+            '</select>',
+        ];
+
+        $this->assertFieldRendersHtml($expectedScoped, $config, [], ['js' => 'alpine:my_form']);
+    }
+
+    /** @test */
+    public function it_dynamically_renders_asset_field_x_model()
+    {
+        $config = [
+            'handle' => 'cat_selfie',
+            'field' => [
+                'type' => 'assets',
+                'display' => 'Cat Selfie',
+                'max_files' => 1,
+            ],
+        ];
+
+        $this->assertFieldRendersHtml('<input type="file" name="cat_selfie" x-model="cat_selfie">', $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml('<input type="file" name="cat_selfie" x-model="my_form.cat_selfie">', $config, [], ['js' => 'alpine:my_form']);
+    }
+
+    /** @test */
+    public function it_dynamically_renders_field_with_fallback_to_default_partial_x_model()
+    {
+        $config = [
+            'handle' => 'custom',
+            'field' => [
+                'type' => 'markdown', // 'markdown' doesn't have a template, so it should fall back to default.antlers.html
+            ],
+        ];
+
+        $this->assertFieldRendersHtml('<input type="text" name="custom" value="" x-model="custom">', $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml('<input type="text" name="custom" value="" x-model="my_form.custom">', $config, [], ['js' => 'alpine:my_form']);
+    }
+}
diff --git a/tests/Tags/Form/FormCreateCustomDriverTest.php b/tests/Tags/Form/FormCreateCustomDriverTest.php
new file mode 100644
index 0000000000..8276aab532
--- /dev/null
+++ b/tests/Tags/Form/FormCreateCustomDriverTest.php
@@ -0,0 +1,245 @@
+<?php
+
+namespace Tests\Tags\Form;
+
+use Statamic\Facades\Form;
+use Statamic\Forms\JsDrivers\AbstractJsDriver;
+
+class FormCreateCustomDriverTest extends FormTestCase
+{
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        CustomDriver::register();
+    }
+
+    /** @test */
+    public function it_shows_js_driver_in_form_data()
+    {
+        $this->assertStringContainsString(
+            '<span>custom_driver</span>',
+            $this->tag('{{ form:contact js="custom_driver" }}<span>{{ js_driver }}</span>{{ /form:contact }}')
+        );
+    }
+
+    /** @test */
+    public function custom_driver_can_add_to_form_data()
+    {
+        $output = $this->tag(<<<'EOT'
+{{ form:contact js="custom_driver" }}
+    <script>{{ custom_form_js }}</script>
+{{ /form:contact }}
+EOT
+        );
+
+        $expected = "<script>alert('the authorities')</script>";
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function custom_driver_can_add_to_form_attributes()
+    {
+        $output = $this->tag('{{ form:contact js="custom_driver" }}{{ /form:contact }}');
+
+        $expected = '<form method="POST" action="http://localhost/!/forms/contact" z-data="{\'lol\':\'catz\',\'handle\':\'contact\'}" z-rad="absolutely">';
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function custom_driver_can_add_to_renderable_field_data()
+    {
+        $output = $this->tag(<<<'EOT'
+{{ form:contact js="custom_driver" }}
+    {{ fields }}
+        <script>{{ custom_field_js }}</script>
+    {{ /fields }}
+{{ /form:contact }}
+EOT
+        );
+
+        $expected = "<script>alert('the sith')</script>";
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function custom_driver_can_add_to_renderable_field_attributes()
+    {
+        $output = $this->normalizeHtml($this->tag(<<<'EOT'
+{{ form:contact js="custom_driver" }}
+    {{ fields }}
+        {{ field }}
+    {{ /fields }}
+{{ /form:contact }}
+EOT
+        ));
+
+        $expected = '<input type="email" name="email" value="" z-unless="Statamic.$conditions.showField(\'email\', __zData)" z-gnarley="true" required>';
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function it_validates_required_show_field_output_in_renderable_field_data()
+    {
+        CustomDriverWithoutShowField::register();
+
+        $this->expectExceptionMessage('JS driver requires [show_field] to be defined in [addToRenderableFieldData()] output!');
+
+        $this->tag('{{ form:contact js="custom_driver_without_show_field" }}<span>{{ js_driver }}</span>{{ /form:contact }}');
+    }
+
+    /** @test */
+    public function custom_driver_get_show_field_js_in_dynamic_fields_array()
+    {
+        $output = $this->tag(<<<'EOT'
+{{ form:contact js="custom_driver" }}
+    {{ fields }}
+        <script>{{ show_field }}</script>
+    {{ /fields }}
+{{ /form:contact }}
+EOT
+        );
+
+        $expected = "<script>alert('the stormtroopers')</script>";
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function custom_driver_get_show_field_js_at_top_level_for_when_hardcoding_field_html()
+    {
+        $output = $this->tag(<<<'EOT'
+{{ form:contact js="custom_driver" }}
+    <script>{{ show_field:name }}</script>
+{{ /form:contact }}
+EOT
+        );
+
+        $expected = "<script>alert('the stormtroopers')</script>";
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
+    /** @test */
+    public function custom_driver_can_render_component_around_form()
+    {
+        $output = $this->tag('{{ form:contact js="custom_driver" }}{{ /form:contact }}');
+
+        $this->assertStringContainsString('<custom-form-wrapper-component><form method="POST" action="http://localhost/!/forms/contact"', $output);
+        $this->assertStringContainsString('</form></custom-form-wrapper-component>', $output);
+    }
+
+    /** @test */
+    public function it_validates_render_method_returns_html_var()
+    {
+        $this->expectExceptionMessage('JS driver requires [$html] to be returned in [render()] output!');
+
+        CustomDriverWithBadRenderMethod::register();
+
+        $this->tag('{{ form:contact js="custom_driver_with_bad_render_method" }}{{ /form:contact }}');
+    }
+
+    /** @test */
+    public function custom_driver_can_get_initial_form_data()
+    {
+        $driver = new CustomDriver(Form::find('contact'));
+
+        $initialData = $driver->runProtectedGetInitialFormDataHelper();
+
+        $expected = [
+            'name' => null,
+            'email' => null,
+            'message' => null,
+        ];
+
+        $this->assertEquals($expected, $initialData);
+    }
+
+    /** @test */
+    public function custom_driver_getting_initial_data_respects_old_data()
+    {
+        $this
+            ->post('/!/forms/contact', [
+                'name' => 'San Holo',
+            ])
+            ->assertSessionHasErrors(['email'], null, 'form.contact')
+            ->assertLocation('/');
+
+        $driver = new CustomDriver(Form::find('contact'));
+
+        $initialData = $driver->runProtectedGetInitialFormDataHelper();
+
+        $expected = [
+            'name' => 'San Holo',
+            'email' => null,
+            'message' => null,
+        ];
+
+        $this->assertEquals($expected, $initialData);
+    }
+}
+
+class CustomDriver extends AbstractJsDriver
+{
+    public function addToFormData($data)
+    {
+        return [
+            'custom_form_js' => "alert('the authorities')",
+        ];
+    }
+
+    public function addToFormAttributes()
+    {
+        return [
+            'z-data' => $this->jsonEncodeForHtmlAttribute(['lol' => 'catz', 'handle' => $this->form->handle()]),
+            'z-rad' => 'absolutely',
+        ];
+    }
+
+    public function addToRenderableFieldData($field, $data)
+    {
+        return [
+            'show_field' => "alert('the stormtroopers')",
+            'custom_field_js' => "alert('the sith')",
+        ];
+    }
+
+    public function addToRenderableFieldAttributes($field)
+    {
+        return [
+            'z-unless' => "Statamic.\$conditions.showField('{$field->handle()}', __zData)",
+            'z-gnarley' => true,
+        ];
+    }
+
+    public function render($html)
+    {
+        return "<custom-form-wrapper-component>{$html}</custom-form-wrapper-component>";
+    }
+
+    public function runProtectedGetInitialFormDataHelper()
+    {
+        return $this->getInitialFormData();
+    }
+}
+
+class CustomDriverWithoutShowField extends AbstractJsDriver
+{
+    public function addToRenderableFieldData($data, $field)
+    {
+        return [
+            // 'show_field' => 'This is required and should be validated at runtime',
+        ];
+    }
+}
+
+class CustomDriverWithBadRenderMethod extends AbstractJsDriver
+{
+    public function render($html)
+    {
+        return 'oops, forgot to return $html var!';
+    }
+}
diff --git a/tests/Tags/Form/FormCreateTest.php b/tests/Tags/Form/FormCreateTest.php
index a878fde736..d3b0725362 100644
--- a/tests/Tags/Form/FormCreateTest.php
+++ b/tests/Tags/Form/FormCreateTest.php
@@ -149,7 +149,7 @@ public function it_dynamically_renders_checkboxes_field()
             '<br>',
             '<label><input type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="rat">Rat</label>',
+            '<label><input type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -157,7 +157,7 @@ public function it_dynamically_renders_checkboxes_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ]);
@@ -167,7 +167,7 @@ public function it_dynamically_renders_checkboxes_field()
             '<br>',
             '<label><input type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="rat" checked>Rat</label>',
+            '<label><input type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -175,7 +175,7 @@ public function it_dynamically_renders_checkboxes_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ], [
@@ -189,7 +189,7 @@ public function it_dynamically_renders_inline_checkboxes_field()
         $this->assertFieldRendersHtml([
             '<label><input type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
             '<label><input type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="rat">Rat</label>',
+            '<label><input type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -198,7 +198,7 @@ public function it_dynamically_renders_inline_checkboxes_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ]);
@@ -206,7 +206,7 @@ public function it_dynamically_renders_inline_checkboxes_field()
         $this->assertFieldRendersHtml([
             '<label><input type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
             '<label><input type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="rat" checked>Rat</label>',
+            '<label><input type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -215,7 +215,7 @@ public function it_dynamically_renders_inline_checkboxes_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ], [
@@ -231,7 +231,7 @@ public function it_dynamically_renders_radio_field()
             '<br>',
             '<label><input type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input type="radio" name="favourite_animal" value="rat">Rat</label>',
+            '<label><input type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -239,7 +239,7 @@ public function it_dynamically_renders_radio_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ]);
@@ -249,7 +249,7 @@ public function it_dynamically_renders_radio_field()
             '<br>',
             '<label><input type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
             '<br>',
-            '<label><input type="radio" name="favourite_animal" value="rat">Rat</label>',
+            '<label><input type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -257,7 +257,7 @@ public function it_dynamically_renders_radio_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ], [
@@ -271,7 +271,7 @@ public function it_dynamically_renders_inline_radio_field()
         $this->assertFieldRendersHtml([
             '<label><input type="radio" name="favourite_animal" value="cat">Cat</label>',
             '<label><input type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
-            '<label><input type="radio" name="favourite_animal" value="rat">Rat</label>',
+            '<label><input type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -280,7 +280,7 @@ public function it_dynamically_renders_inline_radio_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ]);
@@ -288,7 +288,7 @@ public function it_dynamically_renders_inline_radio_field()
         $this->assertFieldRendersHtml([
             '<label><input type="radio" name="favourite_animal" value="cat">Cat</label>',
             '<label><input type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
-            '<label><input type="radio" name="favourite_animal" value="rat">Rat</label>',
+            '<label><input type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -297,7 +297,7 @@ public function it_dynamically_renders_inline_radio_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ], [
@@ -313,7 +313,7 @@ public function it_dynamically_renders_select_field()
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
-            '<option value="rat">Rat</option>',
+            '<option value="rat">rat</option>',
             '</select>',
         ], [
             'handle' => 'favourite_animal',
@@ -322,7 +322,7 @@ public function it_dynamically_renders_select_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ]);
@@ -332,7 +332,7 @@ public function it_dynamically_renders_select_field()
             '<option value>Please select...</option>',
             '<option value="cat" selected>Cat</option>',
             '<option value="armadillo">Armadillo</option>',
-            '<option value="rat">Rat</option>',
+            '<option value="rat">rat</option>',
             '</select>',
         ], [
             'handle' => 'favourite_animal',
@@ -341,7 +341,7 @@ public function it_dynamically_renders_select_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ], [
@@ -356,7 +356,7 @@ public function it_dynamically_renders_multiple_select_field()
             '<select name="favourite_animals[]" multiple>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
-            '<option value="rat">Rat</option>',
+            '<option value="rat">rat</option>',
             '</select>',
         ], [
             'handle' => 'favourite_animals',
@@ -366,7 +366,7 @@ public function it_dynamically_renders_multiple_select_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ]);
@@ -375,7 +375,7 @@ public function it_dynamically_renders_multiple_select_field()
             '<select name="favourite_animals[]" multiple>',
             '<option value="cat" selected>Cat</option>',
             '<option value="armadillo">Armadillo</option>',
-            '<option value="rat" selected>Rat</option>',
+            '<option value="rat" selected>rat</option>',
             '</select>',
         ], [
             'handle' => 'favourite_animals',
@@ -385,7 +385,7 @@ public function it_dynamically_renders_multiple_select_field()
                 'options' => [
                     'cat' => 'Cat',
                     'armadillo' => 'Armadillo',
-                    'rat' => 'Rat',
+                    'rat' => null, // label should fall back to value
                 ],
             ],
         ], [
@@ -452,7 +452,11 @@ public function it_wont_submit_form_and_renders_errors()
         $this->assertEmpty(Form::find('contact')->submissions());
 
         $this
-            ->post('/!/forms/contact')
+            ->post('/!/forms/contact', [
+                'name' => '',
+                'email' => '',
+                'message' => '',
+            ])
             ->assertSessionHasErrors(['email', 'message'], null, 'form.contact')
             ->assertLocation('/');
 
@@ -597,6 +601,9 @@ public function it_wont_submit_form_and_follow_custom_redirect_with_errors()
         $this
             ->post('/!/forms/contact', [
                 '_error_redirect' => '/submission-error',
+                'name' => '',
+                'email' => '',
+                'message' => '',
             ])
             ->assertSessionHasErrors(['email', 'message'], null, 'form.contact')
             ->assertLocation('/submission-error');
@@ -651,7 +658,11 @@ public function it_can_render_an_inline_error_when_multiple_rules_fail()
         $this->assertEmpty(Form::find('contact')->submissions());
 
         $this
-            ->post('/!/forms/contact', ['name' => '$'])
+            ->post('/!/forms/contact', [
+                'name' => '$',
+                'email' => '',
+                'message' => '',
+            ])
             ->assertSessionHasErrors(['name', 'email', 'message'], null, 'form.contact')
             ->assertLocation('/');
 
diff --git a/tests/Tags/Form/FormErrorsTest.php b/tests/Tags/Form/FormErrorsTest.php
index 23b9341264..c18adfde4a 100644
--- a/tests/Tags/Form/FormErrorsTest.php
+++ b/tests/Tags/Form/FormErrorsTest.php
@@ -8,7 +8,11 @@ class FormErrorsTest extends FormTestCase
     public function it_renders_errors()
     {
         $this
-            ->post('/!/forms/contact')
+            ->post('/!/forms/contact', [
+                'name' => null,
+                'email' => null,
+                'message' => null,
+            ])
             ->assertSessionHasErrors(['email', 'message'], null, 'form.contact')
             ->assertLocation('/');
 
@@ -28,4 +32,18 @@ public function it_renders_errors()
 
         $this->assertEquals($expected, $errors[1]);
     }
+
+    /** @test */
+    public function it_allows_use_of_sometimes_rule_for_conditionally_hidden_fields()
+    {
+        $this
+            ->post('/!/forms/contact', [
+                'name' => null,
+                'email' => null,
+                // 'message' => 'Has both the `sometimes` and `required` rule, so it should only validate if in then request.',
+            ])
+            ->assertSessionHasErrors(['email'], null, 'form.contact')
+            ->assertSessionDoesntHaveErrors(['message'], null, 'form.contact')
+            ->assertLocation('/');
+    }
 }
diff --git a/tests/Tags/Form/FormTestCase.php b/tests/Tags/Form/FormTestCase.php
index dabb9bf58c..1b98540c81 100644
--- a/tests/Tags/Form/FormTestCase.php
+++ b/tests/Tags/Form/FormTestCase.php
@@ -6,6 +6,7 @@
 use Statamic\Facades\Form;
 use Statamic\Facades\Parse;
 use Statamic\Support\Arr;
+use Statamic\Support\Html;
 use Tests\NormalizesHtml;
 use Tests\PreventSavingStacheItemsToDisk;
 use Tests\TestCase;
@@ -14,6 +15,34 @@ abstract class FormTestCase extends TestCase
 {
     use PreventSavingStacheItemsToDisk, NormalizesHtml;
 
+    protected $defaultFields = [
+        [
+            'handle' => 'name',
+            'field' => [
+                'type' => 'text',
+                'display' => 'Full Name',
+                'validate' => 'min:3|alpha_num',
+            ],
+        ],
+        [
+            'handle' => 'email',
+            'field' => [
+                'type' => 'text',
+                'input_type' => 'email',
+                'display' => 'Email Address',
+                'validate' => 'required|email',
+            ],
+        ],
+        [
+            'handle' => 'message',
+            'field' => [
+                'type' => 'textarea',
+                'display' => 'Message',
+                'validate' => 'sometimes|required',
+            ],
+        ],
+    ];
+
     public function setUp(): void
     {
         parent::setUp();
@@ -43,36 +72,8 @@ protected function tag($tag)
 
     protected function createContactForm($fields = null)
     {
-        $defaultFields = [
-            [
-                'handle' => 'name',
-                'field' => [
-                    'type' => 'text',
-                    'display' => 'Full Name',
-                    'validate' => 'min:3|alpha_num',
-                ],
-            ],
-            [
-                'handle' => 'email',
-                'field' => [
-                    'type' => 'text',
-                    'input_type' => 'email',
-                    'display' => 'Email Address',
-                    'validate' => 'required|email',
-                ],
-            ],
-            [
-                'handle' => 'message',
-                'field' => [
-                    'type' => 'textarea',
-                    'display' => 'Message',
-                    'validate' => 'required',
-                ],
-            ],
-        ];
-
         $blueprint = Blueprint::make()->setContents([
-            'fields' => $fields ?? $defaultFields,
+            'fields' => $fields ?? $this->defaultFields,
         ]);
 
         $handle = $fields ? $this->customFieldBlueprintHandle : 'contact';
@@ -86,7 +87,7 @@ protected function createContactForm($fields = null)
         Form::makePartial();
     }
 
-    protected function assertFieldRendersHtml($expectedHtmlParts, $fieldConfig, $oldData = [])
+    protected function assertFieldRendersHtml($expectedHtmlParts, $fieldConfig, $oldData = [], $extraParams = [])
     {
         $randomString = str_shuffle('nobodymesseswiththehoff');
 
@@ -104,8 +105,10 @@ protected function assertFieldRendersHtml($expectedHtmlParts, $fieldConfig, $old
                 ->assertLocation('/');
         }
 
+        $extraParams = $extraParams ? Html::attributes($extraParams) : '';
+
         $output = $this->normalizeHtml(
-            $this->tag("{{ form:{$handle} }}{{ fields }}{{ field}}{{ /fields }}{{ /form:{$handle} }}", $oldData)
+            $this->tag("{{ form:{$handle} {$extraParams}}}{{ fields }}{{ field}}{{ /fields }}{{ /form:{$handle} }}", $oldData)
         );
 
         $expected = collect(Arr::wrap($expectedHtmlParts))->implode('');