Surveys
Introduction
Adding a form to your website sounds simple. You create a contact form, copy the embed code, paste it onto a page, and publish. But a few days later, you notice that the page loads more slowly, the form appears after the rest of the content, or the layout shifts just as visitors are about to click.
The problem is not necessarily the form itself. It may be the way the form loads, the scripts it uses, or the space reserved for it on the page.
Website forms play an important role in collecting enquiries, generating leads, registering event attendees, and gathering customer feedback. If visitors struggle to access or complete them, you could lose valuable responses even when your website attracts the right audience.
The good news is that you can embed a form on your website without creating unnecessary performance problems. This guide explains the different embedding methods, how to add forms to WordPress and other platforms, and how to test your page after publishing.
What Does It Mean to Embed a Form on a Website?
To embed a form on a website means displaying a form directly within one of your web pages. Visitors can enter their information and submit their responses without navigating to a separate form page.
Most form builders provide a form embed code, which you copy into your website. Depending on the platform, this code may use an HTML iframe or a JavaScript snippet.
An iframe form embed displays content from another URL inside a defined area of your page. A JavaScript embed uses a script to insert the form into your website and may support features such as automatic resizing.
For example, a software company could embed a contact form on its pricing page so prospective customers can ask questions without leaving the page. An online store might add a feedback form to its post-purchase page, while an event organizer could embed a registration form directly on an event landing page.
The right approach depends on your website platform, the form's complexity, and how much control you need over its appearance and loading behavior.
Why Embed a Form Instead of Sharing a Link?
A hosted form link is often the easiest option, but embedding can make the experience more convenient when visitors need to take action on a particular page.
It keeps visitors in context. Someone reading about your services can send an enquiry without opening another page and finding their way back.
It creates a consistent experience. An embedded form sits within your website's layout, making the next step feel like a natural part of the page.
It reduces unnecessary navigation. Visitors can move from reading to responding without an extra click.
It simplifies updates. When a form is managed through an external form builder, changes can often appear automatically in the embedded version.
It centralizes responses. Submissions can be collected in the form platform and, where supported, connected to other tools through form integrations.
Embedding is not always the best choice, though. If the form is optional or appears far down a long page, a lightweight button linking to a hosted form may be more practical.
What Can Make an Embedded Form Slow?
Before choosing an embedding method, it helps to understand where performance problems usually begin.
Additional network requests: An embedded form may load resources from another server, including scripts, stylesheets, fonts, and images.
Large JavaScript files: Some form widgets require scripts that compete with other page resources for network and processing time.
Poor loading order: A form that loads immediately may compete with the main heading, images, and other content visitors need to see first.
Layout shifts: If the browser does not know how much space the form needs, content can move when the form appears.
Heavy form design: Large images, animations, unnecessary fields, and extra widgets can add complexity.
Multiple embeds: Every additional form may introduce more requests and scripts.
Slow third-party services: If the form provider responds slowly, the form may take longer to become usable even when your own website is fast.
These issues can affect the visitor experience and some aspects of Core Web Vitals, particularly loading performance and visual stability. However, an embedded form does not automatically damage your SEO. The actual impact depends on how it is implemented and how the page performs overall.
Four Ways to Embed a Form on Your Website
1. Use an iframe Form Embed
An iframe is a common option because it is relatively straightforward to implement. Your form provider supplies a snippet containing the form's URL and settings such as width and height.
For example:
<iframe
src="YOUR-FORM-URL"
width="100%"
height="600"
loading="lazy"
title="Contact form"
style="border: 0;">
</iframe>Replace YOUR-FORM-URL with the actual URL supplied by your form builder.
The width="100%" setting helps the iframe fit its container. The height should be appropriate for your form, while loading="lazy" allows the browser to delay loading the iframe until it approaches the visible area.
The title attribute gives screen reader users useful context about the embedded content.
Best for: Contact forms, enquiry forms, and straightforward website integrations.
Watch out for: A fixed height can leave part of a long form hidden or introduce an internal scrollbar. Check whether your provider supports automatic iframe resizing before publishing.
2. Use a JavaScript Embed
Some form builders provide a JavaScript snippet instead of an iframe. You add the script to your page, and it inserts the form into a specified location.
This approach may support more flexible resizing, styling, and interactive features. However, it also introduces JavaScript that your page must download and execute.
If the provider's instructions allow it, use asynchronous or deferred script loading where appropriate. Do not add these attributes blindly to a snippet that depends on a particular loading sequence.
Best for: Forms that need automatic resizing or provider-specific interactive features.
Watch out for: Test the form after changing how its script loads. A script that executes in the wrong order may prevent the form from appearing or functioning correctly.
3. Use a Popup or Slide-In Form
A popup form appears after a visitor clicks a button or meets a defined condition. A slide-in form works similarly but enters from the side or bottom of the screen.
This can be useful for newsletter subscriptions, feedback requests, and secondary calls to action. Depending on how the feature is implemented, the form's resources may load only when needed.
Avoid showing popups immediately if they interrupt the visitor before they understand the page. Also test keyboard navigation, mobile usability, and the ability to close the popup easily.
Best for: Secondary actions that should not dominate the page.
4. Use a Button That Opens a Hosted Form
A button or text link can send visitors to a form hosted by your provider. It is technically different from embedding, but it is worth considering when performance and simplicity matter most.
For example, a button labeled “Request a Quote” can open a dedicated enquiry form. Your website does not need to display the entire form within the original page.
Best for: Long forms, application processes, or pages where an embedded form is unnecessary.
How to Embed a Form in WordPress
If you want to embed a form in WordPress, you can usually do it without installing another plugin.
Create your form. Use your chosen form builder to add the required fields, configure submission settings, and test the form.
Copy the embed code. Open the sharing or publishing options and select the iframe or JavaScript embed method.
Open the WordPress page. Navigate to the page or post where the form should appear.
Add a Custom HTML block. In the WordPress block editor, insert a Custom HTML block at the desired location.
Paste the code. Add the form embed code provided by your form builder.
Preview the page. Check the form's width, height, spacing, and behavior on desktop and mobile.
Submit a test response. Confirm that the form works and that the response reaches the correct destination.
If you use a page builder, look for an HTML, code, or embed widget. Some form plugins offer shortcodes, which can be convenient, but installing an additional plugin solely to embed a form may be unnecessary.
If WordPress removes or blocks the code, check your user permissions, security settings, and the plugin or theme documentation before changing site-wide settings.
How to Embed a Form on Wix, Squarespace, Webflow, or Shopify
The process is similar across most website platforms, although the names of the controls differ.
Wix: Add an HTML or embed element, then insert the code using the available embed settings.
Squarespace: Use a supported code block or embed option, depending on your page and site configuration.
Webflow: Add an Embed element and paste the supported code.
Shopify: Use an appropriate custom section or theme-supported HTML/Liquid area. Avoid editing theme files unnecessarily if a safer supported option is available.
Custom-coded websites: Place the snippet inside the relevant page component or HTML template, following your site's existing development conventions.
Always use the method supported by your platform and form provider. Some website builders restrict scripts on certain plans or in particular page areas, so an iframe may be the simpler alternative.
Seven Ways to Keep an Embedded Form Fast
1. Lazy-Load Forms That Appear Below the Fold
If a form sits near the bottom of a long page, it usually does not need to load before the visitor can see the content at the top.
For an iframe, the loading="lazy" attribute can help the browser delay loading. However, do not lazy-load the main form if visitors need it immediately, such as the primary registration form on a dedicated event page.
2. Reserve Enough Space for the Form
A page can jump when a form appears if its container has no defined dimensions. This is known as a layout shift.
Set a reasonable height or reserve space through your page layout. If the form changes size as visitors answer questions, check whether your provider supports automatic resizing.
Avoid choosing an arbitrary height that cuts off the submit button. Test the longest likely form path, not just the first screen.
3. Keep the Form Focused
Every additional question creates another decision for the visitor. Long forms may also require more rendering and interaction, depending on their design.
Ask only for information you genuinely need at that stage. For example, a contact form may require a name, email address, and message—not a full company profile.
For longer processes, consider breaking the form into manageable steps. This guide to multi-step forms versus single-page forms explains when each structure makes sense.
4. Avoid Unnecessary Scripts and Widgets
Do not add several form plugins or tracking scripts that perform the same task. Review the embed code and remove only resources you understand and know are unnecessary.
If your form provider manages its own scripts, follow its implementation instructions rather than editing the snippet without testing.
5. Make the Form Responsive
Use a width that fits the available container and check the form at common mobile screen sizes. Look for clipped labels, horizontal scrolling, buttons that are difficult to tap, and fields that extend beyond the screen.
A form can load quickly and still provide a poor experience if visitors cannot complete it comfortably on a phone.
6. Test Page Speed Before and After
Run the page through Google PageSpeed Insights or Lighthouse before embedding the form and again after publishing it. Compare the results instead of assuming the form is responsible for every performance change.
Check loading performance, layout stability, and any new script or network activity. Test on a representative mobile connection as well as a desktop browser.
7. Put the Form Where It Serves a Clear Purpose
The primary form on a lead-generation landing page should be easy to find. A secondary feedback form can sit lower on the page and load later.
The goal is not to hide every form from the initial page load. It is to load the right resources at the right time without making the main action harder to complete.
For additional ideas, see these ways to increase form completion rates.
How to Troubleshoot Common Embedding Problems
The form does not appear. Check that the URL and embed code are correct, the provider is available, and the website platform permits the selected embed method. Open the browser console if you are comfortable checking for errors.
The form is cut off. Increase the iframe height or check whether the provider supports automatic resizing. Test conditional paths that reveal additional questions.
The page shifts when the form loads. Reserve enough space in advance and review the form's loading behavior. Check whether delayed fonts, images, or other page elements are also contributing.
The form looks wrong on mobile. Review the container width, field spacing, font size, and button placement. Test on a real device when possible.
Responses are missing. Submit a test entry and inspect the form provider's response dashboard, notifications, and integrations. Do not assume that a visible confirmation message means the response reached every connected destination.
The page becomes slower after embedding. Compare the before-and-after speed reports, identify newly introduced scripts and requests, and test a simpler embed method if necessary.
Real-World Examples: Choosing the Right Embed Method
A small business contact page: A design studio embeds a short contact form using an iframe. It reserves enough space, uses a responsive width, and tests whether enquiries reach the right inbox. The result is a convenient way for prospective clients to get in touch without leaving the website.
A webinar landing page: A marketing team places a compact registration form near the top of the page. Because registration is the page's main goal, the form loads promptly instead of being delayed unnecessarily. The team checks mobile performance before sending advertising traffic.
A resource article: A software company adds a feedback form near the end of a detailed guide. Since the form is secondary, lazy loading can reduce unnecessary work during the initial page load. The team keeps the article's important explanatory content outside the embedded form.
A multi-step application: A business uses a hosted form link for a lengthy application rather than squeezing every question into a small iframe. Visitors can complete the process on a dedicated page, while the main website remains simpler.
These examples illustrate an important principle: the best embedding method depends on the action visitors need to take, not simply on which code option is available.
Choosing a Form Builder for Website Embedding
When comparing a website form builder, look beyond the number of templates or the appearance of its editor. Check whether it provides clear embed instructions, responsive forms, reliable submission handling, and a way to test the finished experience.
You may also want conditional logic to show relevant questions, integrations to send responses to other tools, and analytics to understand how visitors interact with forms. For example, conditional logic in forms can help keep a form relevant by showing follow-up questions only when they apply.
Review the provider's security and privacy documentation before collecting sensitive information. Confirm that its data-handling practices fit your organization's requirements.
If you prefer a visual workflow rather than building every form manually, Ovoform's form-building features provide a starting point for creating forms and sharing them with respondents. Choose a tool based on your actual needs, then test its embed method on a real page before rolling it out across your site.
Final Thoughts
Embedding a form is a practical way to collect enquiries, registrations, and feedback without sending visitors away from the page they are using. It does not have to make your website slower.
Choose an iframe, script, popup, or hosted form link based on the task. Keep the form focused, reserve space for it, avoid unnecessary scripts, and test the experience on mobile. Most importantly, measure page performance before and after making changes.
Start with one form on one page. Confirm that it loads correctly, works for visitors, and delivers responses where they belong. Once the setup performs well, you can reuse the same approach across the rest of your website.
