Redirect users to onboarding until they complete it

Hi there!

I have a ‘Get started’ page (with a form) that users are directed to after sign up. However, they can bypass the form on this page by going to the root URL (home).

Is there a way to automatically redirect them to the Get started page as long as they haven’t completed the form?

Thanks!

1 Like

Hi,
This is doable using javascript.

If, in your database, in the users table, you have a field that would let the system knows that a logged in user has not filled out the form yet, then it’s doable.
Do you have such field?

You can also create a user group (let’s say “onboarding form not filled out”) and create a dedicated block for this user group, in the homepage, to let them know they have to go to the form page.

Hi @matthieu_chateau, we have a field that gets marked when a user fills out the form. So yes, we would be able to see who hasn’t!

Okay, so let me know what is the field name (case sensitive) and I give you the script to add.
This field should be in the users table (sorry for repeating but that’s important :sweat_smile:).

The Airtable field is called {Is in Softr} and it’s a checkbox. It’s in the user table (called People for us). :slight_smile:

Thanks, and what is the url of the form? (formatted as /url – no need to give the domain)

/get-started

Here is the script to be inserted in the homepage settings (the page with just “/” as a url) => custom code => header

<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (window['logged_in_user'] && !window['logged_in_user']['Is in Softr']) {
            window.location.replace("/get-started");
        }
    });
</script>
2 Likes

Thanks! I’ll check and report back soon.

Am I right to assume I’d need to add this to every page if I want to completely block them from bypassing the Get started form?

Or better yet, could I do this at top-level but only exclude the Get started page (so it doesn’t redirect to itself)?

Although I guess the utility pages should not be affected.

Thanks, please let me know.

If you need it to be applied to all pages then you should insert it at app level => custom code header and change the script like this:
Here the script will be triggered on every page of your app, for a logged in user who has not filled out the form yet, except in the page /get-started (otherwise there would be an infinite loop)

<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (window.location.pathname !== '/get-started' && window['logged_in_user'] && !window['logged_in_user']['Is in Softr']) {
            window.location.replace("/get-started");
        }
    });
</script>

Careful this will also affect utility pages so you would need to exclude them.
So the script should be, if I take the example of excluding the account settings page in addition:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (window.location.pathname !== '/get-started' && window.location.pathname !== '/account' && window['logged_in_user'] && !window['logged_in_user']['Is in Softr']) {
            window.location.replace("/get-started");
        }
    });
</script>

If you want to add more pages to be excluded, I think you can see the logic

2 Likes

@matthieu_chateau, I’m fully assuming this will work so thank you!

Unfortunately I am stuck waiting to resolve this bug Page Rules (redirects) not working. So I will confirm here when I am able to test your solution!

No problem, I can wait — no hurry on my end :saluting_face:

Hi @NikosH, were you able to make it work and solve the bug?

Hi @matthieu_chateau, the bug has been resolved.

The issue was that the signup page automatically added “?next-page=/” to the URL. Which stopped the page rules redirect. The Softr support team fixed it on their end.

About your solution. It almost works but there is a new issue. When the user first passes the onboarding, they are redirected to the home page. I think the {Is in Softr} field is getting updated after that redirect. Which causes your script to redirect the user back to the Get started page.

In all other cases it works fine…

To clarify, the delay happens because we need to run an automation in Airtable to merge the old user record with the new one submitted by the onboarding form. Because the form doesn’t normally target the user record.

Ok, could you try, instead of directly redirect them to the homepage with your conditional form one of these options:

  • show a thank you screen with a button “go to homepage” – so no direct redirection
  • or create an intermediate page with a url /onboarded-success where the users would just click a cta button (with a label like “go to the homepage” or something else) - might be the best solution

If option 2, you would need to update the script this way:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (window.location.pathname !== '/get-started' && window.location.pathname !== '/account' && window.location.pathname !== '/onboarded-success' && window['logged_in_user'] && !window['logged_in_user']['Is in Softr']) {
            window.location.replace("/get-started");
        }
    });
</script>

The idea is to give more time , whether you choose option 1 or 2, by playing with the user experience to let the automation happen.

I tried option 1. Unfortunately, the user can still be too fast. I imagine it would be similar with option 2.

Perhaps I could use User groups, so it happens Softr-side? Would the script be able to reference if a user is in the user group e.g. “Member”?

Yes and no :sweat_smile:.
I can check if a user is in a user group… by replicating the user group conditions in the script.
Basically, right now it’s impossible to directly reference a user group in a script unless the script reproduces the conditions of the user group (in your case I guess the user group would have the condition “is in softr” is checked => so it wouldn’t change anything).

Please try option 2, it might work.

If not
Here is the original script with a 3 seconds delay.
You can play with these 3 seconds by changing “3000” (milliseconds) by 2000, 4000…

<script>
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            if (window.location.pathname !== '/get-started' && 
                window.location.pathname !== '/account' && 
                window['logged_in_user'] && 
                !window['logged_in_user']['Is in Softr']) {
                window.location.replace("/get-started");
            }
        }, 3000);
    });
</script>