Skip to content
← All guides
5 steps · Wix

Wix

Wix contact form with an EU backend

Wix does not let you edit a page's HTML. Its Embed HTML element (Embed code in Wix Studio) is the way in: you paste markup and Wix runs it in a sandboxed iframe, a small separate document inside your page. A form inside that frame can post to Formward, which stores each submission in Sweden, filters spam and emails it to you. The frame does shape how the form should behave after submitting, so this guide uses a short script to keep the visitor on the page. If you would rather not paste code, the last step links a button to a Formward hosted form instead.

  1. 01Create your form in Formward

    Sign up at formward.eu, create a form and copy its endpoint URL (https://forms.formward.eu/f/your-form-id).

    Leave the form's allowed-origins list empty. Code in a Wix embed is served from an address Wix chooses, not from your own domain, so a list containing only your domain would refuse the submissions with a 403. The honeypot and rate limit still apply.

  2. 02Add an Embed HTML element

    In the Wix Editor, click Add Elements, then Embed Code, then Embed HTML. In Wix Studio the element is called Embed code. Click Enter Code, choose Code, and paste the snippet below with your own endpoint in the action. Wix only displays embeds served over HTTPS, which the Formward endpoint is.

    The styles sit in the snippet because the frame does not inherit your site's fonts or colours. Change the font-family and colours to match your theme.

    <style>
      body { margin: 0; font-family: Helvetica, Arial, sans-serif; }
      form { display: flex; flex-direction: column; gap: 12px; }
      input, textarea { padding: 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
      button { align-self: flex-start; padding: 10px 20px; background: #000; color: #fff; border: 0; border-radius: 6px; font: inherit; cursor: pointer; }
    </style>
    
    <form id="contact" action="https://forms.formward.eu/f/your-form-id" method="POST">
      <input type="text" name="name" placeholder="Your name" required />
      <input type="email" name="email" placeholder="Email address" required />
      <textarea name="message" rows="4" placeholder="Message" required></textarea>
      <!-- honeypot: keep hidden -->
      <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
      <button type="submit">Send</button>
      <p id="status" role="status"></p>
    </form>
    
    <script>
      const form = document.getElementById("contact");
      const out = document.getElementById("status");
      form.addEventListener("submit", async (e) => {
        e.preventDefault();
        out.textContent = "Sending...";
        try {
          const res = await fetch(form.action, {
            method: "POST",
            headers: { Accept: "application/json" },
            body: new FormData(form),
          });
          const data = await res.json(); // { ok: true, id } or { ok: false, error }
          if (!res.ok || !data.ok) throw new Error(data.error);
          form.reset();
          out.textContent = "Thanks, your message was sent.";
        } catch {
          out.textContent = "Could not send. Please try again.";
        }
      });
    </script>
  3. 03Why the form submits with a script

    Wix's developer docs describe the HTML element as a sandboxed iframe with no access to the rest of your page. A normal form submit therefore navigates the frame, not the page: Formward's thank-you page would open inside the small embed box, and a _redirect to your own thanks page would load your whole site inside that box. The script posts with fetch and an Accept: application/json header instead, so Formward replies with JSON and the confirmation appears in place.

    Wix also notes that HTML and site embeds are iframes and are not responsive. Set the element's height so the form and the status line fit, then check the mobile layout in the editor and adjust the element there as well.

  4. 04Or: link a button to a hosted form

    To avoid code entirely, publish the form as a Formward hosted form. Create a form from a hosted template, then open its Settings, go to the Hosted pages tab and copy the link, which looks like the one below. Free includes one active hosted form.

    In Wix, add a Button, open its link settings, choose Web Address, paste the link and pick whether it opens in a new tab. The visitor fills the form on Formward's page, which carries the honeypot and rate limit by default and can use Turnstile if spam gets through.

    https://formward.eu/s/your-slug
  5. 05Publish and test

    Publish the site and open the live page in a private window. Send a message and check that the confirmation appears inside the embed and that the submission shows up in your Formward dashboard and your inbox. If the status line says the message could not be sent, check the allowed-origins list from the first step.

Ready to collect your first submission?

Create your form
Wix contact form with an EU backend | Formward