Ready to build a website that does it all? 🏆 Get the free Webflow x Typeform ebook

here
Signup

Use variables in redirect links

Variables are a flexible tool that lets you assign numeric or text values to respondents as they answer your typeform. This guide walks you through how you can use variables, Recall information, and URL redirects to send respondents to a specific page on your website once they finish your typeform.

This process works similarly to adding Hidden Fields to your redirect URL. The difference is that Hidden Field values are assigned before a respondent fills out a typeform, and do not change based on the respondent’s answers. On the other hand, variable values are assigned while a respondent is filling out the typeform, based on their answers.

Ready to amaze your audience with a super-personalized experience? Let’s get started!

Here’s what you’ll need to do this job:

- A Plus plan, for the URL redirect feature

1. First, set up a form that uses variables. This article gives an overview of how to add variables to your form, and how to use Logic to change variable values.

For this article, we’ll create an example form with a fun, short quiz about travel preferences. At the end of the quiz, respondents can click a button to be redirected to a page that recommends a specific trip package, which they can then reserve. The redirect URL is different for each respondent, and depends on their answers to the quiz.

For this quiz, we created variables for each question. Every time a respondent answers a question, the value of the variable for that question changes.

For example, this question asks about what kind of accommodation the respondent prefers:

travelrec1.png

If the respondent answers “Five-star hotels - I like to sleep in style!”, a logical rule makes sure that the value of the accommodation variable changes to “fivestar”:

2024-07-16_14-28-28.png

We won’t go over adding and changing variables for every question and question option in this quiz, but if you’d like more examples of how this works, check out this article on Text variables and this article on Number variables.

2. Optionally, you can create an Ending screen that tells your respondent that they’re only a click away from a special recommendation, just for them! We’ve done so here:

travelrec2.png

HC_Note_new.png
Note: If you don’t want to use an Ending screen in your typeform, you can also use our Redirect to URL feature. Read this guide to learn how the feature works, and see steps 4 and 5 of this article for tips on referencing variables in the redirect URL.

3. Now, it’s time to create the redirect URL that will take respondents to the recommendation page.

In the Question settings for your Ending, toggle on the Button link option:

Button_link.png

In the Button link field, paste in the generic URL path for the pages you want to send respondents to. We want different respondents to see different pages, to create a personalized experience. Because of this, the URL needs to have valid paths for each of the possible variable values generated in the typeform.

For example, a URL like the one below will work for a typeform with the variables accommodation, climate, and budget:

https://www.mywebsite.com/trips/accommodation=XXXX&climate=XXXXX&budget=XXXXX

The URL works in this case because the values for accommodation, climate, and budget can change and still create a valid URL. Just make sure that the variable values you create in your typeform exactly match the possible parameter tags you’ve set up for your site.

The following URL will also work, if you’re only planning on making recommendations for accommodation. In this case, the possible values for the accommodation variable must exactly match the path names of the subpages on your site:

https://www.mywebsite.com/trips/accommodation/XXXXX

4. Now, use Recall information to change the parameter or subpage values in your URL to Typeform variable values. Click the @ key to bring up a list of items you can recall:

travelrec5.png

Then, replace each parameter or subpage in your URL with the right variable:

Screenshot 2024-04-17 at 15.44.07.png

Note that this will create URL paths based on variable values, not variable names. For example, for this URL…

Screenshot 2024-04-17 at 15.46.20.png

...respondents who click the button will be redirected to subpages like “accommodation/fivestar” or “accommodation/budget” (depending on the variable values you’ve set), not “accommodation/accommodation”.

5. Once you’ve finished, click Publish to turn your changes live. Now, anyone who finishes your typeform can hop over to a personalized landing page on your site!

Want more tips for using variables? Check out our scores and variables help section.

Tap into our community knowledge