Alexander Polozhevets

Posted on May 31

How to Save and Organize HTML Form Data from a Wix Website

#wix #forms #webdev #nocode

Wix makes it easy to add contact forms, lead capture widgets, and custom inputs to a site. What happens after someone clicks Submit is less obvious — especially if you run multiple forms, need file attachments, or want data in one searchable place instead of scattered emails.

This guide walks through practical ways to save and organize form data from a Wix website, whether you use native Wix Forms, a custom HTML embed, or Velo code.

What Wix gives you by default

Before reaching for third-party tools, understand the built-in path:

Destination	What you get	Good for
Wix Inbox	Submissions from native Wix Forms land in your site dashboard	Small sites, quick setup
Wix CRM / Contacts	Contact details sync when configured	Lead follow-up inside Wix
Wix CMS Collections	Structured rows you can query in Velo or display on pages	Custom apps, member areas

For a single contact form on a portfolio site, the default inbox is often enough. Teams usually look elsewhere when they need:

One dashboard across multiple Wix sites (or Wix + Webflow + static HTML)
CSV exports, searchable history, or long-term retention
File uploads (resumes, images) stored with the submission
Custom routing (different email per form, Slack alerts, CRM sync)
A stable HTTPS endpoint they control, independent of Wix's UI

Native Wix Forms also cannot set an external action URL the way a plain HTML form can. Browser-side POSTs from the live site to third-party APIs often hit CORS limits. That shapes which integration patterns actually work — covered below.

Step 1: Decide how you want data organized

Pick a primary "source of truth" before wiring anything. Mixed setups (Wix inbox and a spreadsheet and a webhook) create duplicates fast.

Common organization models:

Inbox / email — Fast to set up; hard to search, filter, or export at scale.
Spreadsheet (Google Sheets, Airtable) — Familiar, shareable, good for non-technical teams.
Database / collection (Wix CMS, Supabase, MongoDB) — Best when you build on top of submissions in code.
Form backend dashboard — Purpose-built for submissions: structured fields, exports, notifications, optional API access.

Add metadata early so you can filter later:

{
  "name": "Jane Doe",
  "email": "jane@example.com",
  "message": "Interested in your services",
  "source": "wix-contact-page",
  "form_name": "main-contact",
  "platform": "wix"
}

Hidden fields or automation mappings for source, form_name, and platform save hours when you have more than one form.

Method 1: Wix Automations (no code)

If you use native Wix Forms, Wix Automations is the most accessible way to forward submissions elsewhere.

Typical flow:

Site dashboard → Automations → Create automation
Trigger: Form submitted → select your form
Action: Send webhook / HTTP request (or connect Google Sheets, email, etc.)
Map each Wix field to the payload
Publish and test from the live site (Preview is not enough)

Automations run on Wix servers, so you avoid browser CORS issues. Payload shape depends on the action — always send one test submission and inspect what arrives at the destination.

Organizing tip: Create one automation per form, or one webhook endpoint with a form_name field so downstream tools can route rows correctly.

Method 2: HTML embed + standard form POST

Wix lets you add an HTML embed with a classic <form>. Standard HTML form posts do not trigger browser CORS checks, so you can point action at any HTTPS endpoint that accepts POST.

<form
  action="https://your-backend.example/submit/your-form-id"
  method="POST"
  enctype="multipart/form-data"
>
  <label>
    Name
    <input type="text" name="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required></textarea>
  </label>
  <input type="hidden" name="source" value="wix-html-embed" />
  <input type="file" name="resume" />
  <button type="submit">Send</button>
</form>

Use enctype="multipart/form-data" when you need file uploads. Style the embed with your own CSS or wrap it in a Wix box so it matches your theme.

Organizing tip: Consistent name attributes (email, not Email Field 2) keep columns stable in any backend or spreadsheet.

Method 3: Velo (Wix Dev Mode) + server-side fetch

For custom inputs, multi-step flows, or on-page success messages without a full page reload, enable Velo and call your backend from a backend web module (.jsw). Wix recommends server-side fetch for third-party APIs.

Backend — backend/formSubmit.jsw:

import { fetch } from 'wix-fetch';

const SUBMIT_URL = 'https://your-backend.example/submit/your-form-id';

export async function submitForm(payload) {
  const response = await fetch(SUBMIT_URL, {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });

  if (!response.ok) {
    const err = await response.json().catch(() => ({}));
    throw new Error(err.detail || 'Submission failed');
  }

  return response.json();
}

Page code:

import { submitForm } from 'backend/formSubmit';

$w.onReady(() => {
  $w('#submitBtn').onClick(async () => {
    try {
      await submitForm({
        name: $w('#nameInput').value,
        email: $w('#emailInput').value,
        message: $w('#messageInput').value,
        source: 'wix-velo-contact',
      });
      $w('#successBox').show();
    } catch (err) {
      $w('#errorBox').show();
      console.error(err);
    }
  });
});

If you also keep a native Wix Form element, pick one primary storage destination. Duplicating to Wix Inbox and an external backend unless you have a clear reason creates sync headaches.

File uploads in Velo: Read the file in page code, encode as data:mime/type;base64,..., and include it in the JSON body — or use the HTML embed path for simpler multipart uploads.

