Two Simple Steps to Add Login Form to Webflow Websites
All new Cotter No-Code Dashboard: Add magic link to your Webflow site in 2 simple steps!
In this tutorial, we are going to guide you on how to authenticate your users using magic link with Cotter’s new no-code dashboard and Webflow.
Here’s what you’ll need:
- A basic Webflow plan
- A Cotter account (click
hereto get one)
Step 1: Customize your Cotter login form
Head to Cotter’s developer dashboard > Projects > Forms & Fields
This whole page is designed for the no-code community to easily customize their login forms and add them to their no-code website builders (Webflow, Bubble, etc.).
Fill in the page you want to redirect your users to after they successfully logged in
(See the bottom red square on the previous screenshot). For this example, the redirect page is set to /welcome.
Step 2: Webflow setup
Create 2 pages, you can design these 2 pages however you like
- A login page that contains a login button.
- A welcome page to welcome your newly registered users. The URL needs to match the URL you will take your users to after successful login (from previous example:
/welcome).
Next, you have to add the following code to your custom code <head> section in projects settings page.
<script src="https://unpkg.com/cotter@0.3.31/dist/cotter.loader.js" type="text/javascript" data-cotter-api-key-id="<YOUR API KEY ID>" data-cotter-env="STAGING" ></script>
Don’t forget to change <YOUR API KEY ID> to your actual API Key ID from Cotter’s dashboard
You should have something like the following:
Insert Login Link to the login button you created on your login page
Head to Cotter’s developer dashboard > Projects > Forms & Fields
Then click on the purple Login Link button then click on the copy icon indicated by the red square.
Finally, insert the Login Link to the login button you created.
You’re done 🎉
You can save the project and publish it. You should be able to log your users in.
Questions & Feedback
Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter’s Slack Channel.
Ready to use Cotter?
If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.
If you need help, ping us on our Slack channel or email us at team@cotter.app.
