Knack & Webflow membership login
Step 1: Sign-up with Knack
Feel free to use our affiliate link to begin your 14 day FREE trial: Knack to Webflow
The first thing that we're going to do is sign up for our free Knack account. Sign-up requires our name, email address, and password.
Then, we'll set up our Knack URL. Let's name this "createtoday". Then, we get to name our Knack app. Let's call this one, "Protected Content".
Next, we'll finalize creating our Knack account.
Now, we can get started!
The first thing that we're going to do within our Knack app is create account objects.
Step 2: Create account functionality
Step 3: Build Knack app
Now, we're within our application. Our first, step - let's rename this page. Let's name this "Sign-up". We'll also want to update our page URL, as well. Then, we'll click update settings.
Now, let's go back to our views - here is where we can add our sign-up form. Within this addition, we'll want to add our name input, email input, and password input. Within Knack, we want to set our form rules so that with each added record - the user status is updated to "Active".
Next, let's create our login page. We'll first click "Add," then we'll select the option to have user login for this page. We'll select the records which will be "Account", then afterwards we can name our login page. We'll simply name it "Login Page". Then, we'll click "Add new page". Within this page, we want to update our login page settings. We'll go to the form, and have it so that the form is closed so that only active users can access. Lastly, we'll go to our settings, and we want to make sure that this is not displayed on any other pages. We'll then update our settings.
Now, let's create a "Confirm Details" page. Here, we'll do the same, and make sure that this is only able to be accessed by users who have login credentials. We'll name this page "Confirm Details".
We want to update again our settings for our login form to closed so that only active users can access. Then, we want to update our page settings again so that the menu is not displayed, or this page is displayed on other menu locations.
Lastly, let's return to our sign-up page, and select so that we can embed. Click Save.
Now, we are on our "Embed Codes" page. Let's add the other two pages as embed codes. We'll then select our login page, and name our embed code. Let's do the last one for the "Confirmed Details" page. So then, we'll click on"Add embed code", and name the embed code "Confirm details".
Next steps, we're going to take these embed codes, and then add them to our Webflow project.
Step 4: Embed app into Webflow
Feel free to use the Read-only
link to the tutorial project to learn how to implement the Knack embeds
Now, let's create our new project within Webflow. We're going to select a free Webflow template that is called Notable. For our project name, let's call this Knackflow Tutorial.
We then click on "Create project", and then be introduced into our Designer. Here is where we'll add our Knack embeds. But first, we want to create a new page. Our first page is going to be the Sign-up page.
We'll add our page name, and call it Sign-up. Then, we'll begin to add our structure for our Sign-up page. We'll add a section, a container, and then we'll add our embed element.
In our embed element, we'll add our embed code. But, first let's style our section and container. Let's name our container c-centered-element. Then, let's give this a display setting of flex, with our flexbox setting we want to align center, and justify center. We then want to give it a height of 100vh.
Now, let's add our navigation to our Sign-up page. We can do this by either going to a page and copying/pasting, and then returning to our Sign-up page so that it is accessible on this location. Or, we can go into our symbols and select our navigation. And here, we'll select our footer as well. We then want to make sure our footer is at the bottom of our page.
Now, we can add our Knack embed code for our Sign-up page. We'll return to our Knack app, copy the code, then return to our Sign-up page, and make sure that we access our HTML embed element. Here, is where you will be able to paste in your embed code, and save. Before you continue, make sure you duplicate this Sign-up page as the Login page, as well.
Next, we can access our Knack app, copy the login embed code, and add it to our duplicated login page. Here, we can do the same by entering the embed code in our HTML embed element.
Now, let's create our Sign-up link. To do so, we'll simply copy/paste our navigation link, and update our text to read "Sign-up". After our text has been updated, we can then update where this link is pointing to from the About page to the Sign-up page.
Lastly, we'll simply publish. And once we have completed publishing, we can access our site to note that the Sign-up page now has our Sign-up form.
Step 5: Add custom code to protect content
The following is the custom code first mentioned within the walkthrough. This custom code determines if the user is logged in. If they are not, then the user is redirected to the relative link of /login
Please note that the custom code will be within the script of your project.
Please note that the custom code will be within the noscript of of your project.