React contact section components

Every field you add costs you submissions, so justify each one. Name, email and message is the floor, and a company field is defensible if sales genuinely routes on it. What is not defensible is a phone number you never call or a dropdown of enquiry types that exists because someone wanted cleaner tickets. If you must collect more, ask for it in the reply rather than on the form, when the person is already invested.

Validate on blur, not on every keystroke. Telling someone their email is invalid while they are still typing the second character is the single most irritating pattern in web forms. Show the error next to the field it belongs to, wire it up with aria-describedby so it is announced, and mark the input aria-invalid. When the server rejects a submission, keep everything the person typed and put the message where their attention already is, which is at the button they just pressed.

Spam does not need a captcha at this volume. A hidden honeypot field that real users never fill, plus a check that the form took more than two seconds to complete, stops the overwhelming majority of bots and costs your visitors nothing. Rate limit by IP on the server as the backstop. Reach for a challenge only once you have evidence that targeted abuse is getting through, because every captcha you add taxes the people you actually want to hear from.

Handle the submit state honestly. Disable the button while the request is in flight so nobody double-sends, and only show success after the server confirms it, since an optimistic thank-you that silently failed is worse than a visible error. Replace the form with a confirmation that says what happens next and roughly when. Publishing a plain email address alongside the form is also worth doing, because some people simply will not trust a form with anything important.