Build forms in HTML. Style them with CSS. Collect data with JavaScript.

<form id="inspectionForm">
  <label>
    Customer
    <input name="customer" required>
  </label>
  <label>
    Device
    <input name="device" required>
  </label>
  <label>
    Result
    <select name="result" required>
      <option value="Passed">Passed</option>
      <option value="Defect found">Defect found</option>
    </select>
  </label>
  <label>
    <input type="checkbox" name="emailEnabled" value="yes">
    Send the result to my email
  </label>
  <label>
    Email
    <input name="email" type="email" autocomplete="email">
  </label>
  <label>
    Send after (minutes)
    <input name="delayMinutes" type="number"
      min="0" max="10080" value="60">
  </label>
  <button type="submit" data-pastetoprint-button>
    Create printable report
  </button>
</form>
<p id="formStatus" role="status" aria-live="polite"></p>

<script src="https://www.pastetoprint.com/assets/js/import-button.js?v=1.5.0"></script>
<script>
const escapeHtml = (value) => String(value).replace(
  /[&<>"']/g,
  (character) => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  })[character]
);

const form = document.getElementById('inspectionForm');
const status = document.getElementById('formStatus');
const submitButton = form.querySelector('button[type="submit"]');
const emailEnabled = form.elements.namedItem('emailEnabled');
const emailField = form.elements.namedItem('email');
const delayField = form.elements.namedItem('delayMinutes');

function syncEmailFields() {
  for (const field of [emailField, delayField]) {
    field.disabled = !emailEnabled.checked;
    field.required = emailEnabled.checked;
  }
}
emailEnabled.addEventListener('change', syncEmailFields);
syncEmailFields();

form.addEventListener('submit', async (event) => {
    event.preventDefault();
    if (submitButton.disabled || !form.reportValidity()) return;
    status.textContent = '';
    submitButton.disabled = true;
    let importAccepted = false;

    try {

      // Names are unique here. Use FormData.getAll(name) for repeated fields.
      // Disabled fields and unchecked checkboxes are omitted by FormData.
      const data = Object.fromEntries(new FormData(event.currentTarget));

      const html = `
        <article class="report">
          <header>
            <span>INSPECTION REPORT</span>
            <h1>${escapeHtml(data.device)}</h1>
          </header>
          <section class="details">
            <p><small>Customer</small>
              <strong>${escapeHtml(data.customer)}</strong></p>
            <p><small>Result</small>
              <strong>${escapeHtml(data.result)}</strong></p>
          </section>
        </article>`;

      const css = `
        .report {
          padding: 18mm;
          border: 1px solid #cbd5e1;
          font-family: Arial;
        }
        .report header {
          padding: 18px;
          background: #173f8a;
          color: #ffffff;
        }
        .details {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          margin-top: 18px;
        }
        .details p {
          padding: 12px;
          border: 1px solid #cbd5e1;
        }
        .details small,
        .details strong {
          display: block;
        }`;

      const title = `Inspection – ${data.device}`;

      await PasteToPrint.import({
        title,
        mode: 'replace',
        items: [{ kind: 'html', html, css }]
      });

      importAccepted = true;

      if (data.emailEnabled === 'yes') {
        const delayMinutes = Math.min(
          10080,
          Math.max(0, Number(data.delayMinutes) || 0)
        );
        const sendAt = new Date(
          Date.now() + delayMinutes * 60_000
        ).toISOString();

        // Implement this authenticated endpoint in your host backend.
        // Validate the recipient, delay and content again on the server.
        // Add a persistent queue to send even after the tab is closed.
        // This sends the ORIGINAL summary, not later changes in the editor.
        // Import acceptance does not mean editing or printing is complete.
        const response = await fetch('/api/form-deliveries', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            recipient: data.email,
            sendAt,
            formData: {
              customer: data.customer,
              device: data.device,
              result: data.result
            },
            document: { title, html, css }
          })
        });

        if (!response.ok) {
          throw new Error('Email delivery could not be scheduled.');
        }
      }
      status.textContent = data.emailEnabled === 'yes'
        ? 'Report imported and original summary scheduled for email.'
        : 'Report imported. Continue reviewing it in pasteToPrint.';
    } catch (error) {
      status.textContent = (importAccepted
        ? 'Report imported, but email scheduling failed: '
        : 'Import failed: ') + error.message;
    } finally {
      submitButton.disabled = false;
    }
});
</script>