Method 4: Automation platforms (Zapier, Make, n8n)

Connect Wix to the rest of your stack without writing a backend:

Wix Form submitted → Google Sheets (row per submission)
Webhook → Airtable, Notion, HubSpot, Slack

This works well when non-developers own the workflow. Trade-offs: per-task pricing, another system to maintain, and field mapping that can break if you rename Wix form fields.

Organizing tip: One spreadsheet tab (or Airtable base) per form type, with a submitted_at column added by the automation.

Method 5: Dedicated form backend services

When you want storage, email alerts, and exports without running servers, form backend services are a convenient middle ground between a spreadsheet and a custom API.

They typically give you:

A unique submit URL per form
A dashboard with searchable submissions
Email notifications on new entries
CSV export and optional webhooks
Support for HTML POST, JSON, and sometimes file attachments

FormCare — one convenient option

FormCare is built for exactly this use case: you keep designing in Wix (or anywhere else) and point submissions at a FormCare endpoint.

Quick setup (~2 minutes):

Create a free account
Add an endpoint named after your Wix form (e.g. Wix – Contact)
Copy your submit URL: https://formcare.io/api/submit/your-endpoint-id
Connect Wix using any of the methods above:
- Automations → webhook POST to your FormCare URL
- Velo → fetch from a .jsw module (example in Method 3)
- HTML embed → set action to your FormCare URL

Submissions appear in the FormCare dashboard within seconds. You can set a custom redirect URL on the endpoint for HTML forms (e.g. your Wix thank-you page). Field names are flexible — FormCare stores whatever keys you send.

FormCare includes a monthly free submission allowance; no credit card is required to create an endpoint and run tests. For a deeper Wix-specific walkthrough, see the FormCare Wix integration guide.

Other services in the same category

Depending on your needs, also evaluate:

Formspree, Getform, Basin — similar HTML-form-to-inbox models
Google Forms embedded — free, but less control over design on Wix
Self-hosted (Node, serverless) — maximum control, you own retention and compliance

Choose based on file upload limits, GDPR/data residency, pricing at your volume, and whether you need JSON + HTML on the same endpoint.

Method 6: Your own backend or database

If you already run infrastructure, a small POST handler may be enough:

// Express-style example
app.post('/api/contact', async (req, res) => {
  const { name, email, message, source } = req.body;

  await db.submissions.insertOne({
    name,
    email,
    message,
    source: source || 'unknown',
    createdAt: new Date(),
  });

  await sendNotificationEmail({ name, email, message });
  res.json({ ok: true });
});

From Wix, reach this via Automations webhook, Velo .jsw fetch, or HTML embed — same patterns as above. You own the schema, retention policy, and backups.

Compare the approaches

Approach	Coding	Best for	Organization
Wix Inbox / CRM	None	Single site, few forms	In-dashboard, limited export
Wix Automations	None	Native forms → Sheets/CRM/webhook	Depends on target
HTML embed	Minimal HTML	File uploads, simple POST	External backend or service
Velo + fetch	Low–medium	Custom UI, JSON, no reload	Your API or form backend
Zapier / Make	None	Team-owned workflows	Spreadsheets, CRMs
Form backend (e.g. FormCare)	Minimal	Multi-site, exports, alerts	Built-in submission dashboard
Custom backend	High	Full control, compliance	Your database

Organization best practices (any method)

One primary destination per form — avoid silent duplicates in inbox + sheet + webhook.
Stable field names — use snake_case or kebab-case; avoid renaming after go-live.
Add context fields — source, form_name, page_url, utm_campaign as hidden inputs or automation mappings.
Test on the published site — Wix Preview does not always mirror live Automations or embed behavior.
Plan retention — know where data lives, how long you keep it, and how users can request deletion (GDPR/CCPA).
Reduce spam — Wix captcha where available; honeypot fields in HTML embeds; rate limits on custom backends.
Export regularly — even with a good dashboard, periodic CSV backups protect against account or platform changes.

Troubleshooting

Symptom	Likely cause	Fix
Nothing arrives	Unpublished site, wrong URL slug	Publish Wix; verify submit URL; check Automation history
CORS error in browser console	`fetch` in page code to third party	Move request to Velo `.jsw` backend module
Wrong columns / missing fields	Mismatch between Wix labels and payload keys	Align automation mapping or HTML `name` attributes
Redirect after submit goes elsewhere	Default referer-based redirect	Set an explicit thank-you URL on your form backend endpoint
Duplicate entries	Form submits to Wix and external backend	Disable one path; single source of truth

Which path should you pick?

One contact form, you live in Wix → Native form + Inbox or CRM.
Marketing team wants Google Sheets → Wix Automations → Sheets.
Custom layout or file uploads, minimal ops → HTML embed → form backend such as FormCare.
Interactive UX, no full-page reload → Velo + backend fetch.
Compliance-heavy or existing API → Custom backend + Automations webhook.

Wix is strong on design and publishing; you do not need to sacrifice structured, organized form data to keep it. Pick one storage model, add metadata fields from day one, and test on the live site before you promote the form.

DEV Community