Show the forms only to authenticated users
How it works
While building a form you can mark the form as authenticated, so that only the original responder can fill in the form and edit their response.
Setup Guide
How to access responder’s dashboard
Using authentication for HTML Forms
Show specific page elements when the user is logged in / not logged in
Show the authenticated user’s name and email
Show the responder data in the response view
Make the form authenticated
- Go to your Formli settings
- Turn on the setting
‘Requires authentication’
Now when a responder will open the authenticated form, they will be redirected to the sign up page. They should create the responder’s account or use the existing one. After sign in / sign up, the user will be redirected back to the original form and can create the response.
Custom Sign Up / Sign In Redirects
You can specify a custom sign up and sign in redirect by specifying the following url parameters sign_up_return_url or sign_in_return_url.
For example, your the following page would redirect to yourform.com/onboarding after sign up:
https://yourform.com?sign_up_return_url=yourform.com/onboardingsign_up_return_url if you are specifying multiple url parameters.How to access responder’s dashboard
The users can sign in directly by using the link: https://app.formli.com/responders/sign_in
After signing in, the user can view their dashboard at https://app.formli.com/responders. Here, they can change their password and sign out of the application.
Access to previous responses
After signing in, users can fill out the form as many times as needed. It will be available until the user signs out. Responders can also access their previous responses via the Response URL link (see the help article here). Users will have access only to their responses; all edits to the form will require permission.
The creator can open the form without an additional responder account.
Using authentication for HTML Forms
You can make HTML forms authorized (detailed guide on how to use HTML forms - link). If you choose to copy and use the generated code, the authorization tags will already be added. Each form should contain the data-os-authenticated="true" tag.
The authorized form should also have an element which will be shown when the user isn't authorized: data-os-element="unauthenticated" with class="os-hidden".
Authorized forms in Webflow
If you are connecting Formli and Webflow elements manually (see here), you should change the link for data-os-element="unauthenticated" .
The final link should follow the template:
https://app.formli.com/responders/sign_up?return
_url=https://irynas-tests.webflow.io/auth-forms where https://irynas-tests.webflow.io/auth-forms is address of the page where the form is added.
For using authorized HTML forms you should add you domain as authorized origin in the Domain settings of your workspace (guide).
Loading element
To prevent the responder from seeing the actual fields until they sign in, you can add loading element data-os-element="loading" that will be shown while the page is loading. You can assign it to a specific form on the page by using data-os-for tag. If you don’t specify data-os-for it will take the first loading element on the page.
Show specific page elements when the user is logged in / not logged in
If you need to display an HTML element only when a user is logged in, you can add the tag data-os-element="authenticated" to any element. For elements that should be shown to users who are not logged in, use data-os-element="unauthenticated". This way, you can show and hide multiple elements on the page based on the user's login status.
Show the authenticated user’s name and email
You can use an element with the attribute data-os-default="reference" to display the responder's name and email on the page. This can be applied to text elements and as a default value for data fields.
Example:
The following code will display the user's name in the header:
<h1>Hello <span data-os-default="reference" data-os-reference="identity.name"></span></h1>This code will use responder’s email as the default value:
<input data-os-element="email" data-os-uuid="dfq25m6wjz6" data-os-default="reference" data-os-reference="identity.email" value="data-os-default" type="text" id="dfq25m6wjz6" />data-os-default="reference"attribute for using referencedata-os-reference="identity.full_name",data-os-reference="identity.first_name",data-os-reference="identity.last_name"ordata-os-reference="identity.email"attribute indicates which reference should be used (either name or email)value="data-os-default"shows that value showd be fetched from thedata-os-default
Show the responder data in the response view
For authenticated forms, you can add columns with the responder's email and identifier to the response view. This way, you can associate each response with the person who created it.
Create new column and add reference code in Select data field.
{{responder.email}}- responder email{{responder.is_guest}}- shows if response created by authorized user{{responder.uuid}}- responder identifier