Remember user input & display on all pages

Hello smart people!

I am looking to capture a users name on the first splash screen of a site.

The users name would then output on every page throughout the site.

I am across how to output an input from a form field on the same page, see a simple test in webflow and published.

But I am not sure how to store that input and print it across all pages through the life of the users session.

Any help is greatly appreciated. Thanks in advance!

1 Like

Hello @damiandp,

If you’re looking to use the input value of a user throughout it’s life session on the website you could use cookies. I wrote a quick script using cookies.js for you. Have a look !

What it basicaly does is on DOM loaded, it checks if there is already a specific cookie set. If it is set, it then targets an id and inject the cookie value inside. If there is no cookie set, then javascript listens on a submit event and sets a cookie once the user has submited the webflow form which will store the username as the cookie value.

Here is a codepen I wrote which illustrate the mechanisme. First, you should just see “hello”, then if you submit a name, and refresh the page, you should see “hello xyz” on that same page or any other page of your website that contains that piece of JavaScript.

Here is a quick screenrecording to showcase the script at work.

document.addEventListener("DOMContentLoaded", () => {
  // globals
  const log = console.log,
    submitBtn = document.getElementById("submit"),
    greetings = document.getElementById("greetings"),
    cookieName = "username-cookie",
    dayStored = 365;

  let date = new Date(),
    cookieValue; // username

  // check if cookie exist
  (() => {
    if (!Cookies.get(cookieName)) {
      // cookie does not exist yet
      log("no username cookie found yet");
      setCookie();
    } else {
      // cookie exists, do something with cookievalue
      greetings.textContent = `${Cookies.get(cookieName)}`;
    } // end if
  })(); // end cookie check IIFE

  // set cookie on click
  function setCookie() {
    // set date to be equal to x amount of days from current date time in ms
    date.setTime(date.getTime() + dayStored * 24 * 60 * 60 * 1000);

    // create cookie on button click to expire on newly defined date
    submitBtn.addEventListener("click", (event) => {
      event.preventDefault();
      cookieValue = document.getElementById("user").value;
      Cookies.set(cookieName, cookieValue, {
        expires: date
      }); // end set cookie
      log(`${cookieValue} was stored as a cookie`);
    }); // end listener
  } // end setCookie()
}); // end DOMloaded

Hope that helps!

2 Likes

Incredible @anthonysalamin, this worked perfectly!!!

Thank you so much for the quality response. I truely appreciate you taking the time to help me out :slight_smile:

1 Like

Hi there, I am looking for some help with adding custom code to my webflow site.

The website/product is http://meisomind.com (only viewable on mobile).

There is a scheduling component that I created on the site that allows users to “book a session” and when they press the “book” button, it sends their information to my airtable.

However, the problem is that currently it’s not a dynamic button, so when the user clicks on “book” and if they refresh the page, it will still show them the “book” button, and I would like it to instead show a “cancel” button. ]

And if they press the cancel button, I’d like it to remove the entry from the airtable.

My site currently uses a combination of tools: Memberstack (login/signup), Zapier & Airtable (for when users book a session it gets sent to airtable).

I’ve got a video here explaining the idea as well: Screen Recording 2021-06-26 at 6.54.56 PM.mov - Google Drive

Let me know please

Thank you!