diff --git a/config/forms.php b/config/forms.php
index 37f94e2d256..2190be43184 100644
--- a/config/forms.php
+++ b/config/forms.php
@@ -47,6 +47,19 @@
 
     'send_email_job' => \Statamic\Forms\SendEmail::class,
 
+    /*
+    |--------------------------------------------------------------------------
+    | Connections Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | The cache store used to track when a submission's connections have all
+    | finished, so its temporary files can be deleted. A persistent store
+    | such as "database" or "redis" is recommended. Null uses the default.
+    |
+    */
+
+    'connections_cache_store' => null,
+
     /*
     |--------------------------------------------------------------------------
     | Partial Submissions
diff --git a/lang/en/messages.php b/lang/en/messages.php
index 2892614df49..d6a18684815 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -83,6 +83,12 @@
     'elevated_session_verification_code_notification_body' => 'Copy and paste the code shown below to verify your identity. If you didn\'t request this code, you can ignore this email.',
     'elevated_session_verification_code_notification_subject' => 'Your Verification Code',
     'elevated_session_verification_code_sent' => 'Verification code has been sent to your email.',
+    'email_connection_delete_confirmation' => 'Are you sure you want to delete this email?',
+    'email_connection_instructions' => 'Set up emails to be sent automatically when this form is submitted. Use them to notify users or team members.',
+    'email_connection_preview_attachments' => 'Files uploaded with the submission will be attached.',
+    'email_connection_preview_latest_instructions' => 'Rendered with the latest submission to this form.',
+    'email_connection_preview_sample_instructions' => 'Rendered with sample submission data. Real emails will contain the submitted values.',
+    'email_connector_description' => 'Send email notifications.',
     'email_utility_configuration_description' => 'Mail settings are configured in <code>:path</code>',
     'email_utility_description' => 'Check email configuration settings and send test emails.',
     'entry_count' => ':count entry|:count entries',
@@ -123,22 +129,18 @@
     'forgot_password_enter_email' => 'Enter your email address to receive a password reset link.',
     'forgot_password_sent' => 'If an account with that email address exists, a password reset link has been sent.',
     'form_configure_blueprint_instructions' => 'Choose from existing blueprints or create a new one.',
-    'form_configure_email_attachments_instructions' => 'Attach uploaded assets to this email.',
-    'form_configure_email_bcc_instructions' => 'Email address of the BCC recipient(s) - comma separated.',
-    'form_configure_email_cc_instructions' => 'Email address of the CC recipient(s) - comma separated.',
+    'form_configure_email_attachments_instructions' => 'Attach files uploaded with the submission.',
+    'form_configure_email_body_instructions' => 'You can include submitted values using [Antlers](https://statamic.dev/frontend/antlers). Leave blank to list all submitted fields instead.',
     'form_configure_email_from_instructions' => 'Leave blank to fall back to the site default.',
-    'form_configure_email_html_instructions' => 'The view for the HTML version of this email.',
-    'form_configure_email_instructions' => 'Configure emails to be sent when new form submissions are received.',
+    'form_configure_email_views_instructions' => 'Leave both blank to use the default layout.',
     'form_configure_email_description' => 'Be sure your email settings are configured to send and receive notifications when forms are submitted.',
     'form_configure_email_markdown_instructions' => 'Render the HTML version of this email using Markdown.',
-    'form_configure_email_reply_to_instructions' => 'Leave blank to fall back to sender.',
-    'form_configure_email_subject_instructions' => 'Email subject line.',
-    'form_configure_email_text_instructions' => 'The view for the text version of this email.',
-    'form_configure_email_to_instructions' => 'Email address of the recipient(s) - comma separated.',
+    'form_configure_email_reply_to_instructions' => 'Leave blank to fall back to the sender.',
+    'form_configure_email_to_instructions' => 'Choose a form field or enter an email address.',
     'form_configure_handle_instructions' => 'Used to reference this form on the frontend. This cannot be easily changed later.',
     'form_configure_honeypot_instructions' => 'Field name to use as a honeypot. Honeypots are special fields used to reduce bot spam.',
     'form_configure_intro' => 'Forms collect information from visitors and can trigger events and send notifications when submissions are received.',
-    'form_configure_mailer_instructions' => 'Choose the mailer for sending this email. Leave blank to fall back to the default mailer.',
+    'form_configure_mailer_instructions' => 'Leave blank to fall back to the default mailer.',
     'form_configure_generate_fake_submissions_instructions' => 'Allow generating fake submissions and workflow testing from the submissions screen.',
     'form_configure_store_instructions' => 'Disable to stop storing submissions. Events and email notifications will still be sent.',
     'form_configure_title_instructions' => 'Use a call to action, such as \'Contact Us\'.',
@@ -331,5 +333,10 @@
     'user_wizard_invitation_subject' => 'Activate your new Statamic account on :site',
     'user_wizard_roles_groups_intro' => 'Users can be assigned to roles that customize their permissions, access, and abilities throughout the Control Panel.',
     'user_wizard_super_admin_instructions' => 'Super admins have complete control and access to everything in the control panel. Grant this role wisely.',
+    'webhook_connection_delete_confirmation' => 'Are you sure you want to delete this webhook?',
+    'webhook_connection_instructions' => 'Each webhook is sent when this form is submitted. Notify other services or trigger automations with the submission data.',
+    'webhook_connection_payload_instructions' => 'Each submission is sent to the webhook URL as a JSON POST request.',
+    'webhook_connection_verify_ssl_instructions' => 'Only disable this if the receiving server uses a self-signed certificate.',
+    'webhook_connector_description' => 'Send submissions to an external URL.',
     'width_x_height' => ':width × :height',
 ];
diff --git a/lang/en/validation.php b/lang/en/validation.php
index be3b1bd615e..c2d7b9d5279 100644
--- a/lang/en/validation.php
+++ b/lang/en/validation.php
@@ -196,6 +196,7 @@
     'elevated_session_resend_code_unavailable' => 'Resend code is only available for verification code method.',
     'elevated_session_verification_code' => 'The verification code is incorrect.',
     'email_available' => 'A user with this email already exists.',
+    'email_field_reference' => "References a field that doesn't exist on this form.",
     'fieldset_imported_recursively' => 'Fieldset :handle is being imported recursively.',
     'form_chart_hidden_field' => 'Field :field is hidden and cannot be charted.',
     'form_chart_not_applicable' => 'Chart :chart cannot be used for field :field.',
@@ -218,6 +219,7 @@
     'unique_user_value' => 'This value has already been taken.',
     'unique_uri' => 'This URI has already been taken.',
     'time' => 'Not a valid time.',
+    'webhook_url_not_public' => 'Webhooks must use a public address.',
     'asset_current_filename' => 'This is the current filename.',
     'asset_file_exists' => 'A file already exists with this name.',
     'asset_file_exists_same_content' => 'A file already exists with this name and has the same content. You may want to delete this rather than rename it.',
diff --git a/packages/cms/src/index.js b/packages/cms/src/index.js
index 8b30e9f288b..cbee0e5568c 100644
--- a/packages/cms/src/index.js
+++ b/packages/cms/src/index.js
@@ -16,6 +16,10 @@ export const {
     RevisionPreview,
     SaveButtonOptions,
     SortableList,
+    ConnectionFields,
+    ConnectionList,
+    ConnectionRules,
+    ConnectionSummary,
     requireElevatedSession,
     requireElevatedSessionIf,
     clone,
diff --git a/resources/css/dark.css b/resources/css/dark.css
index 64ee69737ff..ef9a2844b2d 100644
--- a/resources/css/dark.css
+++ b/resources/css/dark.css
@@ -1,6 +1,8 @@
 
 
 .dark {
+    color-scheme: dark;
+
     input:-webkit-autofill {
         -webkit-box-shadow: inset 0 0 0 50px var(--color-gray-500);
         -webkit-text-fill-color: var(--color-gray-300);
diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 236115cc450..3b219d3e6b7 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -1,6 +1,8 @@
 /* VARIABLES
 =================================================== */
 :root {
+    color-scheme: light;
+
     /* For animating height */
     interpolate-size: allow-keywords;
 
diff --git a/resources/js/bootstrap/cms/core.js b/resources/js/bootstrap/cms/core.js
index 05070c7d6c8..505283c7260 100644
--- a/resources/js/bootstrap/cms/core.js
+++ b/resources/js/bootstrap/cms/core.js
@@ -19,3 +19,7 @@ export { default as resetValuesFromResponse } from '../../util/resetValuesFromRe
 export { requireElevatedSession, requireElevatedSessionIf } from '../../components/elevated-sessions';
 export { default as clone, deepClone } from '../../util/clone.js';
 export { default as debounce } from '../../util/debounce.js';
+export { default as ConnectionFields } from '../../components/forms/connections/ConnectionFields.vue';
+export { default as ConnectionList } from '../../components/forms/connections/ConnectionList.vue';
+export { default as ConnectionRules } from '../../components/forms/connections/ConnectionRules.vue';
+export { default as ConnectionSummary } from '../../components/forms/connections/ConnectionSummary.vue';
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index fb7fdabc901..4e715e66b49 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -70,6 +70,10 @@ export default function registerGlobalComponents(app) {
     app.component('min-max-insight', MinMaxInsight);
     app.component('star-rating-insight', StarRatingInsight);
 
+    // Form Connections
+    app.component('email-connector', defineAsyncComponent(() => import('../components/forms/connections/EmailConnector.vue')));
+    app.component('webhook-connector', defineAsyncComponent(() => import('../components/forms/connections/WebhookConnector.vue')));
+
     // Reusable
     app.component('file-icon', FileIcon);
 
diff --git a/resources/js/bootstrap/fieldtypes.js b/resources/js/bootstrap/fieldtypes.js
index 1b9b078f200..6f34b4f4691 100644
--- a/resources/js/bootstrap/fieldtypes.js
+++ b/resources/js/bootstrap/fieldtypes.js
@@ -31,6 +31,7 @@ import Sites from '../components/globals/Sites.vue';
 import Grid from '../components/fieldtypes/grid/Grid.vue';
 import GridIndex from '../components/fieldtypes/grid/GridIndex.vue';
 import GroupFieldtype from '../components/fieldtypes/GroupFieldtype.vue';
+import FormFieldsFieldtype from '../components/fieldtypes/FormFieldsFieldtype.vue';
 import FormHeadingFieldtype from '../components/fieldtypes/FormHeadingFieldtype.vue';
 import FormParagraphFieldtype from '@/components/fieldtypes/FormParagraphFieldtype.vue';
 import FormUploadFieldtype from '@/components/fieldtypes/FormUploadFieldtype.vue';
@@ -114,6 +115,7 @@ export default function registerFieldtypes(app) {
     app.component('grid-fieldtype', Grid);
     app.component('grid-fieldtype-index', GridIndex);
     app.component('group-fieldtype', GroupFieldtype);
+    app.component('form_fields-fieldtype', FormFieldsFieldtype);
     app.component('form_heading-fieldtype', FormHeadingFieldtype);
     app.component('form_paragraph-fieldtype', FormParagraphFieldtype);
     app.component('form_upload-fieldtype', FormUploadFieldtype);
diff --git a/resources/js/components/fieldtypes/FormFieldsFieldtype.vue b/resources/js/components/fieldtypes/FormFieldsFieldtype.vue
new file mode 100644
index 00000000000..83a3a970d68
--- /dev/null
+++ b/resources/js/components/fieldtypes/FormFieldsFieldtype.vue
@@ -0,0 +1,51 @@
+<script setup>
+import Fieldtype from '@/components/fieldtypes/fieldtype.js';
+import { Combobox, Icon } from '@/components/ui';
+import { categories, categoryColorClasses } from '@/components/forms/builder/categories.js';
+import { computed } from 'vue';
+
+const emit = defineEmits(Fieldtype.emits);
+const props = defineProps(Fieldtype.props);
+const { isReadOnly, update } = Fieldtype.use(emit, props);
+
+const options = computed(() => props.meta.options ?? []);
+
+const category = (handle) => categories[handle] ?? categories.other;
+const categoryTitle = (handle) => category(handle).title;
+const iconClasses = (handle) =>
+    `size-4 shrink-0 ${categoryColorClasses[category(handle).color]?.icon ?? 'text-gray-600 dark:text-gray-400'}`;
+</script>
+
+<template>
+    <Combobox
+        :id
+        :clearable="config.clearable"
+        :disabled="config.disabled"
+        :max-selections="config.max_items"
+        :model-value="value"
+        :multiple="config.multiple"
+        :options
+        :placeholder="__(config.placeholder)"
+        :read-only="isReadOnly"
+        :searchable="(config.searchable ?? true) || config.taggable"
+        :taggable="config.taggable"
+        :close-on-select="(config.taggable && !options.length) || !config.multiple"
+        @update:modelValue="update"
+    >
+        <template #option="option">
+            <span class="flex w-full items-center gap-2">
+                <Icon v-if="option.icon" :name="option.icon" :class="iconClasses(option.category)" />
+                <span class="truncate">{{ __(option.label) }}</span>
+                <span v-if="option.category" class="ms-auto text-2xs text-gray-500 dark:text-gray-400">
+                    {{ categoryTitle(option.category) }}
+                </span>
+            </span>
+        </template>
+        <template #selected-option="{ option }">
+            <span class="flex items-center gap-2 truncate">
+                <Icon v-if="option.icon" :name="option.icon" :class="iconClasses(option.category)" />
+                <span class="truncate">{{ __(option.label) }}</span>
+            </span>
+        </template>
+    </Combobox>
+</template>
diff --git a/resources/js/components/forms/connections/ConnectionFields.vue b/resources/js/components/forms/connections/ConnectionFields.vue
new file mode 100644
index 00000000000..b3bb8fde19b
--- /dev/null
+++ b/resources/js/components/forms/connections/ConnectionFields.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+// Renders one PublishContainer per connection, with the connection as the container root.
+// Fieldtypes that read sibling values through injectPublishContext() rely on that, so don't
+// render two of these for the same connection. Use the default slot and pick() instead.
+import { computed, inject } from 'vue';
+import { PublishContainer, PublishFields, PublishFieldsProvider } from '@ui';
+import { connectionContextKey } from './context';
+
+type BlueprintField = { handle: string; [key: string]: unknown };
+
+const props = withDefaults(defineProps<{
+    /** Handles of the fields to render, in order. Defaults to every field in the blueprint's first tab. */
+    fields?: string[];
+    /** Handles of fields to leave out. */
+    except?: string[];
+    /** Extra values made available to field conditions. */
+    extraValues?: Record<string, unknown>;
+    /** Wraps the fields in a bordered box. */
+    bordered?: boolean;
+    /** The connection being edited. Defaults to the one provided by ConnectionList. */
+    connection?: Record<string, unknown>;
+    /** The blueprint's publish array. Defaults to the one passed to ConnectionList. */
+    blueprint?: Record<string, any>;
+    /** Fieldtype meta for this connection. Defaults to the one managed by ConnectionList. */
+    meta?: Record<string, unknown>;
+    /** Validation errors for this connection, keyed by field path. Defaults to the ones from ConnectionList. */
+    errors?: Record<string, string[]>;
+    /** Prefix for the container name. Defaults to ConnectionList's name. */
+    name?: string;
+}>(), {
+    bordered: true,
+});
+
+const context = inject(connectionContextKey, null);
+
+const connection = computed(() => props.connection ?? context?.value.connection ?? {});
+const blueprint = computed(() => props.blueprint ?? context?.value.blueprint);
+const meta = computed(() => props.meta ?? context?.value.meta ?? {});
+const errors = computed(() => props.errors ?? context?.value.errors ?? {});
+const containerName = computed(() => `${props.name ?? context?.value.name ?? 'connection'}-${connection.value.id}`);
+
+const allFields = computed<BlueprintField[]>(() =>
+    (blueprint.value?.tabs?.[0]?.sections ?? []).flatMap((section) => section.fields ?? []),
+);
+
+const pick = (...handles: string[]): BlueprintField[] =>
+    handles
+        .map((handle) => allFields.value.find((field) => field.handle === handle))
+        .filter((field): field is BlueprintField => field !== undefined);
+
+const visibleFields = computed<BlueprintField[]>(() => {
+    const fields = props.fields ? pick(...props.fields) : allFields.value;
+
+    return props.except ? fields.filter((field) => !props.except.includes(field.handle)) : fields;
+});
+</script>
+
+<template>
+    <div :class="{ 'rounded-lg border border-gray-300 bg-white p-4 dark:border-gray-700 dark:bg-gray-900': bordered }">
+        <PublishContainer
+            :blueprint
+            :errors
+            :model-value="connection"
+            :meta
+            :extra-values="extraValues"
+            :name="containerName"
+            :track-dirty-state="false"
+        >
+            <slot name="before" :connection />
+            <slot :connection :fields="visibleFields" :pick>
+                <PublishFieldsProvider :fields="visibleFields">
+                    <PublishFields />
+                </PublishFieldsProvider>
+            </slot>
+            <slot name="after" :connection />
+        </PublishContainer>
+    </div>
+</template>
diff --git a/resources/js/components/forms/connections/ConnectionItem.vue b/resources/js/components/forms/connections/ConnectionItem.vue
new file mode 100644
index 00000000000..22bd2a3b9f9
--- /dev/null
+++ b/resources/js/components/forms/connections/ConnectionItem.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { computed, provide } from 'vue';
+import { Button, DragHandle, Dropdown, DropdownItem, DropdownMenu, Switch } from '@ui';
+import { connectionContextKey } from './context';
+
+const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'removed', 'update:enabled']);
+
+const props = defineProps({
+    collapsed: Boolean,
+    enabled: Boolean,
+    hasError: Boolean,
+    handleClass: String,
+    context: Object,
+});
+
+provide(connectionContextKey, computed(() => props.context));
+
+function toggleCollapsedState() {
+    props.collapsed ? emit('expanded') : emit('collapsed');
+}
+</script>
+
+<template>
+    <div
+        class="@container relative w-full rounded-lg border border-gray-300 text-base dark:border-white/10 bg-white dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black shadow-ui-sm"
+        :class="{ 'border-red-500': hasError }"
+    >
+        <header
+            class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 border-gray-300 dark:shadow-md"
+            :class="{
+                'bg-white dark:bg-gray-900': collapsed,
+                'bg-gray-100 dark:bg-gray-925 rounded-b-none': !collapsed,
+            }"
+        >
+            <DragHandle :class="handleClass" class="ms-1 cursor-grab [&_svg]:opacity-75 dark:[&_svg]:opacity-50" />
+            <button type="button" class="show-focus-within_target flex flex-1 items-center gap-1.75 p-2 py-1.75 min-w-0 focus:outline-none cursor-pointer" @click="toggleCollapsedState">
+                <slot name="header" />
+            </button>
+            <div class="flex items-center gap-2">
+                <Switch
+                    size="xs"
+                    :model-value="enabled"
+                    @update:model-value="emit('update:enabled', $event)"
+                    v-tooltip="enabled ? __('Enabled') : __('Disabled')"
+                />
+                <Dropdown>
+                    <template #trigger>
+                        <Button icon="dots" variant="ghost" size="xs" class="me-2" :aria-label="__('Open connection actions')" />
+                    </template>
+                    <DropdownMenu>
+                        <DropdownItem
+                            :text="__('Duplicate')"
+                            icon="duplicate"
+                            @click="emit('duplicated')"
+                        />
+                        <DropdownItem
+                            :text="__('Delete')"
+                            icon="trash"
+                            variant="destructive"
+                            @click="emit('removed')"
+                        />
+                    </DropdownMenu>
+                </Dropdown>
+            </div>
+        </header>
+
+        <div v-show="!collapsed" class="isolate border-t border-t-gray-300! dark:border-t-white/10!">
+            <div class="p-4">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/forms/connections/ConnectionList.vue b/resources/js/components/forms/connections/ConnectionList.vue
new file mode 100644
index 00000000000..4ad65181b49
--- /dev/null
+++ b/resources/js/components/forms/connections/ConnectionList.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { nanoid as uniqid } from 'nanoid';
+import { Button, ConfirmationModal, Description } from '@ui';
+import { SortableList } from '@/components/sortable/Sortable.js';
+import { deepClone } from '@/util/clone.js';
+import { preferences } from '@api';
+import ConnectionItem from './ConnectionItem.vue';
+import ConnectionRules from './ConnectionRules.vue';
+import ConnectionFields from './ConnectionFields.vue';
+import { __ } from '@/bootstrap/globals';
+
+type Connection = {
+    id: string;
+    enabled: boolean;
+    conditions: {
+        _id: string;
+        field: string;
+        operator: string;
+        value: string;
+    }[];
+    [key: string]: unknown;
+}
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = withDefaults(defineProps<{
+    modelValue: Connection[];
+    errors: Record<string, string[]>;
+    defaults: { values?: Record<string, unknown>; meta?: Record<string, unknown> };
+    /** The blueprint's publish array, used by ConnectionFields. */
+    blueprint?: Record<string, unknown>;
+    /** Fieldtype meta for existing connections, keyed by connection id. */
+    meta?: Record<string, Record<string, unknown>>;
+    /** Prefix for each connection's publish container name. */
+    name?: string;
+    addLabel: string;
+    description?: string;
+    deleteHeading: string;
+    deleteDescription: string;
+    /** Label for the "always" option when no default slot is given. */
+    alwaysLabel?: string;
+    /** Label for the "if" option when no default slot is given. */
+    ifLabel?: string;
+    /** Whether to render ConnectionRules around the fields when no default slot is given. */
+    rules?: boolean;
+}>(), {
+    modelValue: () => [],
+    errors: () => ({}),
+    defaults: () => ({}),
+    meta: () => ({}),
+    name: 'connection',
+    rules: true,
+    addLabel: () => __('Add Connection'),
+    deleteHeading: () => __('Delete Connection'),
+    deleteDescription: () => __('Are you sure you want to delete this connection?'),
+});
+
+const sortableItemClass = 'connection-item';
+const sortableHandleClass = 'connection-item-handle';
+
+const collapseByDefault = ref<boolean>(preferences.get('forms.connect.collapse_connections', true));
+const collapsed = ref<string[]>(collapseByDefault.value ? props.modelValue.map((connection) => connection.id) : []);
+const confirmingRemoval = ref<string | null>(null);
+const errorConnectionIds = ref<string[]>([]);
+
+// Each connection gets its own meta object, since publish containers mutate it (e.g. grid row meta).
+const metaStore: Record<string, Record<string, unknown>> = {};
+
+const seedMeta = (meta: Record<string, Record<string, unknown>>): void => {
+    Object.entries(meta).forEach(([id, connectionMeta]) => (metaStore[id] = deepClone(connectionMeta)));
+};
+
+const metaFor = (connection: Connection): Record<string, unknown> =>
+    (metaStore[connection.id] ??= deepClone(props.defaults.meta ?? {}));
+
+const add = (): void => {
+    const id = uniqid();
+
+    metaStore[id] = deepClone(props.defaults.meta ?? {});
+
+    emit('update:modelValue', [
+        ...props.modelValue,
+        {
+            id,
+            enabled: true,
+            conditions: [],
+            ...deepClone(props.defaults.values),
+        },
+    ]);
+};
+
+const duplicate = (connection: Connection): void => {
+    const id = uniqid();
+    const duplicated = [...props.modelValue];
+
+    metaStore[id] = deepClone(metaFor(connection));
+
+    duplicated.splice(props.modelValue.indexOf(connection) + 1, 0, {
+        ...deepClone(connection),
+        id,
+        conditions: connection.conditions.map((condition) => ({ ...condition, _id: uniqid() })),
+    });
+
+    emit('update:modelValue', duplicated);
+};
+
+const updateEnabled = (connection: Connection, enabled: boolean): void => {
+    emit(
+        'update:modelValue',
+        props.modelValue.map((existing) => (existing.id === connection.id ? { ...existing, enabled } : existing))
+    );
+};
+
+const remove = (): void => {
+    const connection = props.modelValue.find((item) => item.id === confirmingRemoval.value);
+
+    expand(confirmingRemoval.value);
+    confirmingRemoval.value = null;
+
+    if (!connection) return;
+
+    delete metaStore[connection.id];
+    emit('update:modelValue', props.modelValue.filter((existing) => existing !== connection));
+};
+
+const isEnabled = (connection: Connection): boolean => connection.enabled !== false;
+const isCollapsed = (connection: Connection): boolean => collapsed.value.includes(connection.id);
+
+const collapse = (id: string): void => {
+    if (!collapsed.value.includes(id)) {
+        collapsed.value.push(id);
+    }
+};
+
+const expand = (id: string): void => (collapsed.value = collapsed.value.filter((connectionId) => connectionId !== id));
+
+const expandAll = (): void => {
+    collapsed.value = [];
+    collapseByDefault.value = false;
+};
+
+const collapseAll = (): void => {
+    collapsed.value = props.modelValue.map((connection) => connection.id);
+    collapseByDefault.value = true;
+};
+
+const allCollapsed = computed(() => collapsed.value.length === props.modelValue.length);
+
+const errorIndex = (connection: Connection): number => errorConnectionIds.value.indexOf(connection.id);
+
+const hasError = (connection: Connection): boolean => {
+    const index = errorIndex(connection);
+
+    return index !== -1 && Object.keys(props.errors).some((key) => key === `${index}` || key.startsWith(`${index}.`));
+};
+
+const connectionErrors = (connection: Connection) => {
+    const index = errorIndex(connection);
+
+    return Object.entries(props.errors)
+        .filter(([key]) => key.startsWith(`${index}.`))
+        .reduce((fields, [key, messages]) => {
+            fields[key.slice(`${index}.`.length)] = messages;
+            return fields;
+        }, {});
+};
+
+const context = (connection: Connection) => ({
+    connection,
+    errors: connectionErrors(connection),
+    meta: metaFor(connection),
+    blueprint: props.blueprint,
+    name: props.name,
+});
+
+seedMeta(props.meta);
+
+watch(() => props.meta, seedMeta);
+
+watch(collapseByDefault, (collapse: boolean) => preferences.set('forms.connect.collapse_connections', collapse));
+
+watch(
+    () => props.errors,
+    () => (errorConnectionIds.value = props.modelValue.map((connection) => connection.id)),
+    { immediate: true },
+);
+</script>
+
+<template>
+    <Teleport v-if="modelValue.length > 1" defer to="#connection-list-actions">
+        <Button
+            size="xs"
+            variant="ghost"
+            :icon="allCollapsed ? 'expand' : 'collapse'"
+            :aria-label="allCollapsed ? __('Expand all') : __('Collapse all')"
+            @click="allCollapsed ? expandAll() : collapseAll()"
+        />
+    </Teleport>
+
+    <Description v-if="description" :text="description" class="mb-4" />
+
+    <Button v-if="modelValue.length === 0" size="sm" :text="addLabel" icon="plus" @click="add" />
+
+    <template v-else>
+        <SortableList
+            vertical
+            constrain-dimensions
+            :model-value="modelValue"
+            :item-class="sortableItemClass"
+            :handle-class="sortableHandleClass"
+            @update:model-value="$emit('update:modelValue', $event)"
+        >
+            <div class="relative space-y-6 mb-0" data-connection-list>
+                <div v-for="(connection, index) in modelValue" :key="connection.id" :class="sortableItemClass">
+                    <ConnectionItem
+                        :enabled="isEnabled(connection)"
+                        :collapsed="isCollapsed(connection)"
+                        :has-error="hasError(connection)"
+                        :handle-class="sortableHandleClass"
+                        :context="context(connection)"
+                        @collapsed="collapse(connection.id)"
+                        @expanded="expand(connection.id)"
+                        @duplicated="duplicate(connection)"
+                        @removed="confirmingRemoval = connection.id"
+                        @update:enabled="updateEnabled(connection, $event)"
+                    >
+                        <template #header>
+                            <slot name="header" :item="connection" :index="index" :collapsed="collapsed.includes(connection.id)" />
+                        </template>
+
+                        <slot
+                            v-if="$slots.default"
+                            :item="connection"
+                            :index="index"
+                            :errors="connectionErrors(connection)"
+                            :meta="metaFor(connection)"
+                        />
+                        <ConnectionRules
+                            v-else-if="rules"
+                            v-model:conditions="connection.conditions"
+                            :always-label="alwaysLabel"
+                            :if-label="ifLabel"
+                        >
+                            <template #then>
+                                <ConnectionFields />
+                            </template>
+                        </ConnectionRules>
+                        <ConnectionFields v-else />
+                    </ConnectionItem>
+                </div>
+            </div>
+        </SortableList>
+
+        <div class="inline-flex relative pt-6">
+            <div class="absolute inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850" />
+            <Button size="sm" :text="addLabel" icon="plus" class="relative" @click="add" />
+        </div>
+    </template>
+
+    <ConfirmationModal
+        :open="confirmingRemoval !== null"
+        :title="deleteHeading"
+        :body-text="deleteDescription"
+        :button-text="__('Delete')"
+        danger
+        @update:open="confirmingRemoval = null"
+        @confirm="remove"
+    />
+</template>
+
+<style scoped>
+[data-connection-list]::before {
+    content: '';
+    position: absolute;
+    top: 1.5rem;
+    bottom: 0;
+    inset-inline-start: 0.875rem;
+    border-inline-start: 1px dashed var(--color-gray-400);
+}
+
+.dark [data-connection-list]::before {
+    border-inline-start-color: var(--color-gray-600);
+}
+</style>
diff --git a/resources/js/components/forms/connections/ConnectionRules.vue b/resources/js/components/forms/connections/ConnectionRules.vue
new file mode 100644
index 00000000000..ed0975858b4
--- /dev/null
+++ b/resources/js/components/forms/connections/ConnectionRules.vue
@@ -0,0 +1,246 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { Button, Combobox, Icon } from '@ui';
+import { nanoid as uniqid } from 'nanoid';
+import Condition from '@/components/field-conditions/Condition.vue';
+import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
+
+const emit = defineEmits(['update:conditions']);
+
+const props = defineProps({
+    conditions: { type: Array, required: true },
+    alwaysLabel: { type: String, default: () => __('Always run') },
+    ifLabel: { type: String, default: () => __('Run if...') },
+});
+
+const suggestableFields = usePage().props.suggestableFields ?? [];
+
+const when = ref(props.conditions.length ? 'if' : 'always');
+
+const whenOptions = computed(() => [
+    { label: props.alwaysLabel, value: 'always' },
+    { label: props.ifLabel, value: 'if' },
+]);
+
+const joinOptions = [
+    { label: __('All of the conditions pass'), short_label: __('And'), value: 'and' },
+    { label: __('Any of the conditions pass'), short_label: __('Or'), value: 'or' },
+];
+
+const whenChanged = (value) => {
+    when.value = value;
+
+    if (value === 'always') {
+        emit('update:conditions', []);
+        return;
+    }
+
+    if (props.conditions.length === 0) {
+        addCondition();
+    }
+};
+
+const addCondition = () => {
+    emit('update:conditions', [...props.conditions, {
+        _id: uniqid(),
+        join: 'and',
+        field: null,
+        operator: 'equals',
+        value: null,
+    }]);
+};
+
+const updateCondition = (index, condition) => {
+    const conditions = [...props.conditions];
+    conditions[index] = condition;
+    emit('update:conditions', conditions);
+};
+
+const updateConditionJoin = (index, join) => {
+    updateCondition(index, { ...props.conditions[index], join });
+};
+
+const removeCondition = (index) => {
+    const conditions = [...props.conditions];
+    conditions.splice(index, 1);
+    emit('update:conditions', conditions);
+};
+
+const findSuggestableField = (handle) => suggestableFields.find((field) => field.handle === handle);
+
+const fieldIconClasses = (handle) => {
+    const color = categories[findSuggestableField(handle)?.category]?.color || 'gray';
+    return `size-4 shrink-0 ${categoryColorClasses[color]?.icon || 'text-gray-600 dark:text-gray-400'}`;
+};
+
+const shouldBeIndented = (index) => {
+    if (index === 0) return false;
+    return props.conditions[index].join !== 'or';
+};
+</script>
+
+<template>
+    <div data-logic-text>
+        <div class="logic-text">
+            <ol>
+                <li v-if="conditions.length === 0">
+                    <div class="flex items-center">
+                        <div class="logic-text__condition">
+                            <Combobox
+                                :model-value="when"
+                                class="min-w-34"
+                                size="sm"
+                                :options="whenOptions"
+                                option-label="label"
+                                option-value="value"
+                                :searchable="false"
+                                adaptive-width
+                                @update:model-value="whenChanged($event)"
+                            >
+                                <template #selected-option="{ option }">
+                                    <span class="block truncate">{{ option.value === 'if' ? __('If') : option.label }}</span>
+                                </template>
+                            </Combobox>
+                        </div>
+                    </div>
+
+                    <ol v-if="when === 'if'">
+                        <li>
+                            <div class="relative">
+                                <div class="absolute -z-1 -inset-y-2.5 -start-3.5 border-s-1 border-dashed border-gray-400 dark:border-gray-600" aria-hidden="true" />
+                                <Button
+                                    size="sm"
+                                    variant="subtle"
+                                    class="bg-transparent!"
+                                    :text="__('+ Add Condition')"
+                                    @click="addCondition"
+                                />
+                            </div>
+                        </li>
+                    </ol>
+                </li>
+                <li
+                    v-for="(condition, index) in conditions"
+                    :key="condition._id"
+                    class="group/condition"
+                    :class="{ 'ms-(--inner-indent) indented-condition': shouldBeIndented(index) }"
+                >
+                    <div class="flex items-center gap-0.25">
+                        <div v-if="index === 0" class="logic-text__condition">
+                            <Combobox
+                                :model-value="when"
+                                class="min-w-34"
+                                size="sm"
+                                :options="whenOptions"
+                                option-label="label"
+                                option-value="value"
+                                :searchable="false"
+                                adaptive-width
+                                @update:model-value="whenChanged($event)"
+                            >
+                                <template #selected-option="{ option }">
+                                    <span class="block truncate">{{ option.value === 'if' ? __('If') : option.label }}</span>
+                                </template>
+                            </Combobox>
+                        </div>
+                        <div v-else class="logic-text__condition">
+                            <Combobox
+                                :model-value="condition.join || 'and'"
+                                class="max-w-24"
+                                size="sm"
+                                :options="joinOptions"
+                                option-label="label"
+                                option-value="value"
+                                :placeholder="__('And')"
+                                :searchable="false"
+                                adaptive-width
+                                @update:model-value="updateConditionJoin(index, $event)"
+                            >
+                                <template #selected-option="{ option }">
+                                    <span class="block truncate">{{ option.short_label }}</span>
+                                </template>
+                            </Combobox>
+                        </div>
+                        <div class="ms-0.5 mb-2.5 inline-flex items-center gap-1.5 opacity-0 pointer-events-none transition-opacity group-hover/condition:opacity-100 group-hover/condition:pointer-events-auto [@media(any-hover:none)]:opacity-100 [@media(any-hover:none)]:pointer-events-auto">
+                            <Button
+                                size="sm"
+                                inset
+                                variant="subtle"
+                                class="size-7 rounded-full [&_div]:opacity-75 [&_div]:-translate-y-px"
+                                :text="'&times;'"
+                                :aria-label="__('Remove condition')"
+                                @click="removeCondition(index)"
+                            />
+                        </div>
+                    </div>
+
+                    <ol>
+                        <Condition
+                            :condition="condition"
+                            :conditions="conditions"
+                            :suggestable-fields="suggestableFields"
+                            :exclude-operators="['custom']"
+                            size="sm"
+                            @update:condition="updateCondition(index, $event)"
+                        >
+                            <template #field-option="{ value, label }">
+                                <span class="inline-flex items-center gap-2">
+                                    <Icon
+                                        v-if="findSuggestableField(value)?.icon"
+                                        :name="findSuggestableField(value).icon"
+                                        :class="fieldIconClasses(value)"
+                                    />
+                                    <span class="truncate">{{ __(label) }}</span>
+                                </span>
+                            </template>
+                            <template #field-selected="{ option }">
+                                <span class="inline-flex items-center gap-2 truncate">
+                                    <Icon
+                                        v-if="findSuggestableField(option.value)?.icon"
+                                        :name="findSuggestableField(option.value).icon"
+                                        :class="fieldIconClasses(option.value)"
+                                    />
+                                    <span class="truncate">{{ __(findSuggestableField(option.value)?.config?.display ?? option.value) }}</span>
+                                </span>
+                            </template>
+                        </Condition>
+                    </ol>
+
+                    <ol v-if="index === conditions.length - 1">
+                        <li>
+                            <div class="relative">
+                                <div class="absolute -z-1 -top-6 -bottom-2.5 -start-3.5 w-4 rounded-ss-full border-s-1 border-t-1 border-dashed border-gray-400 dark:border-gray-600" aria-hidden="true" />
+                                <Button
+                                    size="sm"
+                                    variant="subtle"
+                                    class="bg-transparent!"
+                                    :text="__('+ Add Condition')"
+                                    @click="addCondition"
+                                />
+                            </div>
+                        </li>
+                    </ol>
+                </li>
+                <li v-if="$slots.then" data-hide-connector>
+                    <div v-if="when === 'if'" class="logic-text-badge logic-text__condition" aria-hidden="true">
+                        {{ __('Then') }}
+                    </div>
+                    <ol>
+                        <li class="w-full min-w-0"><slot name="then" /></li>
+                    </ol>
+                </li>
+            </ol>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+[data-hide-connector]::before {
+    content: none !important;
+}
+
+.logic-text__condition::after {
+    z-index: var(--z-index-below);
+}
+</style>
diff --git a/resources/js/components/forms/connections/ConnectionSummary.vue b/resources/js/components/forms/connections/ConnectionSummary.vue
new file mode 100644
index 00000000000..04cd90e5143
--- /dev/null
+++ b/resources/js/components/forms/connections/ConnectionSummary.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { Badge, Icon, Subheading } from '@ui';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
+import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
+import { operatorLabel } from '@/components/forms/logic/operatorLabels';
+import { __ } from '@/bootstrap/globals';
+
+type Condition = {
+    field: string | null;
+    operator: string;
+    value: unknown;
+    join?: 'and' | 'or';
+};
+
+type SuggestableField = {
+    handle: string;
+    icon?: string;
+    category?: string;
+    config?: { display?: string };
+};
+
+enum PartType {
+    Join = 'join',
+    Field = 'field',
+    Operator = 'operator',
+    Value = 'value',
+}
+
+type SummaryPart = {
+    type: PartType;
+    text: string;
+};
+
+const props = withDefaults(defineProps<{
+    conditions?: Condition[];
+    fallback?: string | null;
+}>(), {
+    conditions: () => [],
+    fallback: null,
+});
+
+const suggestableFields = (usePage().props.suggestableFields ?? []) as SuggestableField[];
+
+const findField = (handle: string): SuggestableField | undefined => suggestableFields.find((field) => field.handle === handle);
+const fieldDisplay = (handle: string): string => __(findField(handle)?.config?.display) || handle;
+
+const fieldIconClass = (field?: SuggestableField): string => {
+    const color = categories[field?.category]?.color || 'gray';
+
+    return categoryColorClasses[color]?.icon || 'text-gray-600 dark:text-gray-400';
+};
+
+const completeConditions = computed(() => props.conditions.filter((condition) => condition.field));
+
+const firstField = computed(() => {
+    const handle = completeConditions.value[0]?.field;
+
+    if (!handle) return null;
+
+    const field = findField(handle);
+
+    return {
+        handle,
+        display: fieldDisplay(handle),
+        icon: field?.icon || 'generic-field',
+        iconClass: fieldIconClass(field),
+    };
+});
+
+const hasValue = (condition: Condition): boolean => condition.value !== null && condition.value !== undefined && condition.value !== '';
+const displayValue = (condition: Condition): string => (Array.isArray(condition.value) ? condition.value.join(', ') : String(condition.value));
+
+const previewParts = computed<SummaryPart[]>(() =>
+    completeConditions.value.flatMap((condition, index) => {
+        const parts: SummaryPart[] = [];
+
+        if (index > 0) {
+            parts.push({ type: PartType.Join, text: condition.join === 'or' ? __('or') : __('and') });
+            parts.push({ type: PartType.Field, text: fieldDisplay(condition.field) });
+        }
+
+        parts.push({ type: PartType.Operator, text: operatorLabel(condition.operator) });
+
+        if (hasValue(condition)) {
+            parts.push({ type: PartType.Value, text: displayValue(condition) });
+        }
+
+        return parts;
+    }),
+);
+</script>
+
+<template>
+    <Badge v-if="completeConditions.length" pill size="sm" color="white" class="font-medium text-gray-800 dark:text-gray-200">
+        {{ __('If') }}
+    </Badge>
+    <Badge v-if="firstField" pill color="white" class="ps-1.5 py-1 text-gray-950 gap-1">
+        <FieldNumber :field-key="firstField.handle" class="me-0.5" />
+        <Icon
+            :name="firstField.icon"
+            class="size-3.5 me-1 rounded-sm opacity-100!"
+            :class="firstField.iconClass"
+            aria-hidden="true"
+        />
+        <span class="st-text-trim-cap">{{ firstField.display }}</span>
+    </Badge>
+    <Subheading class="overflow-hidden text-ellipsis whitespace-nowrap text-xs flex items-center gap-1">
+        <span v-if="completeConditions.length === 0" class="lowercase">{{ fallback || __('Always') }}</span>
+        <template v-else>
+            <template v-for="(part, index) in previewParts" :key="index">
+                <Badge
+                    v-if="part.type === PartType.Operator || part.type === PartType.Join"
+                    class="inline-block px-1 py-1.5 font-medium st-text-trim-ex-alphabetic lowercase bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
+                >
+                    {{ part.text }}
+                </Badge>
+                <span v-else-if="part.type === PartType.Value" class="font-mono text-gray-900 dark:text-gray-100">{{ part.text }}</span>
+                <span v-else class="text-gray-700 dark:text-gray-300">{{ part.text }}</span>
+            </template>
+        </template>
+    </Subheading>
+</template>
diff --git a/resources/js/components/forms/connections/EmailConnector.vue b/resources/js/components/forms/connections/EmailConnector.vue
new file mode 100644
index 00000000000..90702899ec2
--- /dev/null
+++ b/resources/js/components/forms/connections/EmailConnector.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { Badge, Button, Icon, Label } from '@ui';
+import ConnectionList from './ConnectionList.vue';
+import ConnectionSummary from './ConnectionSummary.vue';
+import EmailPreview from './EmailPreview.vue';
+
+defineEmits(['update:modelValue']);
+
+defineProps({
+    form: Object,
+    modelValue: { type: Array, default: () => [] },
+    errors: { type: Object, default: () => ({}) },
+    blueprint: Object,
+    meta: { type: Object, default: () => ({}) },
+    defaults: Object,
+    previewUrl: String,
+});
+
+const suggestableFields = usePage().props.suggestableFields ?? [];
+
+const previewing = ref<Record<string, unknown> | null>(null);
+
+const recipients = (to: string[] | string): string =>
+    [to].flat().map((recipient) => {
+        if (!recipient.startsWith('field:')) return recipient;
+
+        const handle = recipient.replace('field:', '');
+        const field = suggestableFields.find((field) => field.handle === handle);
+
+        return __(field?.config?.display ?? handle);
+    }).join(', ');
+</script>
+
+<template>
+    <Label :text="__('Emails')" class="mb-2" />
+
+    <ConnectionList
+        :model-value="modelValue"
+        :errors
+        :defaults
+        :blueprint
+        :meta
+        name="email-connection"
+        :add-label="__('Add Email')"
+        :description="__('statamic::messages.email_connection_instructions')"
+        :delete-heading="__('Delete Email')"
+        :delete-description="__('statamic::messages.email_connection_delete_confirmation')"
+        :always-label="__('Always send')"
+        :if-label="__('Send if...')"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <template #header="{ item: email, collapsed }">
+            <div class="flex items-center justify-between w-full gap-2 me-1">
+                <div class="flex items-center gap-1.75">
+                    <Badge size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
+                        <Icon name="mail-sign-at" class="size-3.5 me-1 opacity-100! text-blue-600 dark:text-blue-400" aria-hidden="true" />
+                        {{ email.to?.length ? __('Message sent to :email', { email: recipients(email.to) }) : __('New Email') }}
+                    </Badge>
+                    <ConnectionSummary
+                        v-show="collapsed"
+                        :conditions="email.conditions"
+                        :fallback="email.subject"
+                    />
+                </div>
+
+                <Button icon="eye" size="xs" :text="__('Preview')" @click.stop="previewing = email" />
+            </div>
+        </template>
+    </ConnectionList>
+
+    <EmailPreview v-model="previewing" :url="previewUrl" />
+</template>
diff --git a/resources/js/components/forms/connections/EmailPreview.vue b/resources/js/components/forms/connections/EmailPreview.vue
new file mode 100644
index 00000000000..24d4906682b
--- /dev/null
+++ b/resources/js/components/forms/connections/EmailPreview.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import axios from 'axios';
+import { Description, ErrorMessage, Icon, Stack } from '@ui';
+import { __ } from '@/bootstrap/globals';
+
+enum Format {
+    Html = 'html',
+    Text = 'text',
+}
+
+type Preview = {
+    subject: string;
+    from: string[];
+    to: string[];
+    cc: string[];
+    bcc: string[];
+    reply_to: string[];
+    format: Format;
+    body: string;
+    attachments: boolean;
+    sample: boolean;
+};
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+    modelValue: Record<string, unknown> | null;
+    url: string;
+}>();
+
+const preview = ref<Preview | null>(null);
+const error = ref<string | null>(null);
+const loading = ref<boolean>(false);
+
+const envelope = computed(() =>
+    [
+        { label: __('Subject'), value: preview.value?.subject },
+        { label: __('From'), value: preview.value?.from.join(', ') },
+        { label: __('To'), value: preview.value?.to.join(', ') },
+        { label: __('Cc'), value: preview.value?.cc.join(', ') },
+        { label: __('Bcc'), value: preview.value?.bcc.join(', ') },
+        { label: __('Reply To'), value: preview.value?.reply_to.join(', ') },
+        { label: __('Attachments'), value: preview.value?.attachments && __('statamic::messages.email_connection_preview_attachments') },
+    ].filter((row) => row.value),
+);
+
+const load = (email: Record<string, unknown>): void => {
+    preview.value = null;
+    error.value = null;
+    loading.value = true;
+
+    axios
+        .post(props.url, email)
+        .then((response) => (preview.value = response.data))
+        .catch((e) => (error.value = e.response?.data?.message ?? __('Something went wrong')))
+        .finally(() => (loading.value = false));
+};
+
+const close = (): void => emit('update:modelValue', null);
+
+watch(
+    () => props.modelValue,
+    (email) => email && load(email),
+    { immediate: true },
+);
+</script>
+
+<template>
+    <Stack :open="modelValue !== null" size="half" inset :title="__('Preview Email')" icon="mail" @update:open="$event || close()">
+        <div class="flex h-full flex-col">
+            <div class="space-y-3 border-b border-gray-300 px-6 py-4 dark:border-gray-700">
+                <Description
+                    :text="preview?.sample === false
+                        ? __('statamic::messages.email_connection_preview_latest_instructions')
+                        : __('statamic::messages.email_connection_preview_sample_instructions')"
+                />
+                <dl v-if="preview" class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+                    <template v-for="row in envelope" :key="row.label">
+                        <dt class="text-gray-600 dark:text-gray-400">{{ row.label }}</dt>
+                        <dd class="break-words text-gray-900 dark:text-gray-100">{{ row.value }}</dd>
+                    </template>
+                </dl>
+            </div>
+
+            <div v-if="loading" class="flex flex-1 items-center justify-center">
+                <Icon name="loading" />
+            </div>
+            <ErrorMessage v-else-if="error" class="p-6">{{ error }}</ErrorMessage>
+            <iframe
+                v-else-if="preview?.format === Format.Html"
+                :srcdoc="preview.body"
+                sandbox="allow-popups allow-popups-to-escape-sandbox"
+                class="w-full flex-1 border-0 bg-white"
+                :title="__('Preview Email')"
+            />
+            <pre v-else-if="preview" class="flex-1 overflow-auto whitespace-pre-wrap p-6 font-mono text-sm text-gray-900 dark:text-gray-100">{{ preview.body }}</pre>
+        </div>
+    </Stack>
+</template>
diff --git a/resources/js/components/forms/connections/WebhookConnector.vue b/resources/js/components/forms/connections/WebhookConnector.vue
new file mode 100644
index 00000000000..fdfeb0e9f78
--- /dev/null
+++ b/resources/js/components/forms/connections/WebhookConnector.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Badge, Button, Field, Icon, Label } from '@ui';
+import ConnectionList from './ConnectionList.vue';
+import ConnectionSummary from './ConnectionSummary.vue';
+
+defineEmits(['update:modelValue']);
+
+const props = defineProps({
+    form: Object,
+    modelValue: { type: Array, default: () => [] },
+    errors: { type: Object, default: () => ({}) },
+    blueprint: Object,
+    meta: { type: Object, default: () => ({}) },
+    defaults: Object,
+    examplePayload: String,
+});
+
+const showExamplePayload = ref<boolean>(props.modelValue.length === 0);
+</script>
+
+<template>
+    <Label :text="__('Webhooks')" class="mb-2" />
+
+    <ConnectionList
+        :model-value="modelValue"
+        :errors
+        :defaults
+        :blueprint
+        :meta
+        name="webhook-connection"
+        :add-label="__('Add Webhook')"
+        :description="__('statamic::messages.webhook_connection_instructions')"
+        :delete-heading="__('Delete Webhook')"
+        :delete-description="__('statamic::messages.webhook_connection_delete_confirmation')"
+        :always-label="__('Always send')"
+        :if-label="__('Send if...')"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <template #header="{ item: webhook, collapsed }">
+            <Badge size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
+                <Icon name="globe-setting" class="size-3.5 me-1 opacity-100! text-purple-600 dark:text-purple-400" aria-hidden="true" />
+                {{ webhook.url || __('New Webhook') }}
+            </Badge>
+            <ConnectionSummary
+                v-show="collapsed"
+                :conditions="webhook.conditions"
+            />
+        </template>
+    </ConnectionList>
+
+    <Field
+        class="mt-8"
+        :label="__('Example Payload')"
+        :instructions="__('statamic::messages.webhook_connection_payload_instructions')"
+    >
+        <template #actions>
+            <Button
+                variant="subtle"
+                size="xs"
+                :icon-append="showExamplePayload ? 'chevron-up' : 'chevron-down'"
+                :text="showExamplePayload ? __('Hide') : __('Show')"
+                :aria-expanded="showExamplePayload"
+                @click="showExamplePayload = !showExamplePayload"
+            />
+        </template>
+
+        <pre v-show="showExamplePayload" class="overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 p-4 text-xs text-gray-800 dark:border-white/10 dark:bg-gray-950/40 dark:text-gray-300"><code>{{ examplePayload }}</code></pre>
+    </Field>
+</template>
diff --git a/resources/js/components/forms/connections/context.ts b/resources/js/components/forms/connections/context.ts
new file mode 100644
index 00000000000..37d9de0d766
--- /dev/null
+++ b/resources/js/components/forms/connections/context.ts
@@ -0,0 +1,11 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+export type ConnectionContext = {
+    connection: Record<string, unknown>;
+    errors: Record<string, string[]>;
+    meta: Record<string, unknown>;
+    blueprint?: Record<string, any>;
+    name: string;
+};
+
+export const connectionContextKey: InjectionKey<ComputedRef<ConnectionContext>> = Symbol('connection');
diff --git a/resources/js/components/forms/logic/FieldLogicRule.vue b/resources/js/components/forms/logic/FieldLogicRule.vue
index c2f5c68fc22..68a746c85ed 100644
--- a/resources/js/components/forms/logic/FieldLogicRule.vue
+++ b/resources/js/components/forms/logic/FieldLogicRule.vue
@@ -12,6 +12,7 @@ import {
 import FieldNumber from '@/components/forms/FieldNumber.vue';
 import FieldConditions from './FieldConditions.vue';
 import Converter from '@/components/field-conditions/Converter.js';
+import { operatorLabel } from './operatorLabels';
 
 const converter = new Converter();
 
@@ -29,21 +30,6 @@ const props = defineProps({
     fieldtypes: Array,
 });
 
-const operatorLabels = {
-    equals: __('Equals'),
-    not: __('Does not equal'),
-    contains: __('Contains'),
-    contains_any: __('Contains Any'),
-    '===': '===',
-    '!==': '!==',
-    '>': '>',
-    '>=': '>=',
-    '<': '<',
-    '<=': '<=',
-    custom: __('Custom'),
-};
-
-const getOperatorLabel = (operator) => operatorLabels[operator] ?? operator ?? __('Equals');
 const getFieldDisplay = (handle) => __(props.suggestableFields.find(field => field.handle === handle)?.config?.display) || handle;
 
 const hasConditions = computed(() => props.conditions.if || props.conditions.unless || props.conditions.if_any || props.conditions.unless_any);
@@ -63,7 +49,7 @@ const previewParts = computed(() => {
 
     const { operator, value } = converter.splitRhs(fieldHandle, rawValue);
 
-    parts.push({ type: 'operator', text: getOperatorLabel(operator) });
+    parts.push({ type: 'operator', text: operatorLabel(operator) });
 
     if (value && value !== 'empty') {
         parts.push({ type: 'value', text: String(value) });
diff --git a/resources/js/components/forms/logic/PageLogicRule.vue b/resources/js/components/forms/logic/PageLogicRule.vue
index 8161be4d055..a573f8c59e7 100644
--- a/resources/js/components/forms/logic/PageLogicRule.vue
+++ b/resources/js/components/forms/logic/PageLogicRule.vue
@@ -12,6 +12,7 @@ import {
 import PageRule from '@/components/forms/builder/pages/PageRule.vue';
 import FieldNumber from '@/components/forms/FieldNumber.vue';
 import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
+import { operatorLabel } from './operatorLabels';
 
 const emit = defineEmits(['collapsed', 'expanded', 'removed', 'update:rule']);
 
@@ -26,27 +27,6 @@ const props = defineProps({
     fieldtypes: Array,
 });
 
-const operatorLabels = {
-    '': __('equals'),
-    'equals': __('equals'),
-    'not': __('not'),
-    'not_equals': __('does not equal'),
-    'contains': __('contains'),
-    'not_contains': __('does not contain'),
-    'is_empty': __('is empty'),
-    'not_empty': __('is not empty'),
-    'starts_with': __('starts with'),
-    'ends_with': __('ends with'),
-    '==': __('equals'),
-    '!=': __('does not equal'),
-    '>': __('is greater than'),
-    '<': __('is less than'),
-    '>=': __('is at least'),
-    '<=': __('is at most'),
-};
-
-const getOperatorLabel = (operator) => operatorLabels[operator] || operator || __('equals');
-
 const getFieldConfig = (handle) => props.suggestableFields.find(field => field.handle === handle);
 const getFieldDisplay = (handle) => __(getFieldConfig(handle)?.config?.display) || handle;
 
@@ -76,7 +56,7 @@ const previewParts = computed(() => {
         if (!condition.field) return;
 
         if (index === 0) {
-            parts.push({ type: 'operator', text: getOperatorLabel(condition.operator) });
+            parts.push({ type: 'operator', text: operatorLabel(condition.operator) });
 
             if (condition.value !== null && condition.value !== undefined && condition.value !== '') {
                 const displayValue = Array.isArray(condition.value)
@@ -87,7 +67,7 @@ const previewParts = computed(() => {
         } else {
             parts.push({ type: 'join', text: condition.join === 'or' ? __('or') : __('and') });
             parts.push({ type: 'field-plain', text: getFieldDisplay(condition.field) });
-            parts.push({ type: 'operator', text: getOperatorLabel(condition.operator) });
+            parts.push({ type: 'operator', text: operatorLabel(condition.operator) });
 
             if (condition.value !== null && condition.value !== undefined && condition.value !== '') {
                 const displayValue = Array.isArray(condition.value)
diff --git a/resources/js/components/forms/logic/operatorLabels.js b/resources/js/components/forms/logic/operatorLabels.js
new file mode 100644
index 00000000000..c0141c657b5
--- /dev/null
+++ b/resources/js/components/forms/logic/operatorLabels.js
@@ -0,0 +1,19 @@
+import { __ } from '@/bootstrap/globals';
+
+export function operatorLabel(operator) {
+    const labels = {
+        equals: __('equals'),
+        not: __('does not equal'),
+        contains: __('contains'),
+        contains_any: __('contains any of'),
+        '===': __('equals'),
+        '!==': __('does not equal'),
+        '>': __('is greater than'),
+        '<': __('is less than'),
+        '>=': __('is at least'),
+        '<=': __('is at most'),
+        custom: __('custom'),
+    };
+
+    return labels[operator] || operator || __('equals');
+}
diff --git a/resources/js/pages/forms/Connect.vue b/resources/js/pages/forms/Connect.vue
deleted file mode 100644
index 9dd48583d24..00000000000
--- a/resources/js/pages/forms/Connect.vue
+++ /dev/null
@@ -1,432 +0,0 @@
-<script setup>
-import Layout from '@/pages/layout/Layout.vue';
-import PanelLayout from '@/pages/layout/PanelLayout.vue';
-import FormsLayout from './Layout.vue';
-import { Badge, Button, Card, DocsCallout, Header, Heading, Icon, Panel, PanelHeader, Table, TableCell, TableColumn, TableColumns, TableRow, TableRows, ToggleGroup, ToggleItem, publishContextKey } from '@ui';
-import FormStatusIndicator from '@/components/forms/FormStatusIndicator.vue';
-import { computed, onMounted, provide, ref, watch, watchEffect } from 'vue';
-import emailNotificationsLogoRaw from '../../../svg/forms/connect/email-notifications.svg?raw';
-import zapierLogoRaw from '../../../svg/forms/connect/zapier.svg?raw';
-import iftttLogoRaw from '../../../svg/forms/connect/ifttt.svg?raw';
-import ConnectAddRuleButton from './connect-list/ConnectAddRuleButton.vue';
-import ConnectRule from './connect-list/ConnectRule.vue';
-import { data_set } from '@/bootstrap/globals.js';
-import { nanoid as uniqid } from 'nanoid';
-import Head from '@/pages/layout/Head.vue';
-
-defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
-
-const props = defineProps({
-    form: Object,
-});
-
-const formTitle = computed(() => props.form?.title || __('Untitled Form'));
-const mode = ref('grid');
-const selectedIntegrationName = ref(null);
-
-function modeChanged(value) {
-    mode.value = value;
-}
-
-function selectIntegration(integration) {
-    selectedIntegrationName.value = integration.name;
-}
-
-function clearSelectedIntegration() {
-    selectedIntegrationName.value = null;
-    mode.value = 'grid';
-}
-const emailNotificationsLogo = emailNotificationsLogoRaw
-    .replace(/<\?xml[\s\S]*?\?>\s*/i, '')
-    .replace(/<!DOCTYPE[\s\S]*?>\s*/i, '');
-const zapierLogo = zapierLogoRaw
-    .replace(/<\?xml[\s\S]*?\?>\s*/i, '')
-    .replace(/<!DOCTYPE[\s\S]*?>\s*/i, '');
-const iftttLogo = iftttLogoRaw
-    .replace(/<\?xml[\s\S]*?\?>\s*/i, '')
-    .replace(/<!DOCTYPE[\s\S]*?>\s*/i, '');
-const statamicDeveloperLogo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.56 111.63"><path fill="#ff269e" d="M112.46 110.48c9.62-.6 13.78-5.17 14.72-15.49.73-8.04 1-12.06 1.36-20.11.43-9.6 5.28-15.13 9.96-17.7 1.41-.8 1.4-2.65 0-3.54-4.88-2.94-9.61-9.19-9.98-17.45-.36-7.9-.63-11.85-1.35-19.75-1.02-11.13-4.55-14.67-14.18-15.28a793 793 0 0 0-86.42 0c-9.62.61-13.16 4.15-14.18 15.28-.72 7.9-.99 11.85-1.35 19.75-.38 8.26-5.1 14.51-9.98 17.45a2.01 2.01 0 0 0 0 3.54c4.69 2.49 9.53 8.01 9.96 17.7.36 8.04.63 12.06 1.36 20.11.94 10.32 5.1 14.89 14.72 15.49 28.52 1.53 56.85 1.53 85.36 0M69.55 92.63c-8.77.49-19.7-3.8-25.95-9.95-1.23-1.13-1.73-2.53-1.76-3.92-.03-1.11.23-2.31 1.04-3.23.87-1.14 1.31-1.71 2.18-2.85 1.1-1.38 2.3-2.02 3.7-2.01 1.58.01 3.08.67 4.68 1.71 5.06 3.3 10.63 5.2 17.31 5.2 5.1 0 9.78-2.89 9.23-6.57-2.18-14.6-38.37-6.19-37.83-30.63.29-12.86 13.14-21.88 25.75-21.57 9.77.25 17.47 3.09 23.08 6.71 1.4.95 2.37 2.83 2.41 4.69.02 1.12-.23 2.13-.86 3.06-.65 1-.97 1.49-1.63 2.49-1.18 1.66-2.57 2.49-4.34 2.48-1.21 0-2.52-.48-3.92-1.14-4.2-2.17-8.56-3.31-13.85-3.31-5.47 0-9.15 3.52-8.76 6.1 2.18 14.47 37.35 5.97 37.84 30.07.3 14.88-15.58 22.52-28.34 22.68Z"/></svg>';
-
-const integrations = ref([
-    {
-        name: 'Email Notifications',
-        logo: emailNotificationsLogo,
-        developerLogo: statamicDeveloperLogo,
-        developerName: 'Statamic',
-        description: 'Send branded confirmation emails and admin alerts instantly.',
-        count: 3,
-    },
-    {
-        name: 'Zapier Workflows',
-        logo: zapierLogo,
-        developerLogo: statamicDeveloperLogo,
-        developerName: 'Statamic',
-        description: 'Trigger automations when submissions match your form rules.',
-        count: 4,
-    },
-    {
-        name: 'IFTTT Workflows',
-        logo: iftttLogo,
-        developerLogo: statamicDeveloperLogo,
-        developerName: 'Statamic',
-        description: 'Connect lightweight applets for notifications and logging.',
-        count: 1,
-    },
-]);
-const sortColumn = ref('name');
-const sortDirection = ref('asc');
-
-const sortedIntegrations = computed(() => {
-    const sorted = [...integrations.value].sort((a, b) => {
-        const left = String(a[sortColumn.value] ?? '').toLowerCase();
-        const right = String(b[sortColumn.value] ?? '').toLowerCase();
-        return left.localeCompare(right);
-    });
-
-    return sortDirection.value === 'desc' ? sorted.reverse() : sorted;
-});
-
-const selectedIntegration = computed(() => {
-    if (!selectedIntegrationName.value) return null;
-    return integrations.value.find((integration) => integration.name === selectedIntegrationName.value) ?? null;
-});
-const connectStateKey = computed(() => {
-    const formKey = props.form?.handle ?? props.form?.id ?? props.form?.title ?? 'default';
-    return `forms.connect.selectedIntegration.${formKey}`;
-});
-const fieldPath = 'logic_rules';
-const metaPath = 'logic_rules';
-const sortableItemClass = 'logic-rule-block';
-const loadingSet = ref(null);
-const logicBlocks = ref([
-    { _id: 'heard_about_us', type: 'heard_about_us', enabled: true, summary: __('How did you hear about us equals Friend referral') },
-]);
-const collapsed = ref(logicBlocks.value.map((block) => block._id));
-const previews = ref({});
-const meta = ref({});
-const setConfigs = [
-    { handle: 'heard_about_us', display: __('Message sent to jack@statamic.com'), conditionDisplay: __('How did you hear about us?'), conditionIcon: 'fieldtype-select', conditionIconClass: 'text-orange-600 dark:text-orange-400', icon: 'mail-sign-at', iconClass: 'text-blue-600 dark:text-blue-400', fields: [] },
-    { handle: 'like_most', display: __('What do you like most about our band?'), icon: 'text-long', iconClass: 'text-purple-500 dark:text-purple-400', fields: [] },
-    { handle: 'fan_length', display: __('How long have you been a fan?'), icon: 'text-short', iconClass: 'text-purple-500 dark:text-purple-400', fields: [] },
-    { handle: 'favorite_album', display: __('Which album was your favorite?'), icon: 'fieldtype-radio', iconClass: 'text-orange-600 dark:text-orange-400', fields: [] },
-    { handle: 'second_favorite_album', display: __('Which album was your second favorite?'), icon: 'fieldtype-radio', iconClass: 'text-orange-600 dark:text-orange-400', fields: [] },
-    { handle: 'email_notifications_signup', display: __('Sign up for email notifications from The Midnight'), icon: 'fieldtype-checkboxes', iconClass: 'text-orange-600 dark:text-orange-400', fields: [] },
-    { handle: 'age', display: __('How old are you?'), icon: 'number', iconClass: 'text-teal-600 dark:text-teal-400', fields: [] },
-    { handle: 'free_drink_voucher', display: __('I want a free drink voucher'), icon: 'fieldtype-toggle', iconClass: 'text-orange-600 dark:text-orange-400', fields: [] },
-];
-const groupConfigs = [
-    {
-        handle: 'logic',
-        display: __('Logic Rules'),
-        sets: setConfigs,
-    },
-];
-const setConfigByHandle = computed(() => {
-    return setConfigs.reduce((carry, config) => {
-        carry[config.handle] = config;
-        return carry;
-    }, {});
-});
-const remainingSetConfigs = computed(() => {
-    const usedHandles = new Set(logicBlocks.value.map((block) => block.type));
-    return setConfigs.filter((config) => !usedHandles.has(config.handle));
-});
-const remainingGroupConfigs = computed(() => {
-    return [
-        {
-            handle: 'logic',
-            display: __('Logic Rules'),
-            sets: remainingSetConfigs.value,
-        },
-    ];
-});
-
-watchEffect(() => {
-    const nextPreviews = {};
-    logicBlocks.value.forEach((block, index) => {
-        data_set(nextPreviews, `${fieldPath}.${index}.summary_`, block.summary);
-    });
-    previews.value = nextPreviews;
-});
-
-function setFieldValue(path, value) {
-    data_set(logicBlocks.value, path.replace(`${fieldPath}.`, ''), value);
-}
-
-function setFieldMeta(path, value) {
-    data_set(meta.value, path.replace(`${metaPath}.`, ''), value);
-}
-
-function addSet(handle, index = logicBlocks.value.length) {
-    if (logicBlocks.value.some((block) => block.type === handle)) return;
-
-    loadingSet.value = handle;
-    const config = setConfigByHandle.value[handle];
-    const newRule = {
-        _id: uniqid(),
-        type: handle,
-        enabled: true,
-        summary: config?.display
-            ? __('If :rule has matching conditions, continue to the configured destination.', { rule: config.display })
-            : __('No conditions yet.'),
-    };
-
-    logicBlocks.value.splice(index, 0, newRule);
-    collapsed.value.push(newRule._id);
-    loadingSet.value = null;
-}
-
-function collapseSet(id) {
-    if (!collapsed.value.includes(id)) {
-        collapsed.value.push(id);
-    }
-}
-
-function expandSet(id) {
-    collapsed.value = collapsed.value.filter((setId) => setId !== id);
-}
-
-function removeSet(id) {
-    logicBlocks.value = logicBlocks.value.filter((block) => block._id !== id);
-    collapsed.value = collapsed.value.filter((setId) => setId !== id);
-}
-
-provide('replicatorSets', groupConfigs);
-provide(publishContextKey, {
-    setFieldValue,
-    setFieldMeta,
-    previews,
-});
-
-function setSort(column) {
-    if (sortColumn.value === column) {
-        sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
-        return;
-    }
-
-    sortColumn.value = column;
-    sortDirection.value = 'asc';
-}
-
-function sortIcon(column) {
-    if (sortColumn.value !== column) return null;
-    return sortDirection.value === 'asc' ? 'sort-asc' : 'sort-desc';
-}
-
-onMounted(() => {
-    const savedIntegrationName = sessionStorage.getItem(connectStateKey.value);
-    if (!savedIntegrationName) return;
-
-    const integrationExists = integrations.value.some((integration) => integration.name === savedIntegrationName);
-    if (integrationExists) {
-        selectedIntegrationName.value = savedIntegrationName;
-    }
-});
-
-watch(selectedIntegrationName, (integrationName) => {
-    if (integrationName) {
-        sessionStorage.setItem(connectStateKey.value, integrationName);
-        return;
-    }
-
-    sessionStorage.removeItem(connectStateKey.value);
-});
-
-</script>
-
-<template>
-    <Head :title="[__('Connect'), __(form.title), __('Forms')]" />
-
-    <div class="mx-auto max-w-5xl">
-        <Header class="mb-2">
-            <template #title>
-                <FormStatusIndicator :status="form?.status" />
-                {{ __(formTitle) }}
-            </template>
-            <template #actions>
-                <div class="flex items-center gap-2 sm:gap-3">
-                    <Button variant="primary" href="#" icon-append="external-link">
-                        {{ __('Explore Integrations') }}
-                    </Button>
-                    <ToggleGroup :model-value="mode" @update:model-value="modeChanged">
-                        <ToggleItem value="grid" icon="layout-grid" />
-                        <ToggleItem value="table" icon="layout-list" />
-                    </ToggleGroup>
-                </div>
-            </template>
-        </Header>
-
-        <Panel>
-            <PanelHeader>
-                <Heading>
-                    <button
-                        type="button"
-                        class="inline-flex items-center gap-2 text-inherit my-0!"
-                        :class="selectedIntegrationName ? 'cursor-pointer hover:opacity-80' : 'cursor-default'"
-                        :disabled="!selectedIntegrationName"
-                        @click="clearSelectedIntegration"
-                    >
-                        <Icon name="connection" class="size-4! opacity-60! text-gray-925 dark:text-white" aria-hidden="true" />
-                        {{ __('Connect') }}
-                    </button>
-                    <template v-if="selectedIntegrationName">
-                        <Icon name="chevron-right" class="size-3.5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
-                        <span class="inline-flex items-center gap-1.5">
-                            <span
-                                v-if="selectedIntegration"
-                                class="h-4 w-4 overflow-hidden [&_svg]:h-full [&_svg]:w-full shape-squircle rounded-full"
-                                aria-hidden="true"
-                            >
-                                <span v-html="selectedIntegration.logo" />
-                            </span>
-                            <span>{{ __(selectedIntegrationName) }}</span>
-                        </span>
-                    </template>
-                </Heading>
-            </PanelHeader>
-            <Card :class="{ 'p-0!': mode === 'table' && selectedIntegrationName !== 'Email Notifications' }">
-                <div v-if="selectedIntegrationName === 'Email Notifications'">
-                    <div class="relative space-y-6 mb-0" data-logic-list>
-                        <ConnectRule
-                            v-for="(block, index) in logicBlocks"
-                            :id="block._id"
-                            :key="block._id"
-                            :index
-                            :field-path="fieldPath"
-                            :meta-path="metaPath"
-                            :values="block"
-                            :config="setConfigByHandle[block.type]"
-                            :sortable-item-class="sortableItemClass"
-                            :collapsed="collapsed.includes(block._id)"
-                            :enabled="block.enabled"
-                            :read-only="false"
-                            :can-add-rule="true"
-                            :has-error="false"
-                            :show-field-previews="true"
-                            @collapsed="collapseSet(block._id)"
-                            @expanded="expandSet(block._id)"
-                            @removed="removeSet(block._id)"
-                        />
-                    </div>
-                    <ConnectAddRuleButton
-                        :groups="remainingGroupConfigs"
-                        :sets="remainingSetConfigs"
-                        :show-connector="logicBlocks.length > 0"
-                        :index="logicBlocks.length"
-                        :label="__('Add Email Notification')"
-                        :is-first="logicBlocks.length === 0"
-                        :loading-set="loadingSet"
-                        :search-placeholder="__('Search Fields')"
-                        @added="addSet"
-                    />
-                </div>
-                <div v-else-if="mode === 'grid'" class="grid gap-4 grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
-                    <div
-                        v-for="integration in integrations"
-                        :key="integration.name"
-                        class="space-y-2"
-                    >
-                        <a
-                            href="#"
-                            class="relative block mb-2 aspect-square rounded-lg border border-gray-300 bg-gray-50/30 p-8 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:bg-gray-900"
-                            @click.prevent="selectIntegration(integration)"
-                        >
-                            <div
-                                class="overflow-hidden rounded-full shape-squircle"
-                                v-html="integration.logo"
-                            />
-                        </a>
-                        <div class="flex items-center justify-center gap-1.5 text-gray-800 dark:text-gray-200">
-                            <Badge v-if="integration.count" size="sm" color="white" pill>
-                                {{ integration.count }}
-                            </Badge>
-                            <span class="truncate text-xs">{{ __(integration.name) }}</span>
-                        </div>
-                    </div>
-                </div>
-                <div v-else>
-                    <Table class="w-full">
-                        <TableColumns>
-                            <TableColumn class="first:pl-4 last:pr-4">
-                                <Button
-                                    :text="__('Integration')"
-                                    :icon-append="sortIcon('name')"
-                                    size="sm"
-                                    variant="ghost"
-                                    class="-mt-2 -mb-1 -ms-3 text-sm! font-medium! text-gray-900! dark:text-gray-400!"
-                                    @click.prevent="setSort('name')"
-                                />
-                            </TableColumn>
-                            <TableColumn class="first:pl-4 last:pr-4">
-                                <Button
-                                    :text="__('Description')"
-                                    :icon-append="sortIcon('description')"
-                                    size="sm"
-                                    variant="ghost"
-                                    class="-mt-2 -mb-1 -ms-3 text-sm! font-medium! text-gray-900! dark:text-gray-400!"
-                                    @click.prevent="setSort('description')"
-                                />
-                            </TableColumn>
-                            <TableColumn class="text-right first:pl-4 last:pr-4">
-                                <Button
-                                    :text="__('Developer')"
-                                    :icon-append="sortIcon('developerName')"
-                                    size="sm"
-                                    variant="ghost"
-                                    class="-mt-2 -mb-1 -ms-3 text-sm! font-medium! text-gray-900! dark:text-gray-400!"
-                                    @click.prevent="setSort('developerName')"
-                                />
-                            </TableColumn>
-                        </TableColumns>
-                            <TableRows>
-                            <TableRow
-                                v-for="integration in sortedIntegrations"
-                                :key="`list-${integration.name}`"
-                                class="hover:bg-gray-50 dark:hover:bg-gray-950/35"
-                            >
-                                <TableCell class="first:pl-4 last:pr-4">
-                                    <a href="#" class="flex min-w-0 items-center gap-2" @click.prevent="selectIntegration(integration)">
-                                        <span class="h-7 w-7 overflow-hidden rounded-full shape-squircle [&_svg]:h-full [&_svg]:w-full" aria-hidden="true">
-                                            <span v-html="integration.logo" />
-                                        </span>
-                                        <Badge v-if="integration.count" size="sm" color="white" pill>
-                                            {{ integration.count }}
-                                        </Badge>
-                                        <span class="truncate text-sm text-gray-800 dark:text-gray-200">{{ __(integration.name) }}</span>
-                                    </a>
-                                </TableCell>
-                                <TableCell class="first:pl-4 last:pr-4">
-                                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ __(integration.description) }}</span>
-                                </TableCell>
-                                <TableCell class="text-right first:pl-4 last:pr-4">
-                                    <span class="inline-flex shrink-0 items-center text-sm text-gray-800 dark:text-gray-200">
-                                        <span class="h-4 w-4 overflow-hidden me-1 [&_svg]:h-full [&_svg]:w-full" aria-hidden="true">
-                                            <span v-html="integration.developerLogo" />
-                                        </span>
-                                        {{ __(integration.developerName) }}
-                                    </span>
-                                </TableCell>
-                            </TableRow>
-                            </TableRows>
-                    </Table>
-                </div>
-            </Card>
-        </Panel>
-        <DocsCallout :topic="__('Connections')" url="forms" />
-    </div>
-</template>
-
-<style scoped>
-[data-logic-list]::before {
-    content: '';
-    position: absolute;
-    top: 1.5rem;
-    bottom: 0;
-    inset-inline-start: 0.875rem;
-    border-inline-start: 1px dashed var(--color-gray-400);
-}
-
-.dark [data-logic-list]::before {
-    border-inline-start-color: var(--color-gray-600);
-}
-</style>
diff --git a/resources/js/pages/forms/Index.vue b/resources/js/pages/forms/Index.vue
index 2c23184094f..8ac787f8387 100644
--- a/resources/js/pages/forms/Index.vue
+++ b/resources/js/pages/forms/Index.vue
@@ -81,6 +81,16 @@ const reloadPage = () => router.reload();
                         pill
                     />
                 </template>
+                <template #cell-connections="{ row: form, value: connections }">
+                    <Badge
+                        v-if="form.can_edit"
+                        :href="form.connect_url"
+                        :append="String(connections)"
+                        :text="__('Connections')"
+                        color="white"
+                        pill
+                    />
+                </template>
                 <template #prepended-row-actions="{ row: form }">
                     <DropdownItem v-if="form.can_edit" :text="__('Configure')" :href="form.edit_url" icon="cog" />
                 </template>
diff --git a/resources/js/pages/forms/LogicFlowMock.vue b/resources/js/pages/forms/LogicFlowMock.vue
deleted file mode 100644
index 4d12973c651..00000000000
--- a/resources/js/pages/forms/LogicFlowMock.vue
+++ /dev/null
@@ -1,654 +0,0 @@
-<script setup>
-import { Button, Combobox, Dropdown, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, Icon, Input } from '@ui';
-import { computed, ref, watch } from 'vue';
-
-const props = defineProps({
-    initialConditionLabel: {
-        type: String,
-        default: null,
-    },
-    initialConditionIcon: {
-        type: String,
-        default: 'fieldtype-radio',
-    },
-    initialConditionIconClass: {
-        type: String,
-        default: 'text-orange-600 dark:text-orange-400',
-    },
-    showSecondaryCondition: {
-        type: Boolean,
-        default: true,
-    },
-    mockPreset: {
-        type: Object,
-        default: () => ({}),
-    },
-    destinationStepLabel: {
-        type: String,
-        default: null,
-    },
-    showDestinationSelector: {
-        type: Boolean,
-        default: true,
-    },
-    useWhenSelector: {
-        type: Boolean,
-        default: false,
-    },
-    calculationMode: {
-        type: Boolean,
-        default: false,
-    },
-    showRuleControls: {
-        type: Boolean,
-        default: false,
-    },
-    showAddConditionBeforeThen: {
-        type: Boolean,
-        default: false,
-    },
-    usePageDestinationOptions: {
-        type: Boolean,
-        default: false,
-    },
-});
-
-const logicOperator = ref(props.mockPreset.logicOperator || (props.calculationMode ? 'add' : 'equals'));
-const logicWhen = ref(props.mockPreset.logicWhen || (props.calculationMode ? 'add' : 'show_when'));
-const logicWhenOptions = props.calculationMode
-    ? [
-        { label: `+ ${__('Add')}`, value: 'add' },
-        { label: `÷ ${__('Divide')}`, value: 'divide' },
-        { label: `− ${__('Subtract')}`, value: 'subtract' },
-        { label: `× ${__('Multiply')}`, value: 'multiply' },
-    ]
-    : [
-        { label: __('Always show'), value: 'always_show', icon: 'eye' },
-        { label: __('Show when'), value: 'show_when', icon: 'eye' },
-        { label: __('Hide when'), value: 'hide_when', icon: 'eye-closed' },
-    ];
-const logicOperatorOptions = props.calculationMode
-    ? [
-        { label: `+ ${__('Add')}`, value: 'add' },
-        { label: `÷ ${__('Divide')}`, value: 'divide' },
-        { label: `− ${__('Subtract')}`, value: 'subtract' },
-        { label: `× ${__('Multiply')}`, value: 'multiply' },
-    ]
-    : [
-        { label: __('Equals'), value: 'equals' },
-        { label: __('Does not equal'), value: 'not_equals' },
-        { label: __('Contains'), value: 'contains' },
-        { label: __('Is empty'), value: 'is_empty' },
-    ];
-
-const logicValue = ref(props.mockPreset.logicValue || 'referral');
-const logicValueOptions = [
-    { label: __('Friend referral'), value: 'referral' },
-    { label: __('Google search'), value: 'google' },
-    { label: __('21'), value: '21' },
-    { label: __('Days of Thunder'), value: 'days_of_thunder' },
-    { label: __('Endless Summer'), value: 'endless_summer' },
-    { label: __('Nocturnal'), value: 'nocturnal' },
-    { label: __('Kids'), value: 'kids' },
-];
-
-const logicDestination = ref(props.mockPreset.logicDestination || 'page_2');
-const logicBranchingAction = ref(props.mockPreset.logicBranchingAction || 'go_to');
-const logicBranchingActionOptions = [
-    { label: __('Go to'), value: 'go_to' },
-    { label: ['+', __('Add')].join('\u2007'), value: 'add' },
-    { label: ['÷', __('Divide')].join('\u2007'), value: 'divide' },
-    { label: ['−', __('Subtract')].join('\u2007'), value: 'subtract' },
-    { label: ['×', __('Multiply')].join('\u2007'), value: 'multiply' },
-];
-const fieldDestinationOptions = [
-    { label: __('How long have you been…'), value: 'fan_length', icon: 'text-short', category: 'text' },
-    { label: __('And second favorite album?'), value: 'second_favorite', icon: 'fieldtype-radio', category: 'choice' },
-    { label: __('Sign up for email notifications'), value: 'email_notifications', icon: 'fieldtype-checkboxes', category: 'choice' },
-    { label: __('I want a free drink voucher'), value: 'free_drink_voucher', icon: 'fieldtype-toggle', category: 'choice' },
-];
-const pageDestinationOptions = [
-    { label: __('page 1/2'), value: 'page_1', icon: 'page', category: 'page' },
-    { label: __('Goodbye'), value: 'page_2', icon: 'page', category: 'page' },
-];
-const logicConditionField = ref(props.mockPreset.logicConditionField || 'long_answer');
-const logicPrimaryConditionField = ref(props.mockPreset.logicPrimaryConditionField || 'heard_about_us');
-const logicBranchingConditionField = ref(props.mockPreset.logicBranchingConditionField || 'second_favorite');
-const logicCalculationSource = ref(props.mockPreset.logicCalculationSource || 'variable_score');
-const logicCalculationVariable = ref(props.mockPreset.logicCalculationVariable || 'bonus_multiplier');
-const logicConditionFieldOptions = [
-    { label: __('What do you like most about our band? '), value: 'long_answer', icon: 'text-long', category: 'text' },
-    { label: __('How did you hear about us?'), value: 'heard_about_us', icon: 'fieldtype-select', category: 'choice' },
-    { label: __('How long have you been…'), value: 'fan_length', icon: 'text-short', category: 'text' },
-    { label: __('And second favorite album?'), value: 'second_favorite', icon: 'fieldtype-radio', category: 'choice' },
-    { label: __('Sign up for email notifications'), value: 'email_notifications', icon: 'fieldtype-checkboxes', category: 'choice' },
-    { label: __('How old are you?'), value: 'age', icon: 'number', category: 'text' },
-];
-const logicCalculationSourceOptions = [
-    { label: __('Score'), value: 'variable_score' },
-    { label: __('Number'), value: 'number' },
-];
-const logicCalculationVariableOptions = [
-    { label: __('bonus_multiplier'), value: 'bonus_multiplier' },
-    { label: __('base_score'), value: 'base_score' },
-    { label: __('attendance_points'), value: 'attendance_points' },
-    { label: __('engagement_weight'), value: 'engagement_weight' },
-];
-const logicBranchingCalculationSource = ref(props.mockPreset.logicBranchingCalculationSource || 'variable_score');
-const logicBranchingCalculationVariable = ref(props.mockPreset.logicBranchingCalculationVariable || 'bonus_multiplier');
-
-const logicJoin = ref(props.mockPreset.logicJoin || 'and');
-const logicJoinOptions = [
-    { label: __('All of the conditions pass'), short_label: __('And'), value: 'and' },
-    { label: __('Any of the conditions pass'), short_label: __('Or'), value: 'or' },
-];
-
-const logicContainsOperator = ref(props.mockPreset.logicContainsOperator || 'contains');
-const logicContainsAnswer = ref(props.mockPreset.logicContainsAnswer || 'referral');
-const logicContainsAnswerPlaceholder = __('Answer');
-const secondaryConditionVisible = ref(props.showSecondaryCondition);
-
-const optionIconClasses = (option) => {
-    if (option?.category === 'page') return 'size-4 shrink-0 text-gray-500 dark:text-gray-300';
-    if (option?.category === 'text') return 'size-4 shrink-0 text-purple-500 dark:text-purple-400';
-    return 'size-4 shrink-0 text-orange-500 dark:text-orange-400';
-};
-
-const optionChipClasses = (option) => {
-    if (option?.category === 'page') return 'flex shrink-0 items-center justify-center size-6 text-gray-500 dark:text-gray-300';
-    if (option?.category === 'text') return 'flex shrink-0 items-center justify-center size-6 text-purple-600 dark:text-purple-400';
-    return 'flex shrink-0 items-center justify-center size-6 text-orange-600 dark:text-orange-400';
-};
-
-const optionChipIconClasses = (option) => {
-    if (option?.category === 'page') return 'size-4 shrink-0 text-gray-500 dark:text-gray-300';
-    if (option?.category === 'text') return 'size-4 shrink-0 text-purple-600 dark:text-purple-400';
-    return 'size-4 shrink-0 text-orange-600 dark:text-orange-400';
-};
-const isVariableOption = (option) => option?.value === 'variable_score';
-
-const primarySelection = computed({
-    get() {
-        return props.calculationMode ? logicCalculationSource.value : logicPrimaryConditionField.value;
-    },
-    set(value) {
-        if (props.calculationMode) {
-            logicCalculationSource.value = value;
-            return;
-        }
-
-        logicPrimaryConditionField.value = value;
-    },
-});
-const calculationUsesNumberInput = computed(() => props.calculationMode && primarySelection.value === 'number');
-const branchingActionLabel = computed(() => {
-    const selected = logicBranchingActionOptions.find((option) => option.value === logicBranchingAction.value);
-    return selected?.label || __('Logic');
-});
-const isBranchingCalculationAction = computed(() => logicBranchingAction.value !== 'go_to');
-const branchingCalculationUsesNumberInput = computed(() => logicBranchingCalculationSource.value === 'number');
-const logicDestinationOptions = computed(() => (
-    props.usePageDestinationOptions ? pageDestinationOptions : fieldDestinationOptions
-));
-
-watch(
-    () => props.mockPreset.logicDestination,
-    (nextDestination) => {
-        if (!nextDestination) return;
-        logicDestination.value = nextDestination;
-    },
-    { immediate: true },
-);
-
-watch(
-    logicDestinationOptions,
-    (options) => {
-        if (!options.length) return;
-        const hasCurrent = options.some((option) => option.value === logicDestination.value);
-        if (!hasCurrent) {
-            logicDestination.value = options[0].value;
-        }
-    },
-    { immediate: true },
-);
-</script>
-
-<template>
-    <div data-logic-text class="logic-text">
-        <h3 class="sr-only">{{ __('Conditional logic') }}</h3>
-
-        <ol>
-            <li>
-                <div v-if="props.useWhenSelector" class="logic-text__condition" aria-hidden="true">
-                    <Combobox
-                        v-model="logicWhen"
-                        class="min-w-34"
-                        size="sm"
-                        :options="logicWhenOptions"
-                        option-label="label"
-                        option-value="value"
-                        :searchable="false"
-                    >
-                        <template v-if="!props.calculationMode" #option="{ icon, label }">
-                            <span class="inline-flex items-center gap-2">
-                                <Icon v-if="icon" :name="icon" class="size-3.5 text-gray-700 dark:text-gray-200" />
-                                <span>{{ label }}</span>
-                            </span>
-                        </template>
-                        <template v-if="!props.calculationMode" #selected-option="{ option }">
-                            <span class="inline-flex items-center gap-2">
-                                <Icon v-if="option.icon" :name="option.icon" class="size-3.5 text-gray-700 dark:text-gray-200" />
-                                <span>{{ option.label }}</span>
-                            </span>
-                        </template>
-                    </Combobox>
-                </div>
-                <div v-else class="flex items-center">
-                    <div class="logic-text-badge logic-text__condition" aria-hidden="true">
-                        {{ __('If') }}
-                    </div>
-                    <div
-                        v-if="props.showRuleControls"
-                        class="ms-0.5 mb-2.5 inline-flex items-center gap-1.5 opacity-0 pointer-events-none transition-opacity group-hover/logic-tab:opacity-100 group-hover/logic-tab:pointer-events-auto [@media(any-hover:none)]:opacity-100 [@media(any-hover:none)]:pointer-events-auto"
-                    >
-                        <Button size="sm" inset variant="subtle" class="size-7 [&_svg]:opacity-50 rounded-full ms-[0.025rem]" icon="trash" />
-                        <!-- class="mb-2.5 mt-[0.5px] p-2.5 size-6 ms-0.25 rounded-full [&_div]:-translate-y-[1px] opacity-0 pointer-events-none transition-opacity group-hover/logic-tab:opacity-85 group-hover/logic-tab:pointer-events-auto [@media(any-hover:none)]:opacity-100 [@media(any-hover:none)]:pointer-events-auto" -->
-                    </div>
-                </div>
-                <ol>
-                    <li>
-                        <Combobox
-                            v-if="props.useWhenSelector"
-                            v-model="primarySelection"
-                            size="sm"
-                            variant="default"
-                            :options="props.calculationMode ? logicCalculationSourceOptions : logicConditionFieldOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="props.calculationMode ? __('Variable or number') : __('Field')"
-                            :searchable="!props.calculationMode"
-                        >
-                            <template v-if="props.calculationMode" #option="{ label, value }">
-                                <div class="flex min-w-0 items-center gap-2">
-                                    <span
-                                        v-if="isVariableOption({ value })"
-                                        class="inline-flex items-center rounded-md bg-violet-50 px-1.5 py-0.5 text-2xs font-medium text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
-                                    >
-                                        {{ __('Variable') }}
-                                    </span>
-                                    <span class="truncate">{{ label }}</span>
-                                </div>
-                            </template>
-                            <template v-if="props.calculationMode" #selected-option="{ option }">
-                                <div class="flex min-w-0 items-center gap-2">
-                                    <span
-                                        v-if="isVariableOption(option)"
-                                        class="inline-flex items-center rounded-md bg-violet-50 px-1.5 py-0.5 text-2xs font-medium text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
-                                    >
-                                        {{ __('Variable') }}
-                                    </span>
-                                    <span class="truncate" :class="{ 'font-mono lowercase text-xs tracking-tight': isVariableOption(option) }">{{ option.label }}</span>
-                                </div>
-                            </template>
-                            <template v-if="!props.calculationMode" #option="{ icon, label, category }">
-                                <div class="flex min-w-0 gap-2 items-center text-left">
-                                    <Icon
-                                        v-if="icon"
-                                        :name="icon"
-                                        :class="optionIconClasses({ category })"
-                                    />
-                                    <span class="block truncate">{{ label }}</span>
-                                </div>
-                            </template>
-                            <template v-if="!props.calculationMode" #selected-option="{ option }">
-                                <div class="flex min-w-0 items-center gap-1 -ms-0.75">
-                                    <div :class="optionChipClasses(option)">
-                                        <Icon
-                                            v-if="option.icon"
-                                            :name="option.icon"
-                                            :class="optionChipIconClasses(option)"
-                                        />
-                                    </div>
-                                    <span class="block truncate">{{ option.label }}</span>
-                                </div>
-                            </template>
-                        </Combobox>
-                        <Combobox
-                            v-else
-                            v-model="logicBranchingConditionField"
-                            size="sm"
-                            variant="default"
-                            :options="logicConditionFieldOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Field')"
-                            searchable
-                        >
-                            <template #option="{ icon, label, category }">
-                                <div class="flex min-w-0 gap-2 items-center text-left">
-                                    <Icon
-                                        v-if="icon"
-                                        :name="icon"
-                                        :class="optionIconClasses({ category })"
-                                    />
-                                    <span class="block truncate">{{ label }}</span>
-                                </div>
-                            </template>
-                            <template #selected-option="{ option }">
-                                <div class="flex min-w-0 items-center gap-1 -ms-0.75">
-                                    <div :class="optionChipClasses(option)">
-                                        <Icon
-                                            v-if="option.icon"
-                                            :name="option.icon"
-                                            :class="optionChipIconClasses(option)"
-                                        />
-                                    </div>
-                                    <span class="block truncate">{{ option.label }}</span>
-                                </div>
-                            </template>
-                        </Combobox>
-                    </li>
-                    <li v-if="props.calculationMode">
-                        <div class="logic-text-badge logic-text__condition mb-0.25! ms-1.5" aria-hidden="true">
-                            {{ __('to') }}
-                        </div>
-                    </li>
-                    <li>
-                        <Input
-                            v-if="props.calculationMode && calculationUsesNumberInput"
-                            v-model="logicValue"
-                            size="sm"
-                            :placeholder="__('Enter a number')"
-                        />
-                        <Combobox
-                            v-else-if="props.calculationMode"
-                            v-model="logicCalculationVariable"
-                            size="sm"
-                            :options="logicCalculationVariableOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Variable')"
-                            :searchable="false"
-                            class="font-mono lowercase [&_span]:text-xs tracking-tight"
-                        />
-                        <Combobox
-                            v-else
-                            v-model="logicOperator"
-                            size="sm"
-                            :options="logicOperatorOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Operator')"
-                            :searchable="false"
-                        />
-                    </li>
-                    <li v-if="!props.calculationMode">
-                        <Combobox
-                            v-model="logicValue"
-                            size="sm"
-                            :options="logicValueOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Value')"
-                            searchable
-                        />
-                    </li>
-                </ol>
-            </li>
-
-            <li v-if="secondaryConditionVisible && !props.calculationMode">
-                <div class="flex items-center gap-0.25">
-                    <div class="logic-text__condition" aria-hidden="true">
-                        <Combobox
-                            v-model="logicJoin"
-                            class="max-w-24"
-                            size="sm"
-                            :options="logicJoinOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('And')"
-                            :searchable="false"
-                            adaptive-width
-                        >
-                            <template #selected-option="{ option }">
-                                <span class="block truncate" v-text="option.short_label" />
-                            </template>
-                        </Combobox>
-                    </div>
-                    <Button
-                        size="sm"
-                        inset
-                        variant="subtle"
-                        class="mb-2.5 mt-[0.5px] p-2.5 size-6 ms-0.25 rounded-full [&_div]:-translate-y-[1px] opacity-0 pointer-events-none transition-opacity group-hover/logic-tab:opacity-85 group-hover/logic-tab:pointer-events-auto [@media(any-hover:none)]:opacity-100 [@media(any-hover:none)]:pointer-events-auto"
-                        :text="'×'"
-                        :aria-label="__('Remove condition')"
-                        @click="secondaryConditionVisible = false"
-                    />
-                </div>
-                <ol>
-                    <li>
-                        <Combobox
-                            v-model="logicConditionField"
-                            size="sm"
-                            variant="default"
-                            :options="logicConditionFieldOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Destination')"
-                            searchable
-                        >
-                            <template #option="{ icon, label, category }">
-                                <div class="flex min-w-0 gap-2 items-center text-left">
-                                    <Icon
-                                        v-if="icon"
-                                        :name="icon"
-                                        :class="optionIconClasses({ category })"
-                                    />
-                                    <span class="block truncate">{{ label }}</span>
-                                </div>
-                            </template>
-                            <template #selected-option="{ option }">
-                                <div class="flex min-w-0 items-center gap-1 -ms-0.75">
-                                    <div :class="optionChipClasses(option)">
-                                        <Icon
-                                            v-if="option.icon"
-                                            :name="option.icon"
-                                            :class="optionChipIconClasses(option)"
-                                        />
-                                    </div>
-                                    <span class="block truncate">{{ option.label }}</span>
-                                </div>
-                            </template>
-                        </Combobox>
-                    </li>
-                    <li>
-                        <Combobox
-                            v-model="logicContainsOperator"
-                            size="sm"
-                            :options="logicOperatorOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Operator')"
-                            :searchable="false"
-                        />
-                    </li>
-                    <li>
-                        <Input
-                            v-model="logicContainsAnswer"
-                            size="sm"
-                            :input-attrs="{
-                                size: logicContainsAnswer.length === 0
-                                    ? logicContainsAnswerPlaceholder.length
-                                    : logicContainsAnswer.length,
-                                style: logicContainsAnswer.length === 0
-                                    ? `min-width: ${logicContainsAnswerPlaceholder.length}ch;`
-                                    : undefined,
-                            }"
-                            :placeholder="logicContainsAnswerPlaceholder"
-                        />
-                    </li>
-                </ol>
-            </li>
-
-            <li v-if="!props.useWhenSelector">
-                <div class="logic-text-badge logic-text__condition" aria-hidden="true">
-                    {{ __('Then') }}
-                </div>
-                <ol v-if="props.showDestinationSelector">
-                    <li>
-                        <Dropdown>
-                            <template #trigger>
-                                <button
-                                    type="button"
-                                    class="w-full min-w-0 flex items-center justify-between rounded-lg border border-gray-300 bg-linear-to-b from-white to-gray-50 px-3 h-8 text-sm text-gray-900 shadow-ui-sm dark:from-gray-850 dark:to-gray-900 dark:border-gray-700 dark:text-gray-300 dark:shadow-ui-md"
-                                >
-                                    <span class="truncate">{{ branchingActionLabel }}</span>
-                                    <Icon name="chevron-down" class="ms-2 size-4 text-gray-400 dark:text-white/40" />
-                                </button>
-                            </template>
-                            <DropdownMenu>
-                                <DropdownLabel :text="__('Logic')" />
-                                <DropdownItem :text="__('Go to')" @click="logicBranchingAction = 'go_to'" />
-                                <DropdownSeparator />
-                                <DropdownLabel :text="__('Calculation')" />
-                                <DropdownItem @click="logicBranchingAction = 'add'">
-                                    <span class="inline-flex items-center gap-2">
-                                        <span>+</span>
-                                        <span>{{ __('Add') }}</span>
-                                    </span>
-                                </DropdownItem>
-                                <DropdownItem @click="logicBranchingAction = 'divide'">
-                                    <span class="inline-flex items-center gap-2">
-                                        <span>÷</span>
-                                        <span>{{ __('Divide') }}</span>
-                                    </span>
-                                </DropdownItem>
-                                <DropdownItem @click="logicBranchingAction = 'subtract'">
-                                    <span class="inline-flex items-center gap-2">
-                                        <span>−</span>
-                                        <span>{{ __('Subtract') }}</span>
-                                    </span>
-                                </DropdownItem>
-                                <DropdownItem @click="logicBranchingAction = 'multiply'">
-                                    <span class="inline-flex items-center gap-2">
-                                        <span>×</span>
-                                        <span>{{ __('Multiply') }}</span>
-                                    </span>
-                                </DropdownItem>
-                            </DropdownMenu>
-                        </Dropdown>
-                    </li>
-                    <li v-if="logicBranchingAction === 'go_to'">
-                        <Combobox
-                            v-model="logicDestination"
-                            size="sm"
-                            variant="default"
-                            :options="logicDestinationOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Destination')"
-                            searchable
-                        >
-                            <template #option="{ icon, label, category }">
-                                <div class="flex min-w-0 gap-2 items-center text-left">
-                                    <Icon
-                                        v-if="icon"
-                                        :name="icon"
-                                        :class="optionIconClasses({ category })"
-                                    />
-                                    <span class="block truncate">{{ label }}</span>
-                                </div>
-                            </template>
-                            <template #selected-option="{ option }">
-                                <div class="flex min-w-0 items-center gap-1 -ms-0.75">
-                                    <div :class="optionChipClasses(option)">
-                                        <Icon
-                                            v-if="option.icon"
-                                            :name="option.icon"
-                                            :class="optionChipIconClasses(option)"
-                                        />
-                                    </div>
-                                    <span class="block truncate">{{ option.label }}</span>
-                                </div>
-                            </template>
-                        </Combobox>
-                    </li>
-                    <li v-if="isBranchingCalculationAction">
-                        <Combobox
-                            v-model="logicBranchingCalculationSource"
-                            size="sm"
-                            variant="default"
-                            :options="logicCalculationSourceOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Variable or number')"
-                            :searchable="false"
-                        >
-                            <template #option="{ label, value }">
-                                <div class="flex min-w-0 items-center gap-2">
-                                    <span
-                                        v-if="isVariableOption({ value })"
-                                        class="inline-flex items-center rounded-md bg-violet-50 px-1.5 py-0.5 text-2xs font-medium text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
-                                    >
-                                        {{ __('Variable') }}
-                                    </span>
-                                    <span class="truncate">{{ label }}</span>
-                                </div>
-                            </template>
-                            <template #selected-option="{ option }">
-                                <div class="flex min-w-0 items-center gap-2">
-                                    <span
-                                        v-if="isVariableOption(option)"
-                                        class="inline-flex items-center rounded-md bg-violet-50 px-1.5 py-0.5 text-2xs font-medium text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
-                                    >
-                                        {{ __('Variable') }}
-                                    </span>
-                                    <span class="truncate" :class="{ 'font-mono lowercase text-xs tracking-tight': isVariableOption(option) }">{{ option.label }}</span>
-                                </div>
-                            </template>
-                        </Combobox>
-                    </li>
-                    <li v-if="isBranchingCalculationAction">
-                        <div class="logic-text-badge logic-text__condition" aria-hidden="true">
-                            {{ __('to') }}
-                        </div>
-                    </li>
-                    <li v-if="isBranchingCalculationAction">
-                        <Input
-                            v-if="branchingCalculationUsesNumberInput"
-                            v-model="logicValue"
-                            size="sm"
-                            :placeholder="__('Enter a number')"
-                        />
-                        <Combobox
-                            v-else
-                            v-model="logicBranchingCalculationVariable"
-                            size="sm"
-                            class="font-mono lowercase text-xs tracking-tight"
-                            :options="logicCalculationVariableOptions"
-                            option-label="label"
-                            option-value="value"
-                            :placeholder="__('Variable')"
-                            :searchable="false"
-                        >
-                            <template #option="{ label }">
-                                <span class="font-mono text-xs tracking-tight">{{ label }}</span>
-                            </template>
-                            <template #selected-option="{ option }">
-                                <span class="font-mono text-xs tracking-tight">{{ option.label }}</span>
-                            </template>
-                        </Combobox>
-                    </li>
-                </ol>
-            </li>
-        </ol>
-
-        <Button
-            v-if="!props.useWhenSelector && props.showAddConditionBeforeThen"
-            size="sm"
-            variant="subtle"
-            class="ms-4 bg-transparent!"
-            :text="__('+ Add Condition')"
-        />
-    </div>
-</template>
diff --git a/resources/js/pages/forms/connect-list/ConnectAddRuleButton.vue b/resources/js/pages/forms/connect-list/ConnectAddRuleButton.vue
deleted file mode 100644
index cb97aa748cc..00000000000
--- a/resources/js/pages/forms/connect-list/ConnectAddRuleButton.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <div class="inline-block" v-if="variant === 'button'">
-        <LogicRulePicker
-            :enabled="enabled"
-            :sets="groups"
-            align="start"
-            :loading-set="loadingSet"
-            :search-placeholder="searchPlaceholder"
-            @added="addRule"
-        >
-            <template #trigger>
-                <div class="inline-flex relative pt-2" :class="{ 'pt-6': showConnector }">
-                    <div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850" />
-                    <Button v-if="enabled" size="sm" :text="label" icon="plus" class="relative" />
-                </div>
-            </template>
-        </LogicRulePicker>
-    </div>
-    <LogicRulePicker
-        v-else
-        :enabled="enabled"
-        :sets="groups"
-        align="center"
-        :loading-set="loadingSet"
-        :search-placeholder="searchPlaceholder"
-        @added="addRule"
-    >
-        <template #trigger>
-            <div
-                class="flex justify-center relative group py-3"
-                :class="{ 'py-3.5 -mt-2 top-0.5': isFirst }"
-            >
-                <div
-                    v-if="showConnector"
-                    class="absolute group-focus-within:opacity-0 transition-opacity group-focus-within:transition-none delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850"
-                    :class="{
-                        'group-hover:opacity-0': enabled,
-                        'h-[65%] top-[30%] opacity-60': isFirst,
-                        'h-full opacity-100': !isFirst,
-                    }"
-                />
-                <button
-                    v-if="enabled"
-                    class="absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity group-focus-within:transition-none delay-10 duration-250 cursor-pointer"
-                    tabindex="-1"
-                >
-                    <div class="h-full flex flex-col justify-center">
-                        <div class="rounded-full bg-[linear-gradient(90deg,theme(colors.gray.100)_0%,theme(colors.gray.200)_50%,theme(colors.gray.100)_100%)] dark:bg-[linear-gradient(90deg,theme(colors.gray.800)_0%,theme(colors.gray.700)_50%,theme(colors.gray.800)_100%)] h-2" />
-                    </div>
-                </button>
-                <Button v-if="enabled" round icon="plus" size="sm" class="-my-4 z-3 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity delay-10 duration-250" />
-            </div>
-        </template>
-    </LogicRulePicker>
-</template>
-
-<script setup>
-import LogicRulePicker from '@/components/forms/logic/LogicRulePicker.vue';
-import { Button } from '@/components/ui';
-import { computed } from 'vue';
-
-const emit = defineEmits(['added']);
-
-const props = defineProps({
-    sets: Array,
-    groups: Array,
-    index: Number,
-    enabled: { type: Boolean, default: true },
-    label: { type: String },
-    showConnector: { type: Boolean, default: true },
-    variant: { type: String, default: 'button' },
-    isFirst: { type: Boolean, default: false },
-    loadingSet: { type: String, default: null },
-    searchPlaceholder: { type: String, default: null },
-});
-
-const label = computed(() => props.label ? __(props.label) : __('Add Rule'));
-
-function addRule(handle) {
-    emit('added', handle, props.index);
-}
-</script>
diff --git a/resources/js/pages/forms/connect-list/ConnectRule.vue b/resources/js/pages/forms/connect-list/ConnectRule.vue
deleted file mode 100644
index bec68ec10b0..00000000000
--- a/resources/js/pages/forms/connect-list/ConnectRule.vue
+++ /dev/null
@@ -1,342 +0,0 @@
-<script setup>
-import { computed, inject, ref } from 'vue';
-import {
-    Badge,
-    Button,
-    Dropdown,
-    DropdownItem,
-    DropdownMenu,
-    Icon,
-    Switch,
-    Subheading,
-    injectPublishContext as injectContainerContext,
-} from '@/components/ui';
-import PreviewHtml from '@/components/fieldtypes/replicator/PreviewHtml.js';
-import LogicFlowMock from '../LogicFlowMock.vue';
-import { reveal } from '@api';
-
-const emit = defineEmits(['collapsed', 'expanded', 'removed']);
-
-const replicatorSets = inject('replicatorSets');
-
-const props = defineProps({
-    config: Object,
-    id: String,
-    fieldPath: String,
-    metaPath: String,
-    index: Number,
-    collapsed: Boolean,
-    values: Object,
-    sortableItemClass: String,
-    readOnly: Boolean,
-    enabled: Boolean,
-    hasError: Boolean,
-    canAddRule: Boolean,
-    showFieldPreviews: Boolean,
-});
-
-const { previews, setFieldValue } = injectContainerContext();
-const fieldPathPrefix = computed(() => `${props.fieldPath}.${props.index}`);
-const isInvalid = computed(() => Object.keys(props.config).length === 0);
-
-const ruleGroup = computed(() => {
-    if (replicatorSets.length < 1) return null;
-
-    return (
-        replicatorSets.find((group) => {
-            return group.sets.filter((set) => set.handle === props.config.handle).length > 0;
-        }) ?? {}
-    );
-});
-
-const isRuleGroupVisible = computed(() => replicatorSets.length > 1 && ruleGroup.value.display);
-const operatorLabels = [
-    __('does not equal'),
-    __('is greater than'),
-    __('is less than'),
-    __('equals'),
-    __('contains'),
-    __('and'),
-    __('or'),
-];
-
-const previewText = computed(() => {
-    return Object.entries(data_get(previews.value, fieldPathPrefix.value) || {})
-        .filter(([handle]) => {
-            if (!handle.endsWith('_')) return false;
-            handle = handle.substr(0, handle.length - 1);
-            const config = props.config.fields.find((f) => f.handle === handle);
-            if (!config) return false;
-            return config.replicator_preview === undefined ? props.showFieldPreviews : config.replicator_preview;
-        })
-        .map(([, value]) => value)
-        .filter((value) => !['null', '[]', '{}', '', undefined].includes(JSON.stringify(value)))
-        .map((value) => {
-            if (value instanceof PreviewHtml) return value.html;
-            if (typeof value === 'string') return escapeHtml(value);
-
-            if (Array.isArray(value) && typeof value[0] === 'string') {
-                return escapeHtml(value.join(', '));
-            }
-
-            return escapeHtml(JSON.stringify(value));
-        })
-        .filter((html) => html && html.trim() !== '')
-        .join(' <span class="text-gray-400 dark:text-gray-600">/</span> ');
-});
-
-const collapsedPreviewText = computed(() => {
-    if (previewText.value && previewText.value.trim() !== '') return previewText.value;
-    return '';
-});
-
-const destinationDisplayByHandle = computed(() => {
-    return (replicatorSets ?? [])
-        .flatMap((group) => group?.sets ?? [])
-        .reduce((carry, set) => {
-            carry[set.handle] = set.display;
-            return carry;
-        }, {});
-});
-
-const collapsedSummaryParts = computed(() => {
-    const summary = props.values?.summary;
-    const noConditionsText = __('No conditions configured yet.');
-
-    if (!summary) return [];
-    if (summary.trim() === noConditionsText) return [{ type: 'text', text: noConditionsText }];
-
-    const marker = __('then go to');
-    const markerIndex = summary.toLowerCase().indexOf(marker.toLowerCase());
-    const before = (markerIndex === -1 ? summary : summary.slice(0, markerIndex + marker.length)).replace(/,/g, '');
-    const after = markerIndex === -1 ? '' : summary.slice(markerIndex + marker.length).trimStart();
-
-    const destinationHandle = after.trim().replace(/^(["'`]|[“”‘’])/, '').replace(/(["'`]|[“”‘’])$/, '');
-    const destinationResolved = destinationDisplayByHandle.value[destinationHandle] ?? destinationDisplayByHandle.value[after] ?? after;
-
-    const operatorPattern = new RegExp(`(${operatorLabels.map((label) => label.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
-
-    const parts = before
-        .split(operatorPattern)
-        .filter((part) => part !== '')
-        .map((part) => {
-            const isOperator = operatorLabels.some((label) => label.toLowerCase() === part.toLowerCase());
-            return { type: isOperator ? 'operator' : 'text', text: part };
-        });
-
-    const answerLabel = __('Friend referral');
-    const partsWithAnswerClass = parts.flatMap((part) => {
-        if (part.type !== 'text' || !part.text?.includes(answerLabel)) return [part];
-
-        const [beforeAnswer, afterAnswer] = part.text.split(answerLabel);
-        const nextParts = [];
-        if (beforeAnswer) nextParts.push({ type: 'text', text: beforeAnswer });
-        nextParts.push({ type: 'answer', text: answerLabel });
-        if (afterAnswer) nextParts.push({ type: 'text', text: afterAnswer });
-        return nextParts;
-    });
-
-    if (markerIndex !== -1) {
-        partsWithAnswerClass.push({ type: 'destination', text: destinationResolved });
-    }
-
-    return partsWithAnswerClass;
-});
-
-const showSecondaryCondition = computed(() => {
-    const summary = props.values?.summary?.toLowerCase() || '';
-    return summary.includes(', and ') || summary.includes(' and ');
-});
-
-const initialConditionIcon = computed(() => {
-    if (props.config?.handle === 'heard_about_us') return 'fieldtype-select';
-    return props.config?.conditionIcon || props.config?.icon || 'fieldtype-radio';
-});
-
-const initialConditionIconClass = computed(() => {
-    if (props.config?.handle === 'heard_about_us') return 'text-orange-600 dark:text-orange-400';
-    return props.config?.conditionIconClass || props.config?.iconClass || 'text-orange-600 dark:text-orange-400';
-});
-
-const mockPresetByHandle = {
-    heard_about_us: {
-        logicOperator: 'equals',
-        logicValue: 'referral',
-        logicDestination: 'fan_length',
-        logicJoin: 'and',
-        logicContainsOperator: 'contains',
-        logicContainsAnswer: 'referral',
-    },
-    fan_length: {
-        logicOperator: 'contains',
-        logicValue: 'referral',
-        logicDestination: 'email_notifications',
-        logicJoin: 'and',
-        logicContainsOperator: 'contains',
-        logicContainsAnswer: 'years',
-    },
-    favorite_album: {
-        logicOperator: 'equals',
-        logicValue: 'days_of_thunder',
-        logicDestination: 'second_favorite',
-        logicConditionField: 'heard_about_us',
-        logicJoin: 'and',
-        logicContainsOperator: 'contains',
-        logicContainsAnswer: 'referral',
-    },
-    second_favorite_album: {
-        logicOperator: 'equals',
-        logicValue: 'endless_summer',
-        logicDestination: 'email_notifications',
-        logicJoin: 'and',
-        logicContainsOperator: 'contains',
-        logicContainsAnswer: 'summer',
-    },
-    age: {
-        logicOperator: 'equals',
-        logicValue: '21',
-        logicDestination: 'free_drink_voucher',
-        logicConditionField: 'age',
-        logicJoin: 'and',
-        logicContainsOperator: 'contains',
-        logicContainsAnswer: '21',
-    },
-};
-
-const mockPreset = computed(() => {
-    return mockPresetByHandle[props.config?.handle] || {};
-});
-
-function toggleCollapsedState() {
-    props.collapsed ? emit('expanded') : emit('collapsed');
-}
-
-function toggleEnabledState() {
-    setFieldValue(`${fieldPathPrefix.value}.enabled`, !props.enabled);
-}
-
-const rootEl = ref();
-reveal.use(rootEl, () => emit('expanded'));
-</script>
-
-<template>
-    <div ref="rootEl" :class="sortableItemClass">
-        <slot name="picker" />
-        <div
-            layout
-            data-replicator-rule
-            class="@container relative w-full rounded-lg border border-gray-300 text-base dark:border-white/10 bg-white dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black shadow-ui-sm"
-            :class="{ 'border-red-500': hasError }"
-            :data-collapsed="collapsed ?? undefined"
-            :data-error="hasError ?? undefined"
-            :data-invalid="isInvalid ?? undefined"
-            :data-readonly="readOnly ?? undefined"
-            :data-type="config.handle"
-        >
-            <header
-                class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 dark:bg-gray-925 border-gray-300 dark:shadow-md"
-                :class="{
-                    'bg-white dark:bg-gray-900': collapsed,
-                    'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none': !collapsed,
-                }"
-            >
-                <button type="button" class="show-focus-within_target flex flex-1 items-center gap-1.75 p-2 py-1.75 min-w-0 focus:outline-none cursor-pointer" @click="toggleCollapsedState">
-                    <Badge size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
-                        <span v-if="isRuleGroupVisible" class="flex items-center gap-2">
-                            {{ __(ruleGroup.display) }}
-                            <Icon name="chevron-right" class="relative top-px size-3" />
-                        </span>
-                        <Icon
-                            v-if="config.icon"
-                            :name="config.icon"
-                            class="size-3.5 me-1 rounded-sm opacity-100!"
-                            :class="config.iconClass"
-                            aria-hidden="true"
-                        />
-                        {{ __(config.display) || config.handle }}
-                    </Badge>
-                    <Badge v-if="collapsed" pill size="sm" color="white">{{ __('if') }}</Badge>
-                    <Icon
-                        v-if="config.instructions && !collapsed"
-                        name="info-square"
-                        class="size-3.5! text-gray-500"
-                        v-tooltip="__(config.instructions)"
-                    />
-                    <Subheading v-show="collapsed" class="overflow-hidden text-ellipsis whitespace-nowrap gap-1.5! lowercase">
-                        <span v-if="collapsedPreviewText" v-html="collapsedPreviewText" />
-                        <template v-else>
-                            <template v-for="(part, index) in collapsedSummaryParts" :key="`${part.type}-${index}`">
-                                <Badge
-                                    v-if="part.type === 'operator'"
-                                    size="sm"
-                                    pill
-                                    color="white"
-                                    class="inline-block px-1.5 py-0 text-[12px] font-medium bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-gray-200"
-                                    style="text-box: trim-start text;"
-                                >
-                                    {{ part.text }}
-                                </Badge>
-                                <template v-else-if="part.type === 'destination'">&nbsp;{{ part.text }}</template>
-                                <span v-else-if="part.type === 'answer'" class="font-mono text-[0.725rem]">{{ part.text }}</span>
-                                <template v-else>{{ part.text }}</template>
-                            </template>
-                        </template>
-                    </Subheading>
-                </button>
-                <div class="flex items-center gap-2" v-if="!readOnly">
-                    <Switch
-                        size="xs"
-                        :model-value="enabled"
-                        @update:model-value="toggleEnabledState"
-                        v-tooltip="enabled ? __('Email notification enabled') : __('Email notification disabled')"
-                    />
-                    <Dropdown>
-                        <template #trigger>
-                            <Button icon="dots" variant="ghost" size="xs" class="me-2" :aria-label="__('Open row actions')" />
-                        </template>
-                        <DropdownMenu>
-                            <DropdownItem
-                                :text="__('Delete row')"
-                                icon="trash"
-                                variant="destructive"
-                                @click="emit('removed')"
-                            />
-                        </DropdownMenu>
-                    </Dropdown>
-                </div>
-            </header>
-
-            <div
-                v-show="!collapsed"
-                :class="{ 'contain-paint': collapsed, 'isolate': !collapsed }"
-                class="border-t border-t-gray-300! dark:border-t-white/10!"
-            >
-                <div :tabindex="collapsed ? -1 : undefined" :inert="collapsed">
-                    <div class="p-4">
-                        <LogicFlowMock
-                            :initial-condition-label="__(config.conditionDisplay || config.display) || config.handle"
-                            :initial-condition-icon="initialConditionIcon"
-                            :initial-condition-icon-class="initialConditionIconClass"
-                            :show-secondary-condition="showSecondaryCondition"
-                            :destination-step-label="__('Send an email to jack@statamic.com')"
-                            :show-destination-selector="false"
-                            :mock-preset="mockPreset"
-                        />
-                        <Button
-                            size="sm"
-                            variant="subtle"
-                            class="-ms-2 mt-2 bg-transparent!"
-                            :text="__('+ Add Condition (The above badge should be an expandable form)')"
-                        />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-:deep(.logic-text-badge.logic-text__condition) {
-    margin-top: 0.5rem;
-}
-</style>
diff --git a/resources/js/pages/forms/connect/Edit.vue b/resources/js/pages/forms/connect/Edit.vue
new file mode 100644
index 00000000000..f4338df1f20
--- /dev/null
+++ b/resources/js/pages/forms/connect/Edit.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import axios from 'axios';
+import { keys } from '@api';
+import Layout from '@/pages/layout/Layout.vue';
+import PanelLayout from '@/pages/layout/PanelLayout.vue';
+import FormsLayout from '../Layout.vue';
+import Head from '@/pages/layout/Head.vue';
+import { Badge, Button, Card, Header, Heading, Icon, Panel, PanelHeader } from '@ui';
+import FormStatusIndicator from '@/components/forms/FormStatusIndicator.vue';
+import { Link } from '@inertiajs/vue3';
+
+defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
+
+const props = defineProps({
+    form: Object,
+    connector: Object,
+    component: Object,
+    value: Array,
+    action: String,
+    isConfigured: Boolean,
+    suggestableFields: Array,
+});
+
+const errors = ref({});
+const saving = ref(false);
+const saveBinding = ref(null);
+const value = ref(props.value);
+
+const save = () => {
+    if (saving.value) return;
+
+    errors.value = {};
+    saving.value = true;
+
+    axios.patch(props.action, value.value)
+        .then((response) => {
+            value.value = response.data;
+            nextTick(() => Statamic.$dirty.remove('connections'));
+            Statamic.$toast.success(__('Saved'));
+        })
+        .catch((e) => {
+            if (e.response?.status === 422) {
+                errors.value = e.response.data.errors;
+                Statamic.$toast.error(e.response.data.message);
+            } else {
+                Statamic.$toast.error(__('Something went wrong'));
+            }
+        })
+        .finally(() => (saving.value = false));
+};
+
+watch(value, () => Statamic.$dirty.add('connections'), { deep: true });
+
+onMounted(() => {
+    if (!props.isConfigured) return;
+
+    saveBinding.value = keys.bindGlobal(['mod+s'], (e) => {
+        e.preventDefault();
+        save();
+    });
+});
+
+onUnmounted(() => {
+    saveBinding.value?.destroy();
+    Statamic.$dirty.remove('connections');
+});
+</script>
+
+<template>
+    <Head :title="[__(connector.title), __('Connect'), __(form.title), __('Forms')]" />
+
+    <Teleport v-if="isConfigured" to="#form-layout-actions">
+        <Button variant="primary" :aria-label="__('Save')" :disabled="saving" @click="save">
+            <Icon name="save" class="sm:hidden" />
+            <span class="hidden sm:inline">{{ __('Save') }}</span>
+        </Button>
+    </Teleport>
+
+    <div class="mx-auto max-w-5xl">
+        <Header class="mb-2">
+            <template #title>
+                <FormStatusIndicator :status="form.status" />
+                {{ __(form.title) }}
+            </template>
+        </Header>
+
+        <Panel>
+            <PanelHeader>
+                <div class="flex items-center justify-between gap-3">
+                    <Heading>
+                        <Link
+                            :href="cp_url(`forms/${form.handle}/connect`)"
+                            class="inline-flex items-center gap-2 text-inherit my-0! cursor-pointer hover:opacity-80"
+                        >
+                            <Icon name="connection" class="size-4! opacity-60! text-gray-925 dark:text-white" aria-hidden="true" />
+                            {{ __('Connect') }}
+                        </Link>
+                        <Icon name="chevron-right" class="size-3.5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
+                        <span class="relative inline-flex items-center gap-1.5">
+                            <span
+                                v-if="connector.icon"
+                                class="size-4 text-gray-700 dark:text-gray-300 [&_svg]:size-4"
+                                aria-hidden="true"
+                                v-html="connector.icon"
+                            />
+                            <span>{{ __(connector.title) }}</span>
+                            <Badge pill class="absolute start-full top-1/2 ms-1.5 size-6 -translate-y-1/2">
+                                {{ value.length }}
+                            </Badge>
+                        </span>
+                    </Heading>
+                    <div id="connection-list-actions" />
+                </div>
+            </PanelHeader>
+            <Card>
+                <component
+                    :is="component.name"
+                    :form
+                    :errors
+                    v-model="value"
+                    v-bind="component.props"
+                />
+            </Card>
+        </Panel>
+    </div>
+</template>
diff --git a/resources/js/pages/forms/connect/Index.vue b/resources/js/pages/forms/connect/Index.vue
new file mode 100644
index 00000000000..fd35931e054
--- /dev/null
+++ b/resources/js/pages/forms/connect/Index.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import Layout from '@/pages/layout/Layout.vue';
+import PanelLayout from '@/pages/layout/PanelLayout.vue';
+import FormsLayout from '../Layout.vue';
+import Head from '@/pages/layout/Head.vue';
+import {
+    Badge,
+    Button,
+    Card,
+    DocsCallout,
+    Header,
+    Heading,
+    Icon,
+    Panel,
+    PanelHeader,
+    ToggleGroup,
+    ToggleItem,
+    Listing,
+    ListingTable,
+} from '@ui';
+import FormStatusIndicator from '@/components/forms/FormStatusIndicator.vue';
+import { Link } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+import { __ } from '@/bootstrap/globals';
+import { preferences } from '@api';
+
+defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
+
+enum View {
+    Grid = 'grid',
+    List = 'list',
+}
+
+type Connector = {
+    handle: string;
+    title: string;
+    description: string;
+    icon: string;
+    developer: string;
+    count: number | null;
+    url: string;
+}
+
+defineProps<{
+    form: Object,
+    connectors: Connector[],
+}>();
+
+const view = ref<View>(preferences.get('forms.connect.view', View.Grid));
+
+watch(view, (view: View) => preferences.set('forms.connect.view', view));
+</script>
+
+<style>
+#connectors-listing tbody td {
+    @apply rounded-t-none border-x-0;
+}
+</style>
+
+<template>
+    <Head :title="[__('Connect'), __(form.title), __('Forms')]" />
+
+    <div class="mx-auto max-w-5xl">
+        <Header class="mb-2">
+            <template #title>
+                <FormStatusIndicator :status="form.status" />
+                {{ __(form.title) }}
+            </template>
+            <template #actions>
+                <div class="flex items-center gap-2 sm:gap-3">
+                    <Button variant="primary" href="https://statamic.com/addons?category=forms" target="_blank" rel="noopener" icon-append="external-link">
+                        {{ __('Explore Integrations') }}
+                    </Button>
+                    <ToggleGroup v-model="view">
+                        <ToggleItem :value="View.Grid" icon="layout-grid" />
+                        <ToggleItem :value="View.List" icon="layout-list" />
+                    </ToggleGroup>
+                </div>
+            </template>
+        </Header>
+
+        <Panel>
+            <PanelHeader>
+                <Heading>
+                    <span class="inline-flex items-center gap-2">
+                        <Icon name="connection" class="size-4! opacity-60! text-gray-925 dark:text-white" aria-hidden="true" />
+                        {{ __('Connect') }}
+                    </span>
+                </Heading>
+            </PanelHeader>
+            <Card :class="{ 'p-0!': view === View.List }">
+                <div v-if="view === View.Grid" class="grid gap-4 grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+                    <div
+                        v-for="connector in connectors"
+                        :key="connector.handle"
+                        class="space-y-2"
+                    >
+                        <Link
+                            :href="connector.url"
+                            :aria-label="__(connector.title)"
+                            class="relative flex mb-2 aspect-square items-center justify-center rounded-lg border border-gray-300 bg-gray-50/30 p-8 text-gray-700 hover:bg-gray-100/50 dark:border-gray-700 dark:bg-gray-950/40 dark:text-gray-300 dark:hover:bg-gray-900"
+                        >
+                            <span class="[&_svg]:size-12" aria-hidden="true" v-html="connector.icon" />
+                        </Link>
+                        <div class="flex items-center justify-center gap-1.5 text-gray-800 dark:text-gray-200">
+                            <Badge v-if="connector.count" size="sm" color="white" pill>
+                                {{ connector.count }}
+                            </Badge>
+                            <span class="truncate text-xs">{{ __(connector.title) }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div v-else>
+                    <Listing
+                        id="connectors-listing"
+                        class="pt-1"
+                        :items="connectors"
+                        :columns="[
+                            { field: 'title', label: __('Connector'), sortable: true, visible: true },
+                            { field: 'description', label: __('Description'), sortable: false, visible: true },
+                            { field: 'developer', label: __('Developer'), sortable: true, visible: true },
+                        ]"
+                        :searchable="false"
+                        :allow-customizing-columns="false"
+                    >
+                        <ListingTable>
+                            <template #cell-title="{ row: connector }">
+                                <Link :href="connector.url" class="flex min-w-0 items-center gap-2">
+                                    <span class="size-7 flex items-center justify-center text-gray-700 dark:text-gray-300 [&_svg]:size-5" aria-hidden="true" v-html="connector.icon" />
+                                    <Badge v-if="connector.count" size="sm" color="white" pill>
+                                        {{ connector.count }}
+                                    </Badge>
+                                    <span class="truncate text-sm text-gray-800 dark:text-gray-200">{{ __(connector.title) }}</span>
+                                </Link>
+                            </template>
+                        </ListingTable>
+                    </Listing>
+                </div>
+            </Card>
+        </Panel>
+
+        <DocsCallout :topic="__('Connections')" url="forms" />
+    </div>
+</template>
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index bd7ba5907db..ada49b00aa3 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -17,6 +17,10 @@ it('exports modules', async () => {
 
 it('exports core', async () => {
     const expected = [
+        'ConnectionFields',
+        'ConnectionList',
+        'ConnectionRules',
+        'ConnectionSummary',
         'DateFormatter',
         'Fieldtype',
         'FieldtypeMixin',
diff --git a/resources/js/tests/components/forms/ConnectionList.test.js b/resources/js/tests/components/forms/ConnectionList.test.js
new file mode 100644
index 00000000000..ee28ba568f2
--- /dev/null
+++ b/resources/js/tests/components/forms/ConnectionList.test.js
@@ -0,0 +1,242 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, expect, test, vi } from 'vitest';
+import { defineComponent, h } from 'vue';
+import ConnectionList from '@/components/forms/connections/ConnectionList.vue';
+import ConnectionFields from '@/components/forms/connections/ConnectionFields.vue';
+
+vi.mock('@ui', async () => {
+    const { defineComponent, h } = await import('vue');
+
+    const passthrough = (name, props = []) => defineComponent({
+        name,
+        props,
+        setup: (_, { slots }) => () => h('div', { 'data-component': name }, slots.default?.()),
+    });
+
+    const clickable = (name) => defineComponent({
+        name,
+        props: ['text'],
+        emits: ['click'],
+        setup: (props, { emit }) => () => h('button', { 'data-text': props.text, onClick: () => emit('click') }, props.text),
+    });
+
+    return {
+        Button: clickable('Button'),
+        DropdownItem: clickable('DropdownItem'),
+        ConfirmationModal: passthrough('ConfirmationModal'),
+        Description: passthrough('Description'),
+        DragHandle: passthrough('DragHandle'),
+        Dropdown: passthrough('Dropdown'),
+        DropdownMenu: passthrough('DropdownMenu'),
+        Switch: passthrough('Switch'),
+        PublishContainer: passthrough('PublishContainer', ['blueprint', 'errors', 'modelValue', 'meta', 'extraValues', 'name', 'trackDirtyState']),
+        PublishFieldsProvider: passthrough('PublishFieldsProvider', ['fields']),
+        PublishFields: passthrough('PublishFields'),
+    };
+});
+
+vi.mock('@/components/forms/connections/ConnectionRules.vue', async () => {
+    const { defineComponent, h } = await import('vue');
+
+    return {
+        default: defineComponent({
+            name: 'ConnectionRules',
+            props: ['conditions', 'alwaysLabel', 'ifLabel'],
+            setup: (_, { slots }) => () => h('div', { 'data-component': 'ConnectionRules' }, slots.then?.()),
+        }),
+    };
+});
+
+vi.mock('@/components/sortable/Sortable.js', async () => {
+    const { defineComponent, h } = await import('vue');
+
+    return { SortableList: defineComponent({ setup: (_, { slots }) => () => h('div', slots.default?.()) }) };
+});
+
+vi.mock('@api', () => ({ preferences: { get: (key, fallback) => fallback, set: vi.fn() } }));
+vi.mock('@/bootstrap/globals', () => ({ __: (key) => key }));
+
+const blueprint = {
+    tabs: [
+        {
+            sections: [
+                { fields: [{ handle: 'url' }, { handle: 'rows' }] },
+                { fields: [{ handle: 'secret' }] },
+            ],
+        },
+    ],
+};
+
+const defaults = {
+    values: { url: null, rows: [] },
+    meta: { url: null, rows: { existing: {} } },
+};
+
+const containers = (wrapper) => wrapper.findAllComponents({ name: 'PublishContainer' });
+
+function makeList(props = {}, slots = {}) {
+    const wrapper = mount(ConnectionList, {
+        props: {
+            modelValue: [],
+            blueprint,
+            defaults,
+            'onUpdate:modelValue': (value) => wrapper.setProps({ modelValue: value }),
+            ...props,
+        },
+        slots,
+        global: { stubs: { teleport: true } },
+    });
+
+    return wrapper;
+}
+
+beforeEach(() => {
+    vi.stubGlobal('__', (key) => key);
+});
+
+test('new connections get their own copy of the default meta', async () => {
+    const wrapper = makeList();
+
+    await wrapper.find('[data-text="Add Connection"]').trigger('click');
+    await wrapper.find('[data-text="Add Connection"]').trigger('click');
+
+    const [first, second] = containers(wrapper).map((container) => container.props('meta'));
+
+    expect(first).toEqual(defaults.meta);
+    expect(first).not.toBe(defaults.meta);
+    expect(first).not.toBe(second);
+
+    first.rows.existing.row = { mutated: true };
+
+    expect(defaults.meta.rows.existing).toEqual({});
+    expect(second.rows.existing).toEqual({});
+});
+
+test('existing connections are seeded from the meta prop', () => {
+    const meta = { one: { url: null, rows: { existing: { row: { a: 1 } } } } };
+    const wrapper = makeList({ modelValue: [{ id: 'one', conditions: [] }, { id: 'two', conditions: [] }], meta });
+
+    const [one, two] = containers(wrapper).map((container) => container.props('meta'));
+
+    expect(one).toEqual(meta.one);
+    expect(one).not.toBe(meta.one);
+    expect(two).toEqual(defaults.meta);
+});
+
+test('duplicating a connection clones its meta', async () => {
+    const meta = { one: { url: null, rows: { existing: { row: { a: 1 } } } } };
+    const wrapper = makeList({ modelValue: [{ id: 'one', url: 'https://example.com', conditions: [] }], meta });
+
+    containers(wrapper)[0].props('meta').rows.existing.added = { b: 2 };
+
+    await wrapper.find('[data-text="Duplicate"]').trigger('click');
+
+    const [original, copy] = containers(wrapper).map((container) => container.props('meta'));
+
+    expect(wrapper.props('modelValue')[1].url).toBe('https://example.com');
+    expect(copy).toEqual({ url: null, rows: { existing: { row: { a: 1 }, added: { b: 2 } } } });
+    expect(copy).not.toBe(original);
+    expect(copy.rows.existing).not.toBe(original.rows.existing);
+});
+
+test('errors keep their full path within the connection', () => {
+    const wrapper = makeList({
+        modelValue: [{ id: 'one', conditions: [] }, { id: 'two', conditions: [] }],
+        errors: {
+            '0.url': ['Invalid URL'],
+            '0.rows.1.label': ['Required'],
+            '1.url': ['Other'],
+        },
+    });
+
+    const [one, two] = containers(wrapper).map((container) => container.props('errors'));
+
+    expect(one).toEqual({ url: ['Invalid URL'], 'rows.1.label': ['Required'] });
+    expect(two).toEqual({ url: ['Other'] });
+});
+
+test('it renders rules and fields when no default slot is given', () => {
+    const wrapper = makeList({
+        modelValue: [{ id: 'one', url: 'https://example.com', conditions: [] }],
+        name: 'webhook-connection',
+        alwaysLabel: 'Always send',
+        ifLabel: 'Send if...',
+    });
+
+    const rules = wrapper.findComponent({ name: 'ConnectionRules' });
+    const container = rules.findComponent({ name: 'PublishContainer' });
+
+    expect(rules.props()).toMatchObject({ alwaysLabel: 'Always send', ifLabel: 'Send if...' });
+    expect(container.props()).toMatchObject({
+        blueprint,
+        name: 'webhook-connection-one',
+        modelValue: wrapper.props('modelValue')[0],
+        trackDirtyState: false,
+    });
+    expect(wrapper.findComponent({ name: 'PublishFieldsProvider' }).props('fields').map((field) => field.handle)).toEqual(['url', 'rows', 'secret']);
+});
+
+test('it renders only fields when rules are disabled', () => {
+    const wrapper = makeList({ modelValue: [{ id: 'one', conditions: [] }], rules: false });
+
+    expect(wrapper.findComponent({ name: 'ConnectionRules' }).exists()).toBe(false);
+    expect(containers(wrapper)[0].props('name')).toBe('connection-one');
+});
+
+test('a default slot replaces the fallback body and receives meta', () => {
+    const meta = { one: { url: 'meta' } };
+    const slot = vi.fn(() => h('p', 'custom'));
+    const wrapper = makeList({ modelValue: [{ id: 'one', conditions: [] }], meta }, { default: slot });
+
+    expect(wrapper.findComponent({ name: 'ConnectionRules' }).exists()).toBe(false);
+    expect(wrapper.text()).toContain('custom');
+    expect(slot.mock.calls[0][0]).toMatchObject({ index: 0, errors: {}, meta: { url: 'meta' } });
+});
+
+test('connection fields can render a subset or exclude fields', () => {
+    const fields = (props) => mount(ConnectionFields, {
+        props: { connection: { id: 'one' }, blueprint, ...props },
+    }).findComponent({ name: 'PublishFieldsProvider' }).props('fields').map((field) => field.handle);
+
+    expect(fields({ fields: ['secret', 'url', 'missing'] })).toEqual(['secret', 'url']);
+    expect(fields({ except: ['rows'] })).toEqual(['url', 'secret']);
+});
+
+test('connection fields work without a connection list', () => {
+    const wrapper = mount(ConnectionFields, {
+        props: {
+            connection: { id: 'one' },
+            blueprint,
+            meta: { url: 'meta' },
+            errors: { url: ['Invalid'] },
+            extraValues: { consent: true },
+            name: 'hubspot',
+            bordered: false,
+        },
+    });
+
+    expect(wrapper.findComponent({ name: 'PublishContainer' }).props()).toMatchObject({
+        name: 'hubspot-one',
+        meta: { url: 'meta' },
+        errors: { url: ['Invalid'] },
+        extraValues: { consent: true },
+    });
+    expect(wrapper.classes()).not.toContain('rounded-lg');
+});
+
+test('connection fields slots', () => {
+    const wrapper = mount(ConnectionFields, {
+        props: { connection: { id: 'one' }, blueprint },
+        slots: {
+            before: ({ connection }) => h('p', { class: 'before' }, connection.id),
+            default: ({ pick }) => h('p', { class: 'picked' }, pick('secret', 'url').map((field) => field.handle).join(',')),
+            after: () => h('p', { class: 'after' }, 'after'),
+        },
+    });
+
+    expect(wrapper.find('.before').text()).toBe('one');
+    expect(wrapper.find('.picked').text()).toBe('secret,url');
+    expect(wrapper.find('.after').exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'PublishFieldsProvider' }).exists()).toBe(false);
+    expect(wrapper.classes()).toContain('rounded-lg');
+});
diff --git a/resources/svg/forms/connect/email-notifications-small.svg b/resources/svg/forms/connect/email-notifications-small.svg
new file mode 100644
index 00000000000..98cb7c96893
--- /dev/null
+++ b/resources/svg/forms/connect/email-notifications-small.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m1.207 2.823c-.002.017-.005.034-.007.051-.108.811-.2 1.643-.2 2.492 0 .85.092 1.682.2 2.493.058.429.293.826.654 1.131.387.327.894.529 1.436.581.822.075 1.663.14 2.518.157.276.006.495.234.49.51-.006.276-.235.496-.511.49-.879-.018-1.744-.084-2.589-.161h-.002c-.752-.072-1.451-.36-1.987-.812-.56-.474-.909-1.096-1-1.762v-.002c-.114-.853-.209-1.73-.209-2.625 0-.894.095-1.77.209-2.625v-.002c.091-.665.44-1.288 1-1.761.536-.452 1.235-.74 1.987-.812h.002c.993-.091 2.012-.166 3.052-.166s2.06.075 3.052.166h.002c.752.072 1.451.36 1.987.812.56.473.909 1.096 1 1.761v.002c.114.854.209 1.731.209 2.625 0 .193-.004.385-.013.577-.011.275-.245.49-.52.478-.276-.012-.49-.245-.479-.521.008-.177.012-.355.012-.534 0-.849-.092-1.681-.2-2.492-.002-.017-.005-.034-.007-.051-1.066.994-2.176 1.919-3.38 2.748-1.003.692-2.323.692-3.327 0-1.203-.829-2.314-1.754-3.379-2.748zm9.607-.922c-.052-.055-.109-.108-.168-.159-.387-.326-.894-.529-1.436-.581-.962-.087-1.951-.161-2.96-.161s-1.997.074-2.96.161c-.542.052-1.049.255-1.436.581-.059.051-.116.104-.168.159 1.091 1.033 2.228 1.992 3.468 2.847.661.456 1.531.456 2.192 0 1.24-.855 2.377-1.814 3.468-2.847z" fill="#2563eb" style="fill: light-dark(#2563eb, #60a5fa)"/><g fill="none" stroke="#2563eb" style="stroke: light-dark(#2563eb, #60a5fa)"><path d="m10.75 13.5c1.76 0 2.75-.99 2.75-2.75s-.99-2.75-2.75-2.75-2.75.99-2.75 2.75.99 2.75 2.75 2.75z"/><path d="m10.774 10.726.694-.694"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/forms/connect/email-notifications.svg b/resources/svg/forms/connect/email-notifications.svg
index f7bc2717e07..d66f838a496 100644
--- a/resources/svg/forms/connect/email-notifications.svg
+++ b/resources/svg/forms/connect/email-notifications.svg
@@ -1 +1 @@
-<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g id="Artboard1" transform="matrix(0.249688,0,0,0.277393,-951.560549,0)"><rect x="3811" y="0" width="801" height="721" fill="none"/><clipPath id="_clip1"><rect x="3811" y="0" width="801" height="721"/></clipPath><g clip-path="url(#_clip1)"><g transform="matrix(4.005,0,0,3.605,1198.39457,-2705.156092)"><g transform="matrix(0.877193,0,0,0.86056,53.213131,-437.69305)"><rect x="683" y="1380.593" width="228" height="232.407" fill="url(#_Linear2)"/></g><g id="Circe-font" serif:id="Circe font"><path d="M813.293,501.675C811.565,513.195 816.749,516.075 832.109,516.075C872.045,516.075 888.365,489.771 888.365,456.747C888.365,417.963 856.685,388.395 808.109,388.395C755.117,388.395 716.717,426.795 716.717,476.907C716.717,527.787 752.045,557.547 798.125,557.547C810.797,557.547 820.589,555.819 827.501,553.515L825.773,533.547C819.245,535.659 810.605,536.811 799.661,536.811C764.141,536.811 737.261,517.035 737.261,476.523C737.261,433.131 768.941,408.939 807.533,408.939C844.397,408.939 867.629,430.059 867.629,457.899C867.629,483.243 856.877,495.339 839.789,495.339L835.757,495.339L845.741,434.475C838.445,431.403 828.077,427.563 814.637,427.563C781.037,427.563 755.885,453.675 755.885,488.427C755.885,505.515 762.989,518.187 779.117,518.187C795.245,518.187 807.725,503.403 815.021,491.691L813.293,501.675ZM789.485,498.411C782.189,498.411 778.733,492.651 778.733,483.243C778.733,463.467 792.365,447.531 812.525,447.531C815.981,447.531 818.669,447.723 822.125,448.683L819.629,462.315C815.405,475.371 800.621,498.411 789.485,498.411Z" fill="white" fill-rule="nonzero" transform="matrix(0.635451,0,0,0.635451,242.360276,549.840189)"/></g></g></g></g><defs><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(228,0,0,232.406837,683,1496.796582)"><stop offset="0" stop-color="oklch(0.77 0.2 227)" stop-opacity="1"/><stop offset="1" stop-color="oklch(0.61 0.3 262)" stop-opacity="1"/></linearGradient></defs></svg>
\ No newline at end of file
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="email-notifications-gradient-a" gradientTransform="matrix(12.5 0 0 10.728002 0 5.364001)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#00c7ff"/><stop offset="1" stop-color="#0074ff"/></linearGradient><linearGradient id="email-notifications-gradient-b" gradientUnits="userSpaceOnUse" x1="8" x2="13.5" y1="10.75" y2="10.75"><stop offset="0" stop-color="#00c7ff"/><stop offset="1" stop-color="#0080ff"/></linearGradient><path d="m1.207 2.823c-.002.017-.005.034-.007.051-.108.811-.2 1.643-.2 2.492 0 .85.092 1.682.2 2.493.058.429.293.826.654 1.131.387.327.894.529 1.436.581.822.075 1.663.14 2.518.157.276.006.495.234.49.51-.006.276-.235.496-.511.49-.879-.018-1.744-.084-2.589-.161h-.002c-.752-.072-1.451-.36-1.987-.812-.56-.474-.909-1.096-1-1.762v-.002c-.114-.853-.209-1.73-.209-2.625 0-.894.095-1.77.209-2.625v-.002c.091-.665.44-1.288 1-1.761.536-.452 1.235-.74 1.987-.812h.002c.993-.091 2.012-.166 3.052-.166s2.06.075 3.052.166h.002c.752.072 1.451.36 1.987.812.56.473.909 1.096 1 1.761v.002c.114.854.209 1.731.209 2.625 0 .193-.004.385-.013.577-.011.275-.245.49-.52.478-.276-.012-.49-.245-.479-.521.008-.177.012-.355.012-.534 0-.849-.092-1.681-.2-2.492-.002-.017-.005-.034-.007-.051-1.066.994-2.176 1.919-3.38 2.748-1.003.692-2.323.692-3.327 0-1.203-.829-2.314-1.754-3.379-2.748zm9.607-.922c-.052-.055-.109-.108-.168-.159-.387-.326-.894-.529-1.436-.581-.962-.087-1.951-.161-2.96-.161s-1.997.074-2.96.161c-.542.052-1.049.255-1.436.581-.059.051-.116.104-.168.159 1.091 1.033 2.228 1.992 3.468 2.847.661.456 1.531.456 2.192 0 1.24-.855 2.377-1.814 3.468-2.847z" fill="url(#email-notifications-gradient-a)"/><g fill="none"><path d="m10.75 13.5c1.76 0 2.75-.99 2.75-2.75s-.99-2.75-2.75-2.75-2.75.99-2.75 2.75.99 2.75 2.75 2.75z" stroke="url(#email-notifications-gradient-b)"/><path d="m10.774 10.726.694-.694" stroke="#0080ff"/></g></svg>
diff --git a/resources/svg/forms/connect/ifttt.svg b/resources/svg/forms/connect/ifttt.svg
deleted file mode 100644
index 8c849404640..00000000000
--- a/resources/svg/forms/connect/ifttt.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="ifttt-gradient-a" gradientTransform="matrix(228 0 0 232.406837 683 1496.796582)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#262626"/><stop offset="1"/></linearGradient><g transform="matrix(.249688 0 0 .277393 -951.56055 0)"><path d="m3811 0h801v721h-801z" fill="none"/><path d="m683 1380.593h228v232.407h-228z" fill="url(#ifttt-gradient-a)" transform="matrix(3.51315627536 0 0 3.10231632937 1411.51313304058 -4283.03950547846)"/><path d="m0 0h42v132h-42zm270 0h-102v42h30v90h42v-90h30zm114 0h-102v42h30v90h42v-90h30zm114 0h-102v42h30v90h42v-90h30zm-342 42v-42h-96v132h42v-36h36v-42h-36v-12z" fill="#fff" fill-rule="nonzero" transform="matrix(1.13394319346 0 0 1.02069034401 3929.14803294509 293.13398680523)"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/forms/connect/webhook-small.svg b/resources/svg/forms/connect/webhook-small.svg
new file mode 100644
index 00000000000..9102437ee26
--- /dev/null
+++ b/resources/svg/forms/connect/webhook-small.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m-0 5.75c0-1.836.536-3.263 1.511-4.239.976-.975 2.403-1.511 4.239-1.511 1.774 0 3.167.501 4.138 1.414.976.917 1.54 2.26 1.606 3.99.004.114.006.229.006.346 0 .276-.224.5-.5.5s-.5-.224-.5-.5c0-.104-.002-.207-.006-.308-.054-1.425-.487-2.544-1.291-3.299-.577-.543-1.338-.893-2.264-1.049.714 1.054 1.14 2.468 1.231 4.02.379.011.759.025 1.139.042.276.012.489.246.477.522s-.246.489-.521.477c-.361-.016-.722-.029-1.082-.04-.007.21-.02.418-.039.623-.025.275-.269.478-.544.453-.274-.026-.477-.269-.452-.544.017-.183.029-.369.035-.557-.956-.017-1.91-.017-2.866 0 .06 1.818.603 3.454 1.621 4.408.028-.001.055-.002.083-.002.276-.009.507.207.516.483s-.207.507-.483.516c-.1.003-.201.005-.304.005-1.836 0-3.263-.536-4.239-1.511-.975-.976-1.511-2.403-1.511-4.239zm4.561-4.656c-.968.163-1.757.539-2.342 1.125-.713.712-1.115 1.726-1.201 2.998.771-.046 1.542-.08 2.312-.103.091-1.552.517-2.966 1.231-4.02zm2.606 3.996c-.102-1.575-.577-2.987-1.417-3.899-.84.912-1.315 2.324-1.417 3.899.945-.017 1.889-.017 2.834 0zm-2.606 5.316c-.756-1.115-1.188-2.633-1.243-4.291-.768.023-1.535.058-2.305.104.077 1.302.481 2.338 1.206 3.062.585.586 1.374.962 2.342 1.125z" fill="#9333ea" style="fill: light-dark(#9333ea, #c084fc)"/><g fill="none"><path d="m8.465 10.863c0 .024-.008.047-.023.066l-.319.401c-.057.072-.092.16-.099.252s.014.184.06.264l.187.323c.046.08.115.145.198.185.084.04.177.054.268.04l.507-.077c.024-.003.049.001.07.013l.601.347c.021.012.037.031.046.054l.187.477c.034.086.092.16.169.212.076.052.166.08.258.08h.373c.092 0 .182-.028.258-.08s.135-.126.169-.212l.187-.477c.009-.023.025-.042.046-.054l.601-.347c.021-.012.045-.017.069-.013l.508.077c.091.014.184 0 .267-.04.084-.04.153-.105.199-.185l.187-.323c.046-.08.067-.172.06-.264s-.042-.18-.099-.252l-.32-.401c-.015-.019-.024-.042-.024-.066v-.695c0-.024.009-.047.024-.066l.32-.401c.057-.072.092-.16.099-.252s-.014-.184-.06-.264l-.187-.323c-.046-.08-.115-.144-.199-.185-.083-.04-.176-.054-.267-.04l-.506.077c-.024.004-.049-.001-.07-.013l-.602-.349c-.021-.012-.037-.031-.046-.053l-.188-.476c-.034-.086-.092-.16-.168-.212-.077-.052-.167-.08-.259-.08h-.374c-.092 0-.182.028-.258.08s-.135.126-.168.212l-.188.476c-.008.023-.024.042-.046.055l-.601.347c-.021.012-.045.017-.069.013l-.508-.077c-.091-.014-.184 0-.267.04-.083.041-.153.105-.199.185l-.186.323c-.047.08-.068.172-.061.264s.042.18.099.252l.321.401c.015.019.023.042.023.066z" stroke="#9333ea" style="stroke: light-dark(#9333ea, #c084fc)"/><g stroke="#9333ea" style="stroke: light-dark(#9333ea, #c084fc)" transform="matrix(.847204 0 0 .847204 1.643735 1.606789)"><path d="m10.763 11.015c.32 0 .5-.18.5-.5s-.18-.5-.5-.5"/><path d="m10.759 11.015c-.32 0-.5-.18-.5-.5s.18-.5.5-.5"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/svg/forms/connect/webhook.svg b/resources/svg/forms/connect/webhook.svg
new file mode 100644
index 00000000000..b1d0b354170
--- /dev/null
+++ b/resources/svg/forms/connect/webhook.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="webhook-gradient" gradientTransform="matrix(11.500008 0 0 11.499958 -.000008 5.749979)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#ad66ff"/><stop offset="1" stop-color="#7500fb"/></linearGradient><path d="m-0 5.75c0-1.836.536-3.263 1.511-4.239.976-.975 2.403-1.511 4.239-1.511 1.774 0 3.167.501 4.138 1.414.976.917 1.54 2.26 1.606 3.99.004.114.006.229.006.346 0 .276-.224.5-.5.5s-.5-.224-.5-.5c0-.104-.002-.207-.006-.308-.054-1.425-.487-2.544-1.291-3.299-.577-.543-1.338-.893-2.264-1.049.714 1.054 1.14 2.468 1.231 4.02.379.011.759.025 1.139.042.276.012.489.246.477.522s-.246.489-.521.477c-.361-.016-.722-.029-1.082-.04-.007.21-.02.418-.039.623-.025.275-.269.478-.544.453-.274-.026-.477-.269-.452-.544.017-.183.029-.369.035-.557-.956-.017-1.91-.017-2.866 0 .06 1.818.603 3.454 1.621 4.408.028-.001.055-.002.083-.002.276-.009.507.207.516.483s-.207.507-.483.516c-.1.003-.201.005-.304.005-1.836 0-3.263-.536-4.239-1.511-.975-.976-1.511-2.403-1.511-4.239zm4.561-4.656c-.968.163-1.757.539-2.342 1.125-.713.712-1.115 1.726-1.201 2.998.771-.046 1.542-.08 2.312-.103.091-1.552.517-2.966 1.231-4.02zm2.606 3.996c-.102-1.575-.577-2.987-1.417-3.899-.84.912-1.315 2.324-1.417 3.899.945-.017 1.889-.017 2.834 0zm-2.606 5.316c-.756-1.115-1.188-2.633-1.243-4.291-.768.023-1.535.058-2.305.104.077 1.302.481 2.338 1.206 3.062.585.586 1.374.962 2.342 1.125z" fill="url(#webhook-gradient)"/><g fill="none"><path d="m8.465 10.863c0 .024-.008.047-.023.066l-.319.401c-.057.072-.092.16-.099.252s.014.184.06.264l.187.323c.046.08.115.145.198.185.084.04.177.054.268.04l.507-.077c.024-.003.049.001.07.013l.601.347c.021.012.037.031.046.054l.187.477c.034.086.092.16.169.212.076.052.166.08.258.08h.373c.092 0 .182-.028.258-.08s.135-.126.169-.212l.187-.477c.009-.023.025-.042.046-.054l.601-.347c.021-.012.045-.017.069-.013l.508.077c.091.014.184 0 .267-.04.084-.04.153-.105.199-.185l.187-.323c.046-.08.067-.172.06-.264s-.042-.18-.099-.252l-.32-.401c-.015-.019-.024-.042-.024-.066v-.695c0-.024.009-.047.024-.066l.32-.401c.057-.072.092-.16.099-.252s-.014-.184-.06-.264l-.187-.323c-.046-.08-.115-.144-.199-.185-.083-.04-.176-.054-.267-.04l-.506.077c-.024.004-.049-.001-.07-.013l-.602-.349c-.021-.012-.037-.031-.046-.053l-.188-.476c-.034-.086-.092-.16-.168-.212-.077-.052-.167-.08-.259-.08h-.374c-.092 0-.182.028-.258.08s-.135.126-.168.212l-.188.476c-.008.023-.024.042-.046.055l-.601.347c-.021.012-.045.017-.069.013l-.508-.077c-.091-.014-.184 0-.267.04-.083.041-.153.105-.199.185l-.186.323c-.047.08-.068.172-.061.264s.042.18.099.252l.321.401c.015.019.023.042.023.066z" stroke="#871fff"/><g stroke="#70f" transform="matrix(.847204 0 0 .847204 1.643735 1.606789)"><path d="m10.763 11.015c.32 0 .5-.18.5-.5s-.18-.5-.5-.5"/><path d="m10.759 11.015c-.32 0-.5-.18-.5-.5s.18-.5.5-.5"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/svg/forms/connect/zapier.svg b/resources/svg/forms/connect/zapier.svg
deleted file mode 100644
index 5648b3ca186..00000000000
--- a/resources/svg/forms/connect/zapier.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="zapier-gradient-a" gradientTransform="matrix(228 0 0 232.406837 683 1496.796582)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#ff6f3c" style="stop-color:oklch(0.74 0.22 43)"/><stop offset="1" stop-color="#ff4100" style="stop-color:oklch(0.68 0.27 36)"/></linearGradient><clipPath id="zapier-clip-b"><path clip-rule="evenodd" d="m3811 0h801v721h-801z"/></clipPath><g transform="matrix(.249688 0 0 .277393 -951.56055 0)"><path d="m3811 0h801v721h-801z" fill="none"/><g clip-path="url(#zapier-clip-b)"><path d="m683 1380.593h228v232.407h-228z" fill="url(#zapier-gradient-a)" transform="matrix(3.51315627536 0 0 3.10231632937 1411.51313304058 -4283.03950547846)"/><g fill="#fffdf9" fill-rule="nonzero"><path d="m22.605 82.635-.021-.067 13.523-12.381v-5.965h-21.696v5.965h12.959l.022.057-13.392 12.391v5.966h22.325v-5.966z" transform="matrix(5.10312365354 0 0 4.59344795004 3830.49859263519 15.99388040951)"/><path d="m49.641 63.655c-2.502 0-4.542.378-6.119 1.133-1.468.657-2.705 1.741-3.55 3.111-.809 1.378-1.316 2.912-1.49 4.501l6.584.925c.238-1.403.714-2.397 1.428-2.983.812-.613 1.813-.922 2.829-.875 1.336 0 2.306.357 2.908 1.072.597.714.9 1.703.9 3.007v.65h-6.33c-3.221 0-5.536.715-6.943 2.144-1.408 1.428-2.11 3.314-2.108 5.658 0 2.4.703 4.186 2.108 5.358 1.405 1.171 3.171 1.753 5.3 1.746 2.641 0 4.673-.908 6.094-2.725.84-1.117 1.439-2.395 1.761-3.754h.24l.907 5.965h5.965v-15.106c0-3.122-.823-5.54-2.468-7.255-1.646-1.714-4.317-2.572-8.016-2.572zm2.086 18.621c-.946.79-2.186 1.183-3.729 1.183-1.271 0-2.155-.223-2.65-.668-.242-.211-.434-.472-.563-.766-.129-.293-.192-.611-.184-.931-.014-.302.034-.604.14-.887s.269-.542.478-.76c.227-.212.494-.376.785-.482.292-.107.602-.153.912-.136h6.226v.411c.012.581-.109 1.156-.354 1.683-.245.526-.608.989-1.061 1.353z" transform="matrix(5.10312365354 0 0 4.59344795004 3830.49859263519 15.99388040951)"/><path d="m89.137 64.222h7.048v24.383h-7.048z" transform="matrix(5.10312365354 0 0 4.59344795004 3830.49859263519 15.99388040951)"/><path d="m137.822 64.222c-1.99 0-3.56.702-4.708 2.107-.824 1.01-1.45 2.502-1.878 4.476h-.208l-.921-6.583h-6.019v24.379h7.048v-12.502c0-1.577.369-2.785 1.107-3.626s2.1-1.261 4.086-1.261h2.676v-6.99z" transform="matrix(5.10312365354 0 0 4.59344795004 3830.49859263519 15.99388040951)"/><path d="m117.071 65.016c-1.646-.978-3.721-1.467-6.226-1.464-3.944 0-7.03 1.123-9.259 3.368-2.229 2.246-3.343 5.341-3.343 9.287-.057 2.386.464 4.75 1.518 6.891.964 1.908 2.467 3.491 4.322 4.554 1.867 1.079 4.087 1.62 6.662 1.622 2.226 0 4.086-.343 5.579-1.029 1.404-.616 2.626-1.581 3.551-2.804.88-1.2 1.534-2.551 1.928-3.986l-6.072-1.701c-.255.934-.748 1.785-1.429 2.472-.686.686-1.835 1.029-3.447 1.029-1.917 0-3.346-.549-4.286-1.647-.682-.793-1.111-1.925-1.3-3.393h16.627c.068-.686.104-1.261.104-1.725v-1.518c.04-2.04-.381-4.062-1.232-5.916-.797-1.688-2.086-3.097-3.697-4.04zm-6.43 4.347c2.858 0 4.478 1.407 4.861 4.219h-10.108c.16-.938.549-1.823 1.132-2.575.926-1.098 2.298-1.646 4.115-1.644z" transform="matrix(5.10312365354 0 0 4.59344795004 3830.49859263519 15.99388040951)"/><path d="m92.745 54.395c-.531-.018-1.059.071-1.554.261-.496.191-.948.478-1.329.847-.377.372-.672.818-.867 1.31s-.285 1.019-.266 1.548c-.019.532.072 1.062.267 1.558s.49.946.867 1.322.827.671 1.323.866 1.026.285 1.559.266c.528.019 1.056-.071 1.548-.266s.938-.49 1.309-.867c.369-.381.657-.832.847-1.327.189-.495.277-1.023.257-1.552.025-.527-.061-1.052-.251-1.544-.191-.491-.481-.938-.854-1.311-.372-.372-.818-.663-1.31-.854-.491-.191-1.02-.281-1.546-.257z" transform="matrix(5.10312365354 0 0 4.59344795004 3830.49859263519 15.99388040951)"/><path d="m78.185 63.552c-2.4 0-4.329.753-5.787 2.261-1.078 1.117-1.87 2.784-2.375 5.001h-.225l-.922-6.584h-6.019v31.377h7.048v-12.924h.257c.215.862.517 1.7.9 2.501.597 1.305 1.574 2.398 2.804 3.136 1.276.696 2.713 1.042 4.165 1.004 2.951 0 5.198-1.149 6.741-3.447s2.314-5.505 2.314-9.62c0-3.974-.746-7.085-2.239-9.333s-3.714-3.372-6.662-3.372zm.714 17.667c-.821 1.191-2.107 1.786-3.857 1.786-.722.033-1.441-.106-2.099-.406-.657-.3-1.233-.752-1.681-1.319-.912-1.146-1.367-2.714-1.364-4.705v-.464c0-2.022.455-3.57 1.364-4.644.91-1.074 2.17-1.605 3.78-1.593 1.781 0 3.075.566 3.882 1.697.808 1.131 1.211 2.709 1.211 4.733.005 2.093-.404 3.731-1.229 4.915z" transform="matrix(5.10312365354 0 0 4.59344795004 3830.49859263519 15.99388040951)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/resources/svg/icons/globe-setting.svg b/resources/svg/icons/globe-setting.svg
new file mode 100644
index 00000000000..2b69fb2a7df
--- /dev/null
+++ b/resources/svg/icons/globe-setting.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+  <g id="globe-website-setting-1--globe-website-setting-gear-browser-internet-vpn-network">
+    <path id="Vector" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11 5.75c0 -0.11045 -0.002 -0.21931 -0.0061 -0.32657C10.8742 2.26779 8.99955 0.5 5.75 0.5 2.39 0.5 0.5 2.39 0.5 5.75S2.39 11 5.75 11c0.09703 0 0.19283 -0.0016 0.28739 -0.0047" stroke-width="1"></path>
+    <path id="Vector_2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.75002 11c-1.26515 -1.06798 -1.9385 -3.05306 -1.9385 -5.25S4.48487 1.56798 5.75002 0.5c1.26516 1.06798 1.93851 3.05306 1.93851 5.25 0 0.31943 -0.01424 0.63438 -0.04246 0.94269" stroke-width="1"></path>
+    <path id="Vector 2472" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.5 5.74998c2.9376 -0.1929 5.85556 -0.22432 8.78676 -0.09428" stroke-width="1"></path>
+    <path id="Vector_3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.46466 10.8626c0.00007 0.0242 -0.00804 0.0476 -0.02303 0.0665l-0.31848 0.4012c-0.05761 0.0721 -0.09213 0.1599 -0.09905 0.252 -0.00693 0.092 0.01407 0.184 0.06025 0.2639l0.18674 0.3232c0.04606 0.08 0.11517 0.1442 0.19831 0.1843s0.17643 0.0541 0.26769 0.0404l0.50736 -0.0772c0.02399 -0.0034 0.04842 0.0013 0.0695 0.0132l0.60115 0.3471c0.02089 0.0123 0.03709 0.0312 0.04604 0.0537l0.18716 0.4775c0.0335 0.0858 0.0921 0.1596 0.1682 0.2116 0.076 0.052 0.166 0.0799 0.2582 0.08h0.3734c0.0922 -0.0001 0.1822 -0.028 0.2582 -0.08 0.0761 -0.052 0.1347 -0.1258 0.1682 -0.2116l0.1872 -0.4775c0.0089 -0.0225 0.0251 -0.0414 0.046 -0.0537l0.6012 -0.3471c0.021 -0.0119 0.0455 -0.0166 0.0695 -0.0132l0.5073 0.0772c0.0913 0.0137 0.1846 -0.0003 0.2677 -0.0404s0.1523 -0.1043 0.1983 -0.1843l0.1868 -0.3232c0.0461 -0.0799 0.0671 -0.1719 0.0602 -0.2639 -0.0069 -0.0921 -0.0414 -0.1799 -0.099 -0.252l-0.3202 -0.4012c-0.015 -0.0189 -0.0231 -0.0423 -0.0231 -0.0665v-0.6941c0 -0.0241 0.0081 -0.0476 0.0231 -0.0665l0.3202 -0.40118c0.0576 -0.07211 0.0921 -0.15991 0.099 -0.25195s-0.0141 -0.18402 -0.0602 -0.26393l-0.1868 -0.32318c-0.046 -0.07998 -0.1152 -0.14421 -0.1983 -0.18429 -0.0831 -0.04009 -0.1764 -0.05416 -0.2677 -0.04039l-0.5061 0.07717c-0.024 0.0034 -0.0484 -0.00125 -0.0695 -0.01322l-0.6024 -0.34875c-0.0209 -0.0123 -0.0371 -0.0312 -0.046 -0.05372l-0.1881 -0.47581c-0.0335 -0.08583 -0.0921 -0.15957 -0.1681 -0.21159 -0.0761 -0.05203 -0.1661 -0.07991 -0.2582 -0.08003h-0.3743c-0.0922 0.00012 -0.1822 0.028 -0.2582 0.08003 -0.0761 0.05202 -0.1347 0.12576 -0.1682 0.21159l-0.18716 0.47581c-0.00863 0.02315 -0.02487 0.04269 -0.04605 0.05542l-0.60115 0.34705c-0.02108 0.01194 -0.04551 0.01658 -0.0695 0.01322l-0.50735 -0.07717c-0.09126 -0.01377 -0.18456 0.0003 -0.26769 0.04039 -0.08314 0.04008 -0.15225 0.10431 -0.19831 0.18429l-0.18674 0.32318c-0.04618 0.07991 -0.06718 0.17189 -0.06026 0.26393s0.04144 0.17984 0.09906 0.25195l0.32018 0.40118c0.01499 0.0189 0.0231 0.0424 0.02303 0.0665z" stroke-width="1"></path>
+    <g id="Group 5612">
+      <path id="Union" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.7627 11.0155c0.32 0 0.5 -0.18 0.5 -0.5s-0.18 -0.5 -0.5 -0.5" stroke-width="1"></path>
+      <path id="Union_2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.7594 11.0155c-0.32 0 -0.5 -0.18 -0.5 -0.5s0.18 -0.5 0.5 -0.5" stroke-width="1"></path>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/resources/views/forms/automagic-email.antlers.html b/resources/views/forms/automagic-email.antlers.html
index 83e3cec7d1b..3d8ad5af299 100644
--- a/resources/views/forms/automagic-email.antlers.html
+++ b/resources/views/forms/automagic-email.antlers.html
@@ -1,25 +1,29 @@
-{{ fields }}
-    <b>{{ display }}:</b>
-    {{ if value }}
-        {{ if (fieldtype == "form_upload" && config:store) || fieldtype == "assets" }}
-            {{ value }}
-                {{ permalink }}
-                {{ if !last }},{{ /if }}
-            {{ /value }}
-        {{ elseif fieldtype == "select" && !config:multiple }}
-            {{ (value:label ?? value) | sanitize }}
-        {{ elseif fieldtype == "radio" }}
-            {{ (value:label ?? value) | sanitize }}
-        {{ elseif fieldtype == "select" || fieldtype == "checkboxes" || fieldtype == "dictionary" }}
-            {{ value }}
-                {{ (label ?? value) | sanitize }}
-                {{ if !last }},{{ /if }}
-            {{ /value }}
-        {{ elseif value|is_iterable }}
-            {{ value | json | sanitize }}
-        {{ else }}
-            {{ value | sanitize | nl2br }}
+{{ if email_config:body }}
+    {{ email_config:body | sanitize | nl2br }}
+{{ else }}
+    {{ fields }}
+        <b>{{ display }}:</b>
+        {{ if value }}
+            {{ if (fieldtype == "form_upload" && config:store) || fieldtype == "assets" }}
+                {{ value }}
+                    {{ permalink }}
+                    {{ if !last }},{{ /if }}
+                {{ /value }}
+            {{ elseif fieldtype == "select" && !config:multiple }}
+                {{ (value:label ?? value) | sanitize }}
+            {{ elseif fieldtype == "radio" }}
+                {{ (value:label ?? value) | sanitize }}
+            {{ elseif fieldtype == "select" || fieldtype == "checkboxes" || fieldtype == "dictionary" }}
+                {{ value }}
+                    {{ (label ?? value) | sanitize }}
+                    {{ if !last }},{{ /if }}
+                {{ /value }}
+            {{ elseif value|is_iterable }}
+                {{ value | json | sanitize }}
+            {{ else }}
+                {{ value | sanitize | nl2br }}
+            {{ /if }}
         {{ /if }}
-    {{ /if }}
-    <br>
-{{ /fields }}
+        <br>
+    {{ /fields }}
+{{ /if }}
diff --git a/routes/cp.php b/routes/cp.php
index 6f65ac5ae5c..0422a5d7cfa 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use Statamic\Facades\FormConnector;
 use Statamic\Facades\OAuth;
 use Statamic\Facades\TwoFactor;
 use Statamic\Facades\Utility;
@@ -370,7 +371,10 @@
     Route::post('forms/{form}/builder/fieldset-previews', FormFieldsetPreviewsController::class)->name('forms.builder.fieldset-previews');
     Route::get('forms/{form}/logic', [FormLogicController::class, 'edit'])->name('forms.logic.edit');
     Route::patch('forms/{form}/logic', [FormLogicController::class, 'update'])->name('forms.logic.update');
-    Route::get('forms/{form}/connect', FormConnectController::class)->name('forms.connect.index');
+    Route::get('forms/{form}/connect', [FormConnectController::class, 'index'])->name('forms.connect.index');
+    Route::get('forms/{form}/connect/{connector}', [FormConnectController::class, 'edit'])->name('forms.connect.edit');
+    Route::patch('forms/{form}/connect/{connector}', [FormConnectController::class, 'update'])->name('forms.connect.update');
+    FormConnector::routes();
     Route::get('forms/{form}/export/{type}', [FormExportController::class, 'export'])->name('forms.export');
 
     Route::post('users/actions', [UserActionController::class, 'run'])->name('users.actions.run');
diff --git a/src/Actions/DuplicateForm.php b/src/Actions/DuplicateForm.php
index 38b210d5801..cd9e089400f 100644
--- a/src/Actions/DuplicateForm.php
+++ b/src/Actions/DuplicateForm.php
@@ -54,7 +54,7 @@ public function run($items, $values)
                 ->title($values['title'])
                 ->honeypot($original->honeypot())
                 ->store($original->store())
-                ->email($original->email())
+                ->connections($original->connections())
                 ->formFields($original->formFields()->contents())
                 ->data($original->data());
 
diff --git a/src/Console/Commands/stubs/widget.php.stub b/src/Console/Commands/stubs/widget.php.stub
index b9b60ac4f79..929b3182252 100644
--- a/src/Console/Commands/stubs/widget.php.stub
+++ b/src/Console/Commands/stubs/widget.php.stub
@@ -2,7 +2,7 @@
 
 namespace DummyNamespace;
 
-use Statamic\Widgets\VueComponent;
+use Statamic\Support\VueComponent;
 use Statamic\Widgets\Widget;
 
 class DummyClass extends Widget
diff --git a/src/Contracts/Forms/Form.php b/src/Contracts/Forms/Form.php
index 92b38481753..3f0ca9dbf74 100644
--- a/src/Contracts/Forms/Form.php
+++ b/src/Contracts/Forms/Form.php
@@ -59,9 +59,19 @@ public function makeSubmission();
      */
     public function honeypot($honeypot = null);
 
+    //     /**
+    //      * Get or set the connection configs.
+    //      *
+    //      * @param  mixed  $connections
+    //      * @return \Illuminate\Support\Collection
+    //      */
+    //     public function connections($connections = null);
+
     /**
      * Get or set the email config.
      *
+     * @deprecated Use connections() instead.
+     *
      * @param  array|null  $email
      * @return array
      */
diff --git a/src/Facades/FormConnector.php b/src/Facades/FormConnector.php
new file mode 100644
index 00000000000..2a05bbec4e7
--- /dev/null
+++ b/src/Facades/FormConnector.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Statamic\Facades;
+
+use Illuminate\Support\Facades\Facade;
+use Statamic\Forms\Connectors\ConnectorRepository;
+
+/**
+ * @method static \Illuminate\Support\Collection all()
+ * @method static \Statamic\Forms\Connectors\Connector|null find(string $handle)
+ * @method static void routes()
+ *
+ * @see \Statamic\Forms\Connectors\ConnectorRepository
+ */
+class FormConnector extends Facade
+{
+    protected static function getFacadeAccessor()
+    {
+        return ConnectorRepository::class;
+    }
+}
diff --git a/src/Fieldtypes/FormFields.php b/src/Fieldtypes/FormFields.php
new file mode 100644
index 00000000000..9bb23f507dc
--- /dev/null
+++ b/src/Fieldtypes/FormFields.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace Statamic\Fieldtypes;
+
+use Facades\Statamic\Forms\Fields\FormFieldtypeRepository;
+use Illuminate\Support\Collection;
+use Statamic\Contracts\Forms\Form;
+use Statamic\Facades\Form as Forms;
+use Statamic\Fields\Fieldtype;
+use Statamic\Forms\Fields\FormField;
+use Statamic\Support\Str;
+
+use function Statamic\trans as __;
+
+class FormFields extends Fieldtype
+{
+    use HasSelectOptions;
+
+    protected $selectable = false;
+
+    protected function configFieldItems(): array
+    {
+        return [
+            [
+                'display' => __('Selection & Options'),
+                'fields' => [
+                    'form' => [
+                        'display' => __('Form'),
+                        'type' => 'text',
+                        'width' => 50,
+                    ],
+                    'categories' => [
+                        'display' => __('Categories'),
+                        'type' => 'select',
+                        'options' => $this->categoryOptions(),
+                        'multiple' => true,
+                        'width' => 50,
+                    ],
+                    'prefix' => [
+                        'display' => __('Prefix'),
+                        'type' => 'text',
+                        'width' => 50,
+                    ],
+                    'taggable' => [
+                        'display' => __('Allow additions'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                    ],
+                ],
+            ],
+            [
+                'display' => __('Appearance'),
+                'fields' => [
+                    'placeholder' => [
+                        'display' => __('Placeholder'),
+                        'instructions' => __('statamic::fieldtypes.select.config.placeholder'),
+                        'type' => 'text',
+                        'width' => 50,
+                    ],
+                    'clearable' => [
+                        'display' => __('Clearable'),
+                        'instructions' => __('statamic::fieldtypes.select.config.clearable'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                    ],
+                    'searchable' => [
+                        'display' => __('Searchable'),
+                        'instructions' => __('statamic::fieldtypes.select.config.searchable'),
+                        'type' => 'toggle',
+                        'default' => true,
+                        'width' => 50,
+                    ],
+                ],
+            ],
+            [
+                'display' => __('Boundaries & Limits'),
+                'fields' => [
+                    'multiple' => [
+                        'display' => __('Multiple'),
+                        'instructions' => __('statamic::fieldtypes.select.config.multiple'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                    ],
+                    'max_items' => [
+                        'display' => __('Max Items'),
+                        'instructions' => __('statamic::messages.max_items_instructions'),
+                        'type' => 'integer',
+                        'min' => 1,
+                        'width' => 50,
+                        'if' => ['multiple' => true],
+                    ],
+                ],
+            ],
+        ];
+    }
+
+    private function categoryOptions(): array
+    {
+        return FormFieldtypeRepository::classes()
+            ->unique()
+            ->flatMap(fn (string $class) => app($class)->categories())
+            ->push('other')
+            ->unique()
+            ->mapWithKeys(fn (string $category) => [$category => __(Str::title(Str::humanize($category)))])
+            ->all();
+    }
+
+    protected function getOptions(): array
+    {
+        $prefix = $this->config('prefix');
+
+        return $this->fields()
+            ->map(fn (FormField $field) => [
+                'value' => $prefix.$field->handle(),
+                'label' => $field->display(),
+                'icon' => $field->fieldtype()->icon(),
+                'category' => $this->category($field),
+            ])
+            ->values()
+            ->all();
+    }
+
+    private function fields(): Collection
+    {
+        if (! $form = $this->form()) {
+            return collect();
+        }
+
+        $categories = $this->config('categories');
+
+        return $form->formFields()->fields()->filter(function (FormField $field) use ($categories): bool {
+            return $categories
+                ? in_array($this->category($field), $categories)
+                : $field->fieldtype()->collectsValue();
+        });
+    }
+
+    private function category(FormField $field): string
+    {
+        return $field->fieldtype()->categories()[0] ?? 'other';
+    }
+
+    private function form(): ?Form
+    {
+        if ($handle = $this->config('form')) {
+            return Forms::find($handle);
+        }
+
+        $parent = $this->field?->parent();
+
+        return $parent instanceof Form ? $parent : null;
+    }
+}
diff --git a/src/Forms/Connectors/ConnectionLogic.php b/src/Forms/Connectors/ConnectionLogic.php
new file mode 100644
index 00000000000..978d33e583d
--- /dev/null
+++ b/src/Forms/Connectors/ConnectionLogic.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Statamic\Forms\Connectors;
+
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Forms\Logic\RuleEvaluator;
+use Statamic\Support\Arr;
+use Statamic\Support\Str;
+
+class ConnectionLogic
+{
+    public static function preProcess(array $conditions): array
+    {
+        return collect($conditions)
+            ->map(fn (array $condition): array => ['_id' => Str::random(8), ...$condition])
+            ->all();
+    }
+
+    public static function process(array $conditions): ?array
+    {
+        $conditions = collect($conditions)
+            ->map(fn ($condition) => Arr::only($condition, ['field', 'operator', 'value', 'join']))
+            ->filter(fn ($condition) => filled(Arr::get($condition, 'field')))
+            ->values();
+
+        return $conditions->isNotEmpty() ? $conditions->all() : null;
+    }
+
+    public static function passes(array $config, Submission $submission): bool
+    {
+        if (($config['enabled'] ?? true) === false) {
+            return false;
+        }
+
+        if (empty($config['conditions'])) {
+            return true;
+        }
+
+        return (new RuleEvaluator)->passes($config['conditions'], $submission->toArray());
+    }
+}
diff --git a/src/Forms/Connectors/Connector.php b/src/Forms/Connectors/Connector.php
new file mode 100644
index 00000000000..40b2673b36c
--- /dev/null
+++ b/src/Forms/Connectors/Connector.php
@@ -0,0 +1,239 @@
+<?php
+
+namespace Statamic\Forms\Connectors;
+
+use Illuminate\Contracts\Validation\CompilableRules;
+use Illuminate\Routing\Router;
+use LogicException;
+use Statamic\Contracts\Forms\Form;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Extend\HasHandle;
+use Statamic\Extend\HasTitle;
+use Statamic\Extend\RegistersItself;
+use Statamic\Fields\Blueprint;
+use Statamic\Fields\Fields;
+use Statamic\Fields\Validator;
+use Statamic\Statamic;
+use Statamic\Support\Arr;
+use Statamic\Support\Str;
+use Statamic\Support\VueComponent;
+
+abstract class Connector
+{
+    use HasHandle, HasTitle, RegistersItself {
+        handle as protected traitHandle;
+    }
+
+    protected $description;
+    protected $icon;
+    protected $smallIcon;
+    protected $developer;
+    protected ?Form $form = null;
+    protected array $connections = [];
+
+    public static function handle(): string
+    {
+        return Str::removeRight(static::traitHandle(), '_connector');
+    }
+
+    public function setForm(Form $form): static
+    {
+        $this->form = $form;
+
+        return $this;
+    }
+
+    public function form(): Form
+    {
+        if (! $this->form) {
+            throw new LogicException('No form has been set on the ['.static::handle().'] connector.');
+        }
+
+        return $this->form;
+    }
+
+    public function setConnections(array $connections): static
+    {
+        $this->connections = static::normalizeConnections($connections);
+
+        return $this;
+    }
+
+    public function connections(): array
+    {
+        return $this->connections;
+    }
+
+    public function forForm(Form $form): static
+    {
+        return $this->setForm($form)->setConnections($form->connections()->get(static::handle(), []));
+    }
+
+    public function description(): ?string
+    {
+        return $this->description;
+    }
+
+    public function icon(): ?string
+    {
+        if (! $this->icon) {
+            return null;
+        }
+
+        return Str::startsWith($this->icon, '<svg') ? $this->icon : Statamic::svg('icons/'.$this->icon);
+    }
+
+    public function smallIcon(): ?string
+    {
+        if (! $this->smallIcon) {
+            return $this->icon();
+        }
+
+        return Str::startsWith($this->smallIcon, '<svg') ? $this->smallIcon : Statamic::svg('icons/'.$this->smallIcon);
+    }
+
+    public function developer(): ?string
+    {
+        return $this->developer;
+    }
+
+    public static function normalizeConnections(mixed $config): array
+    {
+        return collect(is_array($config) && array_is_list($config) ? $config : [$config])
+            ->filter(fn ($connection) => is_array($connection))
+            ->values()
+            ->all();
+    }
+
+    public function count(): ?int
+    {
+        return count($this->connections());
+    }
+
+    public function isConfigured(): bool
+    {
+        return true;
+    }
+
+    public function finalized(Submission $submission): object|array
+    {
+        return collect($this->connections())
+            ->filter(fn (array $connection) => ConnectionLogic::passes($connection, $submission))
+            ->map(fn (array $connection) => $this->job($submission, $connection))
+            ->filter()
+            ->values()
+            ->all();
+    }
+
+    abstract protected function job(Submission $submission, array $connection): ?object;
+
+    abstract public function render(): VueComponent;
+
+    abstract public function blueprint(): Blueprint;
+
+    protected function connectionFields(array $connection): Fields
+    {
+        return $this->blueprint()->fields()->addValues($connection)->preProcess();
+    }
+
+    protected function connectionMeta(array $connection): array
+    {
+        return $this->connectionFields($connection)->meta()->all();
+    }
+
+    protected function blueprintProps(): array
+    {
+        $blueprint = $this->blueprint();
+        $fields = $blueprint->fields()->preProcess();
+
+        return [
+            'blueprint' => $blueprint->toPublishArray(),
+            'meta' => collect($this->connections())
+                ->filter(fn (array $connection): bool => isset($connection['id']))
+                ->mapWithKeys(fn (array $connection): array => [
+                    $connection['id'] => $this->connectionMeta($connection),
+                ])
+                ->all(),
+            'defaults' => [
+                'values' => $fields->values()->all(),
+                'meta' => $fields->meta()->all(),
+            ],
+        ];
+    }
+
+    public function preProcess(array $connections): array
+    {
+        return collect(static::normalizeConnections($connections))
+            ->map(fn (array $connection): array => [
+                ...$this->preProcessConnection($connection),
+                'id' => Arr::get($connection, 'id') ?? Str::random(8),
+                'enabled' => Arr::get($connection, 'enabled') !== false,
+                'conditions' => ConnectionLogic::preProcess(Arr::get($connection, 'conditions') ?? []),
+            ])
+            ->all();
+    }
+
+    protected function preProcessConnection(array $connection): array
+    {
+        return $this->connectionFields($connection)->values()->all();
+    }
+
+    public function rules(): array
+    {
+        $connectionRules = collect($this->connectionRules());
+
+        // Laravel only compiles rules like Rule::forEach() when they're the key's entire value, so they can't be merged.
+        [$compilable, $connectionRules] = $connectionRules->partition(fn ($rules) => $rules instanceof CompilableRules);
+
+        return [
+            '*' => ['array'],
+            ...collect($this->blueprintRules())
+                ->mergeRecursive($connectionRules->map(fn ($rules) => is_object($rules) ? [$rules] : Validator::explodeRules($rules)))
+                ->merge($compilable)
+                ->mapWithKeys(fn ($rules, $key) => ['*.'.$key => $rules])
+                ->all(),
+            '*.enabled' => ['nullable', 'boolean'],
+            '*.conditions' => ['nullable', 'array'],
+            '*.conditions.*' => ['array'],
+        ];
+    }
+
+    protected function connectionRules(): array
+    {
+        return [];
+    }
+
+    // Only top-level field rules can be derived without values. Grid sub-field rules belong in connectionRules().
+    private function blueprintRules(): array
+    {
+        $fields = $this->blueprint()->fields();
+
+        return Arr::only($fields->validator()->withContext(['prefix' => '*.'])->rules(), $fields->all()->keys()->all());
+    }
+
+    public function process(array $connections): array
+    {
+        return collect(static::normalizeConnections($connections))
+            ->map(function (array $connection): array {
+                $connection = Arr::removeNullValues($connection);
+
+                return Arr::removeNullValues([
+                    'id' => Arr::get($connection, 'id') ?? Str::random(8),
+                    ...$this->processConnection(Arr::except($connection, ['id', 'enabled', 'conditions'])),
+                    'enabled' => Arr::get($connection, 'enabled') === false ? false : null,
+                    'conditions' => ConnectionLogic::process(Arr::get($connection, 'conditions') ?? []),
+                ]);
+            })
+            ->all();
+    }
+
+    protected function processConnection(array $connection): array
+    {
+        return $this->blueprint()->fields()->addValues($connection)->process()->values()->all();
+    }
+
+    public function routes(Router $router): void
+    {
+        //
+    }
+}
diff --git a/src/Forms/Connectors/ConnectorRepository.php b/src/Forms/Connectors/ConnectorRepository.php
new file mode 100644
index 00000000000..02f3e02e44e
--- /dev/null
+++ b/src/Forms/Connectors/ConnectorRepository.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Statamic\Forms\Connectors;
+
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Route;
+
+class ConnectorRepository
+{
+    public function all(): Collection
+    {
+        return app('statamic.form-connectors')
+            ->map(fn ($class) => app($class))
+            ->filter()
+            ->values();
+    }
+
+    public function find(string $handle): ?Connector
+    {
+        return ($class = app('statamic.form-connectors')->get($handle)) ? app($class) : null;
+    }
+
+    public function routes(): void
+    {
+        Route::prefix('forms/{form}/connect')->name('forms.connect.')->group(function () {
+            $this->all()->each(function (Connector $connector) {
+                Route::name($connector::handle().'.')
+                    ->prefix($connector::handle())
+                    ->middleware('can:edit,form')
+                    ->group(fn () => $connector->routes(Route::getFacadeRoot()));
+            });
+        });
+    }
+}
diff --git a/src/Forms/Connectors/Email.php b/src/Forms/Connectors/Email.php
new file mode 100644
index 00000000000..cfd982c7b9a
--- /dev/null
+++ b/src/Forms/Connectors/Email.php
@@ -0,0 +1,243 @@
+<?php
+
+namespace Statamic\Forms\Connectors;
+
+use Illuminate\Routing\Router;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Facades\Blueprint;
+use Statamic\Fields\Fields;
+use Statamic\Forms\Connectors\Rules\EmailConnectionAddress;
+use Statamic\Forms\Connectors\Rules\EmailConnectionView;
+use Statamic\Http\Controllers\CP\Forms\EmailConnectionPreviewController;
+use Statamic\Statamic;
+use Statamic\Support\Arr;
+use Statamic\Support\VueComponent;
+
+use function Statamic\trans as __;
+
+class Email extends Connector
+{
+    protected $developer = 'Statamic';
+
+    public function description(): ?string
+    {
+        return __('statamic::messages.email_connector_description');
+    }
+
+    public function icon(): ?string
+    {
+        return Statamic::svg('forms/connect/email-notifications');
+    }
+
+    public function smallIcon(): ?string
+    {
+        return Statamic::svg('forms/connect/email-notifications-small');
+    }
+
+    protected function job(Submission $submission, array $connection): ?object
+    {
+        $class = config('statamic.forms.send_email_job');
+
+        return new $class($submission, $submission->site(), $connection);
+    }
+
+    public function render(): VueComponent
+    {
+        return VueComponent::render('email-connector', [
+            ...$this->blueprintProps(),
+            'previewUrl' => cp_route('forms.connect.email.preview', $this->form()->handle()),
+        ]);
+    }
+
+    protected function connectionFields(array $connection): Fields
+    {
+        return parent::connectionFields($this->convertLegacyAddresses($connection));
+    }
+
+    private function convertLegacyAddresses(array $config): array
+    {
+        foreach (['to', 'cc', 'bcc', 'reply_to'] as $handle) {
+            if (isset($config[$handle]) && is_string($config[$handle])) {
+                $config[$handle] = array_map(trim(...), explode(',', $config[$handle]));
+            }
+        }
+
+        return $config;
+    }
+
+    protected function connectionRules(): array
+    {
+        return [
+            'to' => [new EmailConnectionAddress($this->form())],
+            'cc' => [new EmailConnectionAddress($this->form())],
+            'bcc' => [new EmailConnectionAddress($this->form())],
+            'from' => [new EmailConnectionAddress($this->form())],
+            'reply_to' => [new EmailConnectionAddress($this->form())],
+            'html' => [new EmailConnectionView],
+            'text' => [new EmailConnectionView],
+        ];
+    }
+
+    protected function processConnection(array $connection): array
+    {
+        $values = parent::processConnection($connection);
+
+        return [
+            ...$values,
+            'markdown' => Arr::get($values, 'markdown') === true ? true : null,
+            'attachments' => Arr::get($values, 'attachments') === true ? true : null,
+        ];
+    }
+
+    public function routes(Router $router): void
+    {
+        $router->post('preview', EmailConnectionPreviewController::class)->name('preview');
+    }
+
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make()->setContents([
+            'tabs' => [
+                'main' => [
+                    'sections' => [
+                        [
+                            'fields' => [
+                                [
+                                    'handle' => 'to',
+                                    'field' => [
+                                        'type' => 'form_fields',
+                                        'display' => __('Recipient(s)'),
+                                        'validate' => ['required'],
+                                        'instructions' => __('statamic::messages.form_configure_email_to_instructions'),
+                                        'form' => $this->form()->handle(),
+                                        'prefix' => 'field:',
+                                        'taggable' => true,
+                                        'multiple' => true,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'cc',
+                                    'field' => [
+                                        'type' => 'form_fields',
+                                        'display' => __('CC Recipient(s)'),
+                                        'form' => $this->form()->handle(),
+                                        'prefix' => 'field:',
+                                        'taggable' => true,
+                                        'multiple' => true,
+                                        'width' => 50,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'bcc',
+                                    'field' => [
+                                        'type' => 'form_fields',
+                                        'display' => __('BCC Recipient(s)'),
+                                        'form' => $this->form()->handle(),
+                                        'prefix' => 'field:',
+                                        'taggable' => true,
+                                        'multiple' => true,
+                                        'width' => 50,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'from',
+                                    'field' => [
+                                        'type' => 'form_fields',
+                                        'display' => __('Sender'),
+                                        'instructions' => __('statamic::messages.form_configure_email_from_instructions'),
+                                        'placeholder' => config('mail.from.address'),
+                                        'form' => $this->form()->handle(),
+                                        'prefix' => 'field:',
+                                        'taggable' => true,
+                                        'clearable' => true,
+                                        'width' => 50,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'reply_to',
+                                    'field' => [
+                                        'type' => 'form_fields',
+                                        'display' => __('Reply To'),
+                                        'instructions' => __('statamic::messages.form_configure_email_reply_to_instructions'),
+                                        'form' => $this->form()->handle(),
+                                        'prefix' => 'field:',
+                                        'taggable' => true,
+                                        'multiple' => true,
+                                        'width' => 50,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'subject',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'display' => __('Subject'),
+                                    ],
+                                ],
+                                // TODO: Replace with autocomplete editor once its merged (https://github.com/statamic/cms/pull/15055)
+                                [
+                                    'handle' => 'body',
+                                    'field' => [
+                                        'type' => 'textarea',
+                                        'display' => __('Message'),
+                                        'instructions' => __('statamic::messages.form_configure_email_body_instructions'),
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'html',
+                                    'field' => [
+                                        'type' => 'template',
+                                        'display' => __('HTML view'),
+                                        'instructions' => __('statamic::messages.form_configure_email_views_instructions'),
+                                        'folder' => config('statamic.forms.email_view_folder'),
+                                        'width' => 50,
+                                        'clearable' => true,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'text',
+                                    'field' => [
+                                        'type' => 'template',
+                                        'display' => __('Text view'),
+                                        'instructions' => __('statamic::messages.form_configure_email_views_instructions'),
+                                        'folder' => config('statamic.forms.email_view_folder'),
+                                        'width' => 50,
+                                        'clearable' => true,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'markdown',
+                                    'field' => [
+                                        'type' => 'toggle',
+                                        'display' => __('Markdown'),
+                                        'instructions' => __('statamic::messages.form_configure_email_markdown_instructions'),
+                                        'width' => 50,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'attachments',
+                                    'field' => [
+                                        'type' => 'toggle',
+                                        'display' => __('Attachments'),
+                                        'instructions' => __('statamic::messages.form_configure_email_attachments_instructions'),
+                                        'width' => 50,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'mailer',
+                                    'field' => [
+                                        'type' => 'select',
+                                        'display' => __('Mailer'),
+                                        'instructions' => __('statamic::messages.form_configure_mailer_instructions'),
+                                        'options' => array_keys(config('mail.mailers')),
+                                        'clearable' => true,
+                                        'placeholder' => config('mail.default'),
+                                    ],
+                                ],
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
+}
diff --git a/src/Forms/Connectors/RecordConnectionSuccess.php b/src/Forms/Connectors/RecordConnectionSuccess.php
new file mode 100644
index 00000000000..d84304082c2
--- /dev/null
+++ b/src/Forms/Connectors/RecordConnectionSuccess.php
@@ -0,0 +1,82 @@
+<?php
+
+namespace Statamic\Forms\Connectors;
+
+use Closure;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Support\Facades\Bus;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Str;
+use LogicException;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Forms\DeleteTemporaryFiles;
+
+class RecordConnectionSuccess
+{
+    const TTL = 60 * 60 * 24 * 8;
+
+    public function __construct(public Submission $submission, public string $token)
+    {
+    }
+
+    public static function ensureAttachable(object $job): void
+    {
+        // Queued jobs run through the middleware in their public $middleware property, which is where the countdown hooks in.
+        if (! $job instanceof ShouldQueue || ! array_key_exists('middleware', get_object_vars($job))) {
+            throw new LogicException('Form connection job ['.get_class($job).'] must implement '.ShouldQueue::class.' and have a public $middleware property, e.g. by using the '.Queueable::class.' trait.');
+        }
+    }
+
+    public static function countDown(Submission $submission, array $jobs): void
+    {
+        rescue(fn () => static::cache()->put(static::key($submission), count($jobs), static::TTL));
+
+        foreach ($jobs as $job) {
+            $job->middleware[] = new self($submission, (string) Str::uuid());
+        }
+    }
+
+    public function handle(object $job, Closure $next)
+    {
+        $result = $next($job);
+
+        $queueJob = $job->job ?? null;
+
+        if (! $queueJob?->isReleased() && ! $queueJob?->hasFailed()) {
+            rescue(fn () => $this->recordSuccess());
+        }
+
+        return $result;
+    }
+
+    private function recordSuccess(): void
+    {
+        $cache = static::cache();
+        $key = static::key($this->submission);
+
+        // Guard against a job that runs twice (e.g. redelivery) counting down twice.
+        if (! $cache->add("{$key}.{$this->token}", true, static::TTL)) {
+            return;
+        }
+
+        // Decrementing a missing key would create a -1 that never expires.
+        if (! $cache->has($key)) {
+            return;
+        }
+
+        if ($cache->decrement($key) === 0) {
+            Bus::dispatch(new DeleteTemporaryFiles($this->submission));
+        }
+    }
+
+    private static function key(Submission $submission): string
+    {
+        return "statamic.form-connections.{$submission->form()->handle()}.{$submission->id()}";
+    }
+
+    private static function cache()
+    {
+        return Cache::store(config('statamic.forms.connections_cache_store'));
+    }
+}
diff --git a/src/Forms/Connectors/Rules/EmailConnectionAddress.php b/src/Forms/Connectors/Rules/EmailConnectionAddress.php
new file mode 100644
index 00000000000..4a589a96481
--- /dev/null
+++ b/src/Forms/Connectors/Rules/EmailConnectionAddress.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace Statamic\Forms\Connectors\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Statamic\Contracts\Forms\Form;
+use Statamic\Support\Arr;
+use Statamic\Support\Str;
+
+class EmailConnectionAddress implements ValidationRule
+{
+    public function __construct(private Form $form)
+    {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (blank($value)) {
+            return;
+        }
+
+        foreach (Arr::wrap($value) as $entry) {
+            $this->validateEntry($entry, $fail);
+        }
+    }
+
+    private function validateEntry(mixed $value, Closure $fail): void
+    {
+        if (! is_string($value)) {
+            $fail('statamic::validation.email')->translate();
+
+            return;
+        }
+
+        if (Str::contains($value, '{{')) {
+            return;
+        }
+
+        if (Str::startsWith($value, 'field:')) {
+            if (! $this->form->formFields()->fields()->has(Str::after($value, 'field:'))) {
+                $fail('statamic::validation.email_field_reference')->translate();
+            }
+
+            return;
+        }
+
+        collect(explode(',', $value))
+            ->map(fn ($address) => trim($address))
+            ->filter()
+            ->each(function ($email) use ($fail) {
+                if (Str::contains($email, '<') && preg_match('/^(.*) \<(.*)\>$/', $email, $matches)) {
+                    $email = $matches[2];
+                }
+
+                if (! filter_var($email, FILTER_VALIDATE_EMAIL)) {
+                    $fail('statamic::validation.email')->translate();
+                }
+            });
+    }
+}
diff --git a/src/Forms/Connectors/Rules/EmailConnectionView.php b/src/Forms/Connectors/Rules/EmailConnectionView.php
new file mode 100644
index 00000000000..9d5b1268357
--- /dev/null
+++ b/src/Forms/Connectors/Rules/EmailConnectionView.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Statamic\Forms\Connectors\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Statamic\Support\Str;
+
+class EmailConnectionView implements ValidationRule
+{
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (blank($value)) {
+            return;
+        }
+
+        if (! is_string($value) || Str::contains($value, '::') || ! $this->isInFolder($value)) {
+            $fail('validation.in')->translate();
+        }
+    }
+
+    private function isInFolder(string $view): bool
+    {
+        if (! $folder = trim(config('statamic.forms.email_view_folder') ?? '', '/')) {
+            return true;
+        }
+
+        return Str::startsWith(str_replace('.', '/', $view), $folder.'/');
+    }
+}
diff --git a/src/Forms/Connectors/Rules/WebhookConnectionUrl.php b/src/Forms/Connectors/Rules/WebhookConnectionUrl.php
new file mode 100644
index 00000000000..037b4d583ed
--- /dev/null
+++ b/src/Forms/Connectors/Rules/WebhookConnectionUrl.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Statamic\Forms\Connectors\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Statamic\Exceptions\InvalidRemoteUrlException;
+use Statamic\Forms\Connectors\Webhooks\SendWebhook;
+
+class WebhookConnectionUrl implements ValidationRule
+{
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (blank($value) || ! is_string($value) || app()->environment('local')) {
+            return;
+        }
+
+        try {
+            SendWebhook::resolve($value);
+        } catch (InvalidRemoteUrlException) {
+            $fail('statamic::validation.webhook_url_not_public')->translate();
+        }
+    }
+}
diff --git a/src/Forms/Connectors/Webhook.php b/src/Forms/Connectors/Webhook.php
new file mode 100644
index 00000000000..88f635fc962
--- /dev/null
+++ b/src/Forms/Connectors/Webhook.php
@@ -0,0 +1,134 @@
+<?php
+
+namespace Statamic\Forms\Connectors;
+
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Facades\Blueprint;
+use Statamic\Facades\User;
+use Statamic\Forms\Connectors\Rules\WebhookConnectionUrl;
+use Statamic\Forms\Connectors\Webhooks\SendWebhook;
+use Statamic\Forms\Fields\FormField;
+use Statamic\Statamic;
+use Statamic\Support\Arr;
+use Statamic\Support\VueComponent;
+
+use function Statamic\trans as __;
+
+class Webhook extends Connector
+{
+    protected $developer = 'Statamic';
+
+    public function description(): ?string
+    {
+        return __('statamic::messages.webhook_connector_description');
+    }
+
+    public function icon(): ?string
+    {
+        return Statamic::svg('forms/connect/webhook');
+    }
+
+    public function smallIcon(): ?string
+    {
+        return Statamic::svg('forms/connect/webhook-small');
+    }
+
+    protected function job(Submission $submission, array $connection): ?object
+    {
+        return new SendWebhook($submission, $submission->site(), $connection);
+    }
+
+    public function render(): VueComponent
+    {
+        return VueComponent::render('webhook-connector', [
+            ...$this->blueprintProps(),
+            'examplePayload' => $this->examplePayload(),
+        ]);
+    }
+
+    protected function connectionRules(): array
+    {
+        return [
+            'url' => ['url:http,https', new WebhookConnectionUrl],
+            'verify_ssl' => ['nullable', 'boolean'],
+        ];
+    }
+
+    protected function processConnection(array $connection): array
+    {
+        $values = parent::processConnection($connection);
+
+        return [
+            ...$values,
+            'verify_ssl' => Arr::get($values, 'verify_ssl') === false ? false : null,
+        ];
+    }
+
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make()->setContents([
+            'tabs' => [
+                'main' => [
+                    'sections' => [
+                        [
+                            'fields' => [
+                                [
+                                    'handle' => 'url',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'input_type' => 'url',
+                                        'display' => __('URL'),
+                                        'validate' => ['required'],
+                                        'placeholder' => 'https://example.com/webhook',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'verify_ssl',
+                                    'field' => [
+                                        'type' => 'toggle',
+                                        'display' => __('Verify SSL Certificate'),
+                                        'instructions' => __('statamic::messages.webhook_connection_verify_ssl_instructions'),
+                                        'default' => true,
+                                    ],
+                                ],
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
+
+    private function examplePayload(): string
+    {
+        $form = $this->form();
+        $latestSubmission = null;
+
+        if (User::current()->can('viewSubmissions', $form)) {
+            $latestSubmission = $form->querySubmissions()->whereNull('partial')->orderBy('date', 'desc')->first();
+        }
+
+        return json_encode([
+            'form' => $form->handle(),
+            'submission' => $form->formFields()->fields()
+                ->mapWithKeys(function (FormField $field) use ($latestSubmission): array {
+                    $value = '…';
+
+                    if ($latestSubmission) {
+                        $value = $latestSubmission->data()->get($field->handle());
+                    } else {
+                        $example = $field->fieldtype()->example();
+
+                        if (is_array($example) && isset($example['value'])) {
+                            $value = $example['value'];
+                        }
+                    }
+
+                    return [$field->handle() => $value];
+                })
+                ->prepend($latestSubmission?->date() ?? '…', 'date')
+                ->prepend($latestSubmission?->id() ?? '…', 'id')
+                ->all(),
+        ], JSON_PRETTY_PRINT);
+    }
+}
diff --git a/src/Forms/Connectors/Webhooks/SendWebhook.php b/src/Forms/Connectors/Webhooks/SendWebhook.php
new file mode 100644
index 00000000000..20d39e7b067
--- /dev/null
+++ b/src/Forms/Connectors/Webhooks/SendWebhook.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace Statamic\Forms\Connectors\Webhooks;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Http\Client\RequestException;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Facades\Http;
+use InvalidArgumentException;
+use RuntimeException;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Imaging\RemoteUrlValidator;
+use Statamic\Sites\Site;
+
+class SendWebhook implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    public $tries = 5;
+
+    public function __construct(public Submission $submission, public Site $site, public array $config)
+    {
+    }
+
+    public function backoff(): array
+    {
+        return [10, 30, 120, 600];
+    }
+
+    public function handle(): void
+    {
+        $submission = $this->submission->form()->submission($this->submission->id()) ?? $this->submission;
+
+        $url = $this->config['url'] ?? null;
+        $scheme = strtolower((string) parse_url((string) $url, PHP_URL_SCHEME));
+
+        if (! in_array($scheme, ['http', 'https'])) {
+            throw new InvalidArgumentException("Webhook URL [{$url}] must use the http or https scheme.");
+        }
+
+        $response = Http::asJson()
+            ->connectTimeout(5)
+            ->timeout(30)
+            ->withoutRedirecting()
+            ->when(($this->config['verify_ssl'] ?? true) === false, fn ($http) => $http->withoutVerifying())
+            ->unless(app()->environment('local'), fn ($http) => $http->withOptions($this->pinnedOptions($url)))
+            ->post($url, [
+                'form' => $submission->form()->handle(),
+                'submission' => $submission->toArray(),
+            ]);
+
+        if ($response->redirect()) {
+            throw new RequestException($response);
+        }
+
+        $response->throw();
+    }
+
+    public static function resolve(string $url): array
+    {
+        // Credentials don't affect where the request goes, and are a common way to protect webhook endpoints.
+        return app(RemoteUrlValidator::class)->resolve(preg_replace('#^([a-z][a-z0-9+.-]*://)[^/?\#]*@#i', '$1', $url));
+    }
+
+    protected function supportsConnectionPinning(): bool
+    {
+        return extension_loaded('curl');
+    }
+
+    private function pinnedOptions(string $url): array
+    {
+        // Without curl there's no way to pin the connection, so the host could be rebound to an internal address.
+        if (! $this->supportsConnectionPinning()) {
+            throw new RuntimeException('The curl PHP extension is required to send webhooks.');
+        }
+
+        $resolved = static::resolve($url);
+
+        return [
+            'curl' => [
+                CURLOPT_RESOLVE => [sprintf('%s:%d:%s', $resolved['host'], $resolved['port'], implode(',', $resolved['ips']))],
+            ],
+        ];
+    }
+}
diff --git a/src/Forms/DeleteTemporaryFiles.php b/src/Forms/DeleteTemporaryFiles.php
index 15e424944a9..7bd262483b9 100644
--- a/src/Forms/DeleteTemporaryFiles.php
+++ b/src/Forms/DeleteTemporaryFiles.php
@@ -22,29 +22,31 @@ public function __construct(public Submission $submission)
 
     public function handle(): void
     {
-        $fields = $this->submission->form()->blueprint()->fields()->all();
+        $submission = $this->submission->form()->submission($this->submission->id()) ?? $this->submission;
+
+        $fields = $submission->form()->blueprint()->fields()->all();
         $disk = Storage::disk(config('statamic.system.file_uploads_disk', 'local'));
         $basePath = config('statamic.forms.file_uploads_path', 'statamic/form-uploads');
 
-        $fields->filter(fn (Field $field) => $field->type() === 'files')->each(function (Field $field) use ($disk): void {
+        $fields->filter(fn (Field $field) => $field->type() === 'files')->each(function (Field $field) use ($disk, $submission): void {
             $fileUploadsPath = config('statamic.system.file_uploads_path', 'statamic/file-uploads');
 
-            Collection::wrap($this->submission->get($field->handle(), []))
+            Collection::wrap($submission->get($field->handle(), []))
                 ->reject(fn ($path) => str_contains($path, '..'))
                 ->each(fn ($path) => $disk->delete("{$fileUploadsPath}/".$path));
         });
 
-        if ($disk->exists($uploadsPath = "{$basePath}/{$this->submission->id()}")) {
+        if ($disk->exists($uploadsPath = "{$basePath}/{$submission->id()}")) {
             $disk->deleteDirectory($uploadsPath);
         }
 
         $removed = $fields
             ->filter(fn (Field $field) => $field->type() === 'files' || ($field->type() === 'form_upload' && ! $field->fieldtype()->config('store')))
-            ->each(fn (Field $field) => $this->submission->remove($field->handle()))
+            ->each(fn (Field $field) => $submission->remove($field->handle()))
             ->isNotEmpty();
 
-        if ($removed && $this->submission->form()->store()) {
-            $this->submission->saveQuietly();
+        if ($removed && $submission->form()->store()) {
+            $submission->saveQuietly();
         }
     }
 }
diff --git a/src/Forms/Email.php b/src/Forms/Email.php
index 018b3ebe520..f0b5aec2b6a 100644
--- a/src/Forms/Email.php
+++ b/src/Forms/Email.php
@@ -5,6 +5,7 @@
 use Illuminate\Bus\Queueable;
 use Illuminate\Mail\Mailable;
 use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Storage;
 use Statamic\Contracts\Forms\Submission;
 use Statamic\Facades\Antlers;
@@ -13,6 +14,7 @@
 use Statamic\Facades\Form;
 use Statamic\Facades\GlobalSet;
 use Statamic\Facades\Parse;
+use Statamic\Forms\Fields\FormField;
 use Statamic\Sites\Site;
 use Statamic\Support\Arr;
 use Statamic\Support\Str;
@@ -53,6 +55,17 @@ public function getConfig()
         return $this->config;
     }
 
+    public function hasRecipients(): bool
+    {
+        if (blank($to = Arr::get($this->config, 'to'))) {
+            return false;
+        }
+
+        $this->submissionData = $this->submission->toAugmentedArray();
+
+        return filled($this->addresses($this->parseConfig(['to' => $to])->get('to')));
+    }
+
     public function build()
     {
         $this->submissionData = $this->submission->toAugmentedArray();
@@ -172,11 +185,9 @@ protected function addData()
     {
         $augmented = $this->submission->toAugmentedArray();
         $form = $this->submission->form();
-        $fields = $this->getRenderableFieldData(Arr::except($augmented, ['id', 'date', 'form']))
-            ->reject(fn ($field) => $field['fieldtype'] === 'spacer')
-            ->when(Arr::has($this->config, 'attachments'), function ($fields) {
-                return $fields->reject(fn ($field) => in_array($field['fieldtype'], ['assets', 'files', 'form_upload']));
-            });
+        $pages = $this->getRenderablePageData($form, $augmented);
+        $sections = collect($pages)->flatMap->sections;
+        $fields = $sections->flatMap->fields;
         $formConfig = ($configFields = Form::extraConfigFor($form->handle()))
             ? Blueprint::makeFromTabs($configFields)->fields()->addValues($form->data()->all())->augment()->values()->all()
             : [];
@@ -186,6 +197,8 @@ protected function addData()
             'email_config' => $this->config,
             'config' => Cascade::config(),
             'fields' => $fields,
+            'sections' => $sections->all(),
+            'pages' => $pages,
             'site_url' => Config::getSiteUrl(),
             'date' => now(),
             'now' => now(),
@@ -197,6 +210,36 @@ protected function addData()
         return $this->with($data);
     }
 
+    private function getRenderablePageData($form, array $augmented): array
+    {
+        $excludedFields = $form->formFields()->fields()
+            ->reject(fn (FormField $field) => $field->fieldtype()->collectsValue())
+            ->keys();
+
+        $fields = $this->getRenderableFieldData(Arr::except($augmented, ['id', 'date', 'form']))
+            ->reject(fn ($field) => $excludedFields->contains($field['handle']))
+            ->when(Arr::has($this->config, 'attachments'), function ($fields) {
+                return $fields->reject(fn ($field) => in_array($field['fieldtype'], ['assets', 'files', 'form_upload']));
+            });
+
+        return $form->blueprint()->tabs()
+            ->map(fn ($tab) => [
+                'display' => $tab->display(),
+                'instructions' => $tab->instructions(),
+                'sections' => $tab->sections()->map(fn ($section) => [
+                    'display' => $section->display(),
+                    'instructions' => $section->instructions(),
+                    'fields' => $section->fields()->all()->keys()
+                        ->map(fn ($handle) => $fields->firstWhere('handle', $handle))
+                        ->filter()
+                        ->values()
+                        ->all(),
+                ])->values()->all(),
+            ])
+            ->values()
+            ->all();
+    }
+
     protected function getRenderableFieldData($values)
     {
         return collect($values)->map(function ($value, $handle) {
@@ -236,35 +279,55 @@ protected function addresses($addresses)
             return;
         }
 
-        return collect(explode(',', $addresses))->map(function ($address) {
-            $name = null;
-            $email = trim($address);
+        return collect(Arr::wrap($addresses))
+            ->flatMap(fn ($address) => Str::startsWith($address, 'field:')
+                ? Arr::wrap($this->submission->get(Str::after($address, 'field:')))
+                : [$address])
+            ->flatMap(fn ($address) => is_scalar($address) ? explode(',', (string) $address) : [])
+            ->map(fn ($address) => trim($this->sanitize((string) $address)))
+            ->filter()
+            ->map(function (string $email): array {
+                $name = null;
+
+                if (Str::contains($email, '<') && preg_match('/^(.*) \<(.*)\>$/', $email, $matches)) {
+                    $name = $matches[1];
+                    $email = $matches[2];
+                }
+
+                return [
+                    'email' => $email,
+                    'name' => $name,
+                ];
+            })
+            ->filter(fn (array $address) => filter_var($address['email'], FILTER_VALIDATE_EMAIL))
+            ->values()
+            ->all();
+    }
 
-            if (Str::contains($email, '<')) {
-                preg_match('/^(.*) \<(.*)\>$/', $email, $matches);
-                $name = $matches[1];
-                $email = $matches[2];
-            }
+    private function sanitize(string $value): string
+    {
+        return preg_replace('/[\x00-\x1F\x7F]/u', '', $value);
+    }
 
-            return [
-                'email' => $email,
-                'name' => $name,
-            ];
-        })->all();
+    protected function parseConfig(array $config): Collection
+    {
+        return collect($config)
+            ->except('conditions')
+            ->map(fn ($value) => is_array($value)
+                ? array_map(fn ($item) => Str::startsWith($item, 'field:') ? $item : $this->parseConfigValue($item), $value)
+                : $this->parseConfigValue($value));
     }
 
-    protected function parseConfig(array $config)
+    private function parseConfigValue($value): string
     {
-        return collect($config)->map(function ($value) {
-            $value = Parse::env($value); // deprecated
+        $value = Parse::env($value); // deprecated
 
-            $value = Parse::config($value);
+        $value = Parse::config($value);
 
-            return (string) Antlers::parse($value, array_merge(
-                ['config' => Cascade::config()],
-                $this->getGlobalsData(),
-                $this->submissionData,
-            ));
-        });
+        return (string) Antlers::parse($value, array_merge(
+            ['config' => Cascade::config()],
+            $this->getGlobalsData(),
+            $this->submissionData,
+        ));
     }
 }
diff --git a/src/Forms/Form.php b/src/Forms/Form.php
index 7ef44a02ac6..c07f5d71e71 100644
--- a/src/Forms/Form.php
+++ b/src/Forms/Form.php
@@ -27,6 +27,7 @@
 use Statamic\Facades\User;
 use Statamic\Facades\YAML;
 use Statamic\Fields\Blueprint;
+use Statamic\Forms\Connectors\Connector;
 use Statamic\Forms\Exporters\Exporter;
 use Statamic\Forms\Fields\FormFields;
 use Statamic\Statamic;
@@ -45,7 +46,7 @@ class Form implements Arrayable, Augmentable, ContainsQueryableValues, FormContr
     protected $fields;
     protected $honeypot;
     protected $store;
-    protected $email;
+    protected $connections;
     protected $charts;
     protected $afterSaveCallbacks = [];
     protected $withEvents = true;
@@ -292,15 +293,51 @@ public function store($store = null)
             ->args(func_get_args());
     }
 
+    /**
+     * Get or set the connection configs.
+     *
+     * @param  mixed  $connections
+     * @return mixed
+     */
+    public function connections($connections = null)
+    {
+        return $this->fluentlyGetOrSet('connections')
+            ->getter(fn ($connections) => collect($connections))
+            ->setter(fn ($connections) => collect($connections)->map(fn ($config) => $this->ensureConnectionIds($config)))
+            ->args(func_get_args());
+    }
+
+    private function ensureConnectionIds($config): array
+    {
+        return array_map(
+            fn (array $connection) => ['id' => Str::random(8), ...$connection],
+            Connector::normalizeConnections($config)
+        );
+    }
+
     /**
      * Get or set the email field.
      *
+     * @deprecated Use connections() instead.
+     *
      * @param  mixed  $emails
      * @return mixed
      */
     public function email($emails = null)
     {
-        return $this->fluentlyGetOrSet('email')->args(func_get_args());
+        if (func_num_args() === 0) {
+            $emails = $this->connections()->get('email');
+
+            return is_null($emails) ? null : array_map(fn ($email) => Arr::except($email, 'id'), $emails);
+        }
+
+        $connections = $this->connections();
+
+        is_null($emails)
+            ? $connections->forget('email')
+            : $connections->put('email', $emails);
+
+        return $this->connections($connections);
     }
 
     /**
@@ -376,12 +413,7 @@ public function save()
             'fields' => $this->formFields()->contents(),
             'charts' => $this->charts,
             'honeypot' => $this->honeypot,
-            'email' => collect(isset($this->email['to']) ? [$this->email] : $this->email)->map(function ($email) {
-                $email['markdown'] = Arr::get($email, 'markdown') === true ? true : null;
-                $email['attachments'] = Arr::get($email, 'attachments') === true ? true : null;
-
-                return Arr::removeNullValues($email);
-            })->all(),
+            'connections' => $this->connectionsFileData(),
         ]))->filter()->all();
 
         if ($this->store === false) {
@@ -415,6 +447,14 @@ public function save()
         }
     }
 
+    private function connectionsFileData(): array
+    {
+        return $this->connections()
+            ->filter()
+            ->map(fn (array $connections) => array_map(fn (array $connection) => Arr::removeNullValues($connection), $connections))
+            ->all();
+    }
+
     public function deleteQuietly()
     {
         $this->withEvents = false;
@@ -459,10 +499,10 @@ public function hydrate()
             'charts',
             'honeypot',
             'store',
-            'email',
+            'connections',
         ];
 
-        $this->merge(collect($contents)->except([...$methods, 'fields']));
+        $this->merge(collect($contents)->except([...$methods, 'email', 'fields']));
 
         collect($contents)
             ->filter(function ($value, $property) use ($methods) {
@@ -472,6 +512,10 @@ public function hydrate()
                 $this->{$property}($value);
             });
 
+        if (! is_null($emails = Arr::get($contents, 'connections.email', $contents['email'] ?? null))) {
+            $this->connections($this->connections()->put('email', $emails));
+        }
+
         if (isset($contents['fields'])) {
             $this->formFields($contents['fields']);
         }
diff --git a/src/Forms/FormRepository.php b/src/Forms/FormRepository.php
index dbef859b5a5..cddf50fa1f5 100644
--- a/src/Forms/FormRepository.php
+++ b/src/Forms/FormRepository.php
@@ -96,7 +96,7 @@ public function appendConfigFields($handles, string $display, array $fields)
 
     public function extraConfigFor($handle)
     {
-        $reserved = ['title', 'honeypot', 'store', 'email'];
+        $reserved = ['title', 'honeypot', 'store', 'email', 'connections', 'fields'];
 
         return collect($this->configs)
             ->filter(function ($config) use ($handle) {
diff --git a/src/Forms/SendEmail.php b/src/Forms/SendEmail.php
index 1721d518750..82822fdac35 100644
--- a/src/Forms/SendEmail.php
+++ b/src/Forms/SendEmail.php
@@ -28,7 +28,14 @@ public function __construct(Submission $submission, Site $site, $config)
 
     public function handle()
     {
-        Mail::mailer($this->config['mailer'] ?? null)
-            ->send(new Email($this->submission, $this->config, $this->site));
+        $submission = $this->submission->form()->submission($this->submission->id()) ?? $this->submission;
+
+        $email = new Email($submission, $this->config, $this->site);
+
+        if (! $email->hasRecipients()) {
+            return;
+        }
+
+        Mail::mailer($this->config['mailer'] ?? null)->send($email);
     }
 }
diff --git a/src/Forms/SendEmails.php b/src/Forms/SendEmails.php
index c2d9b3dcc22..a7ecac16320 100644
--- a/src/Forms/SendEmails.php
+++ b/src/Forms/SendEmails.php
@@ -2,61 +2,41 @@
 
 namespace Statamic\Forms;
 
+use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Foundation\Queue\Queueable;
 use Illuminate\Queue\SerializesModels;
-use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\Bus;
 use Statamic\Contracts\Forms\Submission;
-use Statamic\Fields\Field;
+use Statamic\Forms\Connectors\ConnectionLogic;
 use Statamic\Sites\Site;
 
-class SendEmails
+/**
+ * @deprecated Use the jobs returned by Statamic\Forms\Connectors\Email::finalized() instead, one per email.
+ */
+class SendEmails implements ShouldQueue
 {
-    use Dispatchable, SerializesModels;
+    use Dispatchable, Queueable, SerializesModels;
 
-    protected $submission;
-    protected $site;
-
-    public function __construct(Submission $submission, Site $site)
+    public function __construct(protected Submission $submission, protected Site $site, protected ?array $config = null)
     {
-        $this->submission = $submission;
-        $this->site = $site;
     }
 
     public function handle(): void
     {
-        $jobs = $this->jobs();
-
-        if ($jobs->isNotEmpty()) {
-            Bus::chain($jobs)->dispatch();
-        }
-    }
-
-    private function jobs(): Collection
-    {
-        return $this->emailConfigs($this->submission)
-            ->map(function ($config) {
-                $class = config('statamic.forms.send_email_job');
-
-                return new $class($this->submission, $this->site, $config);
-            })
-            ->when($this->shouldDeleteTemporaryFiles(), function ($jobs) {
-                $jobs->push(new DeleteTemporaryFiles($this->submission));
-            });
-    }
-
-    private function emailConfigs($submission)
-    {
-        $config = $submission->form()->email();
-
-        $config = isset($config['to']) ? [$config] : $config;
-
-        return collect($config);
-    }
-
-    private function shouldDeleteTemporaryFiles(): bool
-    {
-        return $this->submission->form()->blueprint()->fields()->all()
-            ->contains(fn (Field $field) => in_array($field->type(), ['files', 'form_upload']));
+        $class = config('statamic.forms.send_email_job');
+        $submission = $this->submission->form()->submission($this->submission->id()) ?? $this->submission;
+
+        // Falls back to reading the form's own connections for anyone dispatching this
+        // job directly without the $config argument, using the dispatched submission's
+        // form instance so in-memory changes are respected. Remove the fallback in v7.
+        $emailConfigs = $this->config ?? $this->submission->form()->connections()->get('email', []);
+
+        $this->prependToChain(
+            collect($emailConfigs)
+                ->filter(fn (array $config) => ConnectionLogic::passes($config, $submission))
+                ->map(fn (array $config) => new $class($submission, $this->site, $config))
+                ->values()
+                ->all()
+        );
     }
 }
diff --git a/src/Forms/Submission.php b/src/Forms/Submission.php
index e916d4a7a18..5606b331dc2 100644
--- a/src/Forms/Submission.php
+++ b/src/Forms/Submission.php
@@ -3,6 +3,7 @@
 namespace Statamic\Forms;
 
 use Carbon\Carbon;
+use Illuminate\Support\Facades\Bus;
 use Statamic\Contracts\Data\Augmentable;
 use Statamic\Contracts\Forms\Submission as SubmissionContract;
 use Statamic\Contracts\Query\ContainsQueryableValues;
@@ -18,9 +19,12 @@
 use Statamic\Events\SubmissionSaved;
 use Statamic\Events\SubmissionSaving;
 use Statamic\Facades\File;
+use Statamic\Facades\FormConnector;
 use Statamic\Facades\FormSubmission;
 use Statamic\Facades\Site as Sites;
 use Statamic\Facades\Stache;
+use Statamic\Fields\Field;
+use Statamic\Forms\Connectors\RecordConnectionSuccess;
 use Statamic\Forms\Uploaders\AssetsUploader;
 use Statamic\Forms\Uploaders\FilesUploader;
 use Statamic\Forms\Uploaders\FormFileUpload;
@@ -271,12 +275,44 @@ public function finalize()
 
         SubmissionFinalized::dispatch($this);
 
+        // Assets need to exist before anything reads the submission, so this stays synchronous.
         CreateAssetsFromFileUploads::dispatchSync($this);
-        SendEmails::dispatch($this, $this->site());
+
+        $jobs = $this->connectionJobs();
+
+        if ($this->shouldDeleteTemporaryFiles()) {
+            if ($jobs) {
+                RecordConnectionSuccess::countDown($this, $jobs);
+            } else {
+                rescue(fn () => Bus::dispatch(new DeleteTemporaryFiles($this)));
+            }
+        }
+
+        // Dispatched independently so one failing connection (e.g. on the sync queue) doesn't stop the others.
+        foreach ($jobs as $job) {
+            rescue(fn () => Bus::dispatch($job));
+        }
 
         return $this;
     }
 
+    public function connectionJobs(): array
+    {
+        return $this->form()->connections()
+            ->map(fn ($connections, $handle) => FormConnector::find($handle)?->setForm($this->form())->setConnections($connections)->finalized($this))
+            ->flatten()
+            ->filter()
+            ->each(fn ($job) => RecordConnectionSuccess::ensureAttachable($job))
+            ->values()
+            ->all();
+    }
+
+    private function shouldDeleteTemporaryFiles(): bool
+    {
+        return $this->form()->blueprint()->fields()->all()
+            ->contains(fn (Field $field) => in_array($field->type(), ['files', 'form_upload']));
+    }
+
     public function deleteQuietly()
     {
         $this->withEvents = false;
diff --git a/src/Forms/Widget.php b/src/Forms/Widget.php
index 8758b7499f5..a487cb2ffc9 100644
--- a/src/Forms/Widget.php
+++ b/src/Forms/Widget.php
@@ -4,7 +4,7 @@
 
 use Statamic\Facades\Form;
 use Statamic\Facades\User;
-use Statamic\Widgets\VueComponent;
+use Statamic\Support\VueComponent;
 use Statamic\Widgets\Widget as BaseWidget;
 
 class Widget extends BaseWidget
diff --git a/src/Http/Controllers/CP/Forms/EmailConnectionPreviewController.php b/src/Http/Controllers/CP/Forms/EmailConnectionPreviewController.php
new file mode 100644
index 00000000000..aba0c506bc4
--- /dev/null
+++ b/src/Http/Controllers/CP/Forms/EmailConnectionPreviewController.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace Statamic\Http\Controllers\CP\Forms;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Validator;
+use Statamic\Contracts\Forms\Form;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Facades\Site;
+use Statamic\Facades\User;
+use Statamic\Fields\Field;
+use Statamic\Forms\Connectors\Email as EmailConnector;
+use Statamic\Forms\Email;
+use Statamic\Forms\FakeSubmissionGenerator;
+use Statamic\Http\Controllers\CP\CpController;
+use Statamic\Support\Arr;
+
+class EmailConnectionPreviewController extends CpController
+{
+    public function __invoke(Request $request, $form, EmailConnector $connector, FakeSubmissionGenerator $generator)
+    {
+        $connector->setForm($form);
+
+        Validator::make([$request->all()], $connector->rules())->validate();
+
+        $config = $connector->process([$request->all()])[0];
+        $latest = $this->latestSubmission($form);
+        $submission = $latest ?? $this->sampleSubmission($form, $generator);
+        $email = new Email($submission, $config, $submission->site());
+
+        try {
+            $body = $email->render();
+        } catch (\Throwable $e) {
+            return response(['message' => $e->getMessage()], 422);
+        }
+
+        return [
+            'subject' => $email->subject,
+            'from' => $this->addresses($email->from ?: [config('mail.from')]),
+            'to' => $this->addresses($email->to),
+            'cc' => $this->addresses($email->cc),
+            'bcc' => $this->addresses($email->bcc),
+            'reply_to' => $this->addresses($email->replyTo),
+            'format' => $email->view || $email->markdown ? 'html' : 'text',
+            'body' => $body,
+            'attachments' => Arr::get($config, 'attachments', false) && $this->hasUploadFields($form),
+            'sample' => $latest === null,
+        ];
+    }
+
+    private function hasUploadFields(Form $form): bool
+    {
+        return $form->blueprint()->fields()->all()
+            ->contains(fn (Field $field) => in_array($field->type(), ['assets', 'files', 'form_upload']));
+    }
+
+    private function latestSubmission(Form $form): ?Submission
+    {
+        if (! User::current()->can('viewSubmissions', $form)) {
+            return null;
+        }
+
+        return $form->querySubmissions()->whereNull('partial')->orderBy('date', 'desc')->first();
+    }
+
+    private function sampleSubmission(Form $form, FakeSubmissionGenerator $generator): Submission
+    {
+        $submission = $form->makeSubmission()->site(Site::selected());
+        $submission->data($form->blueprint()->fields()->addValues($generator->generate($form))->process()->values());
+
+        return $submission;
+    }
+
+    private function addresses(array $addresses): array
+    {
+        return collect($addresses)
+            ->filter(fn (array $address) => filled($address['address']))
+            ->map(fn (array $address) => filled($address['name'])
+                ? "{$address['name']} <{$address['address']}>"
+                : $address['address'])
+            ->values()
+            ->all();
+    }
+}
diff --git a/src/Http/Controllers/CP/Forms/FormConnectController.php b/src/Http/Controllers/CP/Forms/FormConnectController.php
index e0345b593d1..4a24e43506d 100644
--- a/src/Http/Controllers/CP/Forms/FormConnectController.php
+++ b/src/Http/Controllers/CP/Forms/FormConnectController.php
@@ -2,21 +2,95 @@
 
 namespace Statamic\Http\Controllers\CP\Forms;
 
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Validator;
 use Inertia\Inertia;
+use Statamic\Exceptions\NotFoundHttpException;
+use Statamic\Facades\FormConnector;
+use Statamic\Forms\Connectors\Connector;
+use Statamic\Forms\Fields\FormField;
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Http\Controllers\CP\Forms\Concerns\ProvidesFormAbilities;
+use Statamic\Support\Arr;
 
 class FormConnectController extends CpController
 {
     use ProvidesFormAbilities;
 
-    public function __invoke($form)
+    public function index($form)
     {
         $this->authorize('edit', $form);
 
-        return Inertia::render('forms/Connect', [
+        return Inertia::render('forms/connect/Index', [
             'form' => $form,
             'can' => $this->formAbilities($form),
+            'connectors' => FormConnector::all()->map(fn (Connector $connector): array => [
+                'handle' => $connector->handle(),
+                'title' => $connector->title(),
+                'description' => $connector->description(),
+                'icon' => $connector->icon(),
+                'developer' => $connector->developer(),
+                'count' => $connector->forForm($form)->count(),
+                'url' => cp_route('forms.connect.edit', [$form->handle(), $connector->handle()]),
+            ])->values(),
         ]);
     }
+
+    public function edit($form, string $handle)
+    {
+        $this->authorize('edit', $form);
+
+        throw_unless($connector = FormConnector::find($handle)?->forForm($form), NotFoundHttpException::class);
+
+        return Inertia::render('forms/connect/Edit', [
+            'form' => $form,
+            'can' => $this->formAbilities($form),
+            'connector' => [
+                'handle' => $connector->handle(),
+                'title' => $connector->title(),
+                'description' => $connector->description(),
+                'icon' => $connector->smallIcon(),
+            ],
+            'component' => $connector->render(),
+            'value' => $connector->preProcess($connector->connections()),
+            'action' => cp_route('forms.connect.update', [$form->handle(), $connector->handle()]),
+            'isConfigured' => $connector->isConfigured(),
+            'suggestableFields' => $this->suggestableFields($form),
+        ]);
+    }
+
+    public function update(Request $request, $form, string $handle)
+    {
+        $this->authorize('edit', $form);
+
+        throw_unless($connector = FormConnector::find($handle)?->forForm($form), NotFoundHttpException::class);
+
+        Validator::make($request->except('_save'), $connector->rules())->validate();
+
+        $connections = $connector->process($request->except('_save'));
+
+        if ($request->boolean('_save', true)) {
+            $form->connections($form->connections()->put($connector->handle(), $connections))->save();
+        }
+
+        return $connector->setConnections($connections)->preProcess($connections);
+    }
+
+    private function suggestableFields($form): array
+    {
+        return $form->formFields()->fields()
+            ->filter(fn (FormField $field) => $field->fieldtype()->collectsValue())
+            ->map(fn (FormField $field) => [
+                'handle' => $field->handle(),
+                'icon' => $field->fieldtype()->icon(),
+                'category' => $field->fieldtype()->categories()[0] ?? 'other',
+                'config' => Arr::removeNullValues([
+                    'type' => $field->type(),
+                    'display' => $field->display(),
+                    'options' => Arr::get($field->config(), 'options'),
+                ]),
+            ])
+            ->values()
+            ->all();
+    }
 }
diff --git a/src/Http/Controllers/CP/Forms/FormsController.php b/src/Http/Controllers/CP/Forms/FormsController.php
index 799b4357b2c..e54cd20a09d 100644
--- a/src/Http/Controllers/CP/Forms/FormsController.php
+++ b/src/Http/Controllers/CP/Forms/FormsController.php
@@ -8,6 +8,7 @@
 use Statamic\CP\Column;
 use Statamic\Facades\Blueprint;
 use Statamic\Facades\Form;
+use Statamic\Facades\FormConnector;
 use Statamic\Facades\Site;
 use Statamic\Facades\User;
 use Statamic\Http\Controllers\CP\CpController;
@@ -36,19 +37,26 @@ public function index(Request $request)
             $columns[] = Column::make('submissions')->label(__('Submissions'));
         }
 
+        if ($forms->contains(fn ($form) => $user->can('edit', $form))) {
+            $columns[] = Column::make('connections')->label(__('Connections'));
+        }
+
         $forms = $forms
             ->map(function ($form) use ($user) {
                 $canViewSubmissions = $user->can('viewSubmissions', $form);
+                $canEdit = $user->can('edit', $form);
 
                 return [
                     'id' => $form->handle(),
                     'title' => __($form->title()),
                     'status' => $form->status(),
                     'submissions' => $canViewSubmissions ? $form->querySubmissions()->where('site', Site::selected())->whereNull('partial')->count() : null,
+                    'connections' => $canEdit ? FormConnector::all()->sum(fn ($connector) => $connector->forForm($form)->count() ?? 0) : null,
                     'show_url' => $form->showUrl(),
                     'submissions_url' => $form->submissionsUrl(),
+                    'connect_url' => cp_route('forms.connect.index', $form->handle()),
                     'edit_url' => $form->editUrl(),
-                    'can_edit' => $user->can('edit', $form),
+                    'can_edit' => $canEdit,
                     'can_view_submissions' => $canViewSubmissions,
                 ];
             })
@@ -126,7 +134,6 @@ public function edit($form)
             'title' => __($form->title()),
             'honeypot' => $form->honeypot(),
             'store' => $form->store(),
-            'email' => $form->email(),
             'generate_fake_submissions' => (bool) $form->get('generate_fake_submissions', true),
         ]);
 
@@ -155,13 +162,12 @@ public function update($form, Request $request)
 
         $values = $fields->process()->values()->all();
 
-        $data = collect($values)->except(['title', 'honeypot', 'store', 'email']);
+        $data = collect($values)->except(['title', 'honeypot', 'store']);
 
         $form
             ->title($values['title'])
             ->honeypot($values['honeypot'])
             ->store($values['store'])
-            ->email($values['email'])
             ->merge($data);
 
         $form->save();
@@ -276,116 +282,6 @@ protected function editFormBlueprint($form)
                     ],
                 ],
             ],
-            'email' => [
-                'display' => __('Email'),
-                'fields' => [
-                    'email' => [
-                        'type' => 'grid',
-                        'mode' => 'stacked',
-                        'full_width_setting' => true,
-                        'add_row' => __('Add Email'),
-                        'instructions' => __('statamic::messages.form_configure_email_instructions'),
-                        'fields' => [
-                            [
-                                'handle' => 'to',
-                                'field' => [
-                                    'type' => 'text',
-                                    'display' => __('Recipient(s)'),
-                                    'validate' => [
-                                        'required',
-                                    ],
-                                    'instructions' => __('statamic::messages.form_configure_email_to_instructions'),
-                                ],
-                            ],
-                            [
-                                'handle' => 'cc',
-                                'field' => [
-                                    'type' => 'text',
-                                    'display' => __('CC Recipient(s)'),
-                                    'instructions' => __('statamic::messages.form_configure_email_cc_instructions'),
-                                ],
-                            ],
-                            [
-                                'handle' => 'bcc',
-                                'field' => [
-                                    'type' => 'text',
-                                    'display' => __('BCC Recipient(s)'),
-                                    'instructions' => __('statamic::messages.form_configure_email_bcc_instructions'),
-                                ],
-                            ],
-                            [
-                                'handle' => 'from',
-                                'field' => [
-                                    'type' => 'text',
-                                    'display' => __('Sender'),
-                                    'instructions' => __('statamic::messages.form_configure_email_from_instructions').' ('.config('mail.from.address').').',
-                                ],
-                            ],
-                            [
-                                'handle' => 'reply_to',
-                                'field' => [
-                                    'type' => 'text',
-                                    'display' => __('Reply To'),
-                                    'instructions' => __('statamic::messages.form_configure_email_reply_to_instructions'),
-                                ],
-                            ],
-                            [
-                                'handle' => 'subject',
-                                'field' => [
-                                    'type' => 'text',
-                                    'display' => __('Subject'),
-                                    'instructions' => __('statamic::messages.form_configure_email_subject_instructions'),
-                                ],
-                            ],
-                            [
-                                'handle' => 'html',
-                                'field' => [
-                                    'type' => 'template',
-                                    'display' => __('HTML view'),
-                                    'instructions' => __('statamic::messages.form_configure_email_html_instructions'),
-                                    'folder' => config('statamic.forms.email_view_folder'),
-                                    'clearable' => true,
-                                ],
-                            ],
-                            [
-                                'handle' => 'text',
-                                'field' => [
-                                    'type' => 'template',
-                                    'display' => __('Text view'),
-                                    'instructions' => __('statamic::messages.form_configure_email_text_instructions'),
-                                    'folder' => config('statamic.forms.email_view_folder'),
-                                    'clearable' => true,
-                                ],
-                            ],
-                            [
-                                'handle' => 'markdown',
-                                'field' => [
-                                    'type' => 'toggle',
-                                    'display' => __('Markdown'),
-                                    'instructions' => __('statamic::messages.form_configure_email_markdown_instructions'),
-                                ],
-                            ],
-                            [
-                                'handle' => 'attachments',
-                                'field' => [
-                                    'type' => 'toggle',
-                                    'display' => __('Attachments'),
-                                    'instructions' => __('statamic::messages.form_configure_email_attachments_instructions'),
-                                ],
-                            ],
-                            [
-                                'handle' => 'mailer',
-                                'field' => [
-                                    'type' => 'select',
-                                    'instructions' => __('statamic::messages.form_configure_mailer_instructions'),
-                                    'options' => array_keys(config('mail.mailers')),
-                                    'clearable' => true,
-                                ],
-                            ],
-                        ],
-                    ],
-                ],
-            ],
         ];
 
         foreach (Form::extraConfigFor($form->handle()) as $handle => $config) {
diff --git a/src/Http/Controllers/CP/Forms/GenerateFakeSubmissionController.php b/src/Http/Controllers/CP/Forms/GenerateFakeSubmissionController.php
index 5dea92ad4f0..9dcea10bdf1 100644
--- a/src/Http/Controllers/CP/Forms/GenerateFakeSubmissionController.php
+++ b/src/Http/Controllers/CP/Forms/GenerateFakeSubmissionController.php
@@ -3,10 +3,10 @@
 namespace Statamic\Http\Controllers\CP\Forms;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Bus;
 use Statamic\Events\FormSubmitted;
 use Statamic\Facades\Site;
 use Statamic\Forms\FakeSubmissionGenerator;
-use Statamic\Forms\SendEmails;
 use Statamic\Http\Controllers\CP\CpController;
 
 use function Statamic\trans as __;
@@ -47,7 +47,9 @@ public function __invoke(Request $request, $form, FakeSubmissionGenerator $gener
         $submission->save();
 
         if ($validated['mode'] === 'full_pipeline') {
-            SendEmails::dispatch($submission, $submission->site());
+            foreach ($submission->connectionJobs() as $job) {
+                rescue(fn () => Bus::dispatch($job));
+            }
         }
 
         return response([
diff --git a/src/Http/Middleware/DeleteTemporaryFileUploads.php b/src/Http/Middleware/DeleteTemporaryFileUploads.php
index ef13ab19634..486295e0f60 100644
--- a/src/Http/Middleware/DeleteTemporaryFileUploads.php
+++ b/src/Http/Middleware/DeleteTemporaryFileUploads.php
@@ -12,13 +12,14 @@ public function handle($request, Closure $next)
         $lottery = [2, 100];
 
         if (random_int(1, $lottery[1]) <= $lottery[0]) {
-            $this->deleteFilesOverAnHourOld();
+            $this->deleteFileUploadsOverAnHourOld();
+            $this->deleteFormUploadsOverAWeekOld();
         }
 
         return $next($request);
     }
 
-    private function deleteFilesOverAnHourOld()
+    private function deleteFileUploadsOverAnHourOld(): void
     {
         $disk = File::disk(config('statamic.system.file_uploads_disk', 'local'));
         $directory = config('statamic.system.file_uploads_path', 'statamic/file-uploads');
@@ -35,4 +36,17 @@ private function deleteFilesOverAnHourOld()
 
         $disk->deleteEmptySubfolders($directory);
     }
+
+    private function deleteFormUploadsOverAWeekOld(): void
+    {
+        $disk = File::disk(config('statamic.system.file_uploads_disk', 'local'));
+        $directory = config('statamic.forms.file_uploads_path', 'statamic/form-uploads');
+
+        $disk
+            ->getFilesRecursively($directory)
+            ->filter(fn ($path) => $disk->lastModified($path) < now()->subWeek()->timestamp)
+            ->each(fn ($path) => $disk->delete($path));
+
+        $disk->deleteEmptySubfolders($directory);
+    }
 }
diff --git a/src/Providers/AddonServiceProvider.php b/src/Providers/AddonServiceProvider.php
index a2224871fac..ff814ad1e4c 100644
--- a/src/Providers/AddonServiceProvider.php
+++ b/src/Providers/AddonServiceProvider.php
@@ -22,6 +22,7 @@
 use Statamic\Facades\YAML;
 use Statamic\Fields\Fieldtype;
 use Statamic\Forms\Charts\Chart;
+use Statamic\Forms\Connectors\Connector as FormConnector;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Forms\Insights\Insight;
 use Statamic\Forms\JsDrivers\JsDriver;
@@ -73,6 +74,11 @@ abstract class AddonServiceProvider extends ServiceProvider
      */
     protected $fieldtypes = [];
 
+    /**
+     * @var list<class-string<FormConnector>>
+     */
+    protected $formConnectors = [];
+
     /**
      * @var list<class-string<FormFieldtype>>
      */
@@ -223,6 +229,7 @@ public function boot()
                 ->bootActions()
                 ->bootDictionaries()
                 ->bootFieldtypes()
+                ->bootFormConnectors()
                 ->bootFormFieldtypes()
                 ->bootFormCharts()
                 ->bootFormInsights()
@@ -384,6 +391,19 @@ protected function bootFieldtypes()
         return $this;
     }
 
+    protected function bootFormConnectors()
+    {
+        $formConnectors = collect($this->formConnectors)
+            ->merge($this->autoloadFilesFromFolder('FormConnectors', FormConnector::class))
+            ->unique();
+
+        foreach ($formConnectors as $class) {
+            $class::register();
+        }
+
+        return $this;
+    }
+
     protected function bootFormFieldtypes()
     {
         $formFieldtypes = collect($this->formFieldtypes)
diff --git a/src/Providers/ExtensionServiceProvider.php b/src/Providers/ExtensionServiceProvider.php
index 71d27fb8797..933df6434e7 100644
--- a/src/Providers/ExtensionServiceProvider.php
+++ b/src/Providers/ExtensionServiceProvider.php
@@ -93,6 +93,7 @@ class ExtensionServiceProvider extends ServiceProvider
         'global_set_sites' => Fieldtypes\GlobalSetSites::class,
         'grid' => Fieldtypes\Grid::class,
         'group' => Fieldtypes\Group::class,
+        'form_fields' => Fieldtypes\FormFields::class,
         'form_heading' => Fieldtypes\FormHeading::class,
         'form_paragraph' => Fieldtypes\FormParagraph::class,
         'form_upload' => Fieldtypes\FormUpload::class,
@@ -143,6 +144,11 @@ class ExtensionServiceProvider extends ServiceProvider
         'form' => \Statamic\Forms\Fieldtype::class,
     ];
 
+    protected $formConnectors = [
+        'email' => Forms\Connectors\Email::class,
+        'webhook' => Forms\Connectors\Webhook::class,
+    ];
+
     protected $formFieldtypes = [
         'banner' => Forms\Fieldtypes\Banner::class,
         'checkboxes' => Forms\Fieldtypes\Checkboxes::class,
@@ -378,6 +384,11 @@ protected function registerExtensions()
                 'directory' => 'Fieldtypes',
                 'extensions' => $this->fieldtypes,
             ],
+            'form-connectors' => [
+                'class' => Forms\Connectors\Connector::class,
+                'directory' => 'FormConnectors',
+                'extensions' => $this->formConnectors,
+            ],
             'form-fieldtypes' => [
                 'class' => FormFieldtype::class,
                 'directory' => 'FormFieldtypes',
diff --git a/src/Support/VueComponent.php b/src/Support/VueComponent.php
new file mode 100644
index 00000000000..a3102bd2583
--- /dev/null
+++ b/src/Support/VueComponent.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Statamic\Support;
+
+use Illuminate\Contracts\Support\Arrayable;
+
+/**
+ * A neutral {name, props} DTO for rendering a Vue component registered
+ * client-side via Statamic.component(), e.g. by form connections and widgets.
+ *
+ * @phpstan-consistent-constructor
+ */
+class VueComponent implements Arrayable
+{
+    public function __construct(private string $name, private array $props = [])
+    {
+    }
+
+    public static function render(string $name, array $props = []): static
+    {
+        return new static($name, $props);
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'name' => $this->name,
+            'props' => $this->props,
+        ];
+    }
+}
diff --git a/src/Widgets/Collection.php b/src/Widgets/Collection.php
index 2bd922e16bc..97a78aa8e7a 100644
--- a/src/Widgets/Collection.php
+++ b/src/Widgets/Collection.php
@@ -8,6 +8,7 @@
 use Statamic\Facades\Scope;
 use Statamic\Facades\Site;
 use Statamic\Facades\User;
+use Statamic\Support\VueComponent;
 
 use function Statamic\trans as __;
 
diff --git a/src/Widgets/Updater.php b/src/Widgets/Updater.php
index 16d709155ad..723829e664b 100644
--- a/src/Widgets/Updater.php
+++ b/src/Widgets/Updater.php
@@ -6,6 +6,7 @@
 use Facades\Statamic\Updater\UpdatesOverview;
 use Statamic\Facades\Addon;
 use Statamic\Facades\User;
+use Statamic\Support\VueComponent;
 
 class Updater extends Widget
 {
diff --git a/src/Widgets/VueComponent.php b/src/Widgets/VueComponent.php
index cdaa544b726..66cd2f8dbb2 100644
--- a/src/Widgets/VueComponent.php
+++ b/src/Widgets/VueComponent.php
@@ -5,6 +5,8 @@
 use Illuminate\Contracts\Support\Arrayable;
 
 /**
+ * @deprecated Use \Statamic\Support\VueComponent instead.
+ *
  * @phpstan-consistent-constructor
  */
 class VueComponent implements Arrayable
diff --git a/tests/Feature/Forms/EditConnectorTest.php b/tests/Feature/Forms/EditConnectorTest.php
new file mode 100644
index 00000000000..0c843392679
--- /dev/null
+++ b/tests/Feature/Forms/EditConnectorTest.php
@@ -0,0 +1,80 @@
+<?php
+
+namespace Tests\Feature\Forms;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Facades\User;
+use Tests\FakesRoles;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class EditConnectorTest extends TestCase
+{
+    use FakesRoles;
+    use PreventSavingStacheItemsToDisk;
+
+    protected function resolveApplicationConfiguration($app)
+    {
+        parent::resolveApplicationConfiguration($app);
+
+        $app['config']['statamic.forms.forms'] = $this->fakeStacheDirectory.'/forms';
+    }
+
+    #[Test]
+    public function it_shows_the_edit_page()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => 'foo@example.com']],
+        ]))->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('forms.connect.edit', [$form->handle(), 'email']))
+            ->assertSuccessful()
+            ->assertInertia(fn ($page) => $page
+                ->component('forms/connect/Edit', false)
+                ->where('connector.handle', 'email')
+                ->where('connector.title', 'Email')
+                ->where('component.name', 'email-connector')
+                ->missing('component.props.action')
+                ->missing('config')
+                ->has('suggestableFields')
+                ->where('action', cp_route('forms.connect.update', [$form->handle(), 'email']))
+                ->where('isConfigured', true)
+                ->where('value.0.id', 'abc')
+                ->where('value.0.to', ['foo@example.com'])
+                ->where('value.0.enabled', true)
+                ->where('value.0.conditions', []));
+    }
+
+    #[Test]
+    public function it_404s_if_the_connector_doesnt_exist()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test'))->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('forms.connect.edit', [$form->handle(), 'unknown']))
+            ->assertNotFound();
+    }
+
+    #[Test]
+    public function it_denies_access_if_you_dont_have_permission()
+    {
+        $this->setTestRoles(['test' => ['access cp']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test'))->save();
+
+        $this
+            ->from('/original')
+            ->actingAs($user)
+            ->get(cp_route('forms.connect.edit', [$form->handle(), 'email']))
+            ->assertRedirect('/original')
+            ->assertSessionHas('error');
+    }
+}
diff --git a/tests/Feature/Forms/GenerateFakeSubmissionTest.php b/tests/Feature/Forms/GenerateFakeSubmissionTest.php
index d2a0249a921..f16efa2da9c 100644
--- a/tests/Feature/Forms/GenerateFakeSubmissionTest.php
+++ b/tests/Feature/Forms/GenerateFakeSubmissionTest.php
@@ -2,15 +2,21 @@
 
 namespace Tests\Feature\Forms;
 
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Support\Facades\Bus;
 use Illuminate\Support\Facades\Event;
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Contracts\Forms\Submission;
 use Statamic\Events\FormSubmitted;
 use Statamic\Facades\Blueprint;
 use Statamic\Facades\Form;
 use Statamic\Facades\Site;
 use Statamic\Facades\User;
-use Statamic\Forms\SendEmails;
+use Statamic\Fields\Blueprint as FieldsBlueprint;
+use Statamic\Forms\Connectors\Connector;
+use Statamic\Forms\SendEmail;
+use Statamic\Support\VueComponent;
 use Tests\FakesRoles;
 use Tests\PreventSavingStacheItemsToDisk;
 use Tests\TestCase;
@@ -109,7 +115,7 @@ public function cp_only_mode_does_not_dispatch_full_pipeline_side_effects()
             ->assertOk();
 
         Event::assertNotDispatched(FormSubmitted::class);
-        Bus::assertNotDispatched(SendEmails::class);
+        Bus::assertNotDispatched(SendEmail::class);
         $this->assertEquals(1, $form->querySubmissions()->count());
     }
 
@@ -120,6 +126,7 @@ public function full_pipeline_mode_dispatches_frontend_side_effects()
         Bus::fake();
 
         $form = $this->makeForm('contact');
+        $form->connections(['email' => [['to' => 'first@example.com'], ['to' => 'second@example.com']]])->save();
         $user = $this->userWithConfigureFormsPermission();
 
         $this
@@ -128,10 +135,33 @@ public function full_pipeline_mode_dispatches_frontend_side_effects()
             ->assertOk();
 
         Event::assertDispatched(FormSubmitted::class);
-        Bus::assertDispatched(SendEmails::class);
+        Bus::assertDispatchedTimes(SendEmail::class, 2);
         $this->assertEquals(1, $form->querySubmissions()->count());
     }
 
+    #[Test]
+    public function full_pipeline_mode_dispatches_jobs_for_every_connector()
+    {
+        Bus::fake();
+        FakeSubmissionConnector::register();
+
+        $form = $this->makeForm('contact');
+        $form->connections([
+            'email' => [['to' => 'first@example.com']],
+            'fake_submission' => [['id' => 'one'], ['id' => 'two', 'enabled' => false]],
+        ])->save();
+        $user = $this->userWithConfigureFormsPermission();
+
+        $this
+            ->actingAs($user)
+            ->post(cp_route('forms.submissions.generate-fake', $form->handle()), ['mode' => 'full_pipeline'])
+            ->assertOk();
+
+        Bus::assertDispatchedTimes(SendEmail::class, 1);
+        Bus::assertDispatchedTimes(FakeSubmissionConnectorJob::class, 1);
+        Bus::assertDispatched(FakeSubmissionConnectorJob::class, fn ($job) => $job->id === 'one');
+    }
+
     #[Test]
     public function unsupported_fields_fallback_to_null()
     {
@@ -261,3 +291,35 @@ private function userWithConfigureFormsPermission()
         return User::make()->assignRole('test')->save();
     }
 }
+
+class FakeSubmissionConnector extends Connector
+{
+    public function render(): VueComponent
+    {
+        return VueComponent::render('fake-submission-connector');
+    }
+
+    public function blueprint(): FieldsBlueprint
+    {
+        return Blueprint::make();
+    }
+
+    protected function job(Submission $submission, array $connection): ?object
+    {
+        return new FakeSubmissionConnectorJob($connection['id']);
+    }
+}
+
+class FakeSubmissionConnectorJob implements ShouldQueue
+{
+    use Queueable;
+
+    public function __construct(public string $id)
+    {
+    }
+
+    public function handle(): void
+    {
+        //
+    }
+}
diff --git a/tests/Feature/Forms/UpdateConnectorTest.php b/tests/Feature/Forms/UpdateConnectorTest.php
new file mode 100644
index 00000000000..43f7710b16f
--- /dev/null
+++ b/tests/Feature/Forms/UpdateConnectorTest.php
@@ -0,0 +1,183 @@
+<?php
+
+namespace Tests\Feature\Forms;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Facades\User;
+use Tests\FakesRoles;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class UpdateConnectorTest extends TestCase
+{
+    use FakesRoles;
+    use PreventSavingStacheItemsToDisk;
+
+    protected function resolveApplicationConfiguration($app)
+    {
+        parent::resolveApplicationConfiguration($app);
+
+        $app['config']['statamic.forms.forms'] = $this->fakeStacheDirectory.'/forms';
+    }
+
+    #[Test]
+    public function it_updates_the_connections()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => ['old@example.com']]],
+            'webhook' => [['id' => 'def', 'url' => 'https://example.com/hook']],
+        ]))->save();
+
+        $this
+            ->actingAs($user)
+            ->patchJson(cp_route('forms.connect.update', [$form->handle(), 'email']), [
+                ['id' => 'abc', 'to' => ['new@example.com'], 'subject' => 'Updated'],
+                ['id' => 'ghi', 'to' => ['another@example.com']],
+            ])
+            ->assertOk()
+            ->assertJsonCount(2)
+            ->assertJsonPath('0.id', 'abc')
+            ->assertJsonPath('0.subject', 'Updated')
+            ->assertJsonPath('1.id', 'ghi');
+
+        $updated = Form::find('test');
+        $this->assertEquals([
+            ['id' => 'abc', 'to' => ['new@example.com'], 'subject' => 'Updated'],
+            ['id' => 'ghi', 'to' => ['another@example.com']],
+        ], $updated->connections()->get('email'));
+        $this->assertEquals([['id' => 'def', 'url' => 'https://example.com/hook']], $updated->connections()->get('webhook'));
+    }
+
+    #[Test]
+    public function it_returns_the_pre_processed_values_after_saving()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test'))->save();
+
+        $response = $this
+            ->actingAs($user)
+            ->patchJson(cp_route('forms.connect.update', [$form->handle(), 'email']), [
+                [
+                    'id' => 'abc',
+                    'to' => ['new@example.com'],
+                    'conditions' => [
+                        ['_id' => 'client', 'field' => 'name', 'operator' => 'equals', 'value' => 'Foo'],
+                        ['_id' => 'incomplete', 'field' => '', 'operator' => 'equals', 'value' => 'Foo'],
+                    ],
+                ],
+            ])
+            ->assertOk();
+
+        $conditions = $response->json('0.conditions');
+        $this->assertCount(1, $conditions);
+        $this->assertNotEmpty($conditions[0]['_id']);
+        $this->assertNotEquals('client', $conditions[0]['_id']);
+        $this->assertTrue($response->json('0.enabled'));
+        $this->assertArrayNotHasKey('_id', Form::find('test')->connections()->get('email')[0]['conditions'][0]);
+    }
+
+    #[Test]
+    public function it_validates_and_returns_the_pre_processed_values_without_saving_when_save_is_false()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => ['old@example.com']]],
+        ]))->save();
+
+        $response = $this
+            ->actingAs($user)
+            ->patchJson(cp_route('forms.connect.update', [$form->handle(), 'email']).'?_save=false', [
+                [
+                    'id' => 'abc',
+                    'to' => ['new@example.com'],
+                    'subject' => 'Updated',
+                    'conditions' => [['_id' => 'client', 'field' => 'name', 'operator' => 'equals', 'value' => 'Foo']],
+                ],
+            ])
+            ->assertOk();
+
+        $this->assertEquals('abc', $response->json('0.id'));
+        $this->assertEquals(['new@example.com'], $response->json('0.to'));
+        $this->assertEquals('Updated', $response->json('0.subject'));
+        $this->assertTrue($response->json('0.enabled'));
+        $this->assertCount(1, $response->json('0.conditions'));
+        $this->assertNotEquals('client', $response->json('0.conditions.0._id'));
+
+        $this->assertEquals(
+            [['id' => 'abc', 'to' => ['old@example.com']]],
+            Form::find('test')->connections()->get('email')
+        );
+    }
+
+    #[Test]
+    public function it_clears_the_connections_config_when_saving_an_empty_array()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => ['old@example.com']]],
+        ]))->save();
+
+        $this
+            ->actingAs($user)
+            ->patchJson(cp_route('forms.connect.update', [$form->handle(), 'email']), [])
+            ->assertOk();
+
+        $this->assertEmpty(Form::find('test')->connections()->get('email'));
+    }
+
+    #[Test]
+    public function it_rejects_an_invalid_payload()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => ['old@example.com']]],
+        ]))->save();
+
+        $this
+            ->actingAs($user)
+            ->patchJson(cp_route('forms.connect.update', [$form->handle(), 'email']), [['from' => 'foo@example.com']])
+            ->assertUnprocessable()
+            ->assertJsonValidationErrors(['0.to']);
+
+        $this->assertEquals([['id' => 'abc', 'to' => ['old@example.com']]], Form::find('test')->connections()->get('email'));
+    }
+
+    #[Test]
+    public function it_404s_if_the_connector_doesnt_exist()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test'))->save();
+
+        $this
+            ->actingAs($user)
+            ->patchJson(cp_route('forms.connect.update', [$form->handle(), 'unknown']), [])
+            ->assertNotFound();
+    }
+
+    #[Test]
+    public function it_denies_access_if_you_dont_have_permission()
+    {
+        $this->setTestRoles(['test' => ['access cp']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => ['old@example.com']]],
+        ]))->save();
+
+        $this
+            ->from('/original')
+            ->actingAs($user)
+            ->patch(cp_route('forms.connect.update', [$form->handle(), 'email']), [])
+            ->assertRedirect('/original')
+            ->assertSessionHas('error');
+
+        $this->assertEquals([['id' => 'abc', 'to' => ['old@example.com']]], Form::find('test')->connections()->get('email'));
+    }
+}
diff --git a/tests/Feature/Forms/UpdateFormTest.php b/tests/Feature/Forms/UpdateFormTest.php
index 00b7063662c..57804ed2556 100644
--- a/tests/Feature/Forms/UpdateFormTest.php
+++ b/tests/Feature/Forms/UpdateFormTest.php
@@ -81,55 +81,6 @@ public function it_updates_restrictions()
         $this->assertTrue($updated->get('require_login'));
     }
 
-    #[Test]
-    public function it_updates_emails()
-    {
-        $form = tap(Form::make('test'))->save();
-        $this->assertNull($form->email());
-
-        $this
-            ->actingAs($this->userWithPermission())
-            ->update($form, ['email' => [
-                [
-                    'to' => 'john@example.com',
-                    'from' => 'jane@example.com',
-                    'reply_to' => null,
-                    'subject' => null,
-                    'text' => null,
-                    'html' => null,
-                    'markdown' => false,
-                    'attachments' => false,
-                ],
-                [
-                    'to' => 'foo@example.com',
-                    'from' => 'bar@example.com',
-                    'reply_to' => null,
-                    'subject' => null,
-                    'text' => 'emails.contact.text',
-                    'html' => 'emails.contact.html',
-                    'markdown' => true,
-                    'attachments' => true,
-                ],
-            ]])
-            ->assertOk();
-
-        $updated = Form::all()->first();
-        $this->assertEquals([
-            [
-                'to' => 'john@example.com',
-                'from' => 'jane@example.com',
-            ],
-            [
-                'to' => 'foo@example.com',
-                'from' => 'bar@example.com',
-                'text' => 'emails.contact.text',
-                'html' => 'emails.contact.html',
-                'markdown' => true,
-                'attachments' => true,
-            ],
-        ], $updated->email());
-    }
-
     #[Test]
     public function it_updates_data()
     {
diff --git a/tests/Feature/Forms/FormConnectTest.php b/tests/Feature/Forms/ViewConnectorsTest.php
similarity index 66%
rename from tests/Feature/Forms/FormConnectTest.php
rename to tests/Feature/Forms/ViewConnectorsTest.php
index 2a82672ac14..aa7372ded0c 100644
--- a/tests/Feature/Forms/FormConnectTest.php
+++ b/tests/Feature/Forms/ViewConnectorsTest.php
@@ -3,13 +3,18 @@
 namespace Tests\Feature\Forms;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Facades\Blueprint as BlueprintFacade;
 use Statamic\Facades\Form;
 use Statamic\Facades\User;
+use Statamic\Fields\Blueprint;
+use Statamic\Forms\Connectors\Connector;
+use Statamic\Support\VueComponent;
 use Tests\FakesRoles;
 use Tests\PreventSavingStacheItemsToDisk;
 use Tests\TestCase;
 
-class FormConnectTest extends TestCase
+class ViewConnectorsTest extends TestCase
 {
     use FakesRoles;
     use PreventSavingStacheItemsToDisk;
@@ -19,6 +24,8 @@ protected function resolveApplicationConfiguration($app)
         parent::resolveApplicationConfiguration($app);
 
         $app['config']['statamic.forms.forms'] = $this->fakeStacheDirectory.'/forms';
+
+        $app->booting(fn () => AcmeConnector::register());
     }
 
     #[Test]
@@ -32,7 +39,7 @@ public function it_shows_the_page_with_the_edit_forms_permission()
             ->actingAs($user)
             ->get(cp_route('forms.connect.index', $form->handle()))
             ->assertSuccessful()
-            ->assertInertia(fn ($page) => $page->component('forms/Connect'));
+            ->assertInertia(fn ($page) => $page->component('forms/connect/Index'));
     }
 
     #[Test]
@@ -46,7 +53,7 @@ public function it_shows_the_page_with_the_per_form_edit_permission()
             ->actingAs($user)
             ->get(cp_route('forms.connect.index', $form->handle()))
             ->assertSuccessful()
-            ->assertInertia(fn ($page) => $page->component('forms/Connect'));
+            ->assertInertia(fn ($page) => $page->component('forms/connect/Index'));
     }
 
     #[Test]
@@ -60,7 +67,32 @@ public function it_shows_the_page_with_the_configure_forms_permission()
             ->actingAs($user)
             ->get(cp_route('forms.connect.index', $form->handle()))
             ->assertSuccessful()
-            ->assertInertia(fn ($page) => $page->component('forms/Connect'));
+            ->assertInertia(fn ($page) => $page->component('forms/connect/Index'));
+    }
+
+    #[Test]
+    public function it_lists_connectors()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = tap(Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => 'foo@example.com']],
+        ]))->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('forms.connect.index', $form->handle()))
+            ->assertSuccessful()
+            ->assertInertia(fn ($page) => $page
+                ->component('forms/connect/Index')
+                ->has('connectors', 3)
+                ->where('connectors.0.handle', 'email')
+                ->where('connectors.0.title', 'Email')
+                ->where('connectors.0.count', 1)
+                ->where('connectors.0.url', cp_route('forms.connect.edit', [$form->handle(), 'email']))
+                ->where('connectors.1.handle', 'webhook')
+                ->where('connectors.1.count', 0)
+                ->where('connectors.2.handle', 'acme'));
     }
 
     #[Test]
@@ -108,3 +140,21 @@ public function it_denies_access_with_no_permissions()
             ->assertSessionHas('error');
     }
 }
+
+class AcmeConnector extends Connector
+{
+    public function render(): VueComponent
+    {
+        return VueComponent::render('acme-connector');
+    }
+
+    public function blueprint(): Blueprint
+    {
+        return BlueprintFacade::make();
+    }
+
+    protected function job(Submission $submission, array $connection): ?object
+    {
+        return null;
+    }
+}
diff --git a/tests/Feature/Forms/ViewFormListingTest.php b/tests/Feature/Forms/ViewFormListingTest.php
index bba2604366a..1f2aa29a7e7 100644
--- a/tests/Feature/Forms/ViewFormListingTest.php
+++ b/tests/Feature/Forms/ViewFormListingTest.php
@@ -142,7 +142,69 @@ public function it_hides_the_submissions_column_when_the_user_cannot_view_any_su
             ->assertSuccessful()
             ->assertInertia(fn ($page) => $page
                 ->component('forms/Index')
-                ->count('initialColumns', 1)
+                ->count('initialColumns', 2)
+                ->where('initialColumns.0.field', 'title')
+                ->where('initialColumns.1.field', 'connections')
+            );
+    }
+
+    #[Test]
+    public function it_hides_the_connections_column_when_the_user_cannot_edit_any_forms()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'view form submissions']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        Form::make('test')->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('forms.index'))
+            ->assertSuccessful()
+            ->assertInertia(fn ($page) => $page
+                ->component('forms/Index')
+                ->count('initialColumns', 2)
+                ->where('initialColumns.0.field', 'title')
+                ->where('initialColumns.1.field', 'submissions')
+            );
+    }
+
+    #[Test]
+    public function it_includes_the_connection_count_when_the_user_can_edit_the_form()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => 'foo@example.com'], ['id' => 'def', 'to' => 'bar@example.com']],
+            'webhook' => [['id' => 'ghi', 'url' => 'https://example.com/hook']],
+        ])->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('forms.index'))
+            ->assertSuccessful()
+            ->assertInertia(fn ($page) => $page
+                ->component('forms/Index')
+                ->where('forms.0.can_edit', true)
+                ->where('forms.0.connections', 3)
+            );
+    }
+
+    #[Test]
+    public function it_excludes_the_connection_count_when_the_user_cannot_edit_the_form()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'view form submissions']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        Form::make('test')->connections([
+            'email' => [['id' => 'abc', 'to' => 'foo@example.com']],
+        ])->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('forms.index'))
+            ->assertSuccessful()
+            ->assertInertia(fn ($page) => $page
+                ->component('forms/Index')
+                ->where('forms.0.can_edit', false)
+                ->where('forms.0.connections', null)
             );
     }
 
diff --git a/tests/Fieldtypes/FormFieldsTest.php b/tests/Fieldtypes/FormFieldsTest.php
new file mode 100644
index 00000000000..e9290c98822
--- /dev/null
+++ b/tests/Fieldtypes/FormFieldsTest.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace Tests\Fieldtypes;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Fields\Field;
+use Statamic\Fieldtypes\FormFields;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class FormFieldsTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        tap(Form::make('contact')->formFields([
+            'fields' => [
+                ['handle' => 'intro', 'field' => ['type' => 'heading']],
+                ['handle' => 'full_name', 'field' => ['type' => 'name']],
+                ['handle' => 'email_address', 'field' => ['type' => 'email', 'display' => 'Email Address']],
+                ['handle' => 'message', 'field' => ['type' => 'long_answer']],
+            ],
+        ]))->save();
+    }
+
+    #[Test]
+    public function it_lists_the_fields_in_the_form()
+    {
+        $options = $this->fieldtype(['form' => 'contact'])->preload()['options'];
+
+        $this->assertEquals([
+            ['value' => 'full_name', 'label' => 'Full Name', 'icon' => 'user-avatar-flush', 'category' => 'contact'],
+            ['value' => 'email_address', 'label' => 'Email Address', 'icon' => 'mail-sign-at', 'category' => 'contact'],
+            ['value' => 'message', 'label' => 'Message', 'icon' => 'text-long', 'category' => 'text'],
+        ], $options);
+    }
+
+    #[Test]
+    public function it_only_lists_fields_in_the_configured_categories()
+    {
+        $options = $this->fieldtype(['form' => 'contact', 'categories' => ['contact', 'information']])->preload()['options'];
+
+        $this->assertEquals(['intro', 'full_name', 'email_address'], array_column($options, 'value'));
+    }
+
+    #[Test]
+    public function it_prefixes_the_option_values()
+    {
+        $options = $this->fieldtype(['form' => 'contact', 'prefix' => 'field:'])->preload()['options'];
+
+        $this->assertEquals(['field:full_name', 'field:email_address', 'field:message'], array_column($options, 'value'));
+    }
+
+    #[Test]
+    public function it_lists_the_fields_in_the_parent_form()
+    {
+        $fieldtype = (new FormFields)->setField(
+            (new Field('test', ['type' => 'form_fields']))->setParent(Form::find('contact'))
+        );
+
+        $this->assertEquals(['full_name', 'email_address', 'message'], array_column($fieldtype->preload()['options'], 'value'));
+    }
+
+    #[Test]
+    public function it_has_no_options_without_a_form()
+    {
+        $this->assertEquals([], $this->fieldtype([])->preload()['options']);
+        $this->assertEquals([], $this->fieldtype(['form' => 'unknown'])->preload()['options']);
+    }
+
+    private function fieldtype(array $config): FormFields
+    {
+        return (new FormFields)->setField(new Field('test', array_merge($config, ['type' => 'form_fields'])));
+    }
+}
diff --git a/tests/Forms/Connectors/ConnectionCleanupTest.php b/tests/Forms/Connectors/ConnectionCleanupTest.php
new file mode 100644
index 00000000000..1fbdbe5eb3c
--- /dev/null
+++ b/tests/Forms/Connectors/ConnectionCleanupTest.php
@@ -0,0 +1,365 @@
+<?php
+
+namespace Tests\Forms\Connectors;
+
+use Exception;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Support\Facades\Bus;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Exceptions;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
+use LogicException;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Facades\Blueprint as BlueprintFacade;
+use Statamic\Facades\Form;
+use Statamic\Fields\Blueprint;
+use Statamic\Forms\Connectors\Connector;
+use Statamic\Forms\Connectors\Webhooks\SendWebhook;
+use Statamic\Forms\SendEmail;
+use Statamic\Forms\Uploaders\FormFileUpload;
+use Statamic\Support\VueComponent;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class ConnectionCleanupTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        Storage::fake('local');
+        CountdownConnector::register();
+        CountdownConnector::$jobs = [];
+        CountdownJob::$outcomes = [];
+        CountdownJob::$runs = [];
+    }
+
+    #[Test]
+    public function a_failing_connection_doesnt_stop_the_others_or_the_visitor()
+    {
+        Exceptions::fake();
+
+        tap(Form::make('contact')->connections(['countdown' => [
+            ['id' => 'a'],
+            ['id' => 'b'],
+            ['id' => 'c'],
+        ]])->formFields(['sections' => [['fields' => [
+            ['handle' => 'email', 'field' => ['type' => 'text']],
+        ]]]]))->save();
+
+        CountdownJob::$outcomes = ['a' => 'throw'];
+
+        $this->post('/!/forms/contact', ['email' => 'foo@bar.com'])
+            ->assertSessionHasNoErrors()
+            ->assertRedirect();
+
+        $this->assertEquals(['a', 'b', 'c'], CountdownJob::$runs);
+        Exceptions::assertReported(fn (Exception $e) => $e->getMessage() === 'Job [a] failed.');
+    }
+
+    #[Test]
+    public function temporary_files_are_deleted_once_every_job_has_succeeded()
+    {
+        [$submission, $path] = $this->submissionWithUpload([['id' => 'a'], ['id' => 'b']]);
+
+        $submission->finalize();
+
+        $this->assertEquals(['a', 'b'], CountdownJob::$runs);
+        Storage::disk('local')->assertMissing('statamic/form-uploads/'.$path);
+        $this->assertNull($submission->form()->submission($submission->id())->get('document'));
+    }
+
+    #[Test]
+    public function a_failed_job_leaves_the_files_until_it_succeeds_on_a_later_run()
+    {
+        [$submission, $path] = $this->submissionWithUpload([['id' => 'a'], ['id' => 'b']]);
+
+        CountdownJob::$outcomes = ['a' => 'throw'];
+
+        $submission->finalize();
+
+        $this->assertEquals(['a', 'b'], CountdownJob::$runs);
+        Storage::disk('local')->assertExists('statamic/form-uploads/'.$path);
+        $this->assertSame(1, Cache::get($this->counterKey($submission)));
+
+        CountdownJob::$outcomes = [];
+        $this->retry('a');
+
+        Storage::disk('local')->assertMissing('statamic/form-uploads/'.$path);
+    }
+
+    #[Test]
+    public function running_the_same_job_twice_only_counts_it_once()
+    {
+        [$submission, $path] = $this->submissionWithUpload([['id' => 'a'], ['id' => 'b']]);
+
+        CountdownJob::$outcomes = ['b' => 'throw'];
+
+        $submission->finalize();
+        $this->retry('a');
+
+        $this->assertEquals(['a', 'b', 'a'], CountdownJob::$runs);
+        Storage::disk('local')->assertExists('statamic/form-uploads/'.$path);
+        $this->assertSame(1, Cache::get($this->counterKey($submission)));
+
+        CountdownJob::$outcomes = [];
+        $this->retry('b');
+
+        Storage::disk('local')->assertMissing('statamic/form-uploads/'.$path);
+    }
+
+    #[Test]
+    public function a_released_job_doesnt_count_down()
+    {
+        [$submission, $path] = $this->submissionWithUpload([['id' => 'a']]);
+
+        CountdownJob::$outcomes = ['a' => 'release'];
+
+        $submission->finalize();
+
+        $this->assertEquals(['a'], CountdownJob::$runs);
+        Storage::disk('local')->assertExists('statamic/form-uploads/'.$path);
+        $this->assertSame(1, Cache::get($this->counterKey($submission)));
+    }
+
+    #[Test]
+    public function a_job_failed_without_throwing_doesnt_count_down()
+    {
+        Exceptions::fake();
+
+        [$submission, $path] = $this->submissionWithUpload([['id' => 'a']]);
+
+        CountdownJob::$outcomes = ['a' => 'fail'];
+
+        $submission->finalize();
+
+        $this->assertEquals(['a'], CountdownJob::$runs);
+        Storage::disk('local')->assertExists('statamic/form-uploads/'.$path);
+        $this->assertSame(1, Cache::get($this->counterKey($submission)));
+    }
+
+    #[Test]
+    public function a_missing_counter_doesnt_trigger_cleanup_or_leave_a_negative_key_behind()
+    {
+        [$submission, $path] = $this->submissionWithUpload([['id' => 'a']]);
+
+        CountdownJob::$outcomes = ['a' => 'throw'];
+
+        $submission->finalize();
+
+        Cache::forget($this->counterKey($submission));
+
+        CountdownJob::$outcomes = [];
+        $this->retry('a');
+
+        Storage::disk('local')->assertExists('statamic/form-uploads/'.$path);
+        $this->assertFalse(Cache::has($this->counterKey($submission)));
+    }
+
+    #[Test]
+    public function the_counter_uses_the_configured_cache_store()
+    {
+        config(['cache.stores.connections' => ['driver' => 'array']]);
+        config(['statamic.forms.connections_cache_store' => 'connections']);
+
+        [$submission, $path] = $this->submissionWithUpload([['id' => 'a'], ['id' => 'b']]);
+
+        CountdownJob::$outcomes = ['a' => 'throw'];
+
+        $submission->finalize();
+
+        $this->assertSame(1, Cache::store('connections')->get($this->counterKey($submission)));
+        $this->assertFalse(Cache::has($this->counterKey($submission)));
+
+        CountdownJob::$outcomes = [];
+        $this->retry('a');
+
+        Storage::disk('local')->assertMissing('statamic/form-uploads/'.$path);
+    }
+
+    #[Test]
+    public function a_job_without_a_public_middleware_property_throws()
+    {
+        [$submission] = $this->submissionWithUpload([['id' => 'a', 'job' => 'without-middleware']]);
+
+        $this->expectException(LogicException::class);
+        $this->expectExceptionMessage('Form connection job ['.JobWithoutMiddlewareProperty::class.'] must implement '.ShouldQueue::class.' and have a public $middleware property, e.g. by using the '.Queueable::class.' trait.');
+
+        $submission->finalize();
+    }
+
+    #[Test]
+    public function a_job_that_doesnt_implement_should_queue_throws()
+    {
+        [$submission] = $this->submissionWithUpload([['id' => 'a', 'job' => 'without-should-queue']]);
+
+        $this->expectException(LogicException::class);
+        $this->expectExceptionMessage('Form connection job ['.JobWithoutShouldQueue::class.'] must implement '.ShouldQueue::class.' and have a public $middleware property, e.g. by using the '.Queueable::class.' trait.');
+
+        $submission->finalize();
+    }
+
+    #[Test]
+    public function a_job_with_its_own_middleware_property_counts_down_without_the_queueable_trait()
+    {
+        [$submission, $path] = $this->submissionWithUpload([['id' => 'a', 'job' => 'own-middleware']]);
+
+        $submission->finalize();
+
+        Storage::disk('local')->assertMissing('statamic/form-uploads/'.$path);
+    }
+
+    #[Test]
+    public function attachments_survive_until_every_email_has_been_sent()
+    {
+        config([
+            'mail.default' => 'array',
+            'mail.from' => ['address' => 'from@example.com', 'name' => 'From'],
+        ]);
+        Http::fake();
+
+        [$submission, $path] = $this->submissionWithUpload([], [
+            'email' => [
+                ['to' => 'first@example.com', 'attachments' => true],
+                ['to' => 'second@example.com', 'attachments' => true],
+            ],
+            'webhook' => [['url' => 'https://example.com/hook']],
+        ]);
+
+        // Capture the jobs instead of running them, so they can be run in the
+        // order a real queue might finish them: the webhook first.
+        $bus = Bus::getFacadeRoot();
+        Bus::fake();
+        $submission->finalize();
+        $webhooks = Bus::dispatched(SendWebhook::class);
+        $emails = Bus::dispatched(SendEmail::class);
+        Bus::swap($bus);
+
+        $this->assertCount(1, $webhooks);
+        $this->assertCount(2, $emails);
+
+        Bus::dispatch($webhooks->first());
+        Bus::dispatch($emails->first());
+        Storage::disk('local')->assertExists('statamic/form-uploads/'.$path);
+
+        Bus::dispatch($emails->last());
+        Storage::disk('local')->assertMissing('statamic/form-uploads/'.$path);
+
+        $messages = app('mailer')->getSymfonyTransport()->messages();
+        $this->assertCount(2, $messages);
+        $messages->each(fn ($message) => $this->assertCount(1, $message->getOriginalMessage()->getAttachments()));
+    }
+
+    private function submissionWithUpload(array $jobs, array $connections = []): array
+    {
+        $form = tap(Form::make('test')->connections([
+            ...($jobs ? ['countdown' => $jobs] : []),
+            ...$connections,
+        ])->formFields([
+            'fields' => [
+                ['handle' => 'document', 'field' => ['type' => 'form_upload', 'store' => false, 'max_files' => 1]],
+            ],
+        ]))->save();
+
+        $submission = $form->makeSubmission()->asPartial();
+
+        $path = FormFileUpload::field(['handle' => 'document', 'max_files' => 1], $submission->id())
+            ->upload([UploadedFile::fake()->create('resume.pdf', 10)]);
+
+        $submission->set('document', $path)->save();
+
+        return [$submission, $path];
+    }
+
+    private function retry(string $id): void
+    {
+        Bus::dispatch(CountdownConnector::$jobs[$id]);
+    }
+
+    private function counterKey(Submission $submission): string
+    {
+        return "statamic.form-connections.{$submission->form()->handle()}.{$submission->id()}";
+    }
+}
+
+class CountdownConnector extends Connector
+{
+    public static array $jobs = [];
+
+    protected function job(Submission $submission, array $connection): ?object
+    {
+        return static::$jobs[$connection['id']] = match ($connection['job'] ?? null) {
+            'without-middleware' => new JobWithoutMiddlewareProperty,
+            'own-middleware' => new JobWithOwnMiddlewareProperty,
+            'without-should-queue' => new JobWithoutShouldQueue,
+            default => new CountdownJob($connection['id']),
+        };
+    }
+
+    public function render(): VueComponent
+    {
+        return VueComponent::render('countdown-connection');
+    }
+
+    public function blueprint(): Blueprint
+    {
+        return BlueprintFacade::make();
+    }
+}
+
+class CountdownJob implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable;
+
+    public static array $outcomes = [];
+    public static array $runs = [];
+
+    public function __construct(public string $id)
+    {
+    }
+
+    public function handle(): void
+    {
+        static::$runs[] = $this->id;
+
+        match (static::$outcomes[$this->id] ?? null) {
+            'throw' => throw new Exception("Job [{$this->id}] failed."),
+            'release' => $this->release(),
+            'fail' => $this->fail(new Exception("Job [{$this->id}] failed.")),
+            default => null,
+        };
+    }
+}
+
+class JobWithoutMiddlewareProperty implements ShouldQueue
+{
+    public function handle(): void
+    {
+    }
+}
+
+class JobWithOwnMiddlewareProperty implements ShouldQueue
+{
+    public $middleware = [];
+
+    public function handle(): void
+    {
+    }
+}
+
+class JobWithoutShouldQueue
+{
+    use Dispatchable, Queueable;
+
+    public function handle(): void
+    {
+    }
+}
diff --git a/tests/Forms/Connectors/ConnectionLogicTest.php b/tests/Forms/Connectors/ConnectionLogicTest.php
new file mode 100644
index 00000000000..91a0fbee32e
--- /dev/null
+++ b/tests/Forms/Connectors/ConnectionLogicTest.php
@@ -0,0 +1,110 @@
+<?php
+
+namespace Tests\Forms\Connectors;
+
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Forms\Connectors\ConnectionLogic;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class ConnectionLogicTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    #[Test]
+    public function it_generates_ids_for_conditions_when_pre_processing()
+    {
+        $conditions = ConnectionLogic::preProcess([
+            ['field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and'],
+            ['field' => 'name', 'operator' => 'equals', 'value' => 'Alice', 'join' => 'or'],
+        ]);
+
+        $this->assertNotEmpty($conditions[0]['_id']);
+        $this->assertNotEmpty($conditions[1]['_id']);
+        $this->assertNotEquals($conditions[0]['_id'], $conditions[1]['_id']);
+        $this->assertEquals('Bob', $conditions[0]['value']);
+        $this->assertEquals('Alice', $conditions[1]['value']);
+    }
+
+    #[Test]
+    public function it_processes_conditions()
+    {
+        $this->assertEquals([
+            ['field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and'],
+        ], ConnectionLogic::process([
+            ['_id' => 'vue-row', 'field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and'],
+            ['field' => null, 'operator' => 'equals', 'value' => 'incomplete', 'join' => 'and'],
+            ['field' => '', 'operator' => 'equals', 'value' => '', 'join' => 'and'],
+            ['operator' => 'equals', 'value' => '', 'join' => 'and'],
+        ]));
+    }
+
+    #[Test]
+    public function it_keeps_conditions_with_a_field_but_a_blank_value()
+    {
+        $this->assertEquals([
+            ['field' => 'name', 'operator' => 'equals', 'value' => '', 'join' => 'and'],
+            ['field' => 'name', 'operator' => 'equals', 'value' => null, 'join' => 'or'],
+        ], ConnectionLogic::process([
+            ['_id' => 'a', 'field' => 'name', 'operator' => 'equals', 'value' => '', 'join' => 'and'],
+            ['_id' => 'b', 'field' => 'name', 'operator' => 'equals', 'value' => null, 'join' => 'or'],
+        ]));
+    }
+
+    #[Test]
+    public function it_processes_empty_conditions_to_null()
+    {
+        $this->assertNull(ConnectionLogic::process([]));
+        $this->assertNull(ConnectionLogic::process([
+            ['field' => null, 'operator' => 'equals', 'value' => 'incomplete', 'join' => 'and'],
+        ]));
+    }
+
+    #[Test]
+    public function a_blank_value_condition_survives_a_round_trip()
+    {
+        $processed = ConnectionLogic::process([
+            ['_id' => 'a', 'field' => 'name', 'operator' => 'equals', 'value' => '', 'join' => 'and'],
+        ]);
+
+        $preProcessed = ConnectionLogic::preProcess($processed);
+
+        $this->assertCount(1, $preProcessed);
+        $this->assertEquals('name', $preProcessed[0]['field']);
+        $this->assertEquals($processed, ConnectionLogic::process($preProcessed));
+    }
+
+    #[Test]
+    #[DataProvider('passesProvider')]
+    public function it_determines_whether_a_config_passes_for_a_submission(array $config, bool $passes)
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'how_did_you_hear', 'field' => ['type' => 'text']],
+            ],
+        ]))->save();
+
+        $submission = $form->makeSubmission()->data(['how_did_you_hear' => 'friend']);
+
+        $this->assertEquals($passes, ConnectionLogic::passes($config, $submission));
+    }
+
+    public static function passesProvider(): array
+    {
+        $matching = [['field' => 'how_did_you_hear', 'operator' => 'equals', 'value' => 'friend', 'join' => 'and']];
+        $blank = [['field' => 'how_did_you_hear', 'operator' => 'equals', 'value' => '', 'join' => 'and']];
+        $nonMatching = [['field' => 'how_did_you_hear', 'operator' => 'equals', 'value' => 'google', 'join' => 'and']];
+
+        return [
+            'no conditions' => [[], true],
+            'explicitly enabled' => [['enabled' => true], true],
+            'matching conditions' => [['conditions' => $matching], true],
+            'non-matching conditions' => [['conditions' => $nonMatching], false],
+            'blank value against a filled field' => [['conditions' => $blank], false],
+            'disabled' => [['enabled' => false], false],
+            'disabled with matching conditions' => [['enabled' => false, 'conditions' => $matching], false],
+        ];
+    }
+}
diff --git a/tests/Forms/Connectors/ConnectorRepositoryTest.php b/tests/Forms/Connectors/ConnectorRepositoryTest.php
new file mode 100644
index 00000000000..cf2c5510471
--- /dev/null
+++ b/tests/Forms/Connectors/ConnectorRepositoryTest.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Tests\Forms\Connectors;
+
+use Illuminate\Support\Facades\Route;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Facades\Blueprint as BlueprintFacade;
+use Statamic\Facades\FormConnector;
+use Statamic\Fields\Blueprint;
+use Statamic\Forms\Connectors\Connector;
+use Statamic\Support\VueComponent;
+use Tests\TestCase;
+
+class ConnectorRepositoryTest extends TestCase
+{
+    #[Test]
+    public function it_gets_a_connector()
+    {
+        RoutedConnector::register();
+
+        $this->assertInstanceOf(RoutedConnector::class, FormConnector::find('routed'));
+        $this->assertTrue(FormConnector::all()->contains(fn ($connector) => $connector instanceof RoutedConnector));
+        $this->assertNull(FormConnector::find('unknown'));
+    }
+
+    #[Test]
+    public function it_registers_routes_with_authorization()
+    {
+        RoutedConnector::register();
+
+        FormConnector::routes();
+
+        $route = collect(Route::getRoutes())->first(fn ($route) => $route->getName() === 'forms.connect.routed.process');
+
+        $this->assertNotNull($route);
+        $this->assertEquals('forms/{form}/connect/routed', $route->uri());
+        $this->assertContains('can:edit,form', $route->middleware());
+    }
+}
+
+class RoutedConnector extends Connector
+{
+    public function render(): VueComponent
+    {
+        return VueComponent::render('routed-connector');
+    }
+
+    public function blueprint(): Blueprint
+    {
+        return BlueprintFacade::make();
+    }
+
+    protected function job(Submission $submission, array $connection): ?object
+    {
+        return null;
+    }
+
+    public function routes($router): void
+    {
+        $router->post('/', fn () => 'processed')->name('process');
+    }
+}
diff --git a/tests/Forms/Connectors/ConnectorTest.php b/tests/Forms/Connectors/ConnectorTest.php
new file mode 100644
index 00000000000..b73cf225fcd
--- /dev/null
+++ b/tests/Forms/Connectors/ConnectorTest.php
@@ -0,0 +1,542 @@
+<?php
+
+namespace Tests\Forms\Connectors;
+
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\NestedRules;
+use Illuminate\Validation\Rule;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Contracts\Forms\Submission;
+use Statamic\Facades\Blueprint;
+use Statamic\Facades\Form;
+use Statamic\Fields\Fields;
+use Statamic\Forms\Connectors\Connector;
+use Statamic\Statamic;
+use Statamic\Support\VueComponent;
+use Tests\TestCase;
+
+class ConnectorTest extends TestCase
+{
+    #[Test]
+    public function the_handle_is_snake_cased_from_the_class_by_default()
+    {
+        $this->assertEquals('test_multi_word', (new TestMultiWordConnector)->handle());
+    }
+
+    #[Test]
+    public function handle_can_be_defined_as_a_property()
+    {
+        $connector = new class extends TestConnector
+        {
+            protected static $handle = 'example';
+        };
+
+        $this->assertEquals('example', $connector->handle());
+    }
+
+    #[Test]
+    public function title_is_the_humanized_handle_by_default()
+    {
+        $this->assertEquals('Test Multi Word', (new TestMultiWordConnector)->title());
+    }
+
+    #[Test]
+    public function title_can_be_defined_as_a_property()
+    {
+        $connector = new class extends TestConnector
+        {
+            protected static $title = 'Super Cool Example';
+        };
+
+        $this->assertEquals('Super Cool Example', $connector->title());
+    }
+
+    #[Test]
+    public function it_gets_the_description_and_developer()
+    {
+        $connector = new class extends TestConnector
+        {
+            protected $description = 'Send submissions to Acme.';
+            protected $developer = 'Acme Inc';
+        };
+
+        $this->assertEquals('Send submissions to Acme.', $connector->description());
+        $this->assertEquals('Acme Inc', $connector->developer());
+    }
+
+    #[Test]
+    public function the_small_icon_falls_back_to_the_icon()
+    {
+        $connector = new class extends TestConnector
+        {
+            protected $icon = 'globe-arrow';
+        };
+
+        $this->assertEquals(Statamic::svg('icons/globe-arrow'), $connector->icon());
+        $this->assertEquals(Statamic::svg('icons/globe-arrow'), $connector->smallIcon());
+    }
+
+    #[Test]
+    public function small_icon_can_be_defined_as_a_property()
+    {
+        $connector = new class extends TestConnector
+        {
+            protected $icon = 'globe-arrow';
+            protected $smallIcon = '<svg><circle r="1" /></svg>';
+        };
+
+        $this->assertEquals(Statamic::svg('icons/globe-arrow'), $connector->icon());
+        $this->assertEquals('<svg><circle r="1" /></svg>', $connector->smallIcon());
+    }
+
+    #[Test]
+    public function it_gets_and_sets_the_form()
+    {
+        $form = Form::make('contact');
+        $connector = new TestMultiWordConnector;
+
+        $this->assertSame($connector, $connector->setForm($form));
+        $this->assertSame($form, $connector->form());
+    }
+
+    #[Test]
+    public function it_throws_when_getting_the_form_before_it_is_set()
+    {
+        $this->expectException(\LogicException::class);
+        $this->expectExceptionMessage('No form has been set on the [test_multi_word] connector.');
+
+        (new TestMultiWordConnector)->form();
+    }
+
+    #[Test]
+    public function it_has_no_connections_by_default()
+    {
+        $this->assertSame([], (new TestMultiWordConnector)->connections());
+    }
+
+    #[Test]
+    public function it_binds_a_form_and_its_stored_connections()
+    {
+        $form = Form::make('contact')->connections([
+            'test_multi_word' => [['id' => 'one'], ['id' => 'two']],
+            'other' => [['id' => 'three']],
+        ]);
+
+        $connector = (new TestMultiWordConnector)->forForm($form);
+
+        $this->assertSame($form, $connector->form());
+        $this->assertEquals([['id' => 'one'], ['id' => 'two']], $connector->connections());
+        $this->assertSame([], (new TestMultiWordConnector)->forForm(Form::make('other'))->connections());
+    }
+
+    #[Test]
+    public function count_can_be_overridden()
+    {
+        $connector = new class extends TestConnector
+        {
+            public function count(): ?int
+            {
+                return 3;
+            }
+        };
+
+        $this->assertEquals(3, $connector->count());
+    }
+
+    #[Test]
+    public function it_counts_the_bound_connections_by_default()
+    {
+        $form = Form::make('contact')->connections([
+            'test_multi_word' => [['foo' => 'bar'], ['foo' => 'baz']],
+        ]);
+
+        $this->assertEquals(2, (new TestMultiWordConnector)->forForm($form)->count());
+        $this->assertEquals(1, (new TestMultiWordConnector)->setForm($form)->setConnections([['foo' => 'qux']])->count());
+        $this->assertEquals(0, (new TestMultiWordConnector)->setForm($form)->count());
+    }
+
+    #[Test]
+    public function it_is_configured_by_default()
+    {
+        $this->assertTrue((new TestMultiWordConnector)->isConfigured());
+    }
+
+    #[Test]
+    public function it_has_connection_validation_rules_by_default()
+    {
+        $this->assertEquals([
+            '*' => ['array'],
+            '*.foo' => ['nullable'],
+            '*.enabled' => ['nullable', 'boolean'],
+            '*.conditions' => ['nullable', 'array'],
+            '*.conditions.*' => ['array'],
+        ], (new TestMultiWordConnector)->rules());
+    }
+
+    #[Test]
+    public function it_merges_connection_rules_into_the_default_rules()
+    {
+        $rules = (new TestHookedConnector)->rules();
+
+        $this->assertEquals([
+            '*' => ['array'],
+            '*.token' => ['required', 'string'],
+            '*.enabled' => ['nullable', 'boolean'],
+            '*.conditions' => ['nullable', 'array'],
+            '*.conditions.*' => ['array'],
+        ], $rules);
+    }
+
+    #[Test]
+    public function it_processes_connections_by_default()
+    {
+        $connections = (new TestMultiWordConnector)->process([
+            ['id' => 'abc', 'foo' => 'bar', 'empty' => null, 'enabled' => true, 'conditions' => []],
+            ['foo' => 'baz', 'enabled' => false, 'conditions' => [
+                ['_id' => 'one', 'field' => 'name', 'operator' => 'equals', 'value' => 'Foo', 'join' => 'and'],
+                ['_id' => 'two', 'field' => null, 'operator' => 'equals', 'value' => 'Foo'],
+            ]],
+        ]);
+
+        $this->assertSame(['id' => 'abc', 'foo' => 'bar'], $connections[0]);
+        $this->assertNotEmpty($connections[1]['id']);
+        $this->assertSame([
+            'id' => $connections[1]['id'],
+            'foo' => 'baz',
+            'enabled' => false,
+            'conditions' => [['field' => 'name', 'operator' => 'equals', 'value' => 'Foo', 'join' => 'and']],
+        ], $connections[1]);
+    }
+
+    #[Test]
+    public function it_processes_connections_through_the_connection_hook()
+    {
+        $connections = (new TestHookedConnector)->process([
+            ['id' => 'abc', 'token' => ' secret ', 'extra' => 'dropped', 'enabled' => false],
+        ]);
+
+        $this->assertSame([['id' => 'abc', 'token' => 'secret', 'enabled' => false]], $connections);
+    }
+
+    #[Test]
+    public function it_pre_processes_the_config_by_default()
+    {
+        $config = [['id' => 'abc', 'foo' => 'bar']];
+
+        $this->assertEquals([
+            ['id' => 'abc', 'enabled' => true, 'conditions' => [], 'foo' => 'bar'],
+        ], (new TestMultiWordConnector)->preProcess($config));
+    }
+
+    #[Test]
+    public function it_mints_missing_ids_when_pre_processing()
+    {
+        $connections = (new TestMultiWordConnector)->preProcess([['foo' => 'bar']]);
+
+        $this->assertNotEmpty($connections[0]['id']);
+        $this->assertEquals('bar', $connections[0]['foo']);
+    }
+
+    #[Test]
+    public function it_pre_processes_connections_through_the_connection_hook()
+    {
+        $connections = (new TestHookedConnector)->preProcess([['id' => 'abc', 'token' => 'secret', 'extra' => 'dropped']]);
+
+        $this->assertEquals([['id' => 'abc', 'token' => 'SECRET', 'enabled' => true, 'conditions' => []]], $connections);
+    }
+
+    #[Test]
+    public function it_normalizes_non_list_connections()
+    {
+        $connector = new TestMultiWordConnector;
+
+        $this->assertEquals([['token' => 'secret']], $connector->setConnections(['token' => 'secret'])->connections());
+        $this->assertEquals([['foo' => 'bar']], $connector->setConnections([['foo' => 'bar'], 'nope', null])->connections());
+        $this->assertCount(1, $connector->preProcess(['token' => 'secret']));
+        $this->assertCount(1, $connector->process(['token' => 'secret']));
+    }
+
+    #[Test]
+    public function it_only_makes_jobs_for_enabled_connections_whose_conditions_pass()
+    {
+        $form = Form::make('contact')->formFields([
+            'fields' => [['handle' => 'name', 'field' => ['type' => 'text']]],
+        ]);
+        $submission = $form->makeSubmission()->data(['name' => 'Foo']);
+
+        $jobs = (new TestHookedConnector)->setConnections([
+            ['id' => 'one'],
+            ['id' => 'two', 'enabled' => false],
+            ['id' => 'three', 'conditions' => [['field' => 'name', 'operator' => 'equals', 'value' => 'Foo']]],
+            ['id' => 'four', 'conditions' => [['field' => 'name', 'operator' => 'equals', 'value' => 'Bar']]],
+            ['id' => 'skip'],
+        ])->finalized($submission);
+
+        $this->assertEquals(['one', 'three'], array_map(fn ($job) => $job->connection['id'], $jobs));
+        $this->assertSame($submission, $jobs[0]->submission);
+    }
+
+    #[Test]
+    public function it_adds_enabled_and_conditions_when_pre_processing_by_default()
+    {
+        $connections = (new TestMultiWordConnector)->preProcess([
+            ['id' => 'one', 'foo' => 'bar', 'enabled' => false, 'conditions' => [['field' => 'a', 'operator' => 'equals', 'value' => 'b', 'join' => 'and']]],
+            ['id' => 'two', 'foo' => 'baz'],
+        ]);
+
+        $this->assertFalse($connections[0]['enabled']);
+        $this->assertTrue($connections[1]['enabled']);
+        $this->assertCount(1, $connections[0]['conditions']);
+        $this->assertNotEmpty($connections[0]['conditions'][0]['_id']);
+        $this->assertSame([], $connections[1]['conditions']);
+        $this->assertEquals('baz', $connections[1]['foo']);
+    }
+
+    #[Test]
+    public function it_pre_processes_connections_through_the_blueprint()
+    {
+        $connections = (new TestBlueprintConnector)->preProcess([
+            ['id' => 'abc', 'name' => 'Foo', 'count' => '5', 'extra' => 'dropped'],
+        ]);
+
+        $this->assertEquals([
+            ['name' => 'Foo', 'active' => true, 'count' => '5', 'rows' => [], 'id' => 'abc', 'enabled' => true, 'conditions' => []],
+        ], $connections);
+    }
+
+    #[Test]
+    public function it_processes_connections_through_the_blueprint()
+    {
+        $connections = (new TestBlueprintConnector)->process([
+            ['id' => 'abc', 'name' => 'Foo', 'active' => false, 'count' => '5', 'extra' => 'dropped'],
+        ]);
+
+        $this->assertSame([['id' => 'abc', 'name' => 'Foo', 'active' => false, 'count' => 5]], $connections);
+    }
+
+    #[Test]
+    public function it_merges_top_level_blueprint_rules_with_connection_rules()
+    {
+        $rules = (new TestBlueprintConnector)->rules();
+
+        $this->assertEquals(['required', 'string', 'max:10'], $rules['*.name']);
+        $this->assertEquals(['integer', 'nullable'], $rules['*.count']);
+        $this->assertEquals(['nullable'], $rules['*.active']);
+        $this->assertEquals(['required'], $rules['*.rows.*.label']);
+        $this->assertEquals(['nullable', 'boolean'], $rules['*.enabled']);
+        $this->assertEquals([
+            '*', '*.name', '*.active', '*.count', '*.rows', '*.rows.*.label', '*.enabled', '*.conditions', '*.conditions.*',
+        ], array_keys($rules));
+    }
+
+    #[Test]
+    public function it_validates_connections_with_blueprint_rules()
+    {
+        $rules = (new TestBlueprintConnector)->rules();
+
+        $this->assertTrue(Validator::make([['name' => 'Foo']], $rules)->passes());
+        $this->assertEquals(['0.name'], Validator::make([['count' => 1]], $rules)->errors()->keys());
+        $this->assertEquals(['0.name'], Validator::make([['name' => 'Far too long']], $rules)->errors()->keys());
+        $this->assertEquals(['0.rows.0.label'], Validator::make([['name' => 'Foo', 'rows' => [['label' => null]]]], $rules)->errors()->keys());
+    }
+
+    #[Test]
+    public function it_scopes_blueprint_rules_referencing_sibling_fields_to_each_connection()
+    {
+        $connector = new class extends TestConnector
+        {
+            public function blueprint(): \Statamic\Fields\Blueprint
+            {
+                return Blueprint::make()->setContents(['tabs' => ['main' => ['sections' => [['fields' => [
+                    ['handle' => 'mode', 'field' => ['type' => 'text']],
+                    ['handle' => 'token', 'field' => ['type' => 'text', 'validate' => ['required_if:{this}.mode,private']]],
+                ]]]]]]);
+            }
+        };
+
+        $rules = $connector->rules();
+
+        $this->assertEquals(['required_if:*.mode,private'], $rules['*.token']);
+        $this->assertEquals(['0.token'], Validator::make([['mode' => 'private']], $rules)->errors()->keys());
+        $this->assertTrue(Validator::make([['mode' => 'public'], ['mode' => 'private', 'token' => 'x']], $rules)->passes());
+        $this->assertEquals(['1.token'], Validator::make([['mode' => 'public', 'token' => 'x'], ['mode' => 'private']], $rules)->errors()->keys());
+    }
+
+    #[Test]
+    public function it_compiles_for_each_connection_rules_against_each_item()
+    {
+        $connector = new class extends TestBlueprintConnector
+        {
+            protected function connectionRules(): array
+            {
+                return [
+                    'rows.*.label' => Rule::forEach(fn ($value, $attribute, $data, $row) => ($row['strict'] ?? false) ? ['required'] : []),
+                ];
+            }
+        };
+
+        $rules = $connector->rules();
+
+        $this->assertEquals(['0.rows.0.label'], Validator::make([
+            ['name' => 'Foo', 'rows' => [['strict' => true, 'label' => null], ['label' => null]]],
+        ], $rules)->errors()->keys());
+        $this->assertInstanceOf(NestedRules::class, $rules['*.rows.*.label']);
+    }
+
+    #[Test]
+    public function it_builds_publish_props_from_the_blueprint_and_bound_connections()
+    {
+        $form = Form::make('contact')->connections(['test_blueprint' => [['id' => 'stored']]]);
+
+        $props = (new TestBlueprintConnector)->setForm($form)->setConnections([
+            ['id' => 'one', 'name' => 'Foo', 'rows' => [['id' => 'row-1', 'label' => 'Bar']]],
+            ['id' => 'two'],
+            ['name' => 'No id'],
+        ])->props();
+
+        $this->assertEquals(['blueprint', 'meta', 'defaults'], array_keys($props));
+        $this->assertEquals(['name', 'active', 'count', 'rows'], collect($props['blueprint']['tabs'][0]['sections'][0]['fields'])->pluck('handle')->all());
+        $this->assertEquals(['one', 'two'], array_keys($props['meta']));
+        $this->assertEquals(['name', 'active', 'count', 'rows'], array_keys($props['meta']['one']));
+        $this->assertEquals(['row-1'], array_keys($props['meta']['one']['rows']['existing']));
+        $this->assertEquals([], $props['meta']['two']['rows']['existing']);
+        $this->assertEquals(['name' => null, 'active' => true, 'count' => null, 'rows' => []], $props['defaults']['values']);
+        $this->assertEquals(['name', 'active', 'count', 'rows'], array_keys($props['defaults']['meta']));
+    }
+
+    #[Test]
+    public function connection_meta_can_be_overridden()
+    {
+        $connector = new class extends TestBlueprintConnector
+        {
+            protected function connectionMeta(array $connection): array
+            {
+                return [...parent::connectionMeta($connection), 'count' => ['options' => [$connection['id']]]];
+            }
+        };
+
+        $props = $connector->setConnections([['id' => 'one']])->props();
+
+        $this->assertEquals(['options' => ['one']], $props['meta']['one']['count']);
+    }
+
+    #[Test]
+    public function connection_fields_can_be_overridden_for_values_and_meta()
+    {
+        $connector = new class extends TestBlueprintConnector
+        {
+            protected function connectionFields(array $connection): Fields
+            {
+                return parent::connectionFields([...$connection, 'rows' => [['id' => 'added', 'label' => 'Added']]]);
+            }
+        };
+
+        $this->assertEquals('added', $connector->preProcess([['id' => 'one']])[0]['rows'][0]['_id']);
+        $this->assertEquals(['added'], array_keys($connector->setConnections([['id' => 'one']])->props()['meta']['one']['rows']['existing']));
+    }
+
+    #[Test]
+    public function it_renders_a_vue_component()
+    {
+        $connector = new class extends TestConnector
+        {
+            public function render(): VueComponent
+            {
+                return VueComponent::render('acme-connector', [
+                    'foo' => 'bar',
+                ]);
+            }
+        };
+
+        $component = $connector->render();
+
+        $this->assertInstanceOf(VueComponent::class, $component);
+        $this->assertEquals([
+            'name' => 'acme-connector',
+            'props' => ['foo' => 'bar'],
+        ], $component->toArray());
+    }
+}
+
+abstract class TestConnector extends Connector
+{
+    public function render(): VueComponent
+    {
+        return VueComponent::render('nothing');
+    }
+
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make();
+    }
+
+    protected function job(Submission $submission, array $connection): ?object
+    {
+        return null;
+    }
+}
+
+class TestMultiWordConnector extends TestConnector
+{
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make()->setContents(['tabs' => ['main' => ['sections' => [['fields' => [
+            ['handle' => 'foo', 'field' => ['type' => 'text']],
+        ]]]]]]);
+    }
+}
+
+class TestHookedConnector extends TestConnector
+{
+    protected function job(Submission $submission, array $connection): ?object
+    {
+        if ($connection['id'] === 'skip') {
+            return null;
+        }
+
+        return (object) ['submission' => $submission, 'connection' => $connection];
+    }
+
+    protected function preProcessConnection(array $connection): array
+    {
+        return ['token' => strtoupper($connection['token'] ?? '')];
+    }
+
+    protected function connectionRules(): array
+    {
+        return ['token' => ['required', 'string']];
+    }
+
+    protected function processConnection(array $connection): array
+    {
+        return ['token' => trim($connection['token'] ?? '')];
+    }
+}
+
+class TestBlueprintConnector extends TestConnector
+{
+    public function props(): array
+    {
+        return $this->blueprintProps();
+    }
+
+    public function blueprint(): \Statamic\Fields\Blueprint
+    {
+        return Blueprint::make()->setContents(['tabs' => ['main' => ['sections' => [['fields' => [
+            ['handle' => 'name', 'field' => ['type' => 'text', 'validate' => ['required']]],
+            ['handle' => 'active', 'field' => ['type' => 'toggle', 'default' => true]],
+            ['handle' => 'count', 'field' => ['type' => 'integer']],
+            ['handle' => 'rows', 'field' => ['type' => 'grid', 'fields' => [
+                ['handle' => 'label', 'field' => ['type' => 'text', 'validate' => ['required']]],
+            ]]],
+        ]]]]]]);
+    }
+
+    protected function connectionRules(): array
+    {
+        return [
+            'name' => 'string|max:10',
+            'rows.*.label' => ['required'],
+        ];
+    }
+}
diff --git a/tests/Forms/Connectors/EmailConnectionAddressRuleTest.php b/tests/Forms/Connectors/EmailConnectionAddressRuleTest.php
new file mode 100644
index 00000000000..7b6384b3784
--- /dev/null
+++ b/tests/Forms/Connectors/EmailConnectionAddressRuleTest.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace Tests\Forms\Connectors;
+
+use Illuminate\Support\Facades\Validator;
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Forms\Connectors\Rules\EmailConnectionAddress;
+use Tests\TestCase;
+
+class EmailConnectionAddressRuleTest extends TestCase
+{
+    #[Test]
+    #[DataProvider('validAddressProvider')]
+    public function it_passes($value)
+    {
+        $this->assertTrue($this->validate($value)->passes());
+    }
+
+    #[Test]
+    #[DataProvider('invalidAddressProvider')]
+    public function it_fails($value, $error)
+    {
+        $validator = $this->validate($value);
+
+        $this->assertTrue($validator->fails());
+        $this->assertEquals($error, $validator->errors()->first('address'));
+    }
+
+    public static function validAddressProvider()
+    {
+        return [
+            'email' => ['foo@example.com'],
+            'email with name' => ['Foo Bar <foo@example.com>'],
+            'comma-separated emails' => ['foo@example.com, Bar <bar@example.com>'],
+            'antlers' => ['{{ company:email }}'],
+            'comma-separated emails with antlers' => ['{{ company:email }}, foo@example.com'],
+            'field reference' => ['field:email'],
+            'array of addresses' => [['foo@example.com', 'Bar <bar@example.com>', '{{ company:email }}', 'field:email']],
+            'null' => [null],
+            'empty string' => [''],
+            'empty array' => [[]],
+        ];
+    }
+
+    public static function invalidAddressProvider()
+    {
+        return [
+            'not an email' => ['nope', 'Must be a valid email address.'],
+            'invalid email in comma-separated list' => ['foo@example.com, nope', 'Must be a valid email address.'],
+            'malformed name syntax' => ['Foo Bar <foo@', 'Must be a valid email address.'],
+            'unknown field reference' => ['field:nonexistent', "References a field that doesn't exist on this form."],
+            'array with an invalid address' => [['foo@example.com', 'nope'], 'Must be a valid email address.'],
+            'array with an unknown field reference' => [['foo@example.com', 'field:nonexistent'], "References a field that doesn't exist on this form."],
+            'not a string' => [[123], 'Must be a valid email address.'],
+        ];
+    }
+
+    private function validate($value)
+    {
+        $form = Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'email', 'field' => ['type' => 'email']],
+            ],
+        ]);
+
+        return Validator::make(['address' => $value], ['address' => new EmailConnectionAddress($form)]);
+    }
+}
diff --git a/tests/Forms/Connectors/EmailConnectorTest.php b/tests/Forms/Connectors/EmailConnectorTest.php
new file mode 100644
index 00000000000..c5f6e375934
--- /dev/null
+++ b/tests/Forms/Connectors/EmailConnectorTest.php
@@ -0,0 +1,674 @@
+<?php
+
+namespace Tests\Forms\Connectors;
+
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Validator;
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Facades\FormConnector;
+use Statamic\Facades\User;
+use Statamic\Forms\Connectors\Email;
+use Statamic\Forms\SendEmail;
+use Tests\FakesRoles;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class EmailConnectorTest extends TestCase
+{
+    use FakesRoles;
+    use PreventSavingStacheItemsToDisk;
+
+    protected function resolveApplicationConfiguration($app)
+    {
+        parent::resolveApplicationConfiguration($app);
+
+        $app['config']['statamic.forms.forms'] = $this->fakeStacheDirectory.'/forms';
+        $app['config']['mail.from'] = ['address' => 'default@example.com', 'name' => 'Default Sender'];
+    }
+
+    #[Test]
+    public function it_returns_a_job_per_email()
+    {
+        $form = tap(Form::make('test')->connections(['email' => [
+            ['id' => 'one', 'to' => ['first@example.com']],
+            ['id' => 'two', 'to' => ['second@example.com']],
+        ]]))->save();
+
+        $jobs = (new Email)->forForm($form)->finalized($form->makeSubmission());
+
+        $this->assertCount(2, $jobs);
+        $this->assertContainsOnlyInstancesOf(SendEmail::class, $jobs);
+        $this->assertEquals('one', $jobs[0]->config['id']);
+        $this->assertEquals('two', $jobs[1]->config['id']);
+    }
+
+    #[Test]
+    public function it_uses_the_configured_send_email_job()
+    {
+        config(['statamic.forms.send_email_job' => CustomSendEmail::class]);
+
+        $form = tap(Form::make('test')->connections(['email' => [
+            ['id' => 'one', 'to' => ['first@example.com']],
+        ]]))->save();
+
+        $jobs = (new Email)->forForm($form)->finalized($form->makeSubmission());
+
+        $this->assertContainsOnlyInstancesOf(CustomSendEmail::class, $jobs);
+    }
+
+    #[Test]
+    public function it_filters_emails_using_conditions_when_finalized()
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'department', 'field' => ['type' => 'text']],
+            ],
+        ])->connections(['email' => [
+            ['id' => 'sales', 'to' => ['sales@example.com'], 'conditions' => [['field' => 'department', 'operator' => 'equals', 'value' => 'sales', 'join' => 'and']]],
+            ['id' => 'support', 'to' => ['support@example.com'], 'conditions' => [['field' => 'department', 'operator' => 'equals', 'value' => 'support', 'join' => 'and']]],
+            ['id' => 'disabled', 'to' => ['disabled@example.com'], 'enabled' => false],
+        ]]))->save();
+
+        $jobs = (new Email)->forForm($form)->finalized($form->makeSubmission()->data(['department' => 'support']));
+
+        $this->assertCount(1, $jobs);
+        $this->assertEquals('support', $jobs[0]->config['id']);
+    }
+
+    #[Test]
+    #[DataProvider('emailCountProvider')]
+    public function it_counts_the_configured_emails(array $emails, int $count)
+    {
+        $form = tap(Form::make('test')->connections(['email' => $emails]))->save();
+
+        $this->assertEquals($count, (new Email)->forForm($form)->count());
+    }
+
+    public static function emailCountProvider(): array
+    {
+        return [
+            'none configured' => [[], 0],
+            'one configured' => [[['id' => 'one', 'to' => ['first@example.com']]], 1],
+            'two configured' => [[['id' => 'one', 'to' => ['first@example.com']], ['id' => 'two', 'to' => ['second@example.com']]], 2],
+        ];
+    }
+
+    #[Test]
+    public function it_renders_the_vue_component()
+    {
+        $form = tap(Form::make('test')->connections(['email' => [
+            ['id' => 'one', 'to' => ['first@example.com'], 'subject' => 'First'],
+            ['id' => 'two', 'to' => ['second@example.com'], 'subject' => 'Second'],
+        ]]))->save();
+
+        $component = (new Email)->forForm($form)->render()->toArray();
+
+        $this->assertEquals('email-connector', $component['name']);
+        $this->assertEquals(['blueprint', 'meta', 'defaults', 'previewUrl'], array_keys($component['props']));
+        $this->assertEquals(['one', 'two'], array_keys($component['props']['meta']));
+        $this->assertEquals([], $component['props']['defaults']['values']['to']);
+        $this->assertArrayHasKey('meta', $component['props']['defaults']);
+        $this->assertEquals(cp_route('forms.connect.email.preview', 'test'), $component['props']['previewUrl']);
+    }
+
+    #[Test]
+    public function it_registers_a_preview_route()
+    {
+        FormConnector::routes();
+
+        $route = collect(Route::getRoutes())->first(fn ($route) => $route->getName() === 'forms.connect.email.preview');
+
+        $this->assertNotNull($route);
+        $this->assertEquals('forms/{form}/connect/email/preview', $route->uri());
+        $this->assertContains('POST', $route->methods());
+        $this->assertContains('can:edit,form', $route->middleware());
+    }
+
+    #[Test]
+    public function it_previews_an_email_using_a_sample_submission()
+    {
+        $form = $this->makeForm();
+
+        $response = $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['field:email', 'Team <team@example.com>'],
+                'from' => ['sender@example.com'],
+                'reply_to' => ['field:email'],
+                'subject' => 'Hello {{ name }}',
+            ])
+            ->assertOk()
+            ->assertJson([
+                'from' => ['sender@example.com'],
+                'format' => 'html',
+                'cc' => [],
+                'bcc' => [],
+                'sample' => true,
+            ]);
+
+        $this->assertStringStartsWith('Hello ', $response->json('subject'));
+        $this->assertNotEquals('Hello ', $response->json('subject'));
+        $this->assertNotFalse(filter_var($response->json('to.0'), FILTER_VALIDATE_EMAIL));
+        $this->assertEquals('Team <team@example.com>', $response->json('to.1'));
+        $this->assertEquals($response->json('to.0'), $response->json('reply_to.0'));
+        $this->assertStringContainsString('<b>Name:</b>', $response->json('body'));
+        $this->assertStringContainsString('<b>Email:</b>', $response->json('body'));
+        $this->assertEquals(0, $form->querySubmissions()->count());
+    }
+
+    #[Test]
+    public function it_previews_using_the_latest_submission_when_the_user_can_view_submissions()
+    {
+        $form = $this->makeForm();
+        $this->makeSubmission($form, ['name' => 'Older', 'email' => 'older@example.com'], '2026-01-01 10:00');
+        $this->makeSubmission($form, ['name' => 'Latest', 'email' => 'latest@example.com'], '2026-02-01 10:00');
+        $this->makeSubmission($form, ['name' => 'Partial', 'email' => 'partial@example.com'], '2026-03-01 10:00', partial: true);
+
+        $this->setTestRoles(['test' => ['access cp', 'edit forms', 'view test form submissions']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+
+        $this
+            ->actingAs($user)
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['field:email'],
+                'subject' => 'Hello {{ name }}',
+            ])
+            ->assertOk()
+            ->assertJson([
+                'subject' => 'Hello Latest',
+                'to' => ['latest@example.com'],
+                'sample' => false,
+            ]);
+    }
+
+    #[Test]
+    public function it_previews_using_sample_data_when_the_user_cannot_view_submissions()
+    {
+        $form = $this->makeForm();
+        $this->makeSubmission($form, ['name' => 'Latest', 'email' => 'latest@example.com'], '2026-02-01 10:00');
+
+        $response = $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['field:email'],
+                'subject' => 'Hello {{ name }}',
+            ])
+            ->assertOk()
+            ->assertJson(['sample' => true]);
+
+        $this->assertNotEquals('Hello Latest', $response->json('subject'));
+        $this->assertNotEquals(['latest@example.com'], $response->json('to'));
+    }
+
+    #[Test]
+    public function it_previews_with_the_default_sender_when_none_is_configured()
+    {
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['recipient@example.com'],
+            ])
+            ->assertOk()
+            ->assertJson(['from' => ['Default Sender <default@example.com>']]);
+    }
+
+    #[Test]
+    public function it_previews_a_custom_html_view()
+    {
+        $form = $this->makeForm();
+
+        $response = $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['recipient@example.com'],
+                'html' => 'emails.preview',
+            ])
+            ->assertOk()
+            ->assertJson(['format' => 'html']);
+
+        $this->assertStringStartsWith('<h1>Hello ', trim($response->json('body')));
+    }
+
+    #[Test]
+    public function it_previews_a_markdown_view()
+    {
+        $form = $this->makeForm();
+
+        $response = $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['recipient@example.com'],
+                'html' => 'emails.preview-markdown',
+                'markdown' => true,
+            ])
+            ->assertOk()
+            ->assertJson(['format' => 'html']);
+
+        $this->assertMatchesRegularExpression('/<h1[^>]*>Hello \S+/', $response->json('body'));
+    }
+
+    #[Test]
+    public function it_previews_a_text_only_view_as_text()
+    {
+        $form = $this->makeForm();
+
+        $response = $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['recipient@example.com'],
+                'text' => 'emails.preview-text',
+            ])
+            ->assertOk()
+            ->assertJson(['format' => 'text']);
+
+        $this->assertStringStartsWith('Hello ', trim($response->json('body')));
+    }
+
+    #[Test]
+    #[DataProvider('previewAttachmentsProvider')]
+    public function it_previews_whether_files_will_be_attached(array $fields, bool $enabled, bool $expected)
+    {
+        $form = $this->makeForm($fields);
+
+        $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['recipient@example.com'],
+                'attachments' => $enabled,
+            ])
+            ->assertOk()
+            ->assertJson(['attachments' => $expected]);
+    }
+
+    public static function previewAttachmentsProvider(): array
+    {
+        $upload = [['handle' => 'cv', 'field' => ['type' => 'upload']]];
+
+        return [
+            'enabled with an upload field' => [$upload, true, true],
+            'disabled with an upload field' => [$upload, false, false],
+            'enabled without an upload field' => [[], true, false],
+        ];
+    }
+
+    #[Test]
+    public function it_returns_the_error_when_the_preview_cannot_be_rendered()
+    {
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['recipient@example.com'],
+                'html' => 'emails.missing',
+            ])
+            ->assertStatus(422)
+            ->assertJson(['message' => 'View [emails.missing] not found.']);
+    }
+
+    #[Test]
+    public function it_validates_the_config_before_previewing()
+    {
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'subject' => 'Hello',
+            ])
+            ->assertStatus(422)
+            ->assertJsonValidationErrors(['0.to']);
+
+        $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['not-an-email'],
+            ])
+            ->assertStatus(422)
+            ->assertJsonValidationErrors(['0.to']);
+    }
+
+    #[Test]
+    #[DataProvider('invalidViewProvider')]
+    public function it_only_allows_views_the_template_field_offers(?string $folder, string $view)
+    {
+        config(['statamic.forms.email_view_folder' => $folder]);
+
+        $form = $this->makeForm();
+
+        foreach (['html', 'text'] as $key) {
+            $this
+                ->actingAs($this->userWithEditPermission())
+                ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                    'id' => 'abc',
+                    'to' => ['recipient@example.com'],
+                    $key => $view,
+                ])
+                ->assertStatus(422)
+                ->assertJsonValidationErrors(["0.{$key}"]);
+        }
+    }
+
+    public static function invalidViewProvider(): array
+    {
+        return [
+            'namespaced view' => [null, 'statamic::forms.fields'],
+            'view outside the folder' => ['emails', 'other.preview'],
+            'view outside the folder using slashes' => ['emails', 'other/preview'],
+            'folder name as a prefix of another folder' => ['emails', 'emails-old.preview'],
+        ];
+    }
+
+    #[Test]
+    public function it_allows_views_inside_the_configured_folder()
+    {
+        config(['statamic.forms.email_view_folder' => 'emails']);
+
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithEditPermission())
+            ->postJson(cp_route('forms.connect.email.preview', $form->handle()), [
+                'id' => 'abc',
+                'to' => ['recipient@example.com'],
+                'html' => 'emails/preview',
+            ])
+            ->assertOk();
+    }
+
+    #[Test]
+    public function it_denies_the_preview_if_you_dont_have_permission()
+    {
+        $form = $this->makeForm();
+
+        $this->setTestRoles(['test' => ['access cp']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+
+        $this
+            ->from('/original')
+            ->actingAs($user)
+            ->post(cp_route('forms.connect.email.preview', $form->handle()), ['id' => 'abc'])
+            ->assertRedirect('/original')
+            ->assertSessionHas('error');
+    }
+
+    #[Test]
+    public function it_renders_the_bound_connections_rather_than_the_stored_ones()
+    {
+        $form = tap(Form::make('test')->connections(['email' => [
+            ['id' => 'stored', 'to' => ['stored@example.com']],
+        ]]))->save();
+
+        $component = (new Email)->setForm($form)->setConnections([
+            ['id' => 'override', 'to' => ['override@example.com']],
+        ])->render()->toArray();
+
+        $this->assertEquals(['override'], array_keys($component['props']['meta']));
+    }
+
+    #[Test]
+    public function it_pre_processes_email_configs()
+    {
+        $form = tap(Form::make('test')->connections(['email' => [
+            [
+                'id' => 'one',
+                'to' => ['first@example.com'],
+                'subject' => 'First',
+                'conditions' => [['field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and']],
+            ],
+            ['id' => 'two', 'to' => ['second@example.com'], 'subject' => 'Second', 'enabled' => false],
+        ]]))->save();
+
+        $configs = (new Email)->setForm($form)->preProcess($form->connections()->get('email'));
+
+        $this->assertEquals('one', $configs[0]['id']);
+        $this->assertTrue($configs[0]['enabled']);
+        $this->assertEquals(['first@example.com'], $configs[0]['to']);
+        $this->assertEquals('First', $configs[0]['subject']);
+        $this->assertNotEmpty($configs[0]['conditions'][0]['_id']);
+        $this->assertEquals('name', $configs[0]['conditions'][0]['field']);
+        $this->assertEquals('Bob', $configs[0]['conditions'][0]['value']);
+        $this->assertEquals('two', $configs[1]['id']);
+        $this->assertFalse($configs[1]['enabled']);
+        $this->assertEquals(['second@example.com'], $configs[1]['to']);
+        $this->assertEquals('Second', $configs[1]['subject']);
+        $this->assertEquals([], $configs[1]['conditions']);
+    }
+
+    #[Test]
+    #[DataProvider('legacyAddressProvider')]
+    public function it_converts_legacy_address_strings_into_arrays(string $handle)
+    {
+        $form = tap(Form::make('test')->connections(['email' => [
+            ['id' => 'one', $handle => 'first@example.com, second@example.com'],
+        ]]))->save();
+
+        $configs = (new Email)->setForm($form)->preProcess($form->connections()->get('email'));
+
+        $this->assertEquals(['first@example.com', 'second@example.com'], $configs[0][$handle]);
+    }
+
+    #[Test]
+    public function legacy_address_strings_are_converted_before_meta_is_built()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $email = new class extends Email
+        {
+            public array $metaValues = [];
+
+            protected function connectionMeta(array $connection): array
+            {
+                $fields = $this->connectionFields($connection);
+                $this->metaValues[$connection['id']] = $fields->values()->only(['to', 'cc'])->all();
+
+                return $fields->meta()->all();
+            }
+        };
+
+        $email->setForm($form)->setConnections([['id' => 'one', 'to' => 'a@example.com, b@example.com', 'cc' => 'c@example.com']]);
+        $props = $email->render()->toArray()['props'];
+
+        $this->assertEquals(['one'], array_keys($props['meta']));
+        $this->assertEquals(['to' => ['a@example.com', 'b@example.com'], 'cc' => ['c@example.com']], $email->metaValues['one']);
+    }
+
+    public static function legacyAddressProvider(): array
+    {
+        return [
+            'to' => ['to'],
+            'cc' => ['cc'],
+            'bcc' => ['bcc'],
+            'reply_to' => ['reply_to'],
+        ];
+    }
+
+    #[Test]
+    public function it_validates_email_configs()
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'email', 'field' => ['type' => 'email']],
+            ],
+        ]))->save();
+
+        $validator = Validator::make([
+            [
+                'id' => 'abc',
+                'to' => ['foo@example.com', 'field:email'],
+                'cc' => ['cc@example.com'],
+                'enabled' => true,
+                'conditions' => [['field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and']],
+            ],
+        ], (new Email)->setForm($form)->rules());
+
+        $this->assertTrue($validator->passes());
+    }
+
+    #[Test]
+    #[DataProvider('invalidConfigs')]
+    public function it_rejects_invalid_configs($configs, $errors)
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $validator = Validator::make($configs, (new Email)->setForm($form)->rules());
+
+        $this->assertTrue($validator->fails());
+
+        foreach ($errors as $key) {
+            $this->assertTrue($validator->errors()->has($key));
+        }
+    }
+
+    public static function invalidConfigs(): array
+    {
+        return [
+            'config not an array' => [['nope'], ['0']],
+            'config without a recipient' => [[['from' => 'foo@example.com']], ['0.to']],
+            'config with an empty recipient list' => [[['to' => []]], ['0.to']],
+            'config with an invalid recipient' => [[['to' => ['not-an-email']]], ['0.to']],
+            'config with an invalid legacy string recipient' => [[['to' => 'foo@example.com, not-an-email']], ['0.to']],
+            'config with an unknown field reference' => [[['to' => ['field:unknown']]], ['0.to']],
+            'config with an invalid cc' => [[['to' => ['foo@example.com'], 'cc' => ['not-an-email']]], ['0.cc']],
+            'config with an invalid sender' => [[['to' => ['foo@example.com'], 'from' => 'not-an-email']], ['0.from']],
+            'config with a non-boolean enabled' => [[['to' => ['foo@example.com'], 'enabled' => 'nope']], ['0.enabled']],
+            'config with non-array conditions' => [[['to' => ['foo@example.com'], 'conditions' => 'nope']], ['0.conditions']],
+            'config with a non-array condition' => [[['to' => ['foo@example.com'], 'conditions' => ['nope']]], ['0.conditions.0']],
+        ];
+    }
+
+    #[Test]
+    public function it_processes_email_configs()
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'email', 'field' => ['type' => 'email']],
+            ],
+        ]))->save();
+
+        $this->assertEquals([
+            ['id' => 'abc', 'to' => ['new@example.com', 'field:email'], 'subject' => 'Updated'],
+            ['id' => 'def', 'to' => ['another@example.com'], 'enabled' => false, 'conditions' => [
+                ['field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and'],
+            ]],
+            ['id' => 'ghi', 'to' => ['third@example.com'], 'markdown' => true, 'attachments' => true],
+        ], (new Email)->setForm($form)->process([
+            ['id' => 'abc', 'to' => ['new@example.com', 'field:email'], 'subject' => 'Updated', 'enabled' => true, 'markdown' => false, 'attachments' => false],
+            ['id' => 'def', 'to' => ['another@example.com'], 'enabled' => false, 'conditions' => [
+                ['_id' => 'vue-row', 'field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and'],
+            ]],
+            ['id' => 'ghi', 'to' => ['third@example.com'], 'markdown' => true, 'attachments' => true],
+        ]));
+    }
+
+    #[Test]
+    public function it_doesnt_persist_the_client_row_state()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $this->assertEquals([
+            ['id' => 'abc', 'to' => ['foo@example.com']],
+        ], (new Email)->setForm($form)->process([
+            ['_id' => 'vue-row', 'id' => 'abc', 'to' => ['foo@example.com']],
+        ]));
+    }
+
+    #[Test]
+    public function it_generates_an_id_for_configs_that_dont_have_one()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $config = (new Email)->setForm($form)->process([['to' => ['foo@example.com']]])[0];
+
+        $this->assertNotEmpty($config['id']);
+        $this->assertEquals(['foo@example.com'], $config['to']);
+    }
+
+    #[Test]
+    public function it_removes_null_values_from_configs()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $this->assertEquals([[
+            'id' => 'abc',
+            'to' => ['foo@example.com'],
+        ]], (new Email)->setForm($form)->process([[
+            'id' => 'abc',
+            'to' => ['foo@example.com'],
+            'cc' => [],
+            'subject' => '',
+            'reply_to' => null,
+        ]]));
+    }
+
+    #[Test]
+    public function the_address_fields_can_be_set_to_form_fields()
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'full_name', 'field' => ['type' => 'name']],
+                ['handle' => 'email_address', 'field' => ['type' => 'email', 'display' => 'Email Address']],
+                ['handle' => 'intro', 'field' => ['type' => 'heading']],
+                ['handle' => 'address', 'field' => ['type' => 'group']],
+            ],
+        ]))->save();
+
+        $meta = (new Email)->setForm($form)->blueprint()->fields()->meta();
+
+        foreach (['to', 'cc', 'bcc', 'from', 'reply_to'] as $handle) {
+            $this->assertEquals([
+                ['value' => 'field:full_name', 'label' => 'Full Name', 'icon' => 'user-avatar-flush', 'category' => 'contact'],
+                ['value' => 'field:email_address', 'label' => 'Email Address', 'icon' => 'mail-sign-at', 'category' => 'contact'],
+            ], $meta->get($handle)['options']);
+        }
+    }
+
+    private function makeForm(array $extraFields = [])
+    {
+        return tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'name', 'field' => ['type' => 'short_answer', 'display' => 'Name']],
+                ['handle' => 'email', 'field' => ['type' => 'email', 'display' => 'Email']],
+                ...$extraFields,
+            ],
+        ]))->save();
+    }
+
+    private function makeSubmission($form, array $data, string $date, bool $partial = false)
+    {
+        $submission = $form->makeSubmission()->id(Carbon::parse($date)->timestamp)->data($data);
+
+        if ($partial) {
+            $submission->asPartial();
+        }
+
+        return tap($submission)->save();
+    }
+
+    private function userWithEditPermission()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+
+        return tap(User::make()->assignRole('test'))->save();
+    }
+}
+
+class CustomSendEmail extends SendEmail
+{
+}
diff --git a/tests/Forms/Connectors/WebhookConnectorTest.php b/tests/Forms/Connectors/WebhookConnectorTest.php
new file mode 100644
index 00000000000..a09570a639a
--- /dev/null
+++ b/tests/Forms/Connectors/WebhookConnectorTest.php
@@ -0,0 +1,574 @@
+<?php
+
+namespace Tests\Forms\Connectors;
+
+use Illuminate\Http\Client\Request;
+use Illuminate\Http\Client\RequestException;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Validator;
+use InvalidArgumentException;
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\Attributes\Test;
+use RuntimeException;
+use Statamic\Exceptions\InvalidRemoteUrlException;
+use Statamic\Facades\Form;
+use Statamic\Facades\Site;
+use Statamic\Facades\User;
+use Statamic\Forms\Connectors\Webhook;
+use Statamic\Forms\Connectors\Webhooks\SendWebhook;
+use Statamic\Imaging\RemoteUrlValidator;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class WebhookConnectorTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        $this->app->bind(RemoteUrlValidator::class, function () {
+            return new RemoteUrlValidator(function ($host) {
+                return match ($host) {
+                    'example.com' => [['ip' => '93.184.216.34']],
+                    'internal.test' => [['ip' => '10.0.0.5']],
+                    default => [],
+                };
+            });
+        });
+    }
+
+    #[Test]
+    public function it_returns_a_job_per_webhook()
+    {
+        $form = tap(Form::make('test')->connections(['webhook' => [
+            ['url' => 'https://example.com/first'],
+            ['url' => 'https://example.com/second'],
+        ]]))->save();
+
+        $jobs = (new Webhook)->forForm($form)->finalized($form->makeSubmission());
+
+        $this->assertCount(2, $jobs);
+        $this->assertContainsOnlyInstancesOf(SendWebhook::class, $jobs);
+        $this->assertEquals('https://example.com/first', $jobs[0]->config['url']);
+        $this->assertEquals('https://example.com/second', $jobs[1]->config['url']);
+    }
+
+    #[Test]
+    public function it_skips_disabled_webhooks()
+    {
+        $form = tap(Form::make('test')->connections(['webhook' => [
+            ['url' => 'https://example.com/disabled', 'enabled' => false],
+            ['url' => 'https://example.com/enabled', 'enabled' => true],
+        ]]))->save();
+
+        $jobs = array_values((new Webhook)->forForm($form)->finalized($form->makeSubmission()));
+
+        $this->assertCount(1, $jobs);
+        $this->assertEquals('https://example.com/enabled', $jobs[0]->config['url']);
+    }
+
+    #[Test]
+    #[DataProvider('webhookConditionsProvider')]
+    public function it_filters_webhooks_using_conditions(array $conditions, string $value, bool $shouldDispatch)
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'how_did_you_hear', 'field' => ['type' => 'text']],
+            ],
+        ])->connections(['webhook' => [
+            ['url' => 'https://example.com/hook', 'conditions' => $conditions],
+        ]]))->save();
+
+        $submission = $form->makeSubmission()->data(['how_did_you_hear' => $value]);
+
+        $this->assertCount($shouldDispatch ? 1 : 0, (new Webhook)->forForm($form)->finalized($submission));
+    }
+
+    public static function webhookConditionsProvider(): array
+    {
+        $conditions = [['field' => 'how_did_you_hear', 'operator' => 'equals', 'value' => 'friend', 'join' => 'and']];
+
+        return [
+            'no conditions' => [[], 'google', true],
+            'matching conditions' => [$conditions, 'friend', true],
+            'non-matching conditions' => [$conditions, 'google', false],
+        ];
+    }
+
+    #[Test]
+    #[DataProvider('validUrlProvider')]
+    public function it_posts_the_form_and_submission_as_json(string $url)
+    {
+        Http::fake();
+
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'name', 'field' => ['type' => 'text']],
+            ],
+        ]))->save();
+
+        $submission = $form->makeSubmission()->data(['name' => 'Gandalf']);
+
+        (new SendWebhook($submission, Site::default(), ['url' => $url]))->handle();
+
+        Http::assertSent(fn (Request $request) => $request->url() === $url
+            && $request->method() === 'POST'
+            && $request->isJson()
+            && $request['form'] === 'test'
+            && $request['submission']['name'] === 'Gandalf'
+            && $request['submission']['id'] === $submission->id());
+    }
+
+    public static function validUrlProvider(): array
+    {
+        return [
+            'https' => ['https://example.com/hook'],
+            'http' => ['http://example.com/hook'],
+        ];
+    }
+
+    #[Test]
+    public function it_posts_without_ssl_verification_when_disabled()
+    {
+        Http::fake();
+
+        $form = tap(Form::make('test'))->save();
+
+        (new SendWebhook($form->makeSubmission(), Site::default(), [
+            'url' => 'https://example.com/hook',
+            'verify_ssl' => false,
+        ]))->handle();
+
+        Http::assertSentCount(1);
+    }
+
+    #[Test]
+    public function it_does_not_follow_redirects()
+    {
+        Http::fake([
+            'example.com/*' => Http::response(null, 302, ['Location' => 'http://169.254.169.254/latest/meta-data']),
+            '169.254.169.254/*' => Http::response('secret'),
+        ]);
+
+        $form = tap(Form::make('test'))->save();
+
+        try {
+            (new SendWebhook($form->makeSubmission(), Site::default(), ['url' => 'https://example.com/hook']))->handle();
+        } catch (RequestException) {
+        }
+
+        Http::assertSentCount(1);
+        Http::assertNotSent(fn (Request $request) => str_contains($request->url(), '169.254.169.254'));
+    }
+
+    #[Test]
+    #[DataProvider('internalUrlProvider')]
+    public function it_does_not_send_to_internal_addresses(string $url)
+    {
+        Http::fake();
+
+        $form = tap(Form::make('test'))->save();
+
+        try {
+            (new SendWebhook($form->makeSubmission(), Site::default(), ['url' => $url]))->handle();
+            $this->fail('An InvalidRemoteUrlException should have been thrown.');
+        } catch (InvalidRemoteUrlException) {
+        }
+
+        Http::assertNothingSent();
+    }
+
+    public static function internalUrlProvider(): array
+    {
+        return [
+            'metadata ip' => ['http://169.254.169.254/latest/meta-data'],
+            'loopback ip' => ['http://127.0.0.1:8080/hook'],
+            'localhost' => ['http://localhost:8080/hook'],
+            'hostname resolving to a private ip' => ['https://internal.test/hook'],
+            'credentials with an internal host' => ['https://user:pass@internal.test/hook'],
+        ];
+    }
+
+    #[Test]
+    public function it_sends_to_urls_with_credentials()
+    {
+        $options = null;
+
+        Http::fake(function ($request, $requestOptions) use (&$options) {
+            $options = $requestOptions;
+
+            return Http::response();
+        });
+
+        $form = tap(Form::make('test'))->save();
+
+        (new SendWebhook($form->makeSubmission(), Site::default(), ['url' => 'https://user:pass@example.com/hook']))->handle();
+
+        Http::assertSentCount(1);
+        $this->assertSame(['example.com:443:93.184.216.34'], $options['curl'][CURLOPT_RESOLVE]);
+    }
+
+    #[Test]
+    public function it_refuses_to_send_when_the_connection_cant_be_pinned()
+    {
+        Http::fake();
+
+        $form = tap(Form::make('test'))->save();
+
+        $job = new class($form->makeSubmission(), Site::default(), ['url' => 'https://example.com/hook']) extends SendWebhook
+        {
+            protected function supportsConnectionPinning(): bool
+            {
+                return false;
+            }
+        };
+
+        try {
+            $job->handle();
+            $this->fail('A RuntimeException should have been thrown.');
+        } catch (RuntimeException $e) {
+            $this->assertEquals('The curl PHP extension is required to send webhooks.', $e->getMessage());
+        }
+
+        Http::assertNothingSent();
+    }
+
+    #[Test]
+    public function it_pins_the_request_to_the_validated_ips()
+    {
+        $options = null;
+
+        Http::fake(function ($request, $requestOptions) use (&$options) {
+            $options = $requestOptions;
+
+            return Http::response();
+        });
+
+        $form = tap(Form::make('test'))->save();
+
+        (new SendWebhook($form->makeSubmission(), Site::default(), ['url' => 'https://example.com:8443/hook']))->handle();
+
+        $this->assertSame(['example.com:8443:93.184.216.34'], $options['curl'][CURLOPT_RESOLVE]);
+    }
+
+    #[Test]
+    public function it_skips_validation_and_pinning_on_local()
+    {
+        $this->app['env'] = 'local';
+
+        $options = null;
+
+        Http::fake(function ($request, $requestOptions) use (&$options) {
+            $options = $requestOptions;
+
+            return Http::response();
+        });
+
+        $form = tap(Form::make('test'))->save();
+
+        (new SendWebhook($form->makeSubmission(), Site::default(), ['url' => 'http://localhost:8080/hook']))->handle();
+
+        Http::assertSentCount(1);
+        $this->assertArrayNotHasKey(CURLOPT_RESOLVE, $options['curl'] ?? []);
+    }
+
+    #[Test]
+    public function it_throws_when_the_response_is_a_redirect()
+    {
+        Http::fake(['*' => Http::response(null, 302, ['Location' => 'https://example.com/elsewhere'])]);
+
+        $form = tap(Form::make('test'))->save();
+
+        $this->expectException(RequestException::class);
+
+        (new SendWebhook($form->makeSubmission(), Site::default(), ['url' => 'https://example.com/hook']))->handle();
+    }
+
+    #[Test]
+    public function it_throws_when_the_response_is_unsuccessful()
+    {
+        Http::fake(['*' => Http::response(null, 500)]);
+
+        $form = tap(Form::make('test'))->save();
+
+        $this->expectException(RequestException::class);
+
+        (new SendWebhook($form->makeSubmission(), Site::default(), ['url' => 'https://example.com/hook']))->handle();
+    }
+
+    #[Test]
+    #[DataProvider('invalidUrlProvider')]
+    public function it_rejects_urls_without_an_http_scheme(?string $url)
+    {
+        Http::fake();
+
+        $form = tap(Form::make('test'))->save();
+
+        try {
+            (new SendWebhook($form->makeSubmission(), Site::default(), ['url' => $url]))->handle();
+            $this->fail('An InvalidArgumentException should have been thrown.');
+        } catch (InvalidArgumentException) {
+        }
+
+        Http::assertNothingSent();
+    }
+
+    public static function invalidUrlProvider(): array
+    {
+        return [
+            'ftp' => ['ftp://example.com/hook'],
+            'file' => ['file:///etc/passwd'],
+            'schemeless' => ['example.com/hook'],
+            'missing url' => [null],
+        ];
+    }
+
+    #[Test]
+    #[DataProvider('webhookCountProvider')]
+    public function it_counts_the_configured_webhooks(array $webhooks, int $count)
+    {
+        $form = tap(Form::make('test')->connections(['webhook' => $webhooks]))->save();
+
+        $this->assertEquals($count, (new Webhook)->forForm($form)->count());
+    }
+
+    public static function webhookCountProvider(): array
+    {
+        return [
+            'none configured' => [[], 0],
+            'one configured' => [[['id' => 'one', 'url' => 'https://example.com/first']], 1],
+            'two configured' => [[['id' => 'one', 'url' => 'https://example.com/first'], ['id' => 'two', 'url' => 'https://example.com/second']], 2],
+        ];
+    }
+
+    #[Test]
+    public function it_renders_the_vue_component()
+    {
+        $this->actingAs(tap(User::make()->makeSuper())->save());
+
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'full_name', 'field' => ['type' => 'name']],
+            ],
+        ])->connections(['webhook' => [
+            ['id' => 'one', 'url' => 'https://example.com/first'],
+            ['id' => 'two', 'url' => 'https://example.com/second', 'verify_ssl' => false],
+        ]]))->save();
+
+        $component = (new Webhook)->forForm($form)->render()->toArray();
+
+        $this->assertEquals('webhook-connector', $component['name']);
+        $this->assertEquals(['blueprint', 'meta', 'defaults', 'examplePayload'], array_keys($component['props']));
+        $this->assertEquals(['one', 'two'], array_keys($component['props']['meta']));
+        $this->assertNull($component['props']['defaults']['values']['url']);
+        $this->assertArrayHasKey('meta', $component['props']['defaults']);
+    }
+
+    #[Test]
+    public function the_example_payload_uses_the_latest_submission()
+    {
+        $this->actingAs(tap(User::make()->makeSuper())->save());
+
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'full_name', 'field' => ['type' => 'name']],
+            ],
+        ]))->save();
+
+        $this->assertEquals([
+            'form' => 'test',
+            'submission' => ['id' => '…', 'date' => '…', 'full_name' => 'Jamie Schmidt'],
+        ], $this->examplePayload($form));
+
+        $submission = tap($form->makeSubmission()->data(['full_name' => 'Gandalf']))->save();
+
+        $this->assertEquals([
+            'form' => 'test',
+            'submission' => ['id' => $submission->id(), 'date' => $submission->date()->toJson(), 'full_name' => 'Gandalf'],
+        ], $this->examplePayload($form));
+
+        tap($form->makeSubmission()->data(['full_name' => 'Saruman'])->asPartial())->save();
+
+        $this->assertEquals('Gandalf', $this->examplePayload($form)['submission']['full_name']);
+    }
+
+    private function examplePayload($form): array
+    {
+        $payload = (new Webhook)->forForm($form)->render()->toArray()['props']['examplePayload'];
+
+        $this->assertJson($payload);
+
+        return json_decode($payload, true);
+    }
+
+    #[Test]
+    public function it_pre_processes_webhook_configs()
+    {
+        $form = tap(Form::make('test')->connections(['webhook' => [
+            [
+                'id' => 'one',
+                'url' => 'https://example.com/first',
+                'conditions' => [['field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and']],
+            ],
+            ['id' => 'two', 'url' => 'https://example.com/second', 'verify_ssl' => false, 'enabled' => false],
+        ]]))->save();
+
+        $configs = (new Webhook)->setForm($form)->preProcess($form->connections()->get('webhook'));
+
+        $this->assertEquals('one', $configs[0]['id']);
+        $this->assertTrue($configs[0]['enabled']);
+        $this->assertEquals('https://example.com/first', $configs[0]['url']);
+        $this->assertTrue($configs[0]['verify_ssl']);
+        $this->assertNotEmpty($configs[0]['conditions'][0]['_id']);
+        $this->assertEquals('name', $configs[0]['conditions'][0]['field']);
+        $this->assertEquals('Bob', $configs[0]['conditions'][0]['value']);
+        $this->assertEquals('two', $configs[1]['id']);
+        $this->assertFalse($configs[1]['enabled']);
+        $this->assertEquals('https://example.com/second', $configs[1]['url']);
+        $this->assertFalse($configs[1]['verify_ssl']);
+        $this->assertEquals([], $configs[1]['conditions']);
+    }
+
+    #[Test]
+    public function it_validates_webhook_configs()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $validator = Validator::make([
+            [
+                'id' => 'abc',
+                'url' => 'https://example.com/hook',
+                'verify_ssl' => false,
+                'enabled' => true,
+                'conditions' => [['field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and']],
+            ],
+        ], (new Webhook)->setForm($form)->rules());
+
+        $this->assertTrue($validator->passes());
+    }
+
+    #[Test]
+    public function it_rejects_internal_urls_when_validating()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        foreach (['http://169.254.169.254/', 'http://localhost:8080/hook', 'https://internal.test/hook', 'https://unresolvable.test/hook'] as $url) {
+            $validator = Validator::make([['url' => $url]], (new Webhook)->setForm($form)->rules());
+
+            $this->assertTrue($validator->fails(), $url);
+            $this->assertTrue($validator->errors()->has('0.url'), $url);
+            $this->assertEquals('Webhooks must use a public address.', $validator->errors()->first('0.url'), $url);
+        }
+    }
+
+    #[Test]
+    public function it_allows_urls_with_credentials_when_validating()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $validator = Validator::make([['url' => 'https://user:pass@example.com/hook']], (new Webhook)->setForm($form)->rules());
+
+        $this->assertTrue($validator->passes());
+    }
+
+    #[Test]
+    public function it_allows_internal_urls_when_validating_on_local()
+    {
+        $this->app['env'] = 'local';
+
+        $form = tap(Form::make('test'))->save();
+
+        $validator = Validator::make([['url' => 'http://localhost:8080/hook']], (new Webhook)->setForm($form)->rules());
+
+        $this->assertTrue($validator->passes());
+    }
+
+    #[Test]
+    #[DataProvider('invalidConfigs')]
+    public function it_rejects_invalid_configs($configs, $errors)
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $validator = Validator::make($configs, (new Webhook)->setForm($form)->rules());
+
+        $this->assertTrue($validator->fails());
+
+        foreach ($errors as $key) {
+            $this->assertTrue($validator->errors()->has($key));
+        }
+    }
+
+    public static function invalidConfigs(): array
+    {
+        return [
+            'config not an array' => [['nope'], ['0']],
+            'config without a url' => [[['enabled' => true]], ['0.url']],
+            'config with an invalid url' => [[['url' => 'not a url']], ['0.url']],
+            'config with a non-http url' => [[['url' => 'ftp://example.com/hook']], ['0.url']],
+            'config with a non-boolean verify_ssl' => [[['url' => 'https://example.com/hook', 'verify_ssl' => 'nope']], ['0.verify_ssl']],
+            'config with a non-boolean enabled' => [[['url' => 'https://example.com/hook', 'enabled' => 'nope']], ['0.enabled']],
+            'config with non-array conditions' => [[['url' => 'https://example.com/hook', 'conditions' => 'nope']], ['0.conditions']],
+            'config with a non-array condition' => [[['url' => 'https://example.com/hook', 'conditions' => ['nope']]], ['0.conditions.0']],
+        ];
+    }
+
+    #[Test]
+    public function it_processes_webhook_configs()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $this->assertEquals([
+            ['id' => 'def', 'url' => 'https://example.com/updated', 'enabled' => false, 'conditions' => [
+                ['field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and'],
+            ]],
+            ['id' => 'ghi', 'url' => 'http://localhost:5678/n8n', 'verify_ssl' => false],
+            ['id' => 'jkl', 'url' => 'https://example.com/defaults'],
+        ], (new Webhook)->setForm($form)->process([
+            ['id' => 'def', 'url' => 'https://example.com/updated', 'enabled' => false, 'conditions' => [
+                ['_id' => 'vue-row', 'field' => 'name', 'operator' => 'equals', 'value' => 'Bob', 'join' => 'and'],
+            ]],
+            ['id' => 'ghi', 'url' => 'http://localhost:5678/n8n', 'verify_ssl' => false],
+            ['id' => 'jkl', 'url' => 'https://example.com/defaults', 'enabled' => true, 'verify_ssl' => true],
+        ]));
+    }
+
+    #[Test]
+    public function it_doesnt_persist_the_client_row_state()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $this->assertEquals([
+            ['id' => 'abc', 'url' => 'https://example.com/hook'],
+        ], (new Webhook)->setForm($form)->process([
+            ['_id' => 'vue-row', 'id' => 'abc', 'url' => 'https://example.com/hook'],
+        ]));
+    }
+
+    #[Test]
+    public function it_generates_an_id_for_configs_that_dont_have_one()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $config = (new Webhook)->setForm($form)->process([['url' => 'https://example.com/hook']])[0];
+
+        $this->assertNotEmpty($config['id']);
+        $this->assertEquals('https://example.com/hook', $config['url']);
+    }
+
+    #[Test]
+    public function it_removes_null_values_from_configs()
+    {
+        $form = tap(Form::make('test'))->save();
+
+        $this->assertEquals([[
+            'id' => 'abc',
+            'url' => 'https://example.com/hook',
+        ]], (new Webhook)->setForm($form)->process([[
+            'id' => 'abc',
+            'url' => 'https://example.com/hook',
+            'enabled' => null,
+        ]]));
+    }
+}
diff --git a/tests/Forms/EmailTest.php b/tests/Forms/EmailTest.php
index 71fe6f36071..2d33db792cb 100644
--- a/tests/Forms/EmailTest.php
+++ b/tests/Forms/EmailTest.php
@@ -2,6 +2,7 @@
 
 namespace Tests\Forms;
 
+use Facades\Statamic\Console\Processes\Composer;
 use Facades\Statamic\Fields\BlueprintRepository;
 use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Facades\Storage;
@@ -69,6 +70,26 @@ public function it_adds_bcc_from_the_config($address, $expected)
         $this->assertEquals($expected, $email->bcc);
     }
 
+    #[Test]
+    public function it_sanitizes_field_values_used_as_addresses()
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'email', 'field' => ['type' => 'email']],
+            ],
+        ]))->save();
+
+        $submission = $form->makeSubmission()->data([
+            'email' => "evil@example.com\r\nBcc: victim@example.com",
+        ]);
+
+        $email = tap(new Email($submission, [
+            'to' => ['safe@example.com', 'field:email'],
+        ], Site::default()))->build();
+
+        $this->assertEquals([['address' => 'safe@example.com', 'name' => null]], $email->to);
+    }
+
     public static function singleAddressProvider()
     {
         return [
@@ -90,6 +111,12 @@ public static function singleAddressProvider()
             'single email with name from global set using antlers' => ['{{ company_information:name }} <{{ company_information:email }}>', [
                 ['address' => 'info@example.com', 'name' => 'Example Company'],
             ]],
+            'array with single email' => [['foo@bar.com'], [
+                ['address' => 'foo@bar.com', 'name' => null],
+            ]],
+            'array with single field reference' => [['field:email'], [
+                ['address' => 'foo@bar.com', 'name' => null],
+            ]],
         ];
     }
 
@@ -112,6 +139,27 @@ public static function multipleAddressProvider()
                 ['address' => 'foo@bar.com', 'name' => 'Foo Bar'],
                 ['address' => 'baz@qux.com', 'name' => 'Baz Qux'],
             ]],
+            'array of emails' => [['foo@bar.com', 'baz@qux.com'], [
+                ['address' => 'foo@bar.com', 'name' => null],
+                ['address' => 'baz@qux.com', 'name' => null],
+            ]],
+            'array of emails with name using antlers' => [['{{ name }} <{{ email }}>', 'Baz Qux <baz@qux.com>'], [
+                ['address' => 'foo@bar.com', 'name' => 'Foo Bar'],
+                ['address' => 'baz@qux.com', 'name' => 'Baz Qux'],
+            ]],
+            'array with an antlers value that resolves empty' => [['{{ nonexistent_field }}', 'foo@bar.com'], [
+                ['address' => 'foo@bar.com', 'name' => null],
+            ]],
+            'array with a field reference and an email' => [['field:email', 'baz@qux.com'], [
+                ['address' => 'foo@bar.com', 'name' => null],
+                ['address' => 'baz@qux.com', 'name' => null],
+            ]],
+            'array with a field reference to a non-email value' => [['field:name', 'foo@bar.com'], [
+                ['address' => 'foo@bar.com', 'name' => null],
+            ]],
+            'array with a field reference to a missing field' => [['field:nonexistent', 'foo@bar.com'], [
+                ['address' => 'foo@bar.com', 'name' => null],
+            ]],
         ]);
     }
 
@@ -165,6 +213,8 @@ public function it_adds_data_to_the_view()
             'fields',
             'locale',
             'now',
+            'pages',
+            'sections',
             'site',
             'site_url',
             'today',
@@ -176,6 +226,154 @@ public function it_adds_data_to_the_view()
         $this->assertEquals('Statamic', (string) $email->viewData['company']['company_name']);
     }
 
+    #[Test]
+    public function it_adds_page_data_to_the_view()
+    {
+        $email = $this->makeEmailForMultiPageForm();
+
+        $pages = $email->viewData['pages'];
+
+        $this->assertEquals(['Your Details', 'Your Message'], collect($pages)->pluck('display')->all());
+        $this->assertEquals('Tell us about yourself.', $pages[0]['instructions']);
+        $this->assertEquals(['Name', 'Contact'], collect($pages[0]['sections'])->pluck('display')->all());
+        $this->assertEquals('What should we call you?', $pages[0]['sections'][0]['instructions']);
+        $this->assertEquals(['name'], collect($pages[0]['sections'][0]['fields'])->pluck('handle')->all());
+        $this->assertEquals(['email'], collect($pages[0]['sections'][1]['fields'])->pluck('handle')->all());
+        $this->assertEquals(['message'], collect($pages[1]['sections'][0]['fields'])->pluck('handle')->all());
+        $this->assertEquals('Jack Black', $pages[0]['sections'][0]['fields'][0]['value']->value());
+    }
+
+    #[Test]
+    public function it_adds_section_data_to_the_view()
+    {
+        $email = $this->makeEmailForMultiPageForm();
+
+        $sections = $email->viewData['sections'];
+
+        $this->assertEquals(['Name', 'Contact', null], collect($sections)->pluck('display')->all());
+        $this->assertEquals(['message'], collect($sections[2]['fields'])->pluck('handle')->all());
+    }
+
+    private function makeEmailForMultiPageForm(): Email
+    {
+        Composer::shouldReceive('isInstalled')->with('statamic/forms-pro')->andReturn(true);
+
+        $form = tap(Form::make('test')->formFields([
+            'pages' => [
+                [
+                    'display' => 'Your Details',
+                    'instructions' => 'Tell us about yourself.',
+                    'sections' => [
+                        [
+                            'display' => 'Name',
+                            'instructions' => 'What should we call you?',
+                            'fields' => [
+                                ['handle' => 'intro', 'field' => ['type' => 'heading']],
+                                ['handle' => 'name', 'field' => ['type' => 'short_answer']],
+                            ],
+                        ],
+                        [
+                            'display' => 'Contact',
+                            'fields' => [
+                                ['handle' => 'email', 'field' => ['type' => 'email']],
+                            ],
+                        ],
+                    ],
+                ],
+                [
+                    'display' => 'Your Message',
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'message', 'field' => ['type' => 'long_answer']],
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]))->save();
+
+        $submission = $form->makeSubmission()->data([
+            'name' => 'Jack Black',
+            'email' => 'jack@black.com',
+            'message' => 'Hello there.',
+        ]);
+
+        return $this->makeEmailWithSubmission($submission);
+    }
+
+    #[Test]
+    public function it_excludes_informational_and_structural_fields_from_the_fields_data()
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'name', 'field' => ['type' => 'short_answer']],
+                ['handle' => 'intro', 'field' => ['type' => 'heading']],
+                ['handle' => 'gap', 'field' => ['type' => 'spacer']],
+                ['handle' => 'blurb', 'field' => ['type' => 'paragraph']],
+            ],
+        ]))->save();
+
+        $submission = $form->makeSubmission()->data(['name' => 'Foo Bar']);
+
+        $email = tap(new Email($submission, ['to' => 'test@test.com'], Site::default()))->build();
+
+        $this->assertEquals(['name'], collect($email->viewData['fields'])->pluck('handle')->all());
+    }
+
+    #[Test]
+    public function it_renders_the_body_in_the_automagic_email_instead_of_listing_the_fields()
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'name', 'field' => ['type' => 'short_answer']],
+            ],
+        ]))->save();
+
+        $submission = $form->makeSubmission()->data(['name' => 'Jack Black']);
+
+        $email = new Email($submission, [
+            'to' => 'test@test.com',
+            'body' => "Hello {{ name }},\nThanks for getting in touch.",
+        ], Site::default());
+
+        $body = $email->render();
+
+        $this->assertStringContainsString('Hello Jack Black,<br', $body);
+        $this->assertStringContainsString('Thanks for getting in touch.', $body);
+        $this->assertStringNotContainsString('<b>Name:</b>', $body);
+    }
+
+    #[Test]
+    public function it_escapes_submitted_values_in_the_automagic_email_body()
+    {
+        $form = tap(Form::make('test')->formFields([
+            'fields' => [
+                ['handle' => 'name', 'field' => ['type' => 'short_answer']],
+            ],
+        ]))->save();
+
+        $submission = $form->makeSubmission()->data(['name' => '<script>alert(1)</script>']);
+
+        $email = new Email($submission, [
+            'to' => 'test@test.com',
+            'body' => 'New submission from {{ name }}',
+        ], Site::default());
+
+        $body = $email->render();
+
+        $this->assertStringNotContainsString('<script>alert(1)</script>', $body);
+        $this->assertStringContainsString('New submission from &lt;script&gt;alert(1)&lt;/script&gt;', $body);
+    }
+
+    #[Test]
+    public function it_uses_the_custom_view_instead_of_the_body_when_one_is_configured()
+    {
+        $email = $this->makeEmailWithConfig(['body' => 'Hello {{ name }}', 'html' => 'emails.custom']);
+
+        $this->assertEquals('emails.custom', $email->view);
+    }
+
     #[Test]
     public function it_augments_appended_config_fields()
     {
diff --git a/tests/Forms/FormTest.php b/tests/Forms/FormTest.php
index 214d0b10e58..5156f27e54c 100644
--- a/tests/Forms/FormTest.php
+++ b/tests/Forms/FormTest.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Support\Facades\Event;
+use PHPUnit\Framework\Attributes\DataProvider;
 use PHPUnit\Framework\Attributes\Test;
 use Statamic\Events\FormCreated;
 use Statamic\Events\FormCreating;
@@ -16,6 +17,7 @@
 use Statamic\Facades\Form;
 use Statamic\Facades\YAML;
 use Statamic\Forms\Fields\FormFields;
+use Statamic\Support\Arr;
 use Tests\TestCase;
 
 class FormTest extends TestCase
@@ -378,6 +380,262 @@ public function it_hydrates_form_fields_from_yaml()
         $this->assertEquals('name', $formFields->field('name')->handle());
     }
 
+    #[Test]
+    #[DataProvider('connectionsProvider')]
+    public function it_gets_and_sets_connections($connections)
+    {
+        $form = Form::make('contact_us');
+
+        $this->assertEquals(collect(), $form->connections());
+
+        $form->connections($connections);
+
+        $this->assertEquals([
+            'email' => [['to' => 'foo@bar.com']],
+            'webhook' => [['url' => 'https://example.com/hook']],
+        ], $form->connections()->map(fn ($configs) => array_map(fn ($config) => Arr::except($config, 'id'), $configs))->all());
+    }
+
+    public static function connectionsProvider()
+    {
+        $connections = [
+            'email' => [['to' => 'foo@bar.com']],
+            'webhook' => [['url' => 'https://example.com/hook']],
+        ];
+
+        return [
+            'array' => [$connections],
+            'collection' => [collect($connections)],
+        ];
+    }
+
+    #[Test]
+    public function it_assigns_ids_to_connections_when_setting()
+    {
+        $form = Form::make('contact_us')->connections([
+            'webhook' => [['url' => 'https://example.com/hook'], ['id' => 'abc', 'url' => 'https://example.com/other']],
+        ]);
+
+        $webhooks = $form->connections()->get('webhook');
+
+        $this->assertNotEmpty($webhooks[0]['id']);
+        $this->assertEquals('abc', $webhooks[1]['id']);
+    }
+
+    #[Test]
+    public function it_normalizes_connection_configs_into_lists_of_connections_when_setting()
+    {
+        $form = Form::make('contact_us')->connections([
+            'acme' => ['token' => 'secret'],
+            'webhook' => [['url' => 'https://example.com/hook'], 'nope', null],
+            'other' => 'nope',
+        ]);
+
+        $connections = $form->connections()->map(fn ($list) => array_map(fn ($connection) => Arr::except($connection, 'id'), $list))->all();
+
+        $this->assertSame([
+            'acme' => [['token' => 'secret']],
+            'webhook' => [['url' => 'https://example.com/hook']],
+            'other' => [],
+        ], $connections);
+    }
+
+    #[Test]
+    public function it_assigns_ids_to_connections_when_hydrating()
+    {
+        File::put(Form::make('contact_us')->path(), YAML::dump([
+            'title' => 'Contact Us',
+            'connections' => [
+                'webhook' => [['url' => 'https://example.com/hook']],
+            ],
+        ]));
+
+        $webhooks = Form::find('contact_us')->connections()->get('webhook');
+
+        $this->assertNotEmpty($webhooks[0]['id']);
+        $this->assertEquals('https://example.com/hook', $webhooks[0]['url']);
+    }
+
+    #[Test]
+    #[DataProvider('legacyEmailProvider')]
+    public function it_projects_legacy_email_config_into_connections($legacy, $expected)
+    {
+        File::put(Form::make('contact_us')->path(), YAML::dump([
+            'title' => 'Contact Us',
+            'email' => $legacy,
+        ]));
+
+        $form = Form::find('contact_us');
+
+        $emails = collect($form->connections()->get('email'));
+
+        $this->assertEquals($expected, $emails->map(fn ($email) => Arr::except($email, 'id'))->all());
+        $this->assertCount($emails->count(), $emails->pluck('id')->filter()->unique());
+    }
+
+    public static function legacyEmailProvider()
+    {
+        return [
+            'list of configs' => [
+                [['to' => 'foo@bar.com'], ['to' => 'baz@qux.com']],
+                [['to' => 'foo@bar.com'], ['to' => 'baz@qux.com']],
+            ],
+            'single config' => [
+                ['to' => 'foo@bar.com'],
+                [['to' => 'foo@bar.com']],
+            ],
+        ];
+    }
+
+    #[Test]
+    public function it_gets_email_configs_from_connections()
+    {
+        $form = Form::make('contact_us');
+
+        $this->assertNull($form->email());
+
+        $form->connections(['email' => [['to' => 'foo@bar.com']]]);
+
+        $this->assertEquals([['to' => 'foo@bar.com']], $form->email());
+    }
+
+    #[Test]
+    public function it_sets_email_configs_into_connections()
+    {
+        $form = Form::make('contact_us')->connections(['webhook' => [['url' => 'https://example.com/hook']]]);
+
+        $form->email([['to' => 'foo@bar.com']]);
+
+        $this->assertEquals(['webhook', 'email'], $form->connections()->keys()->all());
+        $this->assertEquals([['url' => 'https://example.com/hook']], array_map(fn ($config) => Arr::except($config, 'id'), $form->connections()->get('webhook')));
+        $this->assertEquals([['to' => 'foo@bar.com']], $form->email());
+    }
+
+    #[Test]
+    public function it_gives_email_configs_an_id_when_setting()
+    {
+        $form = Form::make('contact_us')->email([['to' => 'foo@bar.com'], ['to' => 'baz@qux.com']]);
+
+        $ids = collect($form->connections()->get('email'))->pluck('id');
+
+        $this->assertCount(2, $ids->filter()->unique());
+    }
+
+    #[Test]
+    public function it_keeps_existing_email_ids_when_setting()
+    {
+        $form = Form::make('contact_us')->email([['id' => 'abc', 'to' => 'foo@bar.com']]);
+
+        $this->assertEquals('abc', $form->connections()->get('email')[0]['id']);
+    }
+
+    #[Test]
+    public function it_wraps_a_single_email_config_when_setting()
+    {
+        $form = Form::make('contact_us')->email(['to' => 'foo@bar.com']);
+
+        $this->assertEquals([['to' => 'foo@bar.com']], $form->email());
+    }
+
+    #[Test]
+    public function saving_a_legacy_form_migrates_email_config_to_connections()
+    {
+        File::put(Form::make('contact_us')->path(), YAML::dump([
+            'title' => 'Contact Us',
+            'email' => ['to' => 'foo@bar.com'],
+        ]));
+
+        $form = Form::find('contact_us');
+        $form->save();
+
+        $saved = YAML::parse(File::get($form->path()));
+
+        $this->assertCount(1, $saved['connections']['email']);
+        $this->assertNotEmpty($saved['connections']['email'][0]['id']);
+        $this->assertEquals('foo@bar.com', $saved['connections']['email'][0]['to']);
+        $this->assertArrayNotHasKey('email', $saved);
+    }
+
+    #[Test]
+    public function it_does_not_save_empty_connection_lists()
+    {
+        $form = Form::make('contact_us')->connections([
+            'email' => [],
+            'webhook' => [['url' => 'https://example.com/hook']],
+        ]);
+        $form->save();
+
+        $saved = YAML::parse(File::get($form->path()));
+
+        $this->assertEquals(['webhook'], array_keys($saved['connections']));
+
+        $form->connections(['email' => [], 'webhook' => []])->save();
+
+        $saved = YAML::parse(File::get($form->path()));
+
+        $this->assertArrayNotHasKey('connections', $saved);
+    }
+
+    #[Test]
+    public function saving_a_legacy_form_drops_empty_email_config()
+    {
+        File::put(Form::make('contact_us')->path(), YAML::dump([
+            'title' => 'Contact Us',
+            'email' => [],
+        ]));
+
+        $form = Form::find('contact_us');
+        $form->save();
+
+        $saved = YAML::parse(File::get($form->path()));
+
+        $this->assertArrayNotHasKey('connections', $saved);
+        $this->assertArrayNotHasKey('email', $saved);
+    }
+
+    #[Test]
+    public function saving_a_legacy_form_migrates_email_config_without_a_to_key()
+    {
+        File::put(Form::make('contact_us')->path(), YAML::dump([
+            'title' => 'Contact Us',
+            'email' => ['from' => 'foo@bar.com', 'subject' => 'Hello'],
+        ]));
+
+        $form = Form::find('contact_us');
+        $form->save();
+
+        $saved = YAML::parse(File::get($form->path()));
+
+        $this->assertCount(1, $saved['connections']['email']);
+        $this->assertNotEmpty($saved['connections']['email'][0]['id']);
+        $this->assertEquals('foo@bar.com', $saved['connections']['email'][0]['from']);
+        $this->assertArrayNotHasKey('email', $saved);
+    }
+
+    #[Test]
+    public function it_drops_legacy_email_configs_that_arent_arrays()
+    {
+        File::put(Form::make('contact_us')->path(), YAML::dump([
+            'title' => 'Contact Us',
+            'email' => ['foo@bar.com', ['to' => 'baz@qux.com']],
+        ]));
+
+        $emails = Form::find('contact_us')->connections()->get('email');
+
+        $this->assertCount(1, $emails);
+        $this->assertEquals('baz@qux.com', $emails[0]['to']);
+    }
+
+    #[Test]
+    public function it_omits_connections_from_yaml_when_empty()
+    {
+        $form = tap(Form::make('contact_us')->title('Contact Us'))->save();
+
+        $saved = YAML::parse(File::get($form->path()));
+
+        $this->assertArrayNotHasKey('connections', $saved);
+    }
+
     #[Test]
     public function it_saves_charts_to_yaml_and_hydrates_them_back()
     {
diff --git a/tests/Forms/SendEmailsTest.php b/tests/Forms/SendEmailsTest.php
index f17c00c3442..3dd94617c0e 100644
--- a/tests/Forms/SendEmailsTest.php
+++ b/tests/Forms/SendEmailsTest.php
@@ -3,14 +3,16 @@
 namespace Tests\Forms;
 
 use Illuminate\Support\Facades\Bus;
-use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Mail;
 use PHPUnit\Framework\Attributes\DataProvider;
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Contracts\Forms\Submission;
 use Statamic\Facades\Form as FacadesForm;
 use Statamic\Facades\Site;
-use Statamic\Forms\DeleteTemporaryFiles;
-use Statamic\Forms\SendEmail;
+use Statamic\Facades\Stache;
+use Statamic\Forms\Email;
 use Statamic\Forms\SendEmails;
+use Statamic\Support\Arr;
 use Tests\PreventSavingStacheItemsToDisk;
 use Tests\TestCase;
 
@@ -19,9 +21,9 @@ class SendEmailsTest extends TestCase
     use PreventSavingStacheItemsToDisk;
 
     #[Test]
-    public function it_queues_email_jobs()
+    public function it_sends_an_email_per_config()
     {
-        Bus::fake();
+        Mail::fake();
 
         $form = tap(FacadesForm::make('test')->email([
             [
@@ -36,37 +38,52 @@ public function it_queues_email_jobs()
             ],
         ]))->save();
 
-        (new SendEmails(
-            $submission = $form->makeSubmission(),
-            $site = Site::default(),
-        ))->handle();
+        $this->sendEmails($form->makeSubmission());
 
-        Bus::assertChained([
-            new SendEmail($submission, $site, [
-                'from' => 'first@sender.com',
-                'to' => 'first@recipient.com',
-                'foo' => 'bar',
-                // test that the config is passed along unparsed.
-                // the email class will handle that. we don't want to double parse.
-                'unparsed' => '{{ test }}',
-            ]),
-            new SendEmail($submission, $site, [
-                'from' => 'second@sender.com',
-                'to' => 'second@recipient.com',
-                'baz' => 'qux',
-            ]),
+        Mail::assertSent(Email::class, 2);
+        Mail::assertSent(Email::class, fn (Email $email) => Arr::except($email->getConfig(), 'id') === [
+            'from' => 'first@sender.com',
+            'to' => 'first@recipient.com',
+            'foo' => 'bar',
+            // test that the config is passed along unparsed.
+            // the email class will handle that. we don't want to double parse.
+            'unparsed' => '{{ test }}',
+        ]);
+        Mail::assertSent(Email::class, fn (Email $email) => Arr::except($email->getConfig(), 'id') === [
+            'from' => 'second@sender.com',
+            'to' => 'second@recipient.com',
+            'baz' => 'qux',
         ]);
     }
 
     #[Test]
-    public function it_queues_email_jobs_when_config_contains_single_email()
+    public function it_sends_emails_in_the_order_they_are_configured()
+    {
+        Mail::fake();
+
+        $form = tap(FacadesForm::make('test')->email([
+            ['to' => 'first@recipient.com'],
+            ['to' => 'second@recipient.com'],
+            ['to' => 'third@recipient.com'],
+        ]))->save();
+
+        $this->sendEmails($form->makeSubmission());
+
+        $this->assertEquals(
+            ['first@recipient.com', 'second@recipient.com', 'third@recipient.com'],
+            Mail::sent(Email::class)->map(fn (Email $email) => $email->getConfig()['to'])->all()
+        );
+    }
+
+    #[Test]
+    public function it_sends_an_email_when_config_contains_single_email()
     {
         // The email config should be an array of email configs.
         // e.g. [ [to,from,...], [to,from,...], ... ]
         // but it's possible that a user may have only one email config.
         // e.g. [to,from,...]
 
-        Bus::fake();
+        Mail::fake();
 
         $form = tap(FacadesForm::make('test')->email([
             'from' => 'first@sender.com',
@@ -74,118 +91,200 @@ public function it_queues_email_jobs_when_config_contains_single_email()
             'foo' => 'bar',
         ]))->save();
 
-        (new SendEmails(
-            $submission = $form->makeSubmission(),
-            $site = Site::default(),
-        ))->handle();
+        $this->sendEmails($form->makeSubmission());
 
-        Bus::assertChained([
-            new SendEmail($submission, $site, [
-                'from' => 'first@sender.com',
-                'to' => 'first@recipient.com',
-                'foo' => 'bar',
-            ]),
+        Mail::assertSent(Email::class, 1);
+        Mail::assertSent(Email::class, fn (Email $email) => Arr::except($email->getConfig(), 'id') === [
+            'from' => 'first@sender.com',
+            'to' => 'first@recipient.com',
+            'foo' => 'bar',
         ]);
     }
 
     #[Test]
-    public function it_dispatches_delete_temporary_files_job_after_dispatching_email_jobs()
+    #[DataProvider('noEmailsProvider')]
+    public function no_emails_are_sent_if_none_are_configured($emailConfig)
     {
-        Bus::fake();
+        Mail::fake();
 
-        $form = tap(FacadesForm::make('attachments_test')->email([
-            'from' => 'first@sender.com',
-            'to' => 'first@recipient.com',
-            'foo' => 'bar',
-        ])->formFields([
+        $form = tap(FacadesForm::make('test')->email($emailConfig))->save();
+
+        $this->sendEmails($form->makeSubmission());
+
+        Mail::assertNothingSent();
+    }
+
+    public static function noEmailsProvider()
+    {
+        return [
+            'null' => [null],
+            'empty array' => [[]],
+        ];
+    }
+
+    #[Test]
+    #[DataProvider('recipientFieldProvider')]
+    public function it_skips_emails_whose_recipients_dont_resolve($value, $shouldSend)
+    {
+        Mail::fake();
+
+        $form = tap(FacadesForm::make('test')->formFields([
             'fields' => [
-                ['handle' => 'document', 'field' => ['type' => 'form_upload', 'store' => false]],
+                ['handle' => 'email', 'field' => ['type' => 'text']],
             ],
-        ]))->save();
+        ])->connections(['email' => [
+            ['id' => 'one', 'to' => ['field:email']],
+        ]]))->save();
+
+        $this->sendEmails($form->makeSubmission()->data(['email' => $value]));
 
-        (new SendEmails(
-            $submission = $form->makeSubmission(),
-            $site = Site::default(),
-        ))->handle();
+        $shouldSend
+            ? Mail::assertSent(Email::class, 1)
+            : Mail::assertNothingSent();
+    }
 
-        Bus::assertChained([
-            new SendEmail($submission, $site, [
+    public static function recipientFieldProvider()
+    {
+        return [
+            'field was filled in' => ['someone@example.com', true],
+            'field was left blank' => [null, false],
+            'field contains junk' => ['not an email', false],
+        ];
+    }
+
+    #[Test]
+    public function it_skips_disabled_email_configs()
+    {
+        Mail::fake();
+
+        $form = tap(FacadesForm::make('test')->connections(['email' => [
+            [
                 'from' => 'first@sender.com',
                 'to' => 'first@recipient.com',
-                'foo' => 'bar',
-            ]),
-            new DeleteTemporaryFiles($submission),
-        ]);
+                'enabled' => false,
+            ], [
+                'from' => 'second@sender.com',
+                'to' => 'second@recipient.com',
+                'enabled' => true,
+            ], [
+                'from' => 'third@sender.com',
+                'to' => 'third@recipient.com',
+            ],
+        ]]))->save();
+
+        $this->sendEmails($form->makeSubmission());
+
+        Mail::assertSent(Email::class, 2);
+        Mail::assertNotSent(Email::class, fn (Email $email) => $email->getConfig()['from'] === 'first@sender.com');
     }
 
     #[Test]
-    public function it_dispatches_delete_temporary_files_job_even_without_any_emails_configured()
+    #[DataProvider('emailConditionsProvider')]
+    public function it_filters_email_configs_using_conditions($conditions, $value, $shouldSend)
     {
-        Bus::fake();
+        Mail::fake();
 
-        $form = tap(FacadesForm::make('attachments_test')->formFields([
+        $config = [
+            'from' => 'first@sender.com',
+            'to' => 'first@recipient.com',
+            'conditions' => $conditions,
+        ];
+
+        $form = tap(FacadesForm::make('test')->formFields([
             'fields' => [
-                ['handle' => 'document', 'field' => ['type' => 'form_upload', 'store' => false]],
+                ['handle' => 'how_did_you_hear', 'field' => ['type' => 'text']],
             ],
-        ]))->save();
+        ])->connections(['email' => [$config]]))->save();
+
+        $this->sendEmails($form->makeSubmission()->data(['how_did_you_hear' => $value]));
 
-        (new SendEmails(
-            $form->makeSubmission(),
-            Site::default(),
-        ))->handle();
+        $shouldSend
+            ? Mail::assertSent(Email::class, 1)
+            : Mail::assertNothingSent();
+    }
+
+    public static function emailConditionsProvider()
+    {
+        $conditions = [['field' => 'how_did_you_hear', 'operator' => 'equals', 'value' => 'friend']];
 
-        Bus::assertDispatched(DeleteTemporaryFiles::class);
+        return [
+            'no conditions' => [[], 'google', true],
+            'matching conditions' => [$conditions, 'friend', true],
+            'non-matching conditions' => [$conditions, 'google', false],
+        ];
     }
 
     #[Test]
-    public function delete_attachments_job_deletes_files_from_the_configured_disk_and_path()
+    public function it_uses_the_configured_configs_instead_of_the_forms_own_when_set()
     {
-        config([
-            'statamic.system.file_uploads_disk' => 'uploads',
-            'statamic.system.file_uploads_path' => 'temp-uploads',
-        ]);
+        Mail::fake();
 
-        $localDisk = Storage::fake('local');
-        $uploadsDisk = Storage::fake('uploads');
-        $uploadsDisk->put('temp-uploads/1234567/file.txt', 'contents');
-        $localDisk->put('statamic/file-uploads/1234567/file.txt', 'contents');
+        $form = tap(FacadesForm::make('test')->email([
+            ['from' => 'form@sender.com', 'to' => 'form@recipient.com'],
+        ]))->save();
 
-        $form = tap(FacadesForm::make('attachments_test')->email([
-            'from' => 'first@sender.com',
-            'to' => 'first@recipient.com',
+        $submission = $form->makeSubmission();
+
+        Bus::chain([
+            new SendEmails($submission, Site::default(), [
+                ['id' => 'override', 'from' => 'override@sender.com', 'to' => 'override@recipient.com'],
+            ]),
+        ])->dispatch();
+
+        Mail::assertSent(Email::class, 1);
+        Mail::assertSent(Email::class, fn (Email $email) => $email->getConfig()['to'] === 'override@recipient.com');
+    }
+
+    #[Test]
+    public function it_reads_connections_from_the_dispatched_submissions_form_instance()
+    {
+        Mail::fake();
+
+        $form = tap(FacadesForm::make('test')->email([
+            ['from' => 'saved@sender.com', 'to' => 'saved@recipient.com'],
         ]))->save();
 
-        $form->blueprint()->ensureField('attachments', ['type' => 'files']);
+        $submission = tap($form->makeSubmission())->save();
+
+        Stache::clear();
 
-        $submission = $form->makeSubmission()->data(['attachments' => ['1234567/file.txt']]);
+        $form->email([
+            ['from' => 'changed@sender.com', 'to' => 'changed@recipient.com'],
+        ]);
 
-        (new DeleteTemporaryFiles($submission))->handle();
+        $this->sendEmails($submission);
 
-        $uploadsDisk->assertMissing('temp-uploads/1234567/file.txt');
-        $localDisk->assertExists('statamic/file-uploads/1234567/file.txt');
+        Mail::assertSent(Email::class, 1);
+        Mail::assertSent(Email::class, fn (Email $email) => $email->getConfig()['to'] === 'changed@recipient.com');
     }
 
     #[Test]
-    #[DataProvider('noEmailsProvider')]
-    public function no_email_jobs_are_queued_if_none_are_configured($emailConfig)
+    public function it_uses_the_configured_configs_even_when_the_forms_connections_were_changed_in_memory()
     {
-        Bus::fake();
+        Mail::fake();
 
-        $form = tap(FacadesForm::make('test')->email($emailConfig))->save();
+        $form = tap(FacadesForm::make('test')->email([
+            ['from' => 'saved@sender.com', 'to' => 'saved@recipient.com'],
+        ]))->save();
 
-        (new SendEmails(
-            $form->makeSubmission(),
-            Site::default(),
-        ))->handle();
+        $submission = tap($form->makeSubmission())->save();
 
-        Bus::assertNothingDispatched();
+        $form->email([
+            ['from' => 'changed@sender.com', 'to' => 'changed@recipient.com'],
+        ]);
+
+        Bus::chain([
+            new SendEmails($submission, Site::default(), [
+                ['id' => 'override', 'from' => 'override@sender.com', 'to' => 'override@recipient.com'],
+            ]),
+        ])->dispatch();
+
+        Mail::assertSent(Email::class, 1);
+        Mail::assertSent(Email::class, fn (Email $email) => $email->getConfig()['to'] === 'override@recipient.com');
     }
 
-    public static function noEmailsProvider()
+    private function sendEmails(Submission $submission): void
     {
-        return [
-            'null' => [null],
-            'empty array' => [[]],
-        ];
+        Bus::chain([new SendEmails($submission, Site::default())])->dispatch();
     }
 }
diff --git a/tests/Forms/SubmissionTest.php b/tests/Forms/SubmissionTest.php
index f70edf270b0..872e7a4bdf7 100644
--- a/tests/Forms/SubmissionTest.php
+++ b/tests/Forms/SubmissionTest.php
@@ -6,6 +6,7 @@
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Bus;
 use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\Queue;
 use PHPUnit\Framework\Attributes\DataProvider;
 use PHPUnit\Framework\Attributes\Test;
 use Statamic\Events\SubmissionCreated;
@@ -16,8 +17,10 @@
 use Statamic\Events\SubmissionSaving;
 use Statamic\Facades\Form;
 use Statamic\Facades\Site;
+use Statamic\Forms\Connectors\Webhooks\SendWebhook;
 use Statamic\Forms\CreateAssetsFromFileUploads;
 use Statamic\Forms\DeleteTemporaryFiles;
+use Statamic\Forms\SendEmail;
 use Statamic\Forms\SendEmails;
 use Tests\PreventSavingStacheItemsToDisk;
 use Tests\TestCase;
@@ -410,23 +413,63 @@ public function finalizing_a_new_submission_dispatches_created_and_finalized_eve
         Event::assertDispatched(SubmissionCreated::class, 1);
         Event::assertDispatched(SubmissionFinalized::class, 1);
         Bus::assertDispatched(CreateAssetsFromFileUploads::class, 1);
-        Bus::assertDispatched(SendEmails::class, 1);
 
         $this->assertNotNull($form->submission($submission->id()));
     }
 
     #[Test]
-    public function finalizing_dispatches_asset_creation_synchronously_then_sends_emails()
+    public function finalizing_dispatches_each_connection_job_independently()
     {
         Bus::fake();
 
-        $form = tap(Form::make('contact_us'))->save();
-        $submission = $form->makeSubmission()->asPartial();
+        $form = tap(Form::make('contact_us')->connections([
+            'email' => [['to' => 'test@example.com'], ['to' => 'test2@example.com']],
+            'webhook' => [['url' => 'https://example.com/webhook'], ['url' => 'https://example.com/webhook2']],
+        ])->formFields([
+            'fields' => [
+                ['handle' => 'document', 'field' => ['type' => 'form_upload', 'store' => false]],
+            ],
+        ]))->save();
 
-        $submission->finalize();
+        $form->makeSubmission()->asPartial()->finalize();
 
         Bus::assertDispatchedSync(CreateAssetsFromFileUploads::class);
-        Bus::assertDispatched(SendEmails::class);
+        Bus::assertDispatchedTimes(SendEmail::class, 2);
+        Bus::assertDispatchedTimes(SendWebhook::class, 2);
+        Bus::assertDispatchedWithoutChain(SendEmail::class);
+        Bus::assertDispatchedWithoutChain(SendWebhook::class);
+        Bus::assertNotDispatched(SendEmails::class);
+
+        // Cleanup waits for the connection jobs to count down.
+        Bus::assertNotDispatched(DeleteTemporaryFiles::class);
+    }
+
+    #[Test]
+    public function finalizing_with_uploads_but_no_connection_jobs_dispatches_the_cleanup_immediately()
+    {
+        Bus::fake();
+
+        $form = tap(Form::make('contact_us')->formFields([
+            'fields' => [
+                ['handle' => 'document', 'field' => ['type' => 'form_upload', 'store' => false]],
+            ],
+        ]))->save();
+
+        $form->makeSubmission()->asPartial()->finalize();
+
+        Bus::assertDispatched(DeleteTemporaryFiles::class);
+    }
+
+    #[Test]
+    public function finalizing_without_connections_or_uploads_doesnt_dispatch_anything()
+    {
+        Queue::fake();
+
+        $form = tap(Form::make('contact_us'))->save();
+
+        $form->makeSubmission()->asPartial()->finalize();
+
+        Queue::assertNothingPushed();
     }
 
     #[Test]
@@ -447,7 +490,6 @@ public function finalizing_a_partial_submission_removes_the_status_key_and_dispa
         Event::assertDispatched(SubmissionCreated::class, 1);
         Event::assertDispatched(SubmissionFinalized::class, 1);
         Bus::assertDispatched(CreateAssetsFromFileUploads::class, 1);
-        Bus::assertDispatched(SendEmails::class, 1);
     }
 
     #[Test]
@@ -464,7 +506,6 @@ public function finalizing_a_submission_for_a_non_storing_form_still_dispatches_
         Event::assertDispatched(SubmissionCreated::class, 1);
         Event::assertDispatched(SubmissionFinalized::class, 1);
         Bus::assertDispatched(CreateAssetsFromFileUploads::class, 1);
-        Bus::assertDispatched(SendEmails::class, 1);
         $this->assertNull($form->submission($submission->id()));
     }
 
@@ -486,7 +527,6 @@ public function finalizing_a_submission_for_a_non_storing_form_deletes_it()
         Event::assertDispatched(SubmissionCreated::class, 1);
         Event::assertDispatched(SubmissionFinalized::class, 1);
         Bus::assertDispatched(CreateAssetsFromFileUploads::class, 1);
-        Bus::assertDispatched(SendEmails::class, 1);
         Event::assertNotDispatched(SubmissionDeleted::class);
     }
 
@@ -505,7 +545,6 @@ public function finalizing_is_idempotent()
         // The second call is a no-op because the submission is no longer partial.
         Event::assertDispatched(SubmissionFinalized::class, 1);
         Bus::assertDispatched(CreateAssetsFromFileUploads::class, 1);
-        Bus::assertDispatched(SendEmails::class, 1);
     }
 
     #[Test]
diff --git a/tests/Forms/SubmitFormTest.php b/tests/Forms/SubmitFormTest.php
index 033f7745d8e..b3d70390a76 100644
--- a/tests/Forms/SubmitFormTest.php
+++ b/tests/Forms/SubmitFormTest.php
@@ -6,6 +6,8 @@
 use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Facades\Bus;
 use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Mail;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Validation\ValidationException;
 use PHPUnit\Framework\Attributes\Test;
@@ -19,7 +21,8 @@
 use Statamic\Facades\Fieldset;
 use Statamic\Facades\Form;
 use Statamic\Forms\CreateAssetsFromFileUploads;
-use Statamic\Forms\SendEmails;
+use Statamic\Forms\Email;
+use Statamic\Forms\SendEmail;
 use Statamic\Forms\SubmissionResult;
 use Statamic\Forms\SubmitForm;
 use Tests\PreventSavingStacheItemsToDisk;
@@ -168,7 +171,6 @@ public function it_finalizes_without_storing_when_store_is_disabled()
         Event::assertDispatched(SubmissionCreated::class);
         Event::assertDispatched(SubmissionFinalized::class);
         Bus::assertDispatched(CreateAssetsFromFileUploads::class);
-        Bus::assertDispatched(SendEmails::class);
     }
 
     #[Test]
@@ -368,7 +370,7 @@ public function it_uploads_files_via_files_fieldtype()
     public function it_persists_the_real_asset_path_after_finalizing_a_store_true_upload()
     {
         // Deliberately no Bus::fake() here: the bug only reproduces when the real
-        // CreateAssetsFromFileUploads + SendEmails + DeleteTemporaryFiles chain runs.
+        // CreateAssetsFromFileUploads and DeleteTemporaryFiles jobs run.
         Storage::fake('local');
         Storage::fake('avatars');
         AssetContainer::make('avatars')->disk('avatars')->save();
@@ -410,6 +412,56 @@ public function it_persists_the_real_asset_path_after_finalizing_a_store_true_up
         $form->submissions()->each->delete();
     }
 
+    #[Test]
+    public function connections_see_the_real_asset_path_for_a_store_true_upload_on_a_non_storing_form()
+    {
+        // Deliberately no Bus::fake(): the connection jobs need to run against whatever
+        // submission CreateAssetsFromFileUploads left behind.
+        Storage::fake('local');
+        Storage::fake('avatars');
+        AssetContainer::make('avatars')->disk('avatars')->save();
+        Http::fake();
+        Mail::fake();
+
+        $conditions = [['field' => 'photo', 'operator' => 'equals', 'value' => 'photo.jpg', 'join' => 'and']];
+
+        $form = tap(Form::make('uploads')->store(false)->connections([
+            'email' => [['to' => 'test@example.com', 'conditions' => $conditions]],
+            'webhook' => [['url' => 'https://example.com/hook', 'conditions' => $conditions]],
+        ])->formFields([
+            'pages' => [
+                [
+                    'id' => 'main',
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'email', 'field' => ['type' => 'email']],
+                                ['handle' => 'photo', 'field' => ['type' => 'upload', 'store' => true, 'container' => 'avatars', 'max_files' => 1]],
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]))->save();
+
+        app(SubmitForm::class)
+            ->form($form)
+            ->page('main')
+            ->submit(
+                data: ['email' => 'test@example.com'],
+                files: ['photo' => [UploadedFile::fake()->image('photo.jpg')]],
+            );
+
+        Storage::disk('avatars')->assertExists('photo.jpg');
+
+        // Both connections evaluate their conditions against the converted asset path.
+        Http::assertSentCount(1);
+        Http::assertSent(fn ($request) => $request['submission']['photo'] === 'photo.jpg');
+
+        Mail::assertSent(Email::class, 1);
+        Mail::assertSent(Email::class, fn (Email $email) => $email->getSubmission()->get('photo') === 'photo.jpg');
+    }
+
     #[Test]
     public function it_does_not_revalidate_already_uploaded_files_when_resubmitting_their_page()
     {
@@ -851,7 +903,7 @@ public function it_returns_the_next_page_and_saves_a_partial_submission_when_sub
         Event::assertNotDispatched(FormSubmitted::class);
         Event::assertNotDispatched(SubmissionFinalized::class);
         Bus::assertNotDispatched(CreateAssetsFromFileUploads::class);
-        Bus::assertNotDispatched(SendEmails::class);
+        Bus::assertNotDispatched(SendEmail::class);
 
         $form->submissions()->each->delete();
     }
@@ -1064,7 +1116,7 @@ public function it_resumes_a_partial_submission_on_a_later_page()
         Event::assertNotDispatched(FormSubmitted::class);
         Event::assertNotDispatched(SubmissionFinalized::class);
         Bus::assertNotDispatched(CreateAssetsFromFileUploads::class);
-        Bus::assertNotDispatched(SendEmails::class);
+        Bus::assertNotDispatched(SendEmail::class);
 
         // Earlier-page values are preserved while the new page's values are merged in.
         $stored = $form->submission($result->submission->id());
@@ -1111,7 +1163,6 @@ public function it_finalizes_the_partial_submission_on_the_final_page()
         Event::assertNotDispatched(SubmissionCreated::class);
         Event::assertDispatched(SubmissionFinalized::class, 1);
         Bus::assertDispatched(CreateAssetsFromFileUploads::class, 1);
-        Bus::assertDispatched(SendEmails::class, 1);
 
         $form->submissions()->each->delete();
     }
@@ -1138,7 +1189,7 @@ public function it_returns_to_the_first_page_when_finalizing_without_completing_
         Event::assertNotDispatched(FormSubmitted::class);
         Event::assertNotDispatched(SubmissionFinalized::class);
         Bus::assertNotDispatched(CreateAssetsFromFileUploads::class);
-        Bus::assertNotDispatched(SendEmails::class);
+        Bus::assertNotDispatched(SendEmail::class);
 
         $form->submissions()->each->delete();
     }
diff --git a/tests/Http/Middleware/DeleteTemporaryFileUploadsTest.php b/tests/Http/Middleware/DeleteTemporaryFileUploadsTest.php
index 1784473b09f..8157210ba75 100644
--- a/tests/Http/Middleware/DeleteTemporaryFileUploadsTest.php
+++ b/tests/Http/Middleware/DeleteTemporaryFileUploadsTest.php
@@ -11,7 +11,7 @@
 class DeleteTemporaryFileUploadsTest extends TestCase
 {
     #[Test]
-    public function it_deletes_files_over_an_hour_old_from_the_configured_disk_and_path()
+    public function it_deletes_file_uploads_over_an_hour_old_from_the_configured_disk_and_path()
     {
         config([
             'statamic.system.file_uploads_disk' => 'uploads',
@@ -30,11 +30,42 @@ public function it_deletes_files_over_an_hour_old_from_the_configured_disk_and_p
         $uploadsDisk->put("temp-uploads/{$newTimestamp}/new.txt", 'new');
         $localDisk->put("statamic/file-uploads/{$oldTimestamp}/old.txt", 'old');
 
-        (new \ReflectionMethod(DeleteTemporaryFileUploads::class, 'deleteFilesOverAnHourOld'))
-            ->invoke(new DeleteTemporaryFileUploads);
+        $this->invoke('deleteFileUploadsOverAnHourOld');
 
         $uploadsDisk->assertMissing("temp-uploads/{$oldTimestamp}/old.txt");
         $uploadsDisk->assertExists("temp-uploads/{$newTimestamp}/new.txt");
         $localDisk->assertExists("statamic/file-uploads/{$oldTimestamp}/old.txt");
     }
+
+    #[Test]
+    public function it_deletes_form_uploads_over_a_week_old_from_the_configured_disk_and_path()
+    {
+        config([
+            'statamic.system.file_uploads_disk' => 'uploads',
+            'statamic.forms.file_uploads_path' => 'temp-form-uploads',
+        ]);
+
+        $localDisk = Storage::fake('local');
+        $uploadsDisk = Storage::fake('uploads');
+
+        // Form uploads are nested under the submission ID and field handle, with no
+        // timestamp in the path, so their age comes from the file's modified time.
+        $uploadsDisk->put('temp-form-uploads/submission-one/document/old.txt', 'old');
+        $uploadsDisk->put('temp-form-uploads/submission-two/document/new.txt', 'new');
+        $localDisk->put('statamic/form-uploads/submission-one/document/old.txt', 'old');
+
+        touch($uploadsDisk->path('temp-form-uploads/submission-one/document/old.txt'), now()->subWeeks(2)->timestamp);
+
+        $this->invoke('deleteFormUploadsOverAWeekOld');
+
+        $uploadsDisk->assertMissing('temp-form-uploads/submission-one/document/old.txt');
+        $uploadsDisk->assertExists('temp-form-uploads/submission-two/document/new.txt');
+        $localDisk->assertExists('statamic/form-uploads/submission-one/document/old.txt');
+    }
+
+    private function invoke(string $method): void
+    {
+        (new \ReflectionMethod(DeleteTemporaryFileUploads::class, $method))
+            ->invoke(new DeleteTemporaryFileUploads);
+    }
 }
diff --git a/tests/Tags/Form/FormCreateTest.php b/tests/Tags/Form/FormCreateTest.php
index 3ce6e072589..b3b64aef359 100644
--- a/tests/Tags/Form/FormCreateTest.php
+++ b/tests/Tags/Form/FormCreateTest.php
@@ -13,7 +13,7 @@
 use Statamic\Facades\Fieldset as FieldsetRepository;
 use Statamic\Facades\Form;
 use Statamic\Fields\Fieldset;
-use Statamic\Forms\SendEmails;
+use Statamic\Forms\SendEmail;
 use Statamic\Statamic;
 
 class FormCreateTest extends FormTestCase
@@ -1794,7 +1794,7 @@ public function a_precognitive_success_does_not_persist_a_submission()
             ->assertHeader('Precognition-Success', 'true');
 
         $this->assertEmpty(Form::find('contact')->submissions());
-        Bus::assertNotDispatched(SendEmails::class);
+        Bus::assertNotDispatched(SendEmail::class);
     }
 
     #[Test]
diff --git a/tests/Widgets/VueComponentTest.php b/tests/Widgets/VueComponentTest.php
new file mode 100644
index 00000000000..4b4e2ca83a8
--- /dev/null
+++ b/tests/Widgets/VueComponentTest.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace Tests\Widgets;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Widgets\VueComponent;
+use Tests\TestCase;
+
+class VueComponentTest extends TestCase
+{
+    #[Test]
+    public function subclasses_with_untyped_signatures_still_work()
+    {
+        $component = LegacyVueComponent::render('legacy-widget', ['foo' => 'bar']);
+
+        $this->assertInstanceOf(LegacyVueComponent::class, $component);
+        $this->assertEquals([
+            'name' => 'legacy-widget',
+            'props' => ['foo' => 'bar'],
+            'legacy' => true,
+        ], $component->toArray());
+    }
+}
+
+class LegacyVueComponent extends VueComponent
+{
+    public static function render($name, $props = [])
+    {
+        return parent::render($name, $props);
+    }
+
+    public function toArray()
+    {
+        return parent::toArray() + ['legacy' => true];
+    }
+}
diff --git a/tests/__fixtures__/views/emails/preview-markdown.blade.php b/tests/__fixtures__/views/emails/preview-markdown.blade.php
new file mode 100644
index 00000000000..d3e13ad8d64
--- /dev/null
+++ b/tests/__fixtures__/views/emails/preview-markdown.blade.php
@@ -0,0 +1,3 @@
+<x-mail::message>
+# Hello {{ $name }}
+</x-mail::message>
diff --git a/tests/__fixtures__/views/emails/preview-text.antlers.html b/tests/__fixtures__/views/emails/preview-text.antlers.html
new file mode 100644
index 00000000000..cd775cbfa79
--- /dev/null
+++ b/tests/__fixtures__/views/emails/preview-text.antlers.html
@@ -0,0 +1 @@
+Hello {{ name }}
diff --git a/tests/__fixtures__/views/emails/preview.antlers.html b/tests/__fixtures__/views/emails/preview.antlers.html
new file mode 100644
index 00000000000..71499e29df0
--- /dev/null
+++ b/tests/__fixtures__/views/emails/preview.antlers.html
@@ -0,0 +1 @@
+<h1>Hello {{ name }}</h1>