Preselect answers through typeform links (for advanced users)
Although you can use Hidden Fields to prefill content in typeform questions, it’s not possible to prefill answer text. With a bit of coding magic, though, you can link to individual answers in Multiple Choice or Picture Choice questions when sharing your typeform, so respondents who click the links will automatically have those options selected. Sound cool? Read on to find out how it’s done!
To successfully use this workaround in your typeforms, you’ll want to be comfortable reading JSON and editing link anchors. If that doesn’t sound like you, ask a developer colleague to help!
1. First, build a typeform using a Multiple Choice or Picture Choice question you’d like to link to. This typeform collects contact information for local newsletter subscriptions, and starts by asking people which news area interests them most:
This is a handy typeform because the user can grow their subscription base while also finding out what their followers prefer reading. In this example, we’ll create links that prefill each of the question’s answer options when clicked.
2. After you’ve set up any questions and Logic you’re planning on using, publish the typeform by clicking the Publish button in the top right-hand corner of the screen.
3. In your Create panel, open the Settings menu by clicking the gear icon.
Click the arrow next to Block references, under For Developers:
4. Set a custom question reference for your Multiple Choice or Picture Choice question. You can use a simple keyword like ‘topic’:
Click Save once done.
5. To create your custom links for each answer choice, you’ll add hash anchors to your typeform link in the following format:
In our example, <question-reference> is ‘topic’, so our anchors will follow this format:
6. Now, it’s time to find the answer references. Open the typeform definition in your browser with the following URL (use your typeform Unique Identifier instead of ‘ABCDEF’):
Paste this URL into your browser, and you'll see a block of code appear in your tab, as below.
Tips! To format the JSON code for better readability, our developers recommend this browser editor.
7. Find the reference strings for each answer by following the fields.0.properties.choices.*.ref path for the relevant question. The question’s fields value will include the reference you created in Step 4.
Here, you can see that each answer choice has its own reference string under ref:
8. Now, you have all of the necessary components to create links for each answer. Here are the four links created in this example, where each link prefills a different answer to the question ‘What is your favorite activity?’:
If you paste any of these links in your browser, the relevant answer will automatically be chosen, and the respondent will move on to the next question. Go on, try it out for yourself!
Once you’ve created the links, you can use them freely in hyperlinks on your own webpages.
9. If you have Multiple Selection enabled on your question, and you want to prefill more than one answer choice, all you have to do is separate the answer references in your URL with a comma, like so:
In this case, even though the specified answers will be prefilled, the respondent won’t automatically move to the next question. Instead, they’ll have to click the button at the end of the question to confirm their answer:
If you want to prefill the answers to more than one Multiple Choice or Picture Choice question, just create separate anchors for each question, and separate them in the URL with a & symbol.
In this example, we’ve added an anchor for a question with the reference tag ‘frequency’:
In this case, ‘frequency’ refers to the 4th question in the typeform, and the answer will be prefilled when your respondent gets to that question.
Note that respondents will always have to click Submit at the end of the form to confirm their answers and complete the typeform.