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>

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

document
  .getElementById('inspectionForm')
  .addEventListener('submit', async (event) => {
    event.preventDefault();
    if (!event.currentTarget.reportValidity()) return;

    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 }]
    });

    if (data.emailEnabled === 'yes') {
      if (!data.email) {
        throw new Error('Enter an email address.');
      }

      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.
      // A server-side queue is reliable even after the tab is closed.
      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.');
      }
    }
  });
</script>