Contact form with file uploads

The form in this example has a file field and accepts file uploads.

HTML

Here’s the HTML for the form

<h1 class="text-xl text-gray-800 font-semibold mb-2">
  Simple contact form (with file upload)
</h1>
<p class="mb-6 text-gray-600 w-2/3 leading-normal">
  This form uploads a file to FormBackend. Remember to set the <span class="bg-gray-200 px-1"> enctype="multipart/form-data"</span> attribute on the form-tag, if you don't the upload won't work. Notice how we're validating the allowed file types using the <span class="bg-gray-200 px=1">accept="image/*"</span> attribute to only accept images.
</p>

<form action="https://www.formbackend.com/f/8328ae24922e7415" method="POST" enctype="multipart/form-data">
  <div class="mb-3">
    <label for="name" class="font-bold uppercase text-gray-600 block tracking-wide text-sm mb-1">Name</label>
    <input type="text" id="name" name="name" class="bg-gray-300 rounded p-2 text-gray-600 focus:shadow-outline focus:outline-none" required>
  </div>

  <div class="mb-3">
    <label for="my_file" class="font-bold uppercase text-gray-600 block tracking-wide text-sm mb-1">Your file</label>
    <input type="file" name="my_file" id="my_file" accept="image/*">
  </div>

  <div class="mb-3">
    <button type="submit" class="bg-blue-700 text-white px-4 py-2 rounded">Submit</button>
  </div>
</form>

The above results in the following form

Accepting file uploads in a HTML form

Make sure you set enctype="multipart/form-data" on the form tag. Then you need to add a input with the type attribute set to file. You can then perform simple validation of the types of files you accept by adding a accept attribute. If you just want images, you can set the value to image/* which would accept all image types. All of this is just standard HTML form validation and isn’t specific to FormBackend.

When a file is submitted to us, we store it on our servers. You can chose to have it be sent with outgoing emails, or you can keep it in the FormBackend database and just view the files when you log in - up to you! :)