Web3Forms
Search…
File Attachments
Heads Up! This is a PRO feature. You must have an active membership to use this feature.
<input type="file" name="attachment" />
You will need to add enctype="multipart/form-data" to the Form Element to make the attachment work.
<form action="https://api.web3forms.com/submit" enctype="multipart/form-data" method="POST">
...
<input type="file" name="attachment" />
...
</form>
If you are using Javascript / Ajax to submit the form, make sure you set the Headers accordingly. Setting wrong headers will throw an error.

File upload with Javascript

Here's an example code with Javascript

<form id="myForm" method="POST">
...
<input type="file" id="attachment" name="attachment" />
...
<button type="submit">Submit Form</button>
</form>
const form = document.getElementById("myForm");
form.addEventListener("submit", function (e) {
e.preventDefault();
const formData = new FormData(form);
formData.append("access_key", "YOUR_ACCESS_KEY_HERE");
formData.append("subject", "New Submission from Web3Forms");
const file = document.getElementById("attachment");
const filesize = file.files[0].size / 1024;
if (filesize > 1000) {
alert("Please upload file less than 1 MB");
return;
}
// Don't add `headers` or `content-type` in this fetch call
// Since it contains attachments, the browser auto-adds them.
fetch("https://api.web3forms.com/submit", {
method: "POST",
body: formData
})
.then(async (response) => {
let json = await response.json();
if (response.status == 200) {
console.log(json.message);
} else {
console.log(response);
}
})
.catch((error) => {
console.log(error);
})
.then(function () {
form.reset();
});
});
Copy link
On this page
File upload with Javascript