Send a Custom Form to Wix Forms

A custom form can look completely native to your Next.js site and still send every successful submission into Wix Forms. WebSync uses that arrangement for its contact section. The visitor sees a focused, monochrome form, while the team reviews submissions and contacts in the Wix dashboard.

Separate the browser and server jobs

The browser should collect input, show validation, complete the Turnstile challenge, and display the result. It should not hold the Wix API key or submit directly to Wix. The server route verifies the request and calls Wix Forms with protected credentials.

That split gives you one place to enforce validation and keeps secrets out of the JavaScript bundle. It also makes error messages predictable: field errors stay beside the field, while server or Wix failures return a general retry message.

• Browser: input state, accessible errors, Turnstile token, success message.

• Next.js route: payload validation, Turnstile verification, Wix submission.

• Wix: submission storage, field mappings, and contact creation.

Model the request before calling Wix

Define a small request shape that matches the visible form. WebSync sends name, email, company, and message. Trim text, validate lengths, and normalize the email before any external request. Never trust a browser payload simply because the form already showed client-side validation.

type ContactRequest = {
  name: string;
  email: string;
  company?: string;
  message: string;
  turnstileToken: string;
};

Return 400 for malformed input and keep the response free of submitted personal data. Logs should record the route status and a safe Wix error summary, not names, email addresses, message bodies, API keys, or Turnstile secrets.

Verify Turnstile on the server

The widget produces a short-lived token in the browser. Send it to your Next.js route with the form fields, then verify it with Cloudflare before calling Wix. Local development should use Cloudflare's official always-pass test credentials. Production must use the real site key and secret.

const verification = await fetch(
  "https://challenges.cloudflare.com/turnstile/v0/siteverify",
  { method: "POST", body: verificationBody },
);

if (!(await verification.json()).success) {
  return Response.json({ error: "Verification failed." }, { status: 400 });
}

Turnstile reduces automated abuse, but it does not replace input validation or rate controls. Treat it as one layer. If verification fails, do not create a Wix submission.

Map fields to the Wix form

Create a standalone Wix form named WebSync Contact, then confirm the target field keys in the dashboard or API schema. The application should map its normalized values to those verified targets. The form ID, site ID, and API key stay server-only.

await wixForms.submissions.createSubmission({
  formId: process.env.WIX_CONTACT_FORM_ID!,
  submissions: {
    name: input.name,
    email: input.email,
    company: input.company ?? "",
    message: input.message,
  },
});

Exact SDK property names depend on the current Wix Forms schema, so use the generated form targets from your project rather than copying placeholder names. WebSync keeps its verified targets in the server data layer and does not query the form schema on every submission.

Handle success and failure clearly

Disable the submit button during a request, keep the label honest, and move focus to a concise success message when the request finishes. On failure, preserve the visitor's entries and offer another attempt. The API route should use a 502 response when Wix is unavailable so monitoring can distinguish an upstream failure from bad user input.

A local success is useful evidence, but Production is the final test. After deployment, get approval before creating a live test submission. Confirm the page response, the Wix Forms entry, the matching Wix Contact, and a successful POST request in Vercel logs. Those four checks prove the full connection.

The reusable pattern

Keep the custom experience in Next.js and the business record in Wix. The browser handles interaction, the server guards trust boundaries, and Wix handles the operational workflow. Once that pattern is clear, you can reuse it for quote requests, onboarding forms, event registration, and other structured submissions.