4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T8bd,const approvedEmbedHosts = new Set([ 'airtable.com', 'docs.google.com', 'form.typeform.com', 'lookerstudio.google.com', 'maps.google.com', 'player.vimeo.com', 'vimeo.com', 'www.airtable.com', 'www.google.com', 'www.youtube-nocookie.com', 'www.youtube.com', 'youtube-nocookie.com', 'youtube.com', ]) const approvedEmbedHostSuffixes = [ '.airtable.com', '.google.com', '.typeform.com', '.vimeo.com', '.youtube-nocookie.com', '.youtube.com', ] const embedUrlError = 'Use an approved HTTPS embed URL.' const formActionError = 'Use a same-origin path, such as /api/newsletter.' const sameOriginBase = 'https://payload-components.local' const isApprovedEmbedHost = (hostname: string) => { const normalizedHost = hostname.toLowerCase() return ( approvedEmbedHosts.has(normalizedHost) || approvedEmbedHostSuffixes.some((suffix) => normalizedHost.endsWith(suffix)) ) } export const getSafeEmbedUrl = (value: unknown) => { if (typeof value !== 'string') return undefined const trimmed = value.trim() if (!trimmed) return undefined try { const parsed = new URL(trimmed) if (parsed.protocol !== 'https:' || parsed.username || parsed.password) { return undefined } if (!isApprovedEmbedHost(parsed.hostname)) { return undefined } return parsed.toString() } catch { return undefined } } export const validateEmbedUrl = (value: unknown) => getSafeEmbedUrl(value) ? true : embedUrlError export const getSafeFormAction = (value: unknown) => { if (typeof value !== 'string') return undefined const trimmed = value.trim() if (!trimmed || !trimmed.startsWith('/') || trimmed.startsWith('//') || trimmed.includes('\\')) { return undefined } try { const parsed = new URL(trimmed, sameOriginBase) if (parsed.origin !== sameOriginBase) { return undefined } return `${parsed.pathname}${parsed.search}${parsed.hash}` } catch { return undefined } } export const validateSameOriginFormAction = (value: unknown) => { if (value === null || value === undefined || (typeof value === 'string' && value.trim() === '')) { return true } return getSafeFormAction(value) ? true : formActionError } 53:T71e,import { getSafeFormAction } from './safeUrls' export const contactChannelTypeOptions = ['email', 'phone', 'url'] as const export type ContactChannelType = (typeof contactChannelTypeOptions)[number] type ContactValidationContext = { siblingData?: Record | null } const contactErrors: Record = { email: 'Enter a valid email address.', phone: 'Enter a valid phone number with 7 to 15 digits.', url: 'Enter an HTTPS URL or a same-origin path such as /support.', } export const getSafeContactHref = (type: unknown, value: unknown) => { if ( !contactChannelTypeOptions.includes(type as ContactChannelType) || typeof value !== 'string' ) { return undefined } const trimmed = value.trim() if (!trimmed || /[\r\n]/.test(trimmed)) return undefined if (type === 'email') { return /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i.test(trimmed) ? `mailto:${trimmed}` : undefined } if (type === 'phone') { const normalized = trimmed.replace(/[\s().-]/g, '') return /^\+?\d{7,15}$/.test(normalized) ? `tel:${normalized}` : undefined } const sameOriginPath = getSafeFormAction(trimmed) if (sameOriginPath) return sameOriginPath try { const parsed = new URL(trimmed) if (parsed.protocol !== 'https:' || parsed.username || parsed.password) return undefined return parsed.toString() } catch { return undefined } } export const validateContactValue = ( value: unknown, { siblingData }: ContactValidationContext, ) => { const type = siblingData?.type if (!contactChannelTypeOptions.includes(type as ContactChannelType)) { return 'Choose a contact channel type before entering its value.' } return getSafeContactHref(type, value) ? true : contactErrors[type as ContactChannelType] } 54:Ta2d,import type { Block } from 'payload' import { contactChannelTypeOptions, validateContactValue, } from '@/blocks/shared/contactUrls' import { validateSameOriginFormAction } from '@/blocks/shared/safeUrls' export const ContactRoutingForm: Block = { slug: 'contactRoutingForm', // Existing apps must migrate stored data before adopting this identifier: // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations dbName: 'pc_contact_route', interfaceName: 'ContactRoutingFormBlock', fields: [ { name: 'eyebrow', type: 'text', }, { name: 'title', type: 'text', required: true, }, { name: 'description', type: 'textarea', }, { name: 'channels', type: 'array', required: true, minRows: 1, maxRows: 4, admin: { initCollapsed: true, }, fields: [ { name: 'label', type: 'text', required: true, }, { name: 'type', type: 'select', options: contactChannelTypeOptions.map((value) => ({ label: value.charAt(0).toUpperCase() + value.slice(1), value, })), required: true, }, { name: 'value', type: 'text', required: true, validate: validateContactValue, }, { name: 'description', type: 'text', }, ], }, { name: 'formTitle', type: 'text', required: true, }, { name: 'formDescription', type: 'textarea', }, { name: 'formLabels', type: 'group', fields: [ { name: 'name', type: 'text', defaultValue: 'Name', required: true }, { name: 'email', type: 'text', defaultValue: 'Email', required: true }, { name: 'organization', type: 'text', defaultValue: 'Organization', required: true }, { name: 'phone', type: 'text', defaultValue: 'Phone', required: true }, { name: 'message', type: 'text', defaultValue: 'Message', required: true }, ], }, { name: 'submitLabel', type: 'text', defaultValue: 'Send inquiry', required: true, }, { name: 'action', type: 'text', required: true, validate: validateSameOriginFormAction, admin: { description: 'Same-origin path where the inquiry form posts, such as /api/contact.', }, }, ], labels: { plural: 'Contact Routing Form Blocks', singular: 'Contact Routing Form', }, } 55:T1b13,import React from 'react' import type { ContactRoutingFormBlock as ContactRoutingFormBlockData } from '@/payload-types' import { getSafeContactHref } from '@/blocks/shared/contactUrls' import { getSafeFormAction } from '@/blocks/shared/safeUrls' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' import { cn } from '@/utilities/ui' // Layout adapted from tailark/blocks (MIT) — re-implemented as a Payload block. type Props = ContactRoutingFormBlockData & { id?: string className?: string disableInnerContainer?: boolean } export const ContactRoutingFormBlock: React.FC = ({ action, channels, className, description, disableInnerContainer, eyebrow, formDescription, formLabels, formTitle, id, submitLabel, title, }) => { const fieldPrefix = React.useId() const formAction = getSafeFormAction(action) const labels = { email: formLabels?.email || 'Email', message: formLabels?.message || 'Message', name: formLabels?.name || 'Name', organization: formLabels?.organization || 'Organization', phone: formLabels?.phone || 'Phone', } const formFields = ( <>

{labels.name}

{labels.email}

{labels.organization}

{labels.phone}

{labels.message}

</div>
      <Input
        aria-hidden="true"
        autoComplete="off"
        className="absolute left-0 top-0 size-px opacity-0"
        name="website"
        tabIndex={-1}
        type="text"
      />
      <Button className="w-full sm:w-fit" disabled={!formAction} type="submit">
        {submitLabel || 'Send inquiry'}
      </Button>
    </>
  )

