How to create a custom redirect page for users with JavaScript disabled? Answered

Post author
John Matias

Hey all - I've come across a need to have a specific page to redirect folks to that have javascript disabled... does anyone have a nice template page? Do you use a 404 page? Or do you just redirect back to your main domain?

I guess I'm thinking of redirecting them to something like an "Oops you have javascript disabled"

How do you all handle this?

Comments

4 comments

  • Comment author
    Ben Sabic

    Hey John!

    Your best option would be the latter one you have suggested.

    You can achieve that with this snippet below. Alternatively, instead of redirecting a user, you can have an overlay revealed on the page that has a message, for pages with member-only content.

    As for what I've done, I generally go with an overlay that is revealed. Mainly because the redirect isn't truly "instant", so the UX is a little better with an overlay.

    <noscript>
    <meta http-equiv="refresh" content="0;url=YOUR-URL">
     </noscript>
    0
  • Comment author
    John Matias

    Got it - thanks Ben Sabic - do you have a snippet that you could share showing how it would look using an overlay? (asking because I'm lazy)

    0
  • Comment author
    Ben Sabic

    Yes of course! Here you are.

    So in this case, you just add an ID of js-disabled to the element that you want to reveal if JS is disabled by the user. You can also target the element by a class or another selector type. You'd want to apply this ID to the wrapper that contains your overlay.

    <noscript>
            <style>  #js-disabled { display:flex!important; } </style>
        </noscript>
    0
  • Comment author
    Jayess

    Thanks Ben 🎉 We appreciate you!!!

    0

Please sign in to leave a comment.