EZ File Drop logo
Menu

Embed a form on your website

An embedded upload form sits on a page of your own website, so people upload without ever leaving your site. It is the same form as the one on your share link, with the same fields, the same upload destination, and the same submissions. Embedding is available on the Business and Premium plans.

The form has to be published before an embedded copy will work. See Form statuses.

Copy the embed code

  1. On the Upload Forms page, open your form.
  2. Click the Share tab.
  3. Scroll to Embed Code.
  4. Set the three switches, covered below.
  5. Click Copy Embed Code. The button reads Copied for a moment afterward.
The EZ File Drop Embed Code section showing the logo, header, and description switches with the copy and preview buttons.

The code you copy is a single snippet with two parts: an iframe that holds your form, and a short script that resizes the iframe as the form's height changes. Paste it whole. Without the script the form sits in a fixed box 600 pixels tall, which is shorter than most forms need.

On the Starter plan the Embed Code section is dimmed behind a padlock, above a line reading "Embed codes are available in Business and Premium plans."

Choose what appears in the embedded form

Three switches sit above Copy Embed Code, and all three start on.

  • Logo shows or hides the form's logo.
  • Header shows or hides the form's page header.
  • Description shows or hides the form's page text.

Set them before you copy. They are written into the code at the moment you copy it rather than saved on the form, and they go back to on the next time you open the tab. Changing them later means copying the code again and replacing what you pasted.

Turning all three off leaves the fields, the File Upload area, and the submit button on their own. That is usually what you want when the page around the form already carries your logo and explains what to send. What is left still carries the form's colors, font, and styling. See Style your form.

Preview before you paste

Preview opens an Embed Preview window showing the form as your switches have it, so you can check the result before touching your site.

It previews the display switches only. The password screen and the CAPTCHA are both skipped in it, so a password-protected form shows its fields here and still asks for the password once it is embedded for real.

The EZ File Drop Embed Preview window showing an upload form with its logo and header switched off.

Paste the code into your page

Paste it into whatever your site builder calls a code element, at the spot where the form should appear, then save and publish that page. A normal text block will show the code as text instead of running it.

  • On WordPress, use a Custom HTML block in the block editor.
  • On Webflow, use an Embed element.
  • On Squarespace, use a Code block.
  • On Wix, use an Embed HTML element, added from Embed Code in the editor's element menu.

Anything else that accepts raw HTML works the same way. Some builders put your code inside a frame of their own with a height you set, and a form that is cut off in one of those needs that frame made taller.

WordPress has one catch. The Custom HTML block works on self-hosted WordPress and on WordPress.com plans that include hosting features, which starts at their Business tier. WordPress.com's Free, Personal, and Premium plans strip iframe and script tags out, so an embedded form will not appear on any of them.

How the embedded form sizes itself

The form measures its own height and passes it to the page around it, and the script you pasted resizes the iframe to match. That is what stops the embedded form scrolling inside its own box as fields appear and files are added.

The iframe starts 600 pixels tall and no more than 600 pixels wide. Both numbers are plain HTML in the code you pasted, so you can change them. Widening it is safe: edit or remove max-width:600px in the iframe's style. The height is set by the script whenever the form's height changes, so editing the starting height only affects the moment before the first measurement lands.

If the script never reaches the page, the iframe stays at 600 pixels and the form is cut off rather than scrolling, because an embedded form turns off its own scrollbar. A form that looks cut off usually means the script did not survive the paste, or something on your page is blocking it.

What changes in an embedded form, and what does not

An embedded form behaves almost exactly like the form on its own share link. Uploads are delivered to the same upload destination, submissions land in the same place, notifications send the same way, and file organization works the same. Four things are worth spelling out.

  • Insights. An embedded form records visits and submissions like any other, and reports the page it is embedded on as its traffic source. See Form insights.
  • Password protection. A password-protected form asks for the password inside the embedded frame, before the fields appear.
  • Redirect after submission. We recommend leaving this off on an embedded form. A redirect either takes over the whole page, sending people away from the site you just embedded the form on, or, if your site stops an embedded frame changing the page around it, loads your destination inside the frame, where it will look cramped. Neither ending is as good as the success screen, which you can word and style yourself. See Redirect uploaders after submission.
  • Pre-filled fields. A link with query parameters does not pre-fill an embedded form. Parameters on your own page's address are not passed through to the form sitting inside it. Adding them to the iframe's src address in the embed code does work, but that value is then the same for everyone who opens the page, so use the form's share link whenever you need to pre-fill something different per person. See Pre-fill forms with URL query parameters.

Behavior notes

  • Embedding is available on the Business and Premium plans. On the Starter plan the Embed Code section is locked and no code can be copied.
  • A Draft form embedded on your page shows the message "This form is not accepting submissions yet." inside the frame instead of the form.
  • The three switches live in the code you paste rather than on the form, so changing them is not a form change and there is nothing to publish afterward.
  • Changing the form itself is a form change like any other. A Live form keeps serving its last published version to every embedded copy until you click Publish changes.
  • Changing a form's URL breaks its embed code along with its link. Copy the code again and replace what you pasted. See Share your form.
  • The same form can be embedded on several pages and shared by link at the same time. It is one form, one set of submissions, one upload destination.