return (
    <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>
      <div className="overflow-hidden rounded-frame border border-border/70 bg-card/35 px-6 py-10 sm:px-8 lg:px-12 lg:py-14">
        <div
          className={cn('flex flex-col gap-10', {
            'mx-auto max-w-6xl': !disableInnerContainer,
          })}
        >
          <div className="flex max-w-3xl flex-col gap-4">
            {eyebrow ? (
              <Badge variant="outline" className="w-fit rounded-full px-3 py-1 uppercase tracking-eyebrow">
                {eyebrow}
              </Badge>
            ) : null}

<h2 className="text-4xl font-medium tracking-display text-balance sm:text-5xl">{title}</h2>
            {description ? (
              <p className="text-base leading-7 text-muted-foreground sm:text-lg">{description}</p>
            ) : null}
          </div>

<div className="grid gap-8 lg:grid-cols-[0.8fr_1.2fr] lg:gap-12">
            <address className="not-italic">
              {channels && channels.length > 0 ? (
                <div className="flex flex-col gap-4">
                  {channels.map((channel, index) => {
                    const href = getSafeContactHref(channel.type, channel.value)

return (
                      <div
                        key={channel.id ?? `${channel.label}-${index}`}
                        className="rounded-panel border border-border/70 bg-background/70 p-5"
                      >
                        <p className="text-sm font-medium text-foreground">{channel.label}</p>
                        {href ? (
                          <a className="mt-2 block break-words text-base text-primary underline-offset-4 hover:underline" href={href}>
                            {channel.value}
                          </a>
                        ) : (
                          <span className="mt-2 block break-words text-base text-muted-foreground">
                            {channel.value}
                          </span>
                        )}
                        {channel.description ? (
                          <p className="mt-2 text-sm leading-6 text-muted-foreground">
                            {channel.description}
                          </p>
                        ) : null}
                      </div>
                    )
                  })}
                </div>
              ) : null}
            </address>

<div className="rounded-panel border border-border/70 bg-background/85 p-6 sm:p-8">
              <div className="mb-6 flex flex-col gap-2">
                <h3 className="text-2xl font-medium tracking-title text-foreground">{formTitle}</h3>
                {formDescription ? (
                  <p className="text-sm leading-6 text-muted-foreground">{formDescription}</p>
                ) : null}
              </div>

{formAction ? (
                <form action={formAction} className="relative flex flex-col gap-5" method="post">
                  {formFields}
                </form>
              ) : (
                <div className="relative flex flex-col gap-5">{formFields}</div>
              )}

{!formAction ? (
                <p className="mt-4 text-sm text-destructive" role="status">
                  Configure a valid same-origin form action before publishing.
                </p>
              ) : null}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["badge","button","input","textarea"]}]]}],["$","$L50",null,{"sourceUrl":"https://www.payload-components.xyz/r/contact-routing-form.json","proxyUrl":"https://shadcnregistry.com/r/payload-components/contact-routing-form","itemId":"@payload-components/contact-routing-form"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"payload-components/source/blocks/shared/safeUrls.ts","content":"$52","type":"registry:file","target":"~/src/blocks/shared/safeUrls.ts"},{"path":"payload-components/source/blocks/shared/contactUrls.ts","content":"$53","type":"registry:file","target":"~/src/blocks/shared/contactUrls.ts"},{"path":"payload-components/source/blocks/ContactRoutingForm/config.ts","content":"$54","type":"registry:file","target":"~/src/blocks/ContactRoutingForm/config.ts"},{"path":"payload-components/source/blocks/ContactRoutingForm/Component.tsx","content":"$55","type":"registry:file","target":"~/src/blocks/ContactRoutingForm/Component.tsx"}]}]]}],"$L56"]}]
</article></body></html>

Contact Routing Form

Installation

Files

~

Styles