Simple contact form (with file upload)

This shows how to upload a file to FormBackend.

by formbackend

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css">
<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 accept-charset="UTF-8" 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>

CSS

body {
  margin: 3rem;
}