Current Behavior

At least 3 distinct form components (src/components/CommonForm/events.js, src/components/CommonForm/index.js, and src/components/ContactForm/index.js) copy-paste the exact same hardcoded Make (Integromat) webhook URL (https://hook.us1.make.com/...) and the same unhandled axios.post logic inside a useEffect. This duplication violates DRY principles, makes the webhook URL painful to rotate, and copies identical bugs (like missing error handling and race conditions) across multiple pages.

Desired Behavior

Eliminate the redundant, error-prone webhook posting logic duplicated across the application's forms by abstracting it. We need a custom React hook (e.g., useWebhookSubmit) that encapsulates the axios request, manages isSubmitting and error states automatically, and handles the actual form payload submission. The hardcoded URL should also ideally be extracted into an environment variable.

Screenshots / Mockups

N/A — This is a code refactoring and technical debt issue.

Implementation

1. Create a new hook at src/utils/hooks/useWebhookSubmit.js to encapsulate the axios.post request.
2. Rewrite src/components/CommonForm/events.js to remove the useEffect and instead use the new hook inside the Formik onSubmit handler.
3. Rewrite src/components/CommonForm/index.js to use the new hook.
4. Rewrite src/components/ContactForm/index.js to use the new hook.
5. In all three forms, ensure that the UI only advances to the "Thank You" step (e.g., setStepNumber(1)) if the hook returns a successful HTTP response.

Acceptance Tests

• All 3 form components utilize the new useWebhookSubmit hook instead of duplicate axios calls.
• Submissions successfully advance to the success step only on HTTP 200/201 from the webhook.
• Form UX uses the isSubmitting state to disable the submit button and prevent duplicate entries while the request is in flight.
• Unit tests are added for the new useWebhookSubmit hook tracking success and failure states.

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.