How to Add a Custom Contact Form to a Wix Site 2026

Wix Forms or a custom HTML form?

Wix has its own forms, and for a basic contact form they are the quickest option: per Wix's help center, entries are stored in a submissions table you can sort, filter, and export as CSV (checked 2026-11-01).

A custom HTML form posting to a form backend is worth the extra five minutes when you want any of these:

• Your exact markup and CSS, reused across Wix and non-Wix sites.
• Spam rules you can see: honeypot, time-trap, per-IP rate limits, and rule-based scoring.
• Signed webhooks (HMAC-SHA256) to your own server, Zapier, Make, or n8n on paid plans.
• Submissions outside Wix, so your form history stays put if you move platforms.

splitforms is built for this pattern: paste-in HTML, no JavaScript SDK, 500 free submissions total with no card, webhooks on Pro ($5/month), and rule-based spam filtering on by default. The rest of this guide is the three-step process.

Step 1: Get a splitforms access key (1 minute)

You need an access key — a short string that authenticates your form's submissions and routes them to your inbox.

1. Go to splitforms.com/login
2. Enter your email, get the 6-digit code, paste it
3. Copy the auto-generated access key from the dashboard
4. Confirm the destination email — that's where contact form messages land

That's it. No credit card, no plan to pick, no domain to verify. The free tier covers 500 submissions, with no time limit. Keep the access key handy; you'll paste it into the HTML in step 2.

If you want a starting template instead of writing the HTML from scratch, grab the free contact form template pre-wired to splitforms and just swap in your key.

Step 2: Build the HTML form (3 minutes)

