Create a Client Login Area on Squarespace

An event photographer wanted a website where their clients could log on to preview their photographs. All they needed was a simple way for their customers to enter an event code (and optionally a password) so that only they could view their images. This article describes how you can achieve this with Squarespace.

Photographer's login page

I've outlined how to do this in three fairly straightforward steps but before you start, you may want to take a look at the demonstration site (above) that we created using the Flatiron template to write this article. The password for the main demo page is 'a'. Valid event codes in the demo are ABCDE (password 'ABCDE') and VWXYZ (password 'VWXYZ').

Need some help? At Soundfocus we've been designing and developing Squarespace websites for 10 years, so if you want us to develop a feature for you or you'd like us to build an entire site, please get in touch.

 

Main Steps

So what's involved in building this on your Squarespace site? There are four main steps:

1. Create the event pages for your clients. 

2. Create two new pages. 

3. Customise one of these pages to show clients a message if they enter the wrong code.

4. Customise the other page as a customer login page, by adding some custom code (that I'll supply!).

You'll repeat step 1 after every photo shoot (as you probably already do) but you'll only need to carry out the other steps once. 

 

Creating the event pages

This is the easy part. Create a new page for each of your client's events. Create each page in the NOT LINKED section so that they don't show up in the navigation. 

You can format your event pages however you like. Typically you'll add a title and one or more Gallery Blocks to the page.  The only stipulation is that you must set the URL of each page to a five-character code. You can select this in the Page Settings window of each page. As an example we've created two pages with URLs "ABCDE" and "VWXYZ". We choose a five-character code because it's short and easy for customers to remember but it is flexible enough to allow you to have numerous galleries.

Page Settings window showing URL and password

Page Settings window showing URL and password

Whilst you are viewing the Page Settings, you can also set a password for the new page. This will be the password that the visitor will need to enter after they've typed in their event code. Of course a password is optional but we do advise this extra layer of protection as it will stop search engines from indexing these pages. We suggest you choose a different password for each page. In our example, we've kept the password and the URL the same but you probably wouldn't do this on a live site.

 

Create two new pages

Page for Client Login

Page for Custom 'not found' message

The next step is to create and format two new pages. The first will be the page where clients enter their event code (see example above left) and the second will be the message clients will see if they don't enter their code correctly (see example above right).

1. Create the first page in the NOT LINKED section and call it "Login". You must use a normal page.

2. Create the second page in the NOT LINKED section and give it the title "404". You can use a normal page or a Cover Page (if you are familiar with cover pages). 

Create a custom 404 page

When a visitor to your site (or any site) enters a URL for a page that doesn't exist they are usually sent to an error page called a '404'. This is the technical name for an error page that tells them the page couldn't be found. When a client enters their event code, they are just looking for a page and if they don't enter the code correctly, we need a polite way to tell them.

The default error is shown below but we prefer to make this a little more friendly.

The default Squarespace 404 page

The default Squarespace 404 page

It's really easy to customise the error message on Squarespace so let's do this now.

1. Customise the 404 page you created above by adding a message to explain to clients that their page can't be found. See the example (above right) for ideas.

2. When you've saved the page design, go to the main menu of the site and the navigate to

SETTINGS > ADVANCED > 404 Error / Page Not Found

3. The current setting will be System Default. Change this to 404 - the name of the page you just created.

 

Customise the login page

You're on the last stage. You've already created the login page and called it Login. Now you're going to add the input box and button so clients can enter their event code. You can configure the page to look however you want, but somewhere on the page you'll need to add a Code Block which is where we'll put the code to create the box and button that you saw on the sample page.

1. Place the page in Edit mode and add the Code Block

2. Delete the sample code ("Hello World") and replace it with the code below:

<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 = "red";
      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: #BE5F93;
  color: #fff;
  border-radius: 4px;   
  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>

3. Save the page.

You should now see the input box and button.

If you type in a meaningless 5-character code and then click the button, you should see your custom error message that you created.

If you type the correct 5-character code for one of your client pages, you should see the page (or a password prompt) when you click the button. If you set a password, type in the correct password to see the client page.