Exclude users in certain states from seeing a quiz. | Community
Skip to main content
Answered

Exclude users in certain states from seeing a quiz.


We’d like to block users in a particular state from seeing a Typeform quiz that appears on our site. What is the fastest way to do this?

Best answer by mathio-tf

Hello @cped1 

 

you will need to use a service like https://ip-api.com/ to identify user’s location. This might not be 100% accurate though as it depends on the IP address of users and that depends on their internet provider or they might even be using VPN. However if you accept the tradeoffs I think this is the best approach. You can then write a custom JavaScript code to only show the form to users not from given state.


fetch('http://ip-api.com/json/')
  .then(response => response.json())
  .then(({ countryCode, region }) => {
    // hide the form for users from California
    if (countryCode === 'US' && region === 'CA') {
      // this assumes your form is inside an element with id="my-form"
      document.querySelector('#my-form').remove()
    }
  })

The form will be displayed for a short time until user location details are retrieved. If you want to avoid this, you can display the form in the then callback instead of hiding it, however it will introduce a dependency on the 3rd party service and your form might not display at all if it fails.

View original

2 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14921 replies
  • April 11, 2024

Hi @cped1 Thanks for stopping by the community! If you’d like the form to automatically identify where the user is accessing the form from, you would need to write a code to recognize this and embed the form on your website. 😓

@mathio might have some samples of what this code may look like!


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • April 11, 2024

Hello @cped1 

 

you will need to use a service like https://ip-api.com/ to identify user’s location. This might not be 100% accurate though as it depends on the IP address of users and that depends on their internet provider or they might even be using VPN. However if you accept the tradeoffs I think this is the best approach. You can then write a custom JavaScript code to only show the form to users not from given state.


fetch('http://ip-api.com/json/')
  .then(response => response.json())
  .then(({ countryCode, region }) => {
    // hide the form for users from California
    if (countryCode === 'US' && region === 'CA') {
      // this assumes your form is inside an element with id="my-form"
      document.querySelector('#my-form').remove()
    }
  })

The form will be displayed for a short time until user location details are retrieved. If you want to avoid this, you can display the form in the then callback instead of hiding it, however it will introduce a dependency on the 3rd party service and your form might not display at all if it fails.


Reply