<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
;
font-family: Arial, sans-serif;
padding: 20px;
}
label {
font-weight: bold;
text-transform: uppercase;
}
input[type="text"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 2px outset #FF0000;
border-radius: 5px;
box-sizing: border-box;
}
input[type="button"] {
background-color: #ff1900;
color: white;
padding: 10px 100px;
border: 8px bold;
border-radius: 8px;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #8fce00;
}
</style>
</head>
<body>
<form id="itemForm">
<label for="sku">SKU:</label><br>
<input type="text" id="sku" name="sku"><br>
<label for="color">Color:</label><br>
<input type="text" id="color" name="color"><br>
<label for="size">Size:</label><br>
<input type="text" id="size" name="size"><br>
<label for="description">Description:</label><br>
<input type="text" id="description" name="description"><br><br>
<input type="button" value="Submit" onclick="submitForm()"><br><br>
<span class="cancel" onclick="google.script.host.close()">Cancel</span>
</form>
<script>
function submitForm() {
var form = document.getElementById('itemForm');
var formData = {
'sku': form.sku.value,
'color': form.color.value,
'size': form.size.value,
'description': form.description.value
};
google.script.run.processForm(formData);
inputs.forEach(input => input.value = '');
}
</script>
</body>
</html>