CMS Based Password Collection Template
Add a CMS based password to your Webflow template page via this Javascript code. This allows you to password protect a Webflow CMS template page based on a password in the Webflow CMS collection.
Add a CMS based password to your Webflow template page via this Javascript code. This allows you to password protect a Webflow CMS template page based on a password in the Webflow CMS collection.
How to add it
- Add the custom javascript to the head section of your pages custom code
- Add an HTML embed with the HTML code found below to your page, this is the custom password form input
- Add a password field to your CMS collection item
The code
Javascript
<!-- Add to head section -->
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
let slug = "\"SLUG-VALUE-HERE\"";
let pw = "\"PASSWORD-VALUE-HERE\"";
localStorage.setItem(slug, pw)
$("#submit").click(function () {
let userPw = $("#password").val();
userPw = "\"" + userPw + "\"";
let pagePw = localStorage.getItem(slug);
if (userPw == pagePw) {
console.log('success!')
$('#modal').remove();
} else {
console.log('error');
}
});
});
</script>
HTML
<input type="password" class="black" id="password" name="password" required>
<input type="submit" id="submit" class="black" value="Sign in">
