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>
