A Guide to Integrating Uploading Widget with Webflow Forms

Please note that this guide is not updated to support our latest File Uploader.

Webflow is a no-code website builder that lets you accomplish most aspects of web development and website distribution via a visual editor. It has a built-in uploader block that you can use on your pages. However, it has some limitations, such as uploading large files, uploading from multiple sources, and editing uploaded images.

Fortunately, you can embed an advanced Uploading Widget into your Webflow website. Using it is as easy as using the default Webflow File Upload element, but with almost no limits. With Uploadcare, you can upload files up to 5 TB and use more input sources, including Facebook, Instagram, Dropbox, etc. In this guide, we’ll provide step-by-step instructions on how to integrate it into your Webflow project.

Prerequisites

Here’s what you’ll need to follow the tutorial:

A paid Webflow account—some vital functions we will need are available only on paid plans.
An Uploadcare account (with API keys).

Step 1. Obtaining a Public API Key

An API key is a unique set of symbols identifying your Uploadcare project when calling it from third-party services like Webflow. We’re going to use our Public API key to let Webflow Form know which project to push files to.

Getting a Public API key is easy. You can copy it from API keys:

Now that we have all the necessary info, let’s continue to the integration itself.

Step 2. Add scripts with Uploadcare Uploading Widget

When logged in, open your Webflow Dashboard, then go to the Settings (three horizontal dots).

In the website settings, go to the Custom Code tab and paste the following script:

<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="Webflow"></script>html

Replace YOUR_PUBLIC_KEY with your public API key.

Note: As of December 2020, Webflow only allows using Custom Code on paid plans. See Webflow Pricing to review the available options.

If you want to change the way the file upload form will look, you can customize it and use custom CSS as well.

Step 3. Add a Webflow Form to your page

Open your website in the Webflow Designer and add a form block to the page where you want to add the upload button. To do this:

Click on Add Elements (+ sign).
Unfold the Forms dropdown.
Drag Form block onto the page.

If you already have a form, open it in the Designer and proceed to the next step.

Even if you want your visitor to upload a picture using a single button, we still need to add a form in Webflow because an input field (which we’re going to use in the next step) can only exist inside a form.

Step 4. Bind Uploadcare Uploading Widget to a Webflow form input

First, we need to add a text field to the form. Again, use the Add Elements button, but this time select Input instead of Form Block. Just like in the screenshot below:

Once the field has been added, it should remain selected. Like in the screenshot below, click on the gear icon in the element settings and then add role="uploadcare-uploader" as a custom attribute.

Then, go to the Style settings (the paintbrush icon on the top right) and hide the input field.

Step 5. Publish the page

To see the results, we need to publish the page. Click Publish and select the options you need. In this tutorial, we will be deploying to the default domain provided by Webflow.

Navigate to the page (a link icon will appear next to the domain). Let’s see the results:

Clicking this button opens the widget.

Forms are often used to upload pictures and documents. Let’s select one.

Conclusion

That’s it! Let us know if this guide was helpful, and feel free to ask any questions in the Uploadcare Community Area.