HTML Forms

A collection of standalone HTML forms. Each is a single self-contained .html file with no build step or dependencies. The Toner Request Table is an email template used in a Power Automate flow. The other two are web forms hosted in Azure Blob Storage.

File	Type	Purpose
Toner Request Table.html	Email template	Table of toner quantities, filled in by a flow and sent as the body of an email
Dependent(s) Registration Form.html	Web form (Azure Blob)	Employees register a spouse, children, and other dependents
Vendor Contact Form.html	Web form (Azure Blob)	Vendors submit or update their contacts and the functions each one covers

---

Toner Request Table

An HTML table meant to be used as an email body in a Power Automate flow. It is not interactive. This is the only form in the repo that uses Power Automate. The flow fills in the values and sends it.

• Layout: Printers are grouped by brand: Dell, HP LaserJet, HP Color LaserJet, and KYOCERA & Xerox. Mono models have a single quantity column, and color models have Black, Cyan, Magenta, and Yellow.
• Placeholders: Anything wrapped in '%...%' is a Power Automate variable, not literal text. The flow replaces it with the real value when the email is built. The %...% form is a shorthand for the longer dynamic content expression. Every value uses this form, for example '%PK941-Toner%' or '%131C-Toner%'. The requester block at the top uses '%cmpnyName%', '%rqstrsName%', '%rqstrsAddress%', '%rqstrsZip Code%', and '%rqstrsOffice Number%'.
• Additional requests: #Request for toner not in list is a separate placeholder at the bottom for toner that isn't in the table.
• Email styling: Styling is in a <style> block (green headers, striped rows, light borders). Outlook desktop ignores tr:nth-child, so the row striping won't show there.
• Don't use % in the CSS or markup: Power Automate treats % as the variable delimiter, so a stray % (for example width="100%") can be read as the start of a variable. Use pixel widths.

To add a printer model: copy a row, change the label, and give the placeholders the same naming pattern (<model>B-Toner, <model>C-Toner, <model>M-Toner, <model>Y-Toner).

---

Dependent(s) Registration Form

A web form where an employee accepts the Team Member Purchases Policy and then registers their dependents.

1. Terms: The employee reads the linked policy (SharePoint) and ticks the checkbox. The dependents section stays locked until they do.
2. Dependents: The employee answers whether they have dependents. If so, they can add any of these sections, and remove each one again:
   • Spouse: first and last name.
   • Children: date of birth, first name, and last name. Add as many as needed.
   • Other: relationship, date of birth, first name, and last name.
3. Submit: All required fields are validated, with invalid fields highlighted. The form then POSTs JSON to an HTTP endpoint.

Payload shape:

{
  "dependants": [
    { "type": "spouse", "firstName": "", "lastName": "" },
    { "type": "child", "birthDate": "YYYY-MM-DD", "firstName": "", "lastName": "" },
    { "type": "<relationship>", "birthDate": "YYYY-MM-DD", "firstName": "", "lastName": "" }
  ]
}

---

Vendor Contact Form

A web form for vendors to submit their contact list.

1. Vendor information: Vendor name (required) and vendor ID.
2. Contacts: One or more contacts, each with name, mobile, work phone, extension, and email. Each contact also has:
   • A Primary or Secondary role. Only one contact can hold each role.
   • Functions (for example Accounts Payable, Purchase Orders / EDI, Customer Service), selected from a list of 18.
3. Required functions: Nine functions must be assigned to at least one contact. A tracker shows the ones still unassigned and disappears once they are all covered.
4. Validation:
   • Phone numbers must be 10 digits.
   • Each contact needs a name and at least one valid phone number or email address.
   • A Primary contact is required.
   • The Submit button stays disabled until every requirement is met.
5. Submit: Sends JSON to an HTTP endpoint.

Payload shape:

{
  "vendorName": "",
  "vendorId": "",
  "contacts": [
    {
      "fullName": "", "mobile": "", "workPhone": "", "extension": "", "email": "",
      "role": "Primary | Secondary | ",
      "functions": ["Customer Service"]
    }
  ]
}

---

Setup

Toner Request Table: Paste the HTML into the email body of the Power Automate flow's send-email action. Make sure each '%...%' placeholder matches a variable in the flow.

Web forms (Dependent(s) Registration and Vendor Contact):

1. Upload the .html file to the Azure Blob Storage container that serves your forms.
2. In the file's <script> block, set the ENDPOINT constant to the URL that should receive the submitted JSON. Both forms currently contain a placeholder URL, so submissions will fail until this is replaced.
3. Make sure the receiving endpoint accepts cross-origin POST requests from the blob's address (CORS), or the browser will block the submission.

Note: The endpoint URL contains a signature (sig=) that grants access. Don't commit the real URL to a public repository.

Notes

• Both web forms load the Libre Baskerville and DM Sans fonts from Google Fonts, so they need internet access to display as designed. They fall back to default fonts otherwise.
• The success and error messages in handleSubmit() in the Dependent(s) form contain stray spaces inside the HTML strings (for example < strong >), so the tags will show up as literal text (for example < strong >) instead of rendering bold. The Vendor form doesn't have this problem.