> ## Documentation Index
> Fetch the complete documentation index at: https://docs.surveyowl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow

> Add an Endpoint form to a Webflow page with an Embed element.

## 1. Copy your Public Key

In the dashboard, open your Endpoint form, go to **General**, and copy the Public Key from the **Form endpoint URL**.

## 2. Add the embed code

Copy this code and replace `YOUR_FORM_PUBLIC_KEY` with your Public Key:

```html theme={null}
<form id="surveyowl-form">
  <label for="so-name">Name</label>
  <input id="so-name" name="name" required />

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

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

  <button type="submit">Send message</button>
  <p id="surveyowl-status" role="status"></p>
</form>

<style>
  #surveyowl-form { max-width: 480px; font-family: inherit; }
  #surveyowl-form label { display: block; margin: 0 0 4px; }
  #surveyowl-form input,
  #surveyowl-form textarea { display: block; width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 8px; font: inherit; }
</style>

<script>
  (function () {
    var form = document.getElementById('surveyowl-form');
    var status = document.getElementById('surveyowl-status');
    var button = form.querySelector('button[type="submit"]');

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

      fetch('https://api.surveyowl.co/v1/submit/YOUR_FORM_PUBLIC_KEY', {
        method: 'POST',
        body: new FormData(form)
      })
        .then(function (response) {
          return response.json().then(function (result) {
            if (!response.ok) {
              var message = typeof result.error === 'string' ? result.error : result.error && result.error.message;
              throw new Error(message || 'Could not send the form.');
            }
          });
        })
        .then(function () {
          form.reset();
          status.textContent = 'Thanks — your message was sent.';
        })
        .catch(function (error) {
          status.textContent = error.message;
        })
        .then(function () {
          button.disabled = false;
        });
    });
  })();
</script>
```

## 3. Paste it into Webflow

1. Open your page in the Designer.
2. Open the **Add** panel and drag an **Embed** element to where the form should appear.
3. Paste the code into the editor that opens, then select **Save & Close**.
4. Publish the site.

Webflow's own **Form Block** is built to send submissions to Webflow, so use an Embed element rather than editing a Form Block.

## 4. Test it

Custom code does not run on the Designer canvas. Use Preview or open the published page, send a test message, and check **Submissions** in the dashboard.

## Good to know

* Embed code is limited in size, so keep the form to the fields you need.
* Style the form in the `<style>` block of the embed, or add your own class names and style them in Webflow.
* With [domain restriction](/developer-api/submit-a-response#domain-restriction) on, add your published domain (and your `webflow.io` staging domain if you test there).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.