Add an IDX Search Form to Webflow
Place a live MLS search form on any Webflow page with the Code Embed element. The form shows as a gray box in the Designer and comes alive on the published site.
On this page
In short
- The form goes into Webflow's Code Embed element.
- The Designer shows a gray box, the live site shows the form.
- A Webflow project on a paid plan is required.
- Every form layout embeds the same way.
This guide covers one task from IDX Plugin for Webflow: putting a live MLS search form on a Webflow page. Any layout from Search Forms, Every Layout Explained works here, and the embed steps are identical for each. You need a Webflow project on a paid plan and a free IDX Plugin account with your IDX Broker API key added, because that is where the embed code lives.
Here is the form itself, running live. This is what your published Webflow page shows once you paste the code.
Embed the form on your page
-
1
Pick your widget
Log in to your IDX Plugin dashboard. Find the search form widget you want and click Show Embed Code.
-
2
Copy the code
Copy the generated code from the popup.
-
3
Open the page in Webflow
Open Webflow and select the page where you want the search bar, usually the homepage.
-
4
Add the Code Embed element
In the Elements Panel, search for Code Embed and drag it into the section where the search bar should appear.
-
5
Paste the code
Paste the code you copied from IDX Plugin into the element's code area.
-
6
Don't mind the gray box
Webflow shows a gray placeholder in the Designer. That is normal, the live search form appears only on your published site.
-
7
Adjust the layout
Use Webflow's layout tools to control spacing and alignment. Centering the widget and limiting the width to around 1024px keeps it clean and balanced.
-
8
Publish and test
Click Publish, then Publish to selected domains, and open the live site. Type a city or zip code, the autocomplete pulls real data from your connected MLS.
Change the form without touching Webflow
Field order, removed fields and styling all live in your dashboard, not in the embed. Click Edit on the widget, adjust it in the visual editor, and the published form updates on its own, with no re-pasting in Webflow.
Where the search sends visitors
Every search leads to the pages generated from your IDX Broker account: results, single listings, lead forms. Giving them your Webflow navigation and footer is its own task, covered in Show IDX Pages with Your Webflow Navigation and Footer, and our IDX Broker templates handle the layout inside. You can try every form layout live on our demo site.
Already on IDX Broker?
Create a free IDX Plugin account, add your API key and your search forms are ready to embed in minutes, styled to your brand. If you prefer, tell us where the form should go and we place it for you.
Get the widgets, it's free → No extra invoice. You only pay IDX Broker.