Neocities Guestbook Tutorial

This is by far the easiest way to create a comment section / guestbook for your website. You only have to use google Sheets and App scripts with a super minimal setup. -----

disclaimer:

I am the queen of typos and poorly thrown together sentences. Reader discretion advised.

1. Set Up Google Sheets

First, create a spreadsheet to store your comments:

1. Go to Google Sheets and create a new sheet.
2. Rename it to Guestbook (or any name you like).
3. Create four columns: Timestamp, Name, and Comment.

2. Create a Google Apps Script

Now, we’ll set up a script to handle storing and fetching comments.

1. In your Google Sheet, go to Extensions > Apps Script.
2. Delete any code inside the script editor.
3. Copy and paste the following script:

 
function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = JSON.parse(e.postData.contents);
  
  // Add a new row with the comment data
  sheet.appendRow([new Date(), data.name, data.website, data.comment]);
  
 
  return ContentService.createTextOutput("Comment added!");
}

function doGet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();
  

  const comments = data.slice(1).map(row => ({
    timestamp: row[0],
    name: row[1],
    website: row[2],
    comment: row[3]
  }));
  
  
  return ContentService.createTextOutput(JSON.stringify(comments))
    .setMimeType(ContentService.MimeType.JSON);
}
    

3. Deploy the Script as a Web App

1. Click Deploy > New deployment.
2. Under Select type, choose Web app.
3. Set "Execute as" to Me and Who has access to Anyone.
4. Click Deploy and copy the Web App URL.

4. Add HTML & JavaScript to Neocities

Now, embed this in your Neocities site:

  
<form id="commentForm">
<!----delete *** --->
  <input*** type="text" name="name" placeholder="Name" required>
  <!---delete*** again--->
  <text***area name="comment" placeholder="Comment" required></text>
  <!---and again lol--->
  <button*** type="submit">Post</button>
</form>

<!-- Comments Display -->
<div id="comments"></div>
  
<script>
  const SCRIPT_URL = 'YOUR_GOOGLE_SCRIPT_URL'; // Replace with your Google Apps Script URL

  // Load comments when the page loads
  window.onload = () => {
    fetch(SCRIPT_URL)
      .then(res => res.json())
      .then(data => {
        let html = '';
        data.reverse().forEach(entry => {
          // Add a link to the website if provided
          const websiteLink = entry.website ? 
            `<a href="${entry.website}" target="_blank">${entry.website}</a>` : 
            'No website';
          
          html += `
            <div class="comment">
              <h3>${entry.name}</h3>
              <p>${entry.comment}</p>
              <small>Website: ${websiteLink}</small>
              <small> ${new Date(entry.timestamp).toLocaleString()}</small>
            </div>
          `;
        });
        document.getElementById('comments').innerHTML = html;
      });
  };

  // Handle form submission
  document.getElementById('commentForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    // In the form submit event listener:
const data = {
  name: formData.get('name'),
  website: formData.get('website'), // <-- This must match the input name
  comment: formData.get('comment')
};

    fetch(SCRIPT_URL, {
      method: 'POST',
      body: JSON.stringify(data)
    }).then(() => window.location.reload()); // Refresh to show new comment
  });
</script>
 
<style>
  #comments { margin-top: 20px; }
  .comment { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; }
</style>
  

5. Customize

Heres a full fledged CSS example

    body {
  font-family: 'Arial', monospace; 
  background-color:black;
}

/* Comment Form Styling */
#commentForm {
  background: black; /* White background for the form */
  padding: 30px;
  border-radius: 3px; 
 
  margin-bottom: 20px;
   border: px solid deeppink; 
  width:50%;
}

#commentForm input[type="text"],
#commentForm input[type="url"],
#commentForm textarea {
  /* Full width */
  padding: 6px;
  margin-bottom: 6px;
  border: 1px solid deeppink; /* Light border */
  border-radius: 4px; /* Slightly rounded edges */
  font-size: 16px;
  background-color:black;
}

#commentForm textarea {
  resize: none; /* Allow vertical resizing */
  min-height: 100px; /* Minimum height */
  width: 100%;
}

#commentForm button {
  background: black; /* Blue button */
  color: deeppink; /* White text */
  border: solid deeppink 1px;
  padding: 10px 20px;
  border-radius: 4px;
  
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 16px;
  transition: background 0.3s ease; /* Smooth hover effect */
}

#commentForm button:hover {
  box-shadow: deeppink 0px 0px 9px 0px;
  border: solid white 1px; 
  color: white; on hover */

}
/* Comments Display Styling */
#comments {
  margin-top: 20px;
}

.comment {
  background: black; /* White background for each comment */
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  margin-bottom: 15px;
  border: 1px solid deeppink; /* Light border */
}

.comment h3 {
  margin: 0 0 10px; /* Space below the name */
  font-size: 18px;
  color: deeppink; /* Blue name */
}

.comment p {
  margin: 0 0 10px; /* Space below the comment */
  font-size: 16px;
  color: white; /* Slightly lighter text for comments */
}

.comment small {
  display: block; /* Make timestamps and links block-level */
  font-size: 10px;
  color: deeppink; /* Light gray for metadata */
}

.comment a {
  color: hotpink; /* Blue link */
  text-decoration: none; /* No underline */
  transition: color 0.3s ease; /* Smooth hover effect */
}

.comment a:hover {
  color: white; /* Darker blue on hover */
  text-decoration: underline; /* Underline on hover */
}

/* Responsive Design */
@media (max-width: 600px) {
  #commentForm input[type="text"],
  #commentForm input[type="url"],
  #commentForm textarea {
    font-size: 14px; /* Smaller font on mobile */
  }

  .comment h3 {
    font-size: 16px; /* Smaller name on mobile */
  }

  .comment p {
    font-size: 14px; /* Smaller comment text on mobile */
  }
}
    

Add more fields like Email or Rating by updating the Google Sheet and script.

Modify the JavaScript to enhance animations or sorting.

And that’s it! You now have a working Guestbook on your Neocities!

Leave a comment!