Can users be redirected to a specific CMS page after logging in on Webflow?

Published on
September 22, 2023

Yes, users on Webflow can be redirected to a specific CMS page after logging in. This can be done using a combination of Webflow's CMS hosting and the Webflow CMS API.

Here's a step-by-step guide on how to set it up:

  1. Create a private CMS collection: In your Webflow project, go to the CMS Collections tab and create a private collection that will house the pages you want users to be redirected to. Make sure this collection has at least one field that uniquely identifies each page (e.g., a slug or ID).

  2. Create the login form: On the page where you want users to log in, drag and drop the Form Block element from the Add Panel. Customize the form fields as needed (e.g., email and password).

  3. Add custom code: Select the Form Block, go to the settings panel, and click on the Custom Code tab. In the "Before Form" section, add the following JavaScript code:

<script>document.addEventListener('DOMContentLoaded', function() {  const form = document.querySelector('#myLoginForm'); // Replace with the ID of your form  form.addEventListener('submit', function(e) {    e.preventDefault();    const email = document.querySelector('#myEmailField').value; // Replace with the ID of your email field    const password = document.querySelector('#myPasswordField').value; // Replace with the ID of your password field    // Call the Webflow CMS API to check the login credentials    fetch('/token', {      method: 'post',      body: JSON.stringify({ email, password }),      headers: { 'Content-Type': 'application/json' }    })    .then(response => response.json())    .then(data => {      const { token } = data;      // Redirect to the desired CMS page using the token      window.location.href = `/my-cms-page/${token}`; // Replace with the URL of your CMS page    });  });});</script>

Make sure to replace the #myLoginForm, #myEmailField, #myPasswordField, and /my-cms-page/ with the appropriate IDs and URL of your form, email field, password field, and CMS page respectively.

  1. Configure the form submission: In the Form Settings panel, set the Form Action to "Custom Action" and leave the success message blank. This will prevent the default form submission behavior and trigger the custom code instead.

  2. Publish your site: Once you've completed the above steps, publish your site to make the changes live.

Now, when a user logs in using the form, the custom JavaScript code will send a request to the Webflow CMS API to check the login credentials. If the credentials are valid, the API will return a token. The code then redirects the user to the desired CMS page by appending the token to the URL. This way, only authenticated users will be able to access the CMS page after logging in.

Additional Questions:

  1. How do I create a private CMS collection in Webflow?
  2. Can I customize the login form in Webflow?
  3. Is it possible to redirect users to different CMS pages based on their role after logging in on Webflow?