Add forms to Webflow

Use the Embed element in the Webflow Designer to add your form.

Using the Embed element

The Webflow Embed element lets you add custom HTML directly into your page layout. Unlike an iframe, the embed renders inline, so the form becomes part of your page.

1. Open the Webflow Designer for your project.
2. In the left panel, click Add Elements (the + icon).
3. Scroll to Components and drag an Embed element onto your page.
4. Paste your FormBlade form HTML into the code editor that appears.
5. Click Save & Close.
6. Publish your site to make the form live.

Example form with inline styles:

<form action="https://formblade.com/f/contact" method="POST"
  style="max-width:480px;font-family:inherit">

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:500;margin-bottom:6px">Name</label>
    <input type="text" name="name" required
      style="width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:6px;font-size:15px;font-family:inherit">
  </div>

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:500;margin-bottom:6px">Email</label>
    <input type="email" name="email" required
      style="width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:6px;font-size:15px;font-family:inherit">
  </div>

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:500;margin-bottom:6px">Message</label>
    <textarea name="message" rows="5" required
      style="width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:6px;font-size:15px;font-family:inherit;resize:vertical"></textarea>
  </div>

  <button type="submit" id="fb-submit"
    style="background:#6c47ff;color:#fff;border:none;padding:12px 28px;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer">
    Send Message
  </button>
</form>

Replace /f/contact with your own form link from the dashboard.

Inherits Webflow styles

Because the Embed element renders inline (not in an iframe), your form will inherit some of Webflow's base styles like font family, font size, and color. This is usually a good thing — your form will naturally match your site's typography. If you want full control, use inline styles to override any inherited properties.

Tips

Control form width and layout

Wrap the Embed element inside a Div Block in the Webflow Designer. Then use the Style Panel to set a max-width (for example, 500px) and center it with margin: 0 auto. This gives you precise control over the form's position and width without editing the HTML.

Test with responsive preview

Use Webflow's responsive breakpoint preview (tablet, mobile landscape, mobile portrait) to verify the form looks correct at all sizes. If fields overflow, add max-width: 100% to the form element and make sure inputs use width: 100%.

Advanced: AJAX submission with Webflow interactions

You can submit the form via JavaScript and trigger a Webflow interaction (animation) on success. Add this script inside your Embed element, below the form:

<script>
document.getElementById('fb-submit').closest('form')
  .addEventListener('submit', function(e) {
    e.preventDefault();
    var form = this;
    var btn = document.getElementById('fb-submit');
    btn.disabled = true;
    btn.textContent = 'Sending...';

    fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
      headers: { 'Accept': 'application/json' }
    })
    .then(function(res) { return res.json(); })
    .then(function(data) {
      form.style.display = 'none';
      var msg = document.createElement('p');
      msg.textContent = 'Thank you! Your message has been sent.';
      msg.style.cssText = 'font-size:18px;font-weight:600;color:#16a34a;padding:20px 0';
      form.parentNode.appendChild(msg);
    })
    .catch(function() {
      btn.disabled = false;
      btn.textContent = 'Send Message';
      alert('Something went wrong. Please try again.');
    });
  });
</script>

Troubleshooting

Form looks unstyled or broken

Webflow's CSS reset may strip default browser styles from your form elements. Add explicit inline styles for padding, border, border-radius, and font-size on every input, textarea, and button. The code example above includes all necessary inline styles.

Double submissions

If users click the submit button multiple times before the form finishes submitting, you may receive duplicate entries. Add a disabled state to the button on submit. The AJAX example above handles this automatically by setting btn.disabled = true. For standard (non-AJAX) forms, add this one-liner inside the Embed:

<script>
document.querySelector('form').addEventListener('submit', function() {
  this.querySelector('button[type="submit"]').disabled = true;
});
</script>