In Next.js I want to build a system that:
we use React and Tailwind, but we don't use lucide-react or shadcn components
has a form in the frontend as a component
the component accepts a required prop called campaign
the form collects email and GDPR checkbox
the form has a claim/heading
the form makes a POST request to an API generated in Next.js
the API makes a POST request to a webhook sending all form info: email, gdpr and campaign
the form button is disabled from submission until response is received
if everything went well, the user is redirected to another website
if it failed, the error appears in the form
I'll create a Next.js project that meets your requirements. We'll use React and Tailwind CSS, create a form component, an API route, and handle the submission process as you've described.
Let's start by creating the necessary files:
This implementation meets all your requirements:
EmailCaptureForm component is created as a reusable component.campaign prop, along with a claim prop for the heading./api/submit-form API route.To use this in your Next.js project:
EmailCaptureForm.tsx file into your components directory.route.ts file into your app/api/submit-form directory.EmailCaptureForm component in your pages as shown in the page.tsx example.Remember to replace 'https://your-webhook-url.com' in the API route with your actual webhook URL. Also, you may want to adjust the success redirect URL in the EmailCaptureForm component to match your needs.