File Upload form In Blogger website

In this article, we’ll provide you with a step-by-step guide on how to add a file upload form to your Blogger blog.

A file upload form allows your readers to easily and securely upload files to your blog, whether they’re submitting a guest post, sharing a photo, or sending you a document.

For this, we need to use a Free third-party Email Service called “formsubmit“. So, follow the instruction as shown in the video to add the file upload form.

YouTube video

Create a New page or open an existing page in HTML View and Use the below code for adding the form.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
  <form target="_blank" action="https://formsubmit.co/[email protected]" method="POST" enctype="multipart/form-data">
    <div class="form-group">
      <div class="form-row">
        <div class="col">
          <input type="text" name="First-Name" class="form-control" placeholder="First Name" required>
        </div>
        <div class="col">
          <input type="Name" name="Last-Name" class="form-control" placeholder="Last Name" required>
        </div>
      </div>
    </div>


<div class="form-row"> 
      <div class="col">
          <input type="email" name="email" class="form-control" placeholder="Email Address" required>
    </div></div><br>  
      
    <div class="form-group">
      <div class="form-row">
    
        <div class="col">
        <input type="file" name="attachment">
        </div>
      </div>
    </div>
    
<label for="Message" ><b>Message *</b></label>
    <div class="form-group">
      <textarea placeholder="Message" class="form-control" name="message" rows="5" required></textarea>
    </div>
    <button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
  </form>
</div>

Here, You need to change the Email Address ([email protected]) at the beginning with your own email address where you want to receive the emails.

Once you add the Form, Make sure to activate the form as shown in the above video.

Now you have successfully Added a file upload form to your Blogger website. Feel free to ask your doubts if any in the comment section.

Learn How to create a plain Contact Form in Blogger By following this video.

FAQs

Yes, The file upload form above is fully responsive and you can use it on the Blogger website very easily.

Yes, You can use it in any other CMS platform including Wordpress.

Yes, you can modify the style of the form by using CSS code.

You will get all uploaded files through this form in your Email Inbox Which is added to the form code. Make sure to change the email address before using it in your website.

Leave a Reply

Your email address will not be published. Required fields are marked *