How to Add File Upload Form in Blogger and Other Websites
Hi to all, in this article I am going to tell you all about how to add file upload form in blogger or WordPress website easily in just few minutes.
Mainly file upload form allows your website readers to easily and securely upload the files to your blog, whether they are submitting a guest post, sharing a photo, or sending a document.
For this we need to use a free third party Email Service called "Formsubmit", so follow the below provided steps and add this feature in your blogger and WordPress website easily.
This example provides a basic structure for a mobile-friendly contact form with a file upload button, form validation, and a clean user interface. Keep in mind that the server-side processing (not provided in this example) is crucial for handling form submissions and file uploads securely.
Read this article completely to get clear understanding about adding file upload form in blogger website easily without any error.
How to Create File Upload Form with Advance Features
The below are the detailed steps provided to create a simple mobile friendly file upload contact form in blogger website by using HTML, CSS and JavaScript.
- Make a folder. You can create the aforementioned files inside of this folder and give it any name you choose.
- Make a file named index.html. The file extension must be .html.
- Make a file named style.css. its extension must be included in the file name as .CSS.
- Make a file named script.js. The file extension must be .js.
To begin, add the following HTML codes to your index.html page so that the upload form has a basic layout.
Adding HTML Code:
First of all open index.html file
Copy below provided code and paste it inside index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Contact Form | Created by Tial Wizards</title>
</head>
<body>
<div class="container">
<form id="contactForm" onsubmit="submitForm(event)">
<h2>Contact Us</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<label for="file">Upload File:</label>
<input type="file" id="file" name="file">
<button type="submit">Submit</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Adding CSS Code:
First of all open style.css file
Copy below provided code and paste it inside style.css file
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
width: 80%;
max-width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 8px;
}
input,
textarea,
button,
select {
margin-bottom: 16px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007BFF;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Adding JavaScript Code:
First of all open script.js file
Copy below provided code and paste it inside script.js file
function submitForm(event) {
event.preventDefault();
// Basic form validation
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
if (!name || !email || !message) {
alert('Please fill in all required fields.');
return;
}
// You can add additional form validation here.
// Assuming you have a server-side script to handle form submission and file upload
const formData = new FormData(document.getElementById('contactForm'));
// You can add additional data to the FormData object if needed.
// Example: formData.append('additionalData', 'some value');
// Send the form data to the server using fetch or another AJAX method.
// Replace 'your-api-endpoint' with your actual server-side endpoint.
fetch('your-api-endpoint', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
alert('Form submitted successfully!');
})
.catch(error => {
console.error('Error:', error);
alert('Error submitting the form. Please try again later.');
});
}
How to Add the Code in Blogger Websites:
First of all, you need to create or open blogger empty page and open it in HTML view.
Now you need to copy below provided codes inside page HTML view and edit it according to your page layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form | Tial Wizards</title>
<style>
body{font-family:'Arial',sans-serif;margin:0;padding:0;display:flex;align-items:center;justify-content:center;height:100vh;background-color:#f4f4f4;}.container{width:80%;max-width:400px;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.1);}form{display:flex;flex-direction:column;}label{margin-bottom:8px;}input,textarea,button,select{margin-bottom:16px;padding:8px;border:1px solid #ccc;border-radius:4px;}button{background-color:#007BFF;color:#fff;cursor:pointer;}button:hover{background-color:#0056b3;}
</style>
</head>
<body>
<div class="container">
<form target="_blank" action="https://formsubmit.co/example@gmail.com" onsubmit="alert('You have successfullly submitted form') method="POST" enctype="multipart/form-data">
<h2>Contact Us</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<label for="file">Upload File:</label>
<input type="file" id="file" name="file" required>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
After adding the above provided code, you need to change the Email address at the starting with your own email address, where you will get notifications.
After adding the form, you must activate the form.
Now you have successfully added file upload form to your Blogger, WordPress and other website.
Demo
Below is the demo form, which will looks same as, if you add this code in your website and this form only works, when you add your working email address.
I hope that you all have understood about adding file upload form in blogger and WordPress website easily without any error or issue.
If you have any issues or queries related to code, then contact us through contact page or mail us.