File Uploads

Uploadcare

To avail of Uploadcare's free plan, sign up for a free account at Upload Care (opens in a new tab). This plan allows for up to 3000 uploads every month. If you need to upload non-image files, you can easily add a payment method to your Uploadcare account without upgrading from the free plan.

Steps

Start by creating a basic form using Formzillion.

<form action="https://app.formzillion.com/f/your-form-id">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Name" required="" />
  <button type="submit">Send</button>
</form>

To incorporate the Uploadcare widget into your HTML file, it is recommended to place it within the head section.

<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>

To incorporate an upload feature, create a hidden input element and designate its role as "uploadcare-uploader". Then, include your Uploadcare public key as the value for the "data-public-key" attribute.

<label for="image">Name</label>
<input
  type="hidden"
  id="image"
  name="image"
  role="uploadcare-uploader"
  data-public-key="your-public-uploadcare-id"
/>

Example

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Formzillion with Uploadcare</title>
    <script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
  </head>
  <body>
    <form action="https://app.formzillion.com/f/your-form-id" method="POST">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Name" required="" />
      <label for="image">Image</label>
      <input
        type="hidden"
        id="image"
        name="image"
        role="uploadcare-uploader"
        data-public-key="YOUR_PUBLIC_KEY"
      />
      <button type="submit">Send</button>
    </form>
  </body>
</html>

ℹ️

Info: File Uploads is available on Standard, Premium and Agency plans. (opens in a new tab)

HTML Native Form Fetch