Note able to submit the custom html form data properly to the gsheet and file to gdrive

This is html file code.

        <div class="mb-4">
<label for="email" class="text-primary font-semibold">Email *</label>
<input type="email" class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:border-primary"
id="email" name="email" required>
</div>
<div class="mb-4">
<label for="name" class="text-primary font-semibold">Name *</label>
<input type="text" class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:border-primary"
id="name" name="name" required>
</div>
<div class="mb-4">
<label for="zip-file" class="text-primary font-semibold">Please upload your zip file (.stl format only) which you
want to print.</label>
<input type="file" class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:border-primary"
id="zip-file" name="zip-file" accept=".zip" required>
</div>
<div class="mb-4">
<label for="student-id" class="text-primary font-semibold">If you are a student, please enter your valid ID card
to get an additional student discount rate from us.</label>
<input type="file" class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:border-primary"
id="student-id" name="student-id">
</div>
<button type="submit" class="bg-primary text-white py-2 px-4 rounded-full hover:bg-blue-700" id="submit-button">Submit</button>
</form>
<script>
// Replace 'your_script_id_here' with your actual Google Apps Script Web App URL
let url = "https://script.google.com/macros/s/your_script_id_here/exec";
let form = document.getElementById("customer-form");
let zipFileInput = document.getElementById("zip-file");
let imageFileInput = document.getElementById("student-id");
form.addEventListener('submit', (e) => {
e.preventDefault(); // Prevent the default form submission
// Create a new FormData object
let formData = new FormData(form);
// Add the file uploads to the FormData
handleFileUpload(zipFileInput, formData);
handleFileUpload(imageFileInput, formData);
// Send the POST request using fetch
fetch(url, {
method: "POST",
body: formData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
});
function handleFileUpload(fileInput, formData) {
let file = fileInput.files[0];
if (!file) return;
let fr = new FileReader();
fr.addEventListener('loadend', () => {
let res = fr.result;
let spt = res.split("base64,")[1];
let obj = {
base64: spt,
type: file.type,
name: file.name
};
formData.append(fileInput.name, file);
formData.append('file-info', JSON.stringify(obj));
});
fr.readAsDataURL(file);
}
</script>

The Google sheets Appscript code that i used

  var jsonData = JSON.parse(e.postData.contents); // Parse the JSON data from the request
var spreadsheet = SpreadsheetApp.openById('1X57VuMPPN2mAIvbdbNCSCUdmfnQptor8E7i4tSmkjZ4');
var subSheetName = 'Cx input'; // Replace with the name of your sub sheet
var subSheet = spreadsheet.getSheetByName(subSheetName);
if (!subSheet) {
subSheet = spreadsheet.insertSheet(subSheetName);
}
var rowData = [];
rowData.push(jsonData.email);
rowData.push(jsonData.name);
// Upload .stl or .zip file to Google Drive
var folderId = '1iIxxTrYtwmlQPXn3qaAADFT-tUEVMZsT'; // Replace with your Google Drive folder ID
var fileBlob = Utilities.newBlob(jsonData['zip-file'], jsonData['zip-file'].type, jsonData['zip-file'].name); // Retrieve the file content from the JSON data and convert to Blob
var folder = DriveApp.getFolderById(folderId); // Get the folder by ID
var file = folder.createFile(fileBlob); // Create the file in the folder
var fileUrl = file.getUrl(); // Get the URL of the uploaded file
rowData.push(fileUrl); // Store the file URL in the spreadsheet
// Upload image file to Google Drive
var imageBlob = Utilities.newBlob(jsonData['student-id'], jsonData['student-id'].type, jsonData['student-id'].name); // Retrieve the image content from the JSON data and convert to Blob
file = folder.createFile(imageBlob); // Create the file in the folder
fileUrl = file.getUrl(); // Get the URL of the uploaded image
rowData.push(fileUrl); // Store the image URL in the spreadsheet
subSheet.appendRow(rowData);
return ContentService.createTextOutput('Form submitted successfully');
}

The code is not being submitting properyly.
Console is giving this error.
Access to fetch at 'https://script.google.com/macros/s/your_script_id_here/exec' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Although I have doubled checked the permission, is to anyone. Still not working.

I want the form to successfully transfer the data to the google sheets and successfully upload the file to the drive.

I think this is actually not a CORS issue. I just tested out your code and as is, I do see the CORS issue you brought up. If I comment out all the code in your doPost except for the final return statement (return ContentService.createTextOutput('Form submitted successfully');), the fetch succeeds and I see Form submitted successfully logging to the console. In addition to seeing a CORS issue when there is a CORS problem, you will also see a CORS issue if there is some fatal error on the google script side.

In this case, I haven't tested all your google script code, but I think it's failing right away on the first line var jsonData = JSON.parse(e.postData.contents);. If you do the fetch as you currently are:

.fetch(url, {method: "POST", body: formData})

Then I believe the default contentType is url-encoded and so the data is not stored in e.postData.contents as the documentation suggests. The data can be accessed via e.parameter though. Most likely because of this you're getting into a trying to access a property (contents) of undefined situation, which then results in the CORS issue.

You could just grab the data from e.parameter, but I doubt that that would capture the file data you want. If you want to get the data properly within e.postData, you probably need to modify your fetch to something like this (per this answer):

fetch(URL, {
redirect: "follow",
method: "POST",
body: JSON.stringify(DATA),
headers: {
"Content-Type": "text/plain;charset=utf-8",
},
})

Although again you may need to modify this given you wanting to work with file data. It's possible that there are other errors in your google script, so I would double check that, but I think the ultimate culprit is what I mentioned above.