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
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).