Add a Guestbook to your Webflow Page using Make

Adding a Guestbook to my website has been an idea I had for a while now, and yesterday around midnight I thought to myself, why not add one now?

‍

In this blog post I will go through how I set up my guestbook for my Webflow page, using Make and a bit of JavaScript.

‍

Webflow Logic vs Make
‍

While exploring the possible tools available to create a guestbook on my page, I discovered Webflow Logic, which I honestly wasn't aware of, although I have been using Webflow for two years by now.

‍

While it was easy to set up and worked perfectly, I bumped into one issue that became a dealbreaker for me quite quickly: for Webflow Logic to work, you need to publish your page to all of your domains - this includes your webflow.io staging domain.

‍

As someone who uses the webflow.io domain for testing only, and never leaves it published, I really disliked the fact that I needed to leave this domain live for it to work. And according to some forum posts I don't seem to be the only one averse to this.

‍

Using Make on the other hand, an automation platform that can be used with Webflow, you can create the same functionality, while being able to only use your production domain, without the necessity of leaving your staging domain live as well.

‍

As I used Make for the first time for this little project, I'm not too sure yet what its free version's limitations mean for this use case, but so far I could set up everything using its free plan.

‍

Requirements
‍

For this to work you will need the CMS functionality of Webflow, which requires at least the CMS site plan for $29 a month (as of December 2024).

‍

Webflow Logic Setup (Deprecated)

‍

Webflow Logic will no longer be available on June 27, 2025.

‍

In case you do not mind leaving your staging webflow.io domain live, the Webflow Logic setup looks like this:

‍

Create a new form with the fields you desire and give it a name (e.g. "Guestbook"). I would also recommend naming each field appropriately (e.g. "Name", "Message", etc.). If you are already using a form on your website on a different page with captcha enabled, also add one to your new form. Once you add a reCaptcha to one form, you also need to add it to every additional form created on your page. Otherwise you will get an error when submitting something using the form.

‍

Create a new CMS collection (e.g. "Guest Book Entries") and add the required fields (in my case I only needed "Name" and "Message").

‍

‍

Go to the Logic menu (shortcut "L") and click on "Flows". There you can create a new Flow and set everything up.

‍

‍

Click on "Select a trigger to start this flow" and choose "Form submission". This will run the flow as soon as it registers a form submission on the site (using the form you choose in the next step).

‍

In the right panel you will see a section called "Form" and a drop down menu. Click on it and choose the respective form you created ("Guestbook").

‍

Click on the plus icon below the Form Submission block and add a new one (you can find them in the left panel), "Create CMS Item".

‍

Choose your collection ("Guest Book Entries") and set "Create as" either to "Live item" (this will publish the entries once submitted immediately - not recommended) or "Staged for publish" (this will allow you to see the entries first in your CMS collection, allowing you to review each message to avoid spam).

‍

In "Basic Info" you will be able to see each field of your CMS collection. Click on the purple circle on the top left of the field and link the data of your form fields (Name - Name, Message - Message).

‍

‍

At the top menu on the right you can now test your flow and stage it for publishing. Keep in mind that for it to work you need to publish your website to both the staging and production domain! Set its Status to On.

‍

‍

Depending on how you set the creation type, the messages submitted using the form will either appear in your CMS collection first for review (you then have to manually publish the page again fro the submissins to be live) or be published instantly and be visible as soon as the page is being reloaded/refreshed.

‍

Make Setup
‍

Using Make you can achieve the same functionality as with Workflow Logic, with the difference of it being a 3rd party integration and the (in my opinion) advantage of allowing you to only use the production domain.

‍

After having created a Make account, follow these steps:

‍

Create a new scenario using the button on the top right.

‍

‍

Click on the plus icon and search for "Webflow", then choose the Webflow app and add a "Watch Events" Webhook.

‍

‍

Connect it to your Webflow page (Site ID) and authorize it (you will get a pop-up).

‍

‍

Next, create a new module by clicking on the plus icon seen on the right of the Watch Events module and add a "Get Form Submission" module.

‍

Choose the respective connection and enter the Form Submission ID, by first clicking on "Search Form Submission ID", choosing the correct Site ID and then the correct Form ID.

‍

‍

Next add another module called "Create Item". In here you will want to choose the correct Connection again and the respective Collection. For the fields, click on each field and drag and drop the respective field you want to use of your form.

‍

‍

To test the scenario, you can click on "Run once" at the bottom menu and do a test submission on your page. If everything works all three of your modules will show a green arrow. If there is an issue with one or more modules, it will indicate it with an exclamation mark.

‍

Once done, you can turn on the "Immediately as data arrives" slider to the right and turn the scenario on.

‍

This scenario will now create new CMS items in your collection set to "Staged for publish", allowing you to review the messages before publishing them.

‍

Java Script Magic
‍

As I wanted to have little profile icons next to each message showing the first initial of the entered name, I added a simple JavaScript, doing the following:

‍

• Add a div with a text element and give it a distinctive class (in my case .guestbook-initial).
• Connect its ID to the CMS's data property "Name"

The script below will change the text with the class .guestbook-initial to show the first letter of the ID set (the first letter of the name entered) for each item.

‍

Simply add the Javacript in the page's before </body> tag:

‍

<!-- Replace Guestbook Initial -->
<script>
// Select all guestbook initial text elements
const guestbookInitials = document.querySelectorAll('.guestbook-initial');

// Loop through all guestbook-initial elements
guestbookInitials.forEach((guestbookInitial, index) => {
  // Get the ID of the current element
  const elementId = guestbookInitial.id;
  
  // Check if the element has an ID
  if (elementId) {
    // Extract the first letter from the ID (convert it to uppercase)
    const firstLetter = elementId.charAt(0).toUpperCase();
    
    // Update the guestbook-initial text with the first letter of the ID
    guestbookInitial.textContent = firstLetter;
  } else {
    console.log(`Error: No ID found for element ${index + 1}`);
  }
});
</script>

‍

My Guestbook

If you'd like to see how my Guestbook turned out, feel free to take a look and leave a message!

‍