Here's a complete, paste-ready contact form. It has name, email, subject, message, a honeypot for spam, and inline styles that match most Wix themes (light background, dark text, rounded inputs). Copy the whole block, change YOUR_ACCESS_KEY to the one from your dashboard:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:#111; background:transparent; }
  .sf-form { max-width: 560px; margin: 0 auto; padding: 8px; }
  .sf-form label { display:block; font-size:13px; font-weight:600; margin: 12px 0 6px; }
  .sf-form input, .sf-form textarea {
    width:100%; box-sizing:border-box; padding: 12px 14px;
    border:1px solid #d8d8d8; border-radius: 10px; font-size:15px;
    background:#fff; color:#111; font-family:inherit;
  }
  .sf-form textarea { min-height: 140px; resize:vertical; }
  .sf-form input:focus, .sf-form textarea:focus { outline:none; border-color:#111; }
  .sf-form button {
    margin-top:16px; width:100%; height:46px; border:0; border-radius:999px;
    background:#111; color:#fff; font-size:15px; font-weight:700; cursor:pointer;
  }
  .sf-form .sf-hp { position:absolute; left:-9999px; opacity:0; }
  .sf-msg { font-size:14px; margin-top:12px; }
</style>
</head>
<body>
  <form class="sf-form" action="https://splitforms.com/api/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
    <input type="hidden" name="subject"    value="New message from Wix site" />
    <input type="hidden" name="redirect"   value="https://yoursite.com/thanks" />

    <label for="name">Name</label>
    <input id="name" type="text" name="name" required autocomplete="name" />

    <label for="email">Email</label>
    <input id="email" type="email" name="email" required autocomplete="email" />

    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>

    <input type="checkbox" name="botcheck" class="sf-hp" tabindex="-1" autocomplete="off" />

    <button type="submit">Send message</button>
  </form>
</body>
</html>

A few notes on what's in there and why:

• action URL. Always https://splitforms.com/api/submit. The https:// matters — Wix sites are served over HTTPS, and an http:// action will trigger a mixed-content warning that silently blocks the request.
• access_key. Hidden input. This is your auth. Don't commit it to a public GitHub repo — but pasting it into Wix is fine; it's already public when rendered.
• subject. Sets the email subject line. Hidden field. Edit per page if you want.
• redirect. Where the user lands after a successful submit. Because the form lives in Wix's iframe, that page opens inside the embed box, so point it at a short page that fits. If you skip it, splitforms shows a default success page.
• botcheck. Honeypot. Real users never see it (off-screen). Bots fill every input they find and get auto-dropped.
• Inline styles. Keeps the form self-contained inside the iframe. The Wix Embed HTML iframe doesn't inherit your site's CSS, so styles have to ship with the HTML.

Step 3: Embed the form in your Wix page

Wix has renamed this element more than once. These steps follow Wix's help article Wix Editor: Embedding a Site or a Widget (checked 2026-11-01):

1. Open the Wix Editor and go to the page that needs the form.
2. Click Add Elements on the left side of the editor.
3. Click Embed Code, then Popular Embeds.
4. Choose Embed HTML to add the element to your page.
5. Click Enter Code (not Enter Website Address).
6. Paste your entire HTML block from step 2 under "Add your code here".
7. Click Apply.

Wix states that only HTTPS code and URLs are displayed, that the element is an iframe and so isn't responsive, and that there is no character limit for the HTML element.

Wix will render a preview right inside the editor. If you see your form, the embed worked. If you see a blank white box, your HTML probably has a syntax error — paste it into a HTML validator first.

Resize the iframe so nothing gets cut off

Wix gives the embed block a default height of around 200px, which is short for a four-field form. Click the block's corner handles and drag down until all of the form, button, and a little padding fit. For the form above, ~600px tall and ~580px wide works well.

Wix stores desktop and mobile sizes separately. Switch to the Mobile Editor (phone icon at the top of the editor), find the same embed block, and resize it for portrait screens — usually full width minus 16px padding on each side, and a bit taller because the inputs stack at smaller widths.

Make the form match your Wix theme

The inline styles in the embed are intentionally neutral. To match a specific Wix theme, change three CSS variables in the <style> block:

• Background. The form ships background:transparent so it inherits the Wix section behind it. If you set the embed on a coloured Wix section, the form blends in. Set body { background:#fff } to give it its own card look.
• Accent colour. The submit button uses #111 (near-black). Replace with your brand colour, e.g. background:#0066ff. Match the focus state border too: input:focus { border-color:#0066ff }.
• Border radius. Round (border-radius:10px) is the default. Set to 0 for a flat, brutalist theme or 20px for very rounded shapes.

If you want the form to use a Wix-loaded font (say, Poppins from your site theme), import it inside the embed's <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  body { font-family: "Poppins", sans-serif; }
</style>

The iframe is its own document, so it has to load fonts independently of what Wix loads in the parent page. That's one extra request — usually worth it for visual consistency.

Validation and spam protection

The form already has two layers of validation baked in:

• HTML5 required. The browser blocks empty submissions before the request ever leaves. type="email" adds basic email-shape validation on top.
• Server-side checks at splitforms. Required fields, email format, and access key validity are re-checked. If a determined user disables JavaScript and bypasses the browser, splitforms still rejects bad data.

For spam, the honeypot catches most indiscriminate bots — anything that crawls and fills every field gets caught. More sophisticated, targeted spam is handled by splitforms' rule-based scorer, which is on by default for every account and flags obvious crypto, SEO outreach, and link-bait messages without blocking real contact requests.

If you want a deeper comparison of honeypot vs reCAPTCHA vs spam scoring, the post on honeypot vs reCAPTCHA walks through which to use when. For a Wix contact form, the honeypot alone is almost always enough — don't add a CAPTCHA widget unless you're getting flooded.

Mobile preview, publish, and test

Before clicking Publish, do these in order:

1. Desktop preview. Click Preview in the Wix editor. Open your contact page, submit a real test message, confirm the redirect fires.
2. Mobile preview. Switch to Mobile view in the editor, then Preview. The iframe should be full-width and the form should fit without scrolling horizontally.
3. Check your inbox. The notification email goes to the address tied to your splitforms account after the submission is saved; delivery time depends on your email provider.
4. Check the splitforms dashboard. Open splitforms.com/dashboard/submissions — your test entry should be there with all fields captured.
5. Publish. Click Publish in the top-right of the Wix editor.
6. Submit once more on the live site. Wix's preview occasionally renders the iframe differently than production. One real submission on the published URL confirms everything works end-to-end.

If anything fails, the troubleshooting section below covers the half-dozen things that usually go wrong on Wix specifically.

Troubleshooting Wix-specific gotchas

• Form looks fine but bottom of button is cut off. Wix iframe height is too short. Click the embed block in the editor and drag the bottom handle down 50–100px. Repeat for the Mobile Editor — Wix stores desktop and mobile sizes independently and a fix on desktop doesn't carry over.
• Mixed content warning in the browser console. Your action URL is http:// instead of https://. Wix sites are served over HTTPS and modern browsers block insecure form submissions silently. Change to https://splitforms.com/api/submit.
• 401 Unauthorized on submit. Wrong or missing access key, or you copy-pasted with leading whitespace. Re-paste it. If the key is correct, check whether you've enabled Allowed Domains in the splitforms dashboard — your wixsite.com URL (or custom domain) needs to be on the list.
• 403 Forbidden on submit. Same root cause as 401 most of the time — Allowed Domains is set and your Wix URL isn't on it. Add both yoursite.com and yoursite.wixsite.com if you're using both.
• Form submits but no email arrives. Check the splitforms dashboard first — if the submission is there, email delivery is the issue. Check spam folder, then check the notification email address on your splitforms account. The contact form not working guide covers deliverability fixes in depth.
• Wix preview shows the form but the published site doesn't. Hard refresh with Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows). Wix occasionally caches old iframe content at the CDN edge. If that doesn't work, republish the site.
• Custom font from Wix theme isn't loading inside the form. The Embed HTML iframe doesn't inherit Wix fonts. Either import the font inside the embed (Google Fonts link tag) or accept the system fallback.
• Form is too narrow on mobile. Wix mobile editor often defaults the embed block to a fixed pixel width that's narrower than the viewport. Stretch the block to full width in the mobile editor and re-publish.

When to use Wix Velo instead

The HTML embed approach above is the right answer for the vast majority of Wix contact forms — it's fast, needs no Wix code, and Wix lists no plan requirement for the Embed HTML element. But there are two situations where Wix Velo (their developer mode, formerly Corvid) is a better fit:

• Reactive multi-step forms. If you need step 2 to show different fields depending on step 1's answer, that branching logic is awkward inside a static iframe. Velo gives you proper element APIs and event handlers in the parent Wix page.
• Pre-filling from Wix Members data. If a logged-in member should see their name and email pre-filled, you need access to the Wix Members API — only available in Velo.

The Velo version is still simple: drop a Wix form on the page, then in the page's code panel, use fetch() to POST to splitforms when the form submits. The endpoint is the same: https://splitforms.com/api/submit. The body is application/x-www-form-urlencoded or JSON. The access key still goes in the body as access_key.

// In your Wix page's code panel
import wixLocation from "wix-location";

$w.onReady(() => {
  $w("#submitButton").onClick(async () => {
    const body = new URLSearchParams({
      access_key: "YOUR_ACCESS_KEY",
      name:    $w("#nameInput").value,
      email:   $w("#emailInput").value,
      message: $w("#messageInput").value,
    });
    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      body,
    });
    if (res.ok) wixLocation.to("/thanks");
  });
});

For the average “name, email, message” contact form, that's overkill. Stick with the HTML embed.

Want the no-code version? See the Wix contact form setup page →

Add a contact form to another platform

Next steps

• If you're considering other backends, see best free form backend services 2026 for a head-to-head.
• If you came from Formspree, the migrate from Formspree guide walks through the cut-over in 5 minutes.
• Side-by-side comparison: splitforms vs Formspree and splitforms vs Web3Forms.
• Building on a different platform? See React, Next.js, Astro, Vue, or Svelte integration guides.
• API contract and webhook envelope: /docs and /api-reference.
• Pricing, EU residency, and account questions: /faq, or grab a free access key and ship the form in the next 10 minutes.
• Browse more tutorials in the splitforms blog.

FAQ