This is a nice-looking file upload form that can be easily added to your website. Just copy the code, create a new page, and add it in.
You can have it as a standalone pop-up window, embed it in your page, or call it via a QueryString value.
Either way you do it, this is a great addition to any website.
This example does not upload a file. When you select a file, its name will appear in the [No file chosen] area.
Live Template Example - File Upload Form Template
[HTML - FileUpload.html]
CFFCS | CarrzSynEdit: | HTML (Hyper Text Markup Language) 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>File Upload Form</title>
<link href="FileUpload.css" rel="stylesheet" />
</head>
<body>
<div class="form-card">
  <form id="fontUploadForm">
    <!-- Artist ID Hidden Field -->
    <input type="hidden" name="ArticleID" value="101" />

    <div class="input-group">
      <label class="field-label">Filename</label>
      <span class="field-hint">File Name</span>
      <input class="styled-input" type="text" name="Fontname" placeholder="Give file a name" />
    </div>

    <div class="input-group">
      <label class="field-label">File Size</label>
      <span class="field-hint">Size of File (This can be done on the Backend as well)</span>
      <input class="styled-input" type="text" name="Fontsize" placeholder="e.g. 200mb will be 200000kb" />
    </div>

    <div class="input-group">
      <label class="field-label">File Credit</label>
      <span class="field-hint">Give Credit to Developer (or list as Unknown)</span>
      <input class="styled-input" type="text" name="FrontCredit" placeholder="Author name..." />
    </div>

    <div class="input-group">
      <label class="field-label">Upload Font File</label>
      <input id="filMyFile" type="file" class="file-input-custom" />
    </div>

    <button type="submit" class="submit-btn">Update Font Details</button>
  </form>
</div>
</body>
</html>

[CSS - FileUpload.css]
CFFCS | CarrzSynEdit: | CSS (Cascading Style Sheets) 
/* Card Container */
.form-card {
  max-width: 500px;
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  font-family: 'Segoe UI', system-ui, sans-serif;
  margin: 20px auto;
}

/* Grouping and Labels */
.input-group { margin-bottom: 20px; }

.field-label {
  display: block;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

.field-hint {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 8px;
}

/* Inputs */
.styled-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-sizing: border-box; /* Prevents overflow */
  transition: border-color 0.2s;
}

.styled-input:focus {
  outline: none;
  border-color: #6366f1;
  ring: 2px solid #e0e7ff;
}

/* Custom File Button */
.file-input-custom::file-selector-button {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 10px;
}

/* Submit Button */
.submit-btn {
  width: 100%;
  background: #6366f1;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.submit-btn:hover { background: #4f46e5; }