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://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

<!DOCTYPE html>
<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://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="ec75cecb2431ad84b8e3" />
 
      <button type="submit">Send</button>
    </form>
  </body>
</html>

HTML Native Form Fetch