SilentForms

Wix

Embed a custom HTML contact form in Wix with an HTML embed, including how redirects work inside the embed frame.

On Wix you add a custom form with an HTML embed element. The one thing that makes Wix different from other site builders is that the embed is an iframe: your form runs in a small, sandboxed page of its own inside the Wix page. That changes how the result of a submission is shown, so this guide uses a form that submits with JavaScript and shows its message inside the frame.

Get an access key on the access key page first. It only routes submissions to your inbox, so it is safe in the embed's code.

Add the embed#

The element has a slightly different name in each Wix editor:

  • Wix Editor: click Add Elements, then Embed Code, Popular Embeds and Embed HTML. Click the element on the page, then Enter Code.
  • Wix Studio: click Add Elements, then Embed & Social, and add Embed Code. Click Enter Code on the element.

Paste the code below into the code box and click Apply. Wix only displays embeds that use HTTPS, which the endpoint does.

The form#

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body { margin: 0; font-family: system-ui, sans-serif; color: #1a1a1a; background: transparent; }
  form { display: grid; gap: 8px; padding: 4px; }
  label { font-size: 14px; font-weight: 600; }
  input, textarea { padding: 10px 12px; border: 1px solid #c8c8c8; border-radius: 6px; font: inherit; }
  button { margin-top: 8px; padding: 12px; border: 0; border-radius: 6px; background: #116dff; color: #fff; font: inherit; cursor: pointer; }
  button:disabled { opacity: 0.6; }
  #status { min-height: 1.5em; margin: 4px 0 0; }
</style>
</head>
<body>
<form id="contact">
  <input type="hidden" name="accessKey" value="YOUR_ACCESS_KEY_HERE">
  <input type="hidden" name="subject" value="New message from the Wix site">

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

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

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

  <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">
  <button type="submit">Send message</button>
  <p id="status" role="status"></p>
</form>

<script>
  const form = document.getElementById('contact');
  const status = document.getElementById('status');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    const button = form.querySelector('button');
    button.disabled = true;
    status.textContent = 'Sending…';

    try {
      const response = await fetch('https://silentforms.com/api/submit', {
        method: 'POST',
        headers: { Accept: 'application/json' },
        body: new FormData(form),
      });
      const result = await response.json();
      if (result.ok) {
        form.reset();
        status.textContent = 'Thanks! Your message has been sent.';
      } else {
        status.textContent = result.message;
      }
    } catch {
      status.textContent = 'Something went wrong. Please try again.';
    } finally {
      button.disabled = false;
    }
  });
</script>
</body>
</html>

Because the code runs in its own document, it does not inherit your Wix fonts or colours. Set them in the <style> block: replace system-ui with your site font if it is a web font you can load, and the button colour with your brand colour.

Size the element#

An iframe does not grow with its content. Drag the element's handles until the whole form and the status line fit, with some room to spare, and check the mobile view too: Wix notes that embeds may display differently on mobile. If the form is cut off, make the element taller rather than setting fixed pixel widths in the code; the form above already fills whatever width it is given.

Why not a plain form post#

A normal <form action="…" method="POST"> does work inside the embed, but the redirect that follows it happens inside the frame. The visitor would see the thank-you page squeezed into the box where the form was, which is rarely what you want.

The usual fix elsewhere is target="_top", which tells the browser to load the result in the whole window. Wix's sandbox does not allow that: Wix's help center lists the permissions it grants embedded code (allow-same-origin, allow-forms, allow-popups, allow-scripts and allow-pointer-lock), and top-level navigation is not among them. So a redirect field cannot send the visitor to a Wix thank-you page. The fetch version above avoids the problem entirely, which is why it is the recommended setup for Wix.

Domain restriction#

The embed's code is served by Wix from its own domain, not necessarily from your site's domain. If you turn on domain restriction in the dashboard, send a test submission afterwards. If it is refused with "This form does not accept submissions from this domain.", the frame's origin is different from your site's. Leave the allowed domains empty for this form: allowing a domain that Wix shares between many sites would not keep anyone out anyway.

Test it#

Embeds run on the published site, so publish (or preview) and submit the form. The status line shows the result, and error messages such as "Email address is invalid." come straight from the endpoint. If nothing happens at all, check that you pasted the whole code, including the <script> part. Everything else is in Troubleshooting.

Next steps#