How to Embed a Form on Your Website (Free)
Sending visitors off to a separate form page adds friction and loses submissions. Embedding the form directly on your website keeps people on your page and lifts completion. This guide shows you exactly how to embed a form — iframe versus link, the code to copy, and how to add it to WordPress, Webflow, Shopify, or plain HTML.
Quick answer
To embed a form, build and publish it in a form builder, copy the embed code (an iframe or script snippet), then paste it into your website's HTML where you want the form to appear. With OneSol at onesol.io you publish the form, grab an embed link that hides the outside chrome, and drop the iframe into WordPress, Webflow, Shopify, or any site — no plugins needed.
1. Build and publish your form first
You can't embed a form that isn't live, so create and publish it to get a public URL. Test that URL on its own — submit a sample entry and confirm it lands where you expect. Only then move on to embedding, so you're not debugging the form and the embed at the same time.
2. Get the embed code (iframe vs. script)
An iframe drops the form inline as a fixed-size frame; a script embed can auto-resize to fit the form's height. Copy whichever your builder provides from its 'Embed' or 'Share' menu. OneSol offers an embed mode that strips the surrounding branding and page chrome, so the form sits cleanly inside your own layout.
3. Paste it into your site
In WordPress, add a Custom HTML block or HTML widget and paste the code; in Webflow use an Embed element; in Shopify add a Custom Liquid or HTML section; on a plain HTML site paste it into the body where the form should appear. Set the width to 100% so it stays responsive. No form plugin is needed when the form is hosted elsewhere.
4. Test responsiveness and submissions
View the page on a phone to make sure the form isn't cut off and doesn't create a double scrollbar — increase the iframe height or use the auto-resize script if it does. Submit one real test entry to confirm it reaches your inbox or dashboard. Finally, tweak the form's colors and fonts in the builder so the embed blends with your site.
Ready to start? OneSol is free.
Sell, book and get paid from one link — no card needed.
FAQ
What's the difference between an iframe and a link to a form?
An iframe displays the form inline on your page so visitors never leave; a link sends them to the form's hosted page. Iframes keep the experience seamless and usually convert better.
Can I embed a form in WordPress without a plugin?
Yes — paste the iframe into a Custom HTML block or an HTML widget. No form plugin is required when the form is hosted elsewhere.
Why is my embedded form cut off or scrolling weirdly?
The iframe height is usually too short. Set a taller fixed height, or use the builder's auto-resize script embed so the frame grows with the form.
Will an embedded form match my site's design?
You can style the form's colors and fonts in the builder, and use an embed mode that hides outside branding. OneSol's embed mode strips the surrounding chrome so it blends in.
Related guides
How to Add a Link to Your LinkedIn Profile (2026)
Step-by-step: add a clickable link to your LinkedIn profile via Contact info and Featured. Route it all through one free, editable OneSol page.
Read guideHow to Add a Store to Your Website (Free Guide)
Add a store to your website without rebuilding it: embed a checkout, connect Stripe, and start selling. A simple free guide for any site in 2026.
Read guideHow to Create a Contact Form (Free, 2026 Guide)
Learn how to create a free contact form in minutes — which fields to use, how to stop spam, and how to publish or embed it on any website. No coding needed.
Read guideHow to Accept Payments on Your Website in 2026 (Free to Start)
Learn how to accept payments on your website in 2026: choose a processor, connect Stripe, add checkout, and stay secure. Simple, no-code steps.
Read guide