How to Display PDFs for Volunteers to REad & Accept During Registration?

Wappler General Need Help
1

Hi everyone,

I’m working on a volunteer registration page for a charity, and I need some guidance on the best way to include two PDF documents, a Code of Conduct and a Confidentiality Agreement, so that volunteers can read them and then tick a checkbox to confirm acceptance before submitting the form. I don't require any electronic signatures on the documents.

I will store the acceptance in the database along with the registration details . I’m unsure about the cleanest approach in Wappler. Ideally, I’d like:

  • The PDFs to be viewable directly on the registration page (embedded viewer, modal, or similar), without forcing a download
  • A checkbox that only becomes valid once the volunteer has viewed or opened the document (if that’s possible)
  • Manage document version at the time of each registration in case of any future revisions

I’ve tried a couple of things (embedding via <iframe>, linking to the file, etc.) but I’m not sure what is the most user‑friendly method within Wappler.

Has anyone implemented something similar or can point me in the right direction? Any examples, best practices, or step‑by‑step suggestions would be hugely appreciated.

2

Hello @guptast, iframe seems to be a good option, don't know if it's the best one..
Actually I came here to advise you on this:

I saw this behavior on some Windows installer:
Next button/Submit button, is only enabled when the user has scrolled down:

This was made with ChatGPT:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Scroll para habilitar botón</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
      background: #f5f5f5;
    }

    .box {
      height: 300px;
      overflow-y: auto;
      background: white;
      border: 1px solid #ccc;
      padding: 20px;
      line-height: 1.6;
    }

    button {
      margin-top: 20px;
      padding: 12px 20px;
      font-size: 16px;
      cursor: not-allowed;
      opacity: 0.5;
    }

    button.enabled {
      cursor: pointer;
      opacity: 1;
    }
  </style>
</head>
<body>

  <h2>Términos y condiciones</h2>

  <div class="box" id="scrollBox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
    <p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue.</p>
    <p>Proin porttitor, orci nec nonummy molestie, enim est eleifend mi.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
    <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse.</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
    <p>Et harum quidem rerum facilis est et expedita distinctio.</p>
    <p>Nam libero tempore, cum soluta nobis est eligendi optio.</p>
    <p><strong>Fin del documento.</strong></p>
  </div>

  <button id="acceptBtn" disabled>Acepto los términos</button>

  <script>
    const box = document.getElementById('scrollBox');
    const btn = document.getElementById('acceptBtn');

    box.addEventListener('scroll', () => {
      const scrolledToBottom =
        box.scrollTop + box.clientHeight >= box.scrollHeight - 5;

      if (scrolledToBottom) {
        btn.disabled = false;
        btn.classList.add('enabled');
      }
    });

    btn.addEventListener('click', () => {
      if (!btn.disabled) {
        alert('✅ Términos aceptados');
      }
    });
  </script>

</body>
</html>

Just an option, hope it helps :slight_smile:

3

why does it have to be a PDF? Why not a pop-up box where they are forced to accept prior to the registation button becoming active?

and then if you need a PDF, have a process after the fact that can create and print a pdf with the same text and then timestamp when they accepted the read/accept read the “PDFs” aka text.

1 Like
4

I would have a link or button to open the PDF(s) in a new tab and, upon clicking the link, it would update a field in the database to say it was opened. Have a sentence which clearly says that opening the document assumes you have read it. Then have the checkbox for them to properly confirm reading and agreeing to it and store that confirmation in another field in the database.

Some sites insist on you scrolling to the bottom of a document before offering the checkbox or confirmation button but people generally (me included) simply scroll straight to the bottom without reading it all anyway.

So I would say, don’t overcomplicate it.

2 Likes