Svelte contact blocks.

100 contact form blocks for React: plain contact forms beside a map or a team, support and feedback, repairs and claims, calls and meetings, appointments, events, quote requests, finance, applications, partner and press forms, and sign-ups. The gallery sorts them into 11 groups: Contact forms, Support and feedback, Repairs and claims, Calls and meetings, Visits and services, Events and dates, Quotes and estimates, Finance and property, Applications, Partners and creators, Join and give. Each one is one section file for one kind of enquiry.

For a general page use Minimal Contact Form or Street Map Contact. For sales use Talk to Sales Contact, for support Support Channels Contact and for a file with the message File Attachments Contact. To book a time use Month Calendar Scheduler Contact or Request a Callback Contact, for a priced job Budget Range Slider Contact, and for a long form that you want in steps Project Brief Wizard Contact.

Each one is a form with the checks a real one needs: submitting checks every field, shows each problem under its field, and moves focus to the first one (the minimal form also checks a field as you leave it). The form has noValidate, so the block's own messages show instead of the browser's. A valid form turns into a confirmation in the same space, which takes focus.

No. Every block is the form and the confirmation only: submitting waits a moment on a timer and then shows the thanks, and nothing is sent. The place for your backend is marked in the submit handler, for example "Send `details` to your sales inbox or CRM here; this demo only waits." The company names, addresses and numbers are made up, and the email and phone use reserved example ranges.

Open the submit handler and replace the timer after the comment with a request that sends the typed details object, for example a Next.js server action or a route handler that mails you or writes to a CRM. Keep the sending phase while you wait and set it to sent when the response is ok. On an error, set the phase back and show a message in the same slot. In Minimal Contact Form the comment reads "Send `details` to your support inbox here; this demo only waits."

Each field has its rule in a small problems function and its place in an ORDER array that decides which field gets focus first. Add a field by adding its entry to the details object and the ORDER array, a rule in problems, and an input inside the same Field. Talk to Sales Contact shows a select (company size) and a note beside the name and email.

Check the email shape again on your server, because the in-page check (a pattern that wants text, an @, and a dot) is only for the visitor. For spam, add a honeypot field or a challenge from your provider to the form and verify it in the same server handler. The blocks ship none of these, so add the one you use.

File Attachments Contact takes up to four PDFs or images of at most 10 MB in a drop zone, with a name, size, progress bar and remove button per file and an error row for a refused file. The progress is a simulation: nothing is uploaded. Send the File objects with the details in the submit handler, and drive each progress bar from your upload events. The limits are MAX_FILES and MAX_MB constants at the top of the file.

Month Calendar Scheduler Contact closes weekends and past days on its month calendar, and works out the open times of the chosen day from the date, in a fixed time zone. Replace that function with the free slots from your booking system for the date, keep the confirm button disabled until a day and a time are chosen, and show the host's time zone next to the times.

Street Map Contact draws a street map as inline SVG, with a pin, a station and a walking route, and puts the address and opening hours under it in typed constants. Edit the constants for your address and hours, and swap the drawing for your map embed or image. The map comes after the form on a phone.

This page lists 100 of the category's 100 contact blocks for Svelte. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Svelte contact blocks are the React ones ported to Svelte, on Ark UI's Svelte primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-svelte (/r/svelte/contact-adoption.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Svelte needs svelte @ark-ui/svelte lucide-svelte installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-svelte@latest add` with the block's registry URL, such as /r/svelte/contact-adoption.json for Animal Cards Adoption Contact. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 11 kinds of contact block, led by visits and services (13), contact forms (11), quotes and estimates (11) and support and feedback (10), and sort by popular or name. A good first look: Animal Cards Adoption Contact, Channel Switchboard Affiliate Contact and Four Photo Slots Contact. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a contact block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the get in touch, book a time and get a price kinds.

Open its page and use the full-screen viewer (/view/contact/svelte/adoption) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each contact block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the contact blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 contact blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a contact block, read it with get_block and install it on your Svelte stack.

Pass `category: "contact"` to search_blocks to search only the 100 contact blocks, or to list_blocks for the 11 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "contact", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.