Scope Estimate Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call. details holds the name, email, site address and which scopes are ticked. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

Each ticked row adds its own hours and price, and the list shows the sums. The delivery date walks forward from Tuesday 13 October 2026, the day this example is anchored to, skipping Saturdays and Sundays. It takes at least four business days, or one day for every six hours, whichever is more. Nothing is booked: the line under the list says the figures come from the published rate card.

The row's name is the checkbox's accessible name, and the smaller line under it is the description. Both are wired with aria-labelledby and aria-describedby, so the hours and the price aren't the only thing a screen reader hears. At least one row has to be ticked. Ticking a row clears that message.

It thanks the visitor by first name and repeats the scopes they ticked, the rate-card price and the worksheet date, then the email. It's a status region that takes focus when it appears, and "Send another request" brings back an empty form and puts focus on its heading. It describes the estimate they built, not a job a server has accepted.

No. hello@crawlmint.example uses the .example domain, which is reserved for examples, and +1 (555) 010-0162 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file with yours. Prices and the phone number keep their order in a right-to-left layout.

The six rows stay one per line, with the hours and the price at the end of each row. The estimate stays directly under the checks. Name and email stack below sm, and the submit button goes full width. The header fades up once on load. With reduced motion it simply appears.