WizeForm with React and Next.js: Complete Integration Guide

WizeForm supports three integration patterns depending on your stack and requirements. The simplest is a plain HTML form action — set the action attribute to WizeForm's endpoint and add your access key as a hidden input. This works in any framework and requires zero JavaScript, but it triggers a full page navigation on submit.

The second pattern is a client-side fetch call. You intercept the form submit event in React, prevent the default navigation, and POST the form data as JSON to WizeForm's endpoint from the browser. This gives you full control over loading states, inline validation, and success/error UI. Your access key is included in the request body, which means it will be visible in the browser's network tab.

The third and most secure pattern is a Next.js Server Action. The POST to WizeForm happens server-side, your access key stays in environment variables and never touches the browser, and the client component simply calls the action and reacts to the returned state. This is the recommended approach for production Next.js applications.

Create a React component with useState hooks for form data, loading state, and submission result. In the submit handler, call preventDefault() to stop the default form navigation, set loading to true, and call fetch with method POST, Content-Type: application/json, and a JSON body that includes your access_key alongside your form field values.

WizeForm returns JSON with a message field on both success and error. A 200 status means the submission was received and processed. A 429 status means the access key has hit its rate limit. A 401 means the key is invalid or missing. Use these status codes and response messages to drive your inline feedback — WizeForm gives you enough information to show users a meaningful error without guessing.

Set loading to false after the fetch resolves and update your result state to trigger the success or error UI. A typical React WizeForm integration is under 40 lines of code, handles all relevant error states, and gives you complete control over the form UX without managing any backend infrastructure.

In Next.js App Router, define an async function marked with 'use server' at the top of the function body or file. Inside, read the FormData argument, extract your field values, and build the submission object including your WizeForm access key from process.env. POST this to WizeForm's endpoint using Node's native fetch and return the response status and message to the client.

The client component calls this server action with the form data and handles the returned state to update the UI. Because the action runs on the server, your WizeForm access key is stored in your environment variables and never exposed in the browser or the client bundle. This is particularly important for forms on public-facing pages where key leakage could be exploited.

Server Actions also give you access to Next.js request context, which means you can add server-side validation, rate limiting at the application layer, or additional processing before the submission reaches WizeForm. For teams that need that control, the Server Action pattern is the most flexible and most secure WizeForm integration available.