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.
Preselect answers in an email embed
Typeform's email embed option provides code for embedding your typeform in the body of an email distribution application, like Mailchimp. Read more about launching your typeform from an email here.
Typeforms embedded in emails often start with Opinion Scale or Multiple Choice questions, like the form shown here:
Once a respondent clicks on one of the options, the rest of the typeform opens in another tab.
You can't preselect the answer to your typeform's first question in an email embed, since respondents need to choose an answer to this question to continue with the typeform. However, you can add preselected answers to other typeform questions.
1. Copy your typeform's email embed code and paste it into your preferred distribution app.
2. Follow the steps listed above in this guide to create and copy the references to the answer or answers you want to prefill.
3. Find your typeform URL in the email embed code. If your typeform's first question has multiple options, like an Opinion Scale, Multiple Choice, Picture Choice, or Yes/No question, the URL will appear multiple times, once for each option in the question.
For example, this is how the embed code looks for a typeform in which the first question is a Multiple Choice question with three answers. The typeform URL appears three times in the embed code, once for each Multiple Choice option:
Each URL references a different answer to the question - that way, when the respondent answers the typeform's first question in their email, the typeform can open in a new tab with the first question already answered.
4. Paste in the reference for the answer you wish to preselect after each URL in the embed code, following the guidelines in steps 8 and 9 above. For example, in this embed code, the first question (frequency) is embedded in the email. After a respondent clicks the answer corresponding to this link, their answer to a later question (topic) will be preselected in the typeform.
Continue adding references to the rest of the typeform URLs in your embed code, if applicable.