[6.x] Forms 2: Connections

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

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',
 ];

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.',

packages/cms/src/index.js

@@ -16,6 +16,10 @@ export const {
     RevisionPreview,
     SaveButtonOptions,
     SortableList,
+    ConnectionFields,
+    ConnectionList,
+    ConnectionRules,
+    ConnectionSummary,
     requireElevatedSession,
     requireElevatedSessionIf,
     clone,

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);

resources/css/elements/base.css

@@ -1,6 +1,8 @@
 /* VARIABLES
 =================================================== */
 :root {
+    color-scheme: light;
+
     /* For animating height */
     interpolate-size: allow-keywords;
 

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';

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);
 

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);

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>

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>

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>