Custom Quote Pricing Block for React

The headline and sentence are written in the markup. POINTS holds the three ruled rows, each with a title, a description and a Lucide icon, and ASSURANCE the line under them. VOLUMES lists the options of the daily volume select: an array of label and value, also passed to Select as items so it can show the chosen label. To add a field, copy one of the form's Field blocks and give its control a name, so it's part of what the form submits. Keep the form to about five visible fields: each one you add pushes the button toward the fold.

The form submits company, email, volume and monitoring, by name. In submit, read them with new FormData(event.currentTarget) and post them to your own endpoint, which forwards them to your CRM or sales inbox; show the confirmation once that request succeeds, and an error beside the button if it fails. Use the volume to route larger accounts to senior sales staff.

Yes. Every control has a visible label tied to it, the company and the work email are required and checked by the browser before the form is sent, and the email field is an email input with autocomplete, so phones offer the right keyboard and browsers can fill it in. The form is a named form region. Once the request is sent, focus moves to the "Request received" heading, so screen readers read the confirmation at once; Submit another request brings back an empty form and moves focus to its heading. Focus only moves after the visitor acts, never on page load.

The form and the confirmation sit in the same grid cell, so the cell is always as tall as the form. When the request is sent, the form stays in place but is hidden and made inert, so it can't be focused or read, and the confirmation fades in over it. Under reduced motion it appears without the fade.

From the lg breakpoint the pitch and the form sit side by side, split by a vertical hairline, with the headline and sentence at the top of the left half. Below it the order is the headline and sentence, then the form, then the three points and the badges, so the submit button is reached within a screen and a half. Company and work email share a row from the sm breakpoint and stack on a phone, and every field takes the full width.

Use a quote form when the price depends on things a tier can't capture, such as data volume, seat count, compliance or contract terms, and when a conversation with sales is part of buying. Keep fixed tiers for self-serve plans, and link to this form from an Enterprise tier for the rest.