A form that lives on its own page works, but it asks people to leave your website at the exact moment they are ready to get in touch, sign up or book. Every extra click loses a few of them. That is why so many businesses want to embed a form on their website instead: the contact form sits on the contact page, the registration form sits next to the event description, and the visitor never sees a different design or address.
Embedding a form is not hard, yet small details decide whether it looks like part of your site or like a box that was dropped in from somewhere else. In this guide we explain when embedding makes sense, how to embed a form on your website with a script or an iframe, and what to check before the page goes live. We use Deftform as the example throughout, because that is the form builder we know best.
There are two basic ways to put a form in front of people. You can share a link that opens the form on its own page, or you can embed the form so it appears inside one of your existing pages.
A link is the better choice when the form is the destination. Think of a client briefing you send by email, a survey in a newsletter, a QR code on a flyer or a job application you post on a job board. A clean full-page form is also easier to fill out on a phone.
An embed is the better choice when the form supports content on a page. A contact form below your opening hours, a quote request on a service page or a waitlist on a product page all work best when visitors can read and fill out in one place. Your menu, footer and branding stay around the form.
Many businesses use both for the same form. The form is embedded on the website and the direct link goes into emails and social posts. If you share links often, it helps when they run on your own domain. Our guide to hosting forms on your own domain walks through that setup.
Most form builders give you two technical options. They look alike, but behave differently once a form changes length.
The recommended method in most tools is a short snippet that consists of a placeholder element and a script. You paste it into your page, and the script loads the form into the placeholder. Because the script controls the form, it can adjust the height when fields appear through conditional logic, when error messages show up or when the form is replaced by a thank you message. In Deftform, you copy this embed code right from the forms list.
An iframe is the classic way to show one web page inside another. It works almost everywhere, including in systems that do not allow custom scripts. The downside is that an iframe has a fixed height. If the form grows, visitors get a scrollbar inside the page. If it shrinks after submission, you are left with an empty block. In Deftform, an iframe embed needs a fixed height, and the extra embed options described below are not available.
Our advice is simple: use the script whenever your website allows it, and keep the iframe for the rare cases where scripts are blocked.
Here is the full process, from a finished form to a live page:
Build and test the form. Add your fields, set up any conditional logic and submit a test response from the direct link first.
Copy the embed code. Open the forms list in Deftform and copy the embed code for the form. It contains a placeholder with the form ID and one line that loads our embed script.
Add a custom HTML block to your page. Almost every website builder has one. In WordPress it is the Custom HTML block, in Webflow it is the Code Embed element, and Squarespace has a Code block. Paste the snippet there.
Adjust the options if needed. Width, alignment and automatic height can be set with attributes on the placeholder, as explained in the next section.
Publish and test on a real phone. Preview modes in website builders do not always run scripts, so check the live page once on mobile and once on a laptop.
One WordPress detail catches people regularly: depending on the setup and user role, WordPress may not let every user save script tags. If the form disappears after saving, ask an administrator to add the snippet or use the iframe instead.
Most layout problems with embedded forms come from sizing. The Deftform embed code accepts a few attributes that cover the usual cases:
data-form-width sets the width in percent or pixels, for example 100% or 500px. The default is 100%, so the form fills its container.
data-form-align places the form left, center or right inside its container. This matters when you set a fixed width on a wide page.
data-form-auto-height lets the form set its own height. It keeps working when conditional logic adds fields or validation messages make the form longer.
data-form-height sets a fixed height instead. Leave it out if you want automatic height.
For most pages, a width of 100% inside a content column of reasonable width plus automatic height is the right choice. A form stretched across a full 1,600 pixel screen is hard to read, so let your page layout limit the width rather than the form.
Automatic height also helps after submission. When an embedded form is sent, it shrinks to the size of the thank you message and keeps that message in view, so nobody is left staring at an empty area and wondering whether it worked.
Sometimes one page needs more than one form, for example a newsletter signup in the footer and a quote request in the main content. That is fine, with one rule: include the embed script only once per page. Add a placeholder for each form, then load the script a single time. Loading it twice leads to problems.
Watch out for reusable blocks in page builders: if the footer block already contains the script, other form blocks on that page need only the placeholder.
By default, an embedded Deftform form loads as soon as the page loads. That is what you want in most cases, but not when the form sits in a modal, a hidden tab or a page that a JavaScript framework renders after the initial load.
For these situations, set data-form-init to 0 on the placeholder. The form then waits until your own code calls window.initDeftform(). If there are several forms on the page, you can pass the position of the form in the page, so window.initDeftform(2) starts the second one. To load forms again after your app has changed the page, call window.reinitDeftform().
An embedded form does not have to start empty. With pre-filled fields you can hand over information you already know, which saves visitors typing and gives you cleaner data.
Typical examples are a hidden field that records which service page the form was sent from, a campaign name for paid traffic, or a customer number when you link to a feedback form from an email. In Deftform, each field has its own identifier, and you can pass values for short answer, hidden, single choice, dropdown and country fields. For direct links this works with URL parameters. For embedded forms, you add the data-form-prefill attribute to the embed code. Our help center explains how to pre-fill fields in detail.
Keep values short and predictable. Pre-filled values are limited to 255 characters, and anything longer is cut off.
A form on your website represents your business just like the rest of the page. Before you announce it, run through this list:
Mobile layout. Fill out the form on a phone, including any file upload and date fields.
Spam protection. Public forms on websites attract bots. Turn on captcha protection, such as ALTCHA or reCAPTCHA in Deftform, before the page is indexed.
Notifications. Decide who gets an email for new responses, and connect a webhook, Slack or your CRM if the form feeds a process.
Thank you message or redirect. Tell people what happens next and when they will hear from you. A vague message like "Thanks!" creates follow-up emails.
Privacy information. An embedded form loads content from your form provider. Mention the provider in your privacy policy, describe what the form collects, and check whether your cookie banner setup affects the embed.
Length. If the form has more than a handful of fields, consider splitting it into steps. Our article on how to create an effective multi step form has practical tips.
Then send one real test submission from the live page and follow it all the way through: notification, export, integration. It catches the contact form that has been quietly emailing an old inbox for months.
Agencies embed forms on client websites all the time, and the same steps apply. What changes is the organization around them. Keep each client's forms in a separate workspace so the right people have access, create a form style with the client's colors and logo so embedded forms match the site, and use the client's own domain for any direct links you send out. Our page on Deftform as a form builder for agencies shows how we set this up for client work.
We at Deftform build a deliberately simple form builder, made and hosted in Germany. You can share every form as a link or embed it on your website with one snippet, and every plan includes unlimited responses, unlimited team members and a custom domain with SSL. Each account comes with three workspaces, each with its own domain, custom styles, API access and webhooks, and you can take payments through your own Stripe account.
You can buy forms pre-paid at €4 per form in packs of five, choose the Complete plan at €25 per month, or pay once for the Lifetime package at €189, which is also available as 12 monthly payments of €16.
If you have a page that needs a form, create a Deftform account, build the form and paste the embed code into your site.