Does the RSVP form work with Webflow interactions and animations?

The embed container can have Webflow interactions applied to it (like fade-in on scroll), but the form content inside operates independently.

Webflow Guide

How to Embed an RSVP Widget in Webflow

Add a fully customizable RSVP form to your Webflow site using the Code Embed element. Full CSS control to match your design.

5-minute setup

Full CSS control

Mobile-friendly

Real-time tracking

Note: Publishing custom code embeds requires a Webflow Site plan (Basic or above). You can design and preview for free, but publishing needs a paid plan.

ouRSVP form embedded on a Webflow wedding website

Why Add an RSVP Form to Your Webflow Site?

Webflow is the go-to platform for designers who want complete control over their wedding website. But Webflow's native form element is limited — it's great for contact forms, but lacks the guest management features you need for event RSVPs.

With ouRSVP, you can embed a full-featured RSVP form directly on your Webflow site. Guests respond on your page (no redirects), and you get a proper dashboard with meal counts, plus-ones, dietary restrictions, and export options.

Best of all, ouRSVP forms are designed for Webflow users — you get full CSS customization to match even the most pixel-perfect designs.

What You'll Need

→A Webflow project (free tier works for designing)
→A Webflow Site plan to publish (Basic plan or above)
→An ouRSVP account with your event created
→Your embed code snippet (found in your ouRSVP dashboard)

Step-by-Step Instructions

Open Your Webflow Project

Log in to Webflow and open your wedding website project. Navigate to the page where you want your RSVP form — typically a dedicated "RSVP" page or section.

Add a Code Embed Element

Open the Add panel by pressing A or clicking the + icon in the left toolbar.

Search for "Embed" in the search bar, or
Find it under Components → Embed

The element is called "Embed" in Webflow (previously "Custom Code" or "HTML Embed").

Position the Embed Element

Drag the Embed element from the Add panel to where you want your form to appear. You can place it inside a container, section, or div for better layout control.

Tip: Create a wrapper div with a max-width (e.g., 600px) and center it for a clean look.

Paste Your ouRSVP Code

Double-click the Embed element to open the code editor. Paste your ouRSVP code snippet:

<div id="rsvp-widget"></div>
<script>
  (function (w, d, s, o, f, js, fjs) {
    w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'oursvp', 'https://www.oursvp.app/widget/widget.js'));
  oursvp('init', {
    element: document.getElementById('rsvp-widget'),
    eventId: 'YOUR_EVENT_ID'
  });
</script>

The <div id="rsvp-widget"> element must come before the script. Replace YOUR_EVENT_ID with your actual event ID from the dashboard.

Save and Publish

Click "Save & Close" to save the embed. You'll see a gray placeholder in the designer — this is normal. Webflow doesn't execute JavaScript in the designer.

Click "Publish" in the top right to push your site live. Visit your published site to see the RSVP form in action.

Alternative: Using a Webflow Div Block

For more control over styling, you can use a native Webflow div block as the form container instead of including the div in the embed code.

Method:

Add a Div Block from the Add panel
Select the div and go to Element Settings (gear icon)
Set the ID field to rsvp-widget
Add an Embed element anywhere on the page (can be after the div)
Paste only the script in the embed:

<script>
  (function (w, d, s, o, f, js, fjs) {
    w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'oursvp', 'https://www.oursvp.app/widget/widget.js'));
  oursvp('init', {
    element: document.getElementById('rsvp-widget'),
    eventId: 'YOUR_EVENT_ID'
  });
</script>

Benefit: This method lets you style the container div directly in Webflow's visual designer — set max-width, padding, margins, and even apply Webflow interactions.

Customizing Your Form

ouRSVP forms use CSS custom properties (variables) that you can override to match your Webflow design. The form is scoped under #widget-oursvp with semantic class names.

Key CSS Classes

.rsvp-surveyThe main form container

.rsvp-titleEvent title and headings

.rsvp-dateEvent date display

.rsvp-fontBody text and labels

.rsvp-btnButtons (submit, continue, etc.)

Using Webflow's Custom Code

Go to Project Settings → Custom Code → Head Code or add styles directly in the embed. Override the CSS variables or target specific classes:

/* Override CSS variables for colors */
#widget-oursvp {
  --bg-color: #fff;
  --text-color: #1a1a1a;
  --heading-color: #000;
  --accent-color: #000;  /* For radio buttons, links */
  --button-bg-color: #000;
  --button-text-color: #fff;
  --border-color: #e5e5e5;
  --button-shape: 0px;  /* Sharp corners */
  --button-border-width: 1px;
}

/* Style the submit button */
#widget-oursvp .rsvp-btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* Style form inputs */
#widget-oursvp .rsvp-survey input[type="text"] {
  border-radius: 0;
  border: 1px solid #e5e5e5;
}

/* Style headings to match your Webflow font */
#widget-oursvp .rsvp-title {
  font-family: inherit;
}

Tip: Use #widget-oursvp as the prefix to ensure your styles override the widget's base styles. You can also customize colors directly in your ouRSVP dashboard.

Webflow-Specific Tips

Use Webflow's Grid or Flexbox

Place your embed inside a Webflow grid or flexbox container for responsive layouts. The form will adapt to its container width automatically.

Webflow Interactions Work

You can apply Webflow interactions to the embed container (or the wrapper div). Use scroll-triggered animations to fade the form in as visitors scroll down.

Preview vs Publish

The embed shows a placeholder in the designer, but works in Preview mode. Click the eye icon or press Cmd/Ctrl + Shift + P to preview.

Staging vs Production

Webflow's staging domain (yoursite.webflow.io) works for testing your embed. Once everything looks good, publish to your custom domain.

Troubleshooting

Form not appearing after publish?

Make sure you have a Webflow Site plan active. Also try clearing your browser cache and viewing in incognito mode.

Embed shows error or doesn't save?

Check that your code is valid HTML. Make sure you haven't accidentally deleted the closing tags. Try copying fresh code from your ouRSVP dashboard.

Form looks different than expected?

Webflow's global styles may affect form elements. Add more specific CSS selectors (like #rsvp-widget input) to override Webflow's defaults.

Form works in preview but not on published site?

This can happen if publishing failed or is still processing. Check your publish status in Webflow and try publishing again.

Form not responsive on mobile?

ouRSVP forms are responsive by default. If the container is too narrow, check your Webflow layout settings for the embed or wrapper div on mobile breakpoints.

Frequently Asked Questions

Do I need a paid Webflow plan to embed custom code?

Yes, publishing custom code embeds requires a Webflow Site plan (Basic, CMS, Business, or Enterprise). You can design and preview for free, but publishing needs a paid plan.

Can I style the RSVP form with Webflow's visual designer?

The embed content itself can't be styled visually, but ouRSVP supports full CSS customization. You can use the "Webflow div block" method above for container styling.

Why does my form show a placeholder in the designer?

Webflow shows a placeholder for code embeds for security reasons. Your form will appear correctly in preview mode and on the published site.

Can I use a Webflow div block as the form container?

Yes! Create a div in Webflow with ID "rsvp-widget" and put only the script tag in the embed. This gives you more styling control.

Does the RSVP form work with Webflow interactions?

Yes, you can apply Webflow interactions to the embed container (like fade-in on scroll). The form content inside operates independently.

Can guests add plus-ones and meal selections?

Yes! ouRSVP supports plus-ones, meal selections, dietary restrictions, and custom questions. Configure everything in your ouRSVP dashboard.

What You Can Do with ouRSVP

Guest Management

Track RSVPs in real-time, see who's coming, and export your guest list.

Meal Selection

Let guests choose their meal preference and track dietary restrictions.

Plus-Ones

Allow guests to add additional attendees with their own details.

Custom Questions

Add any questions you need — song requests, transportation, accommodations, etc.

Related Guides

Add RSVP Form to Squarespace

Step-by-step guide for Squarespace sites

Add RSVP Form to Wix

Step-by-step guide for Wix websites

Compare ouRSVP to other RSVP tools →

Ready to Add RSVPs to Your Webflow Site?

Set up your event in minutes. $5/month flat — no per-guest fees, no feature tiers.

Get started

Works with Webflow, Squarespace, Wix, WordPress, and any custom site