How to create a file upload form

by Mertcan Yücel

While handling your forms, adding a file upload capability is one of the most useful use-cases that you might need. Your requirement is simple; you have created your HTML form and want to accept file attachments with the information submitted to your form.  For example, it could be a job application form that you want to collect applicant resumes along with their photos or just a simple contact form where you accept any file attachment based on your need.

Most of the form builders such as Google Forms don't have an easy setup for form uploads. But with Getform, it's really easy to handle file uploads on your HTML forms. In this post, we will walk you through on how to set up a single and multiple file upload support to your HTML forms.

How to create a file upload form in HTML

Let’s start setting up our file upload form.

1- Create a Getform account

If you haven’t created one already, sign up for Getform. It is so easy to get started and free to register. You don’t need to provide any credit card info to create an account.

2- Create a new form on Getform

After you log in to your Getform account, click to “+” button on your dashboard to create a new form then name it as e.g. “File Upload Form” as follows:

With that form created, our unique form endpoint  is now ready to be inserted to our HTML.

3- Create your HTML for your file upload form

You can use the boilerplate code provided on Getform to create your HTML form with file upload capability. It is a basic contact form with name, email, message and a file field. Here is HTML Form Upload Example:

<form action="https://getform.io/f/{your-form-endpoint-goes-here}" method="POST" enctype="multipart/form-data">

    <input type="text" name="name" placeholder="Your Name *" required="required">
    <input type="email" name="email" placeholder="Your Email *" required="required">
    <input type="email" name="email" placeholder="Your Phone *" required="required">
    <input type="file" name="photo" required="required">
    <button type="submit">Send</button>

</form>

HTML File Upload Example

Extra parts we are adding to our form are "enctype="multipart/form-data" and "<input type="file" name="photo" required>than the usual form created on Getform. These additions will ensure the files are submitted along with the submissions sent to your forms.

4- Paste the endpoint URL that you obtained in step 2 to the action field of your HTML form tag.

Change the action part of your <form> tag in your Hugo template, to use the form endpoint URL you copied in step 2.

https://getform.io/{YOUR_UNIQUE_FORM_ENDPOINT}

The part of the endpoint URL will appear for your form is highlighted in bold. After we add our unique endpoint and with a little bit of styling, here is how our form looks like:

5- Send a new form submission with file attachment

Let's fill out the form fields, upload a photo and send a new submission to our form:

That's it!  The photo we have added has been correctly submitted with our submission.

6- Upload multiple files to your form

What if you need to send more than one file with your submission? You can add more than one input type="file" to your HTML to accept multiple file uploads to your form. Here is the HTML syntax to do that:

<form action="https://getform.io/f/{your-form-endpoint-goes-here}" method="POST" enctype="multipart/form-data">

    <input type="text" name="name" placeholder="Your Name *" required="required">
    <input type="email" name="email" placeholder="Your Email *" required="required">
    <input type="email" name="email" placeholder="Your Phone *" required="required">
    <input type="file" name="photo1" required="required">
    <input type="file" name="photo2" required="required">
    <button type="submit">Send</button>

</form>

Important: While using more than input field for your files, don't forget to give a different name to each file input field

7.Bonus: Setup a HTML5 multiple file upload

In addition to what we have shown in the 6th step, there is another way to upload multiple files to your forms with a single input. multiple (another usage is multiple="multiple") keyword that has been introduced with HTML5 helps us to upload more than one file from the single field. Here is the HTML syntax to do that:

<form action="https://getform.io/f/{your-form-endpoint-goes-here}" method="POST" enctype="multipart/form-data">

    <input type="text" name="name" placeholder="Your Name *" required="required">
    <input type="email" name="email" placeholder="Your Email *" required="required">
    <input type="email" name="email" placeholder="Your Phone *" required="required">
    <input type="files[]" name="photo" required="required" multiple>
    <button type="submit">Send</button>

</form>

Please note that on Getform, you can accept up to 25MB and up to 5 files per submission.

You can refer to our official documentation for more details: https://getform.io/docs/collecting-submissions/uploading-files

We hope you enjoyed this post! Let us know if you need further assistance. We are always here to help.

If you have any further queries, reach us out at info@getform.io.

Mertcan from Getform
Easy form endpoints for your forms.