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 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.
- To get started click the “New project” box.
- 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.
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.
- 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.
Click in the box with the script to select it. Now copy (ctrl+c) the script to your clipboard.
Step 5 - Add Scripts to your Webflow site
- Open your Webflow dashboard and click on site settings.
- Click on the custom scripts tab and paste the script into the scripts box and Save.
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.
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.
- Hide the input by giving it a class like hide. Then set it to display none in the Webflow editor.
That’s it! Feel free to ask any questions on the Webflow Code Help forum.