Hostgator How to Accept File Uploads From Contact Form

While treatment your forms, adding a file upload adequacy is one of the most useful use-cases that you might need. Your requirement is elementary; you take created your HTML form and desire to accept file attachments with the data submitted to your class.  For example, it could be a job awarding form that you desire to collect applicant resumes along with their photos or just a simple contact form where yous accept whatsoever file attachment based on your need.

Near of the form builders such as Google Forms don't accept an like shooting fish in a barrel setup for form uploads. But with Getform, it'southward really easy to handle file uploads on your HTML forms. In this post, we will walk yous through on how to fix upwardly a unmarried and multiple file upload support to your HTML forms.

How to create a file upload form in HTML

Let's offset setting up our file upload form.

1- Create a Getform account

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

two- Create a new course on Getform

Afterwards you log in to your Getform account, click to "+" button on your dashboard to create a new form then name it equally due east.yard. "File Upload Form" equally follows:

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

three- Create your HTML for your file upload form

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

          <form activity="https://getform.io/f/{your-form-endpoint-goes-hither}" method="Post" enctype="multipart/form-information">      <input type="text" proper name="name" placeholder="Your Name *" required="required">     <input type="email" name="email" placeholder="Your Electronic mail *" required="required">     <input blazon="email" name="email" placeholder="Your Phone *" required="required">     <input blazon="file" name="photograph" required="required">     <button blazon="submit">Transport</button>  </class>                  

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 volition ensure the files are submitted along with the submissions sent to your forms.

4- Paste the endpoint URL that yous obtained in pace 2 to the action field of your HTML grade tag.

Alter the action office of your <class> tag in your Hugo template, to employ the course endpoint URL you copied in step 2.

https://getform.io/ {YOUR_UNIQUE_FORM_ENDPOINT}

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

v- Send a new form submission with file attachment

Allow's fill out the class fields, upload a photo and transport a new submission to our grade:

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 lot need to send more than one file with your submission? You tin add more than one input type="file" to your HTML to have multiple file uploads to your form. Here is the HTML syntax to do that:

          <form action="https://getform.io/f/{your-form-endpoint-goes-hither}" method="POST" enctype="multipart/form-data">      <input type="text" name="name" placeholder="Your Name *" required="required">     <input blazon="email" name="electronic mail" placeholder="Your Email *" required="required">     <input type="email" name="email" placeholder="Your Phone *" required="required">     <input type="file" proper noun="photo1" required="required">     <input type="file" proper name="photo2" required="required">     <push blazon="submit">Send</button>  </course>                  

Of import: While using more than input field for your files, don't forget to give a different proper noun to each file input field

7.Bonus: Setup a HTML5 multiple file upload

In addition to what nosotros have shown in the sixth footstep, in that location is another manner 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 one file from the single field. Here is the HTML syntax to do that:

          <class activity="https://getform.io/f/{your-form-endpoint-goes-hither}" method="POST" enctype="multipart/form-data">      <input blazon="text" name="proper name" placeholder="Your Name *" required="required">     <input blazon="email" name="e-mail" placeholder="Your Email *" required="required">     <input type="email" proper noun="email" placeholder="Your Telephone *" required="required">     <input type="files[]" name="photo" required="required" multiple>     <button blazon="submit">Send</push button>  </form>                  

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

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

We hope you enjoyed this post! Permit u.s.a. know if you demand further assistance. Nosotros are always here to help.

If y'all have whatsoever further queries, reach us out at info@getform.io.

---

Mertcan from Getform
Easy course endpoints for your forms.

gatewoodtragivan.blogspot.com

Source: https://blog.getform.io/how-to-create-a-file-upload-form/

Share this post