Webflow integration

Webflow allows designers to build production-ready, responsive websites without any coding knowledge required. It allows designers to accomplish most aspects of web development and website distribution through a visual editor that provides the pixel-for-pixel design precision.

With a little help from Uploadcare you can add file upload button to any Webflow form.

Step 1 - Create Uploadcare user account

If you do not have one yet you will need to start by creating a user account on the uploadcare signup page. Note you will also need to verify your email address after signing up.

This is the screen you will create your user account from.

Step 1 - Create account or login

Step 2 - Login to the dashboard and create a project

Once you login you will be taken to the Dashboard where you can edit or create new Uploadcare projects.

  1. To get started click the “New project” box.
  2. Now you can give the project a name e.g.: “WebflowProject”

Note: You can use only alphanumeric characters or underscores for the project name - No spaces.

Step 2 - Create a project

You will be redirected to the new projects settings page.

Step 3 - Create the widget for your website

In project settings see the menu on the left.

Click on widgets to open the widget settings.

Step 3 - Widgets - opens setting page

Select the upload sources the user can upload from when uploading files.

Set any file restrictions you want.

Configure what to do after the file is uploaded.

Step 3 - Widget Settings Page

Step 4 - Copy the Javascript for the widget

Click in the box with the script to select it. Now copy (ctrl+c) the script to your clipboard.

Step 4 - Copy javascript to use in Webflow

Step 5 - Add Scripts to your Webflow site

Open your Webflow dashboard and click on site settings.

Step 5.1 - Open Webflow site settings

Click on the custom scripts tab and paste the script into the scripts box and Save.

Step 5.2 - Paste script and save

If you want to change the appearance of the widget, you can add your custom CSS code here as well.

Step 6 - Add an input field to your Webflow site

Open your website in the Webflow Designer and add a form block to the page where you plan to add the upload button.

Step 6 - Add a form

If you already have a form then open it in the designer and move to the next step.

Step 7 - Bind Uploadcare to a form input

Add a custom attribute to a new or existing text input which outputs as role=“uploadcare-uploader” to make Uploadcare work in your form.

Step 7.1 - Add custom role attribute

Hide the input by giving it a class like hide. Then set it to display none in the Webflow editor.

Step 7.2 - Hide the input

That’s it! Feel free to ask any questions on the Webflow Code Help forum.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.