Skip to main content

A privacy friendly RSVP for events

·4 mins
Privacy Html Javascript Rsvp
Table of Contents

Planning an event can be stressful, and the last thing you need is worrying about your guests’ privacy. But don’t worry, I’ve got you covered with a privacy-friendly RSVP option.

Opportunity
#

There exist plenty of online services (like rsvpify) that offer a slick looking interface and a powerful dashboard to track who’s coming to your event.

However, such online services require guests to provide personal information such as their name, email, phone number, and sometimes even their address.

While they may be convenient for managing responses, they can also put your guests’ privacy at risk or may even use their information for marketing purposes.

Insight
#

But there is a better way: good plain old email.

  • No middleman
  • Senders control when and if to send Email
  • No fees

Let’s create a simple HTML website that offers such a privacy-friendly RSVP option.

First, create an HTML file with the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Privacy-Friendly RSVP</title>
  </head>
  <body>
    <button onclick="sendEmail()">RSVP</button>
    <script>
      function sendEmail() {
        window.location.href =
          'mailto:name.lastname+rsvp@gmail.com?subject=RSVP&body=I will be attending!';
      }
    </script>
  </body>
</html>

This code creates a basic HTML page with a single button. When the button is clicked, it will invoke a JavaScript function that directs the user to their email application and prefills the email receiver address, subject and body.

Notice how we leverage the +rsvp suffix in a gmail address to allow to easily filter or label RSVP emails in your mailbox.

Off course, you can customize this code to fit your specific event by changing the email address, subject, and body text.

Guests decide what, when and whether to send. All without having to provide any personal information to a third-party service. It’s simple, easy, and most importantly, respectful of your guests’ privacy.

Full example
#

Let’s build a slightly more attractive looking RSVP page:

Privacy friendly RSVP desktop

That looks on mobile like:

Privacy friendly RSVP mobile

This can be achieved by starting from the following HTML:

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body
    background="background.jpg"
    style="
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
    "
  >
    <div
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        max-width: 800px;
        width: 90%;
        height: 90%;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        padding: 20px;
      "
    >
      <div style="display: flex; flex-direction: column; align-items: center">
        <h1
          style="
            color: white;
            font-family: 'Courier New', Courier, monospace;
            font-size: 8em;
            margin: 0px;
          "
        >
          Party
        </h1>
        <h2
          style="
            color: white;
            font-family: 'Courier New', Courier, monospace;
            font-size: 2em;
            margin: -25 0 0 0;
          "
        >
          description
        </h2>
      </div>

      <div style="flex-grow: 1"></div>

      <div
        style="display: flex; align-items: flex-start; flex-direction: column"
      >
        <p
          style="
            color: white;
            font-family: 'Courier New', Courier, monospace;
            font-size: 1.5em;
            margin: 0px;
            padding: 0 20;
          "
        >
          Come celebrate with me
        </p>
        <p
          style="
            color: white;
            font-family: 'Courier New', Courier, monospace;
            font-size: 1.5em;
            margin: 0px;
            padding: 0 20;
          "
        >
          🗓️ date + hour
        </p>
        <p
          style="
            color: white;
            font-family: 'Courier New', Courier, monospace;
            font-size: 1.5em;
            margin: 0 0 20 0;
            padding: 0 20;
          "
        >
          🍻 and 🍟 to enjoy
        </p>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2246.3233326624286!2d9.124615916552427!3d55.73551088054884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x464b717428bfa99b%3A0xfba38e2c20ba313a!2sLEGOLAND%C2%AE%20Billund%20Resort!5e0!3m2!1sen!2sbe!4v1680002007769!5m2!1sen!2sbe"
          width="100%"
          height="150"
          style="border: 0"
          allowfullscreen=""
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"
        ></iframe>
        <button
          style="
            padding: 8 30;
            font-family: 'Courier New', Courier, monospace;
            font-size: 1.5em;
            margin-top: 20;
            background: white;
            border: white;
            align-self: center;
          "
          id="btn-rsvp"
        >
          RSVP?
        </button>
      </div>

      <script>
        document
          .getElementById('btn-rsvp')
          .addEventListener('click', function () {
            var link =
              'mailto:name.lastname+rsvp@gmail.com' +
              '?subject=' +
              encodeURIComponent('RSVP - My party') +
              '&body=' +
              encodeURIComponent('We will be there!');
            window.location.href = link;
          });
      </script>
    </div>
  </body>
</html>

Just save the code above in index.html and add a background.jpg to the same folder to set your desired background.

Party on! 🎉

Wrap up
#

This site is 100% tracker free, ❤️ for liking my post on Mastodon or Linkedin to let me know you’ve read this.

You don’t have to sacrifice privacy for convenience when it comes to event planning. A simple HTML website with a button to send an email is a privacy-friendly RSVP alternative!

If this was helpful to you, consider buying me a coffee.

Jeroen Mols
Author
Jeroen Mols
Jeroen Mols is a Google Developer Expert (GDE) in Android, the former lead Android developer at Philips Hue and an internationally recognized speaker. He is currently pushing his boundaries as a full stack developer at Plaid.