JSFiddle - React, Tailwind, and code Playground
HTML
<form id="myForm">
<div class="container">
<div class="header">
<h1>Order Form</h1>
</div>
<div class="label-container">
<div class="label">
<br>
<p><b>Customer Name</b></p>
<p><b>Due Date</b></p>
<p><b>Phone #</b></p>
</div>
<div class="inputBox">
<br>
<p><input type="text" name="myName"></p>
<p><input type="text"></p>
<p><input type="text"></p><br>
</div>
<div class="label2">
<br>
<p><b>Contact</b></p>
<p><b>E-mail</b></p>
<p><b>PO#</b></p>
</div>
<div class="inputBox2">
<br>
<p><input type="text"></p>
<p><input type="text"></p>
<p><input type="text"></p><br>
</div>
</div>
<div class="contentBackground">
<div class="uploadWrapper">
<div class="fileUpload">
<div class="uploadFile">
<p>Upload File: <span style="color:black"><input type="file" name="myFile" /></span></p>
</div>
<div class="content">
<p>Width(Inch) <input type="text" style="width: 100px"> Height(Inch) <input type="text" style="width: 100px"> Quantity <input type="text" style="width: 100px"></p>
</div>
</div>
</div>
<div class="dropDown">
<p>Material <select style="max-width: 10%;">
<option value="Paper">Paper</option>
<option value="Vinyl Banner">Vinyl Banner</option>
<option value="Adhesive Vinyl">Adhesive Vinyl</option>
<option value="Polygloss">Polygloss</option>
<option value="Translucent...
CSS
<style type="text/css">
* {
margin: 0
}
.container {
width: 1250px
}
.header {
background-color: #8000FF;
margin:auto;
width: 50%;
border:3px solid #41087B;
padding: 10px;
}
.header img {
float:left;
padding: 5px;
}
.header h1 {
color: white;
line-height: 80px;
text-align:center
}
.label {
float: left;
padding: 5px;
color: red;
}
.label-container {
width: 570px;
margin: 0 auto;
text-align:center;
margin: auto
}
.label p {
padding: 2px;
}
.inputBox {
float:left;
text-align: center;
}
.inputBox p {
text-align: center;
padding: 1px
}
.label2 {
float:left;
padding:5px;
color: red
}
.label2 p {
padding:2px
}
.inputBox2 {
float:left;
}
.inputBox2 p {
padding: 1px
}
.contentBackground {
background-color:#D8D8D8;
clear:left;
width: 60%;
margin: auto;
height: 200px
display: block;
}
.uploadFile p {
text-align: center;
padding: 20px;
color:red
}
.content p {
text-align: center;
color:red;
padding: 7px
}
.dropDown p {
text-align: center;
padding: 40px;
margin-left: 8px;
height:
}
.moreFiles {
text-align:center
}
.textBox {
text-align: center
}
.textBox p {
text-align:center;
padding: 5px
}
.button {
text-align: center
}
</style>
JavaScript
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('HTML')
}
function uploadFiles(form) {
try {
var dropbox = "Customer Files";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + form.myName);
return "File uploaded successfully " + file.getUrl();
} catch (error) {
return error.toString();
}
}