Replace HubSpot embed with custom Contact Sales form matching arcade-ui#843
Replace HubSpot embed with custom Contact Sales form matching arcade-ui#843
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replaces the HubSpot hs-form-frame with a native React form that mirrors the arcade-ui contact-sales-form structure: First/Last Name, Work Email, Company, Message, honeypot spam protection, and n8n/Attio webhook submission.
emmithood
force-pushed
the
emmithood/contact-sales-modal
branch
from
72c0a74 to
5285712
Compare
|
@teallarson if you get a chance to review (no rush on this) -- just needed to update our contact sales form in our docs. |
teallarson
left a comment
teallarson
left a comment
There was a problem hiding this comment.
Nice! Looks good!
Couple of comments to get it production-ready.
Main one being: we should use react-hook-form for the form here!
|
|
||
| if (honeypot) { | ||
| await submitHoneypot(); | ||
| onSuccess(); |
There was a problem hiding this comment.
| onSuccess(); | |
| setIsSubmitting(false); | |
| onSuccess(); |
the return here means it would never hit the finally down below.
| }; | ||
|
|
||
| return ( | ||
| <form className="flex flex-col gap-3" onSubmit={handleSubmit}> |
There was a problem hiding this comment.
This should use the react-hook-form library for this form.
It will simplify a lot of the isSubmitting/error handling manually done above.
And these inputs should have labels (not just the aria-label)
|
|
||
| return ( | ||
| <form className="flex flex-col gap-3" onSubmit={handleSubmit}> | ||
| <div className="flex gap-3 max-[767px]:flex-col"> |
There was a problem hiding this comment.
Tailwind's built in breakpoint is 768 px. so using max-md:flex-col would be nearly identical to this.
Is there a reason for this specific number?
- Use react-hook-form to manage isSubmitting/validation state - Add sr-only <label> elements for each input (htmlFor/id paired) - Replace max-[767px]:flex-col with max-md:flex-col (Tailwind standard) - Extract collectFields/fireHoneypot helpers to reduce cognitive complexity
2 participants
Replaces HubSpot hs-form-frame with native React form matching arcade-ui structure. Fields: First/Last Name, Work Email, Company, Message. Includes honeypot, n8n/Attio webhook, UTM tracking, PostHog events, success/error states.