Customization for Private RSVP Pages on Squarespace

For a myriad of legitimate and illegitimate reasons, when I got married I rejected the conveniences of a pre-fab wedding website service. My portfolio page is a Squarespace site, and I wanted the same level of design control for the wedding page. That meant I needed to improvise some features that are not standard on Squarespace. One notable challenge was the +1 problem. To put it simply: Not everyone could bring a date. I wanted guests without “plus ones" to have a different RSVP form than those that did get dates — without it being painfully obvious.

It took a lot of effort to find this solution, so I thought I ought to document it. If someone else scours the internet as hard as I did to find a solution, they’ll land here eventually.

Our save-the-date and invitations directed guests to our wedding homepage where they could find hotel info, view the registry, and fill out a password-protected RSVP form. It seemed simple enough; all we needed was one password form field that directed guests to different pages depending on the password provided with their invitation. But nothing like this exists out of the box on Squarespace.

I found my solution by adapting code shared by sf.digital. It was created for a photographer who wanted to send clients to specific galleries. It’s a simple fix that directs users to a different subpage based on the password they provide. It’s not high security, but the CSS can be easily customized — which was my priority.

Sf.digital’s instructions are very clear and easy to follow. This trick does require a business level Squarespace account in order to inject code into a content block though.

Note: be sure to turn on the “Hide Page from Search Results” option for each RSVP form page under Page Settings > SEO.

<div id="submitCodeWrapper">
  <input id="event-code-input" type="text" maxlength="5" class="box" autofocus />
  <input id="event-code-submit" class="myButton"  type="SUBMIT" value="Submit" disabled="disabled">
  <div id="feedback"></div>
 </div>
<script>
  var eventCode = document.getElementById("event-code-input");
  var codeSubmit = document.getElementById("event-code-submit");
  
  eventCode.addEventListener("keyup", function () {
    if (eventCode.value.length < 5) {
      feedback.style.color = "D31219";
      feedback.textContent = 'Code is not long enough yet...';
      codeSubmit.disabled = true;
      }
    else if (eventCode.value.length = 5) {
      feedback.style.color = "green";
      feedback.textContent = 'Code is correct length';
      codeSubmit.disabled = false;
      }
  });    
  codeSubmit.addEventListener("click", function () {    
    location.href = '/' + eventCode.value; return false;
});
</script>
<style>
.myButton {
  height:53px;
  margin-left:10px;
  width: 145px;
  padding: 10px;
  background-color: #0ba4d9;
  text-transform: uppercase;
  font-family: futura, sans-serif;
  letter-spacing: 20px;
  color: #fff;
  border-radius: 0px;   
  border: 0;
  letter-spacing: 1px;
  color: #fff;
 }  
#event-code-input {
  height:48px;
  font-size: 20px;
  padding-left:10px;
}
#feedback {
  margin-top: 10px;
  color:red;
}
</style>

---

01/26/22 UPDATE – Wow. This blog post gets way more visitors than I ever expected. Did you find the information you were looking for?