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

here
Signup

Preselect answers through form links (for advanced users)

Although you can use Hidden Fields to prefill content in form 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 form, 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 forms, you’ll want to be comfortable reading JSON and editing link anchors. If that doesn’t sound like you, ask a developer colleague for help!

1. First, build a form using a Multiple Choice or Picture Choice question you’d like to link to. This form collects contact information for local newsletter subscriptions, and starts by asking people which news area interests them most.

prefill1.png

This is a handy form 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 form by clicking the Publish button.

2024-07-10_10-29-50.png

3. In your Create panel, open the Settings menu by clicking the gear icon.

2024-07-10_10-29-50.png

Click Block references.

2024-04-05_11-57-28.png

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.

2024-04-05_11-59-22.png

5. To create your custom links for each answer choice, you’ll add hash anchors to your form link in the following format.

#answers-<question-reference>=<answer-reference>

In our example, <question-reference> is ‘topic’, so our anchors will follow this format.

#answers-topic=<answer-reference>

6. Now, it’s time to find the answer references. Open the form definition in your browser with the following URL (use your form Unique Identifier instead of ‘ABCDEF’).

https://form.typeform.com/forms/ABCDEF

Paste this URL into your browser, and you'll see a block of code appear in your tab, as below.

prefill0.png

HC_BobRoss_ilu_cropped.png
Tip! 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:

prefill6.png

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?’.

  • https://form.typeform.com/to/qRpyq4IY#answers-topic=3a4c83a3-17a9-4758-a46e-e09b5266db47
  • https://form.typeform.com/to/qRpyq4IY#answers-topic=9e8a2af1-66a5-4c8a-a96d-52152709d80a
  • https://form.typeform.com/to/qRpyq4IY#answers-topic=dcaf2643-6908-4af5-a327-a4f681dfc5f8
  • https://form.typeform.com/to/qRpyq4IY#answers-topic=0360b068-8267-4bd9-a575-41d55db9dc36

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:

https://form.typeform.com/to/qRpyq4IY#answers-topic=9e8a2af1-66a5-4c8a-a96d-52152709d80a,dcaf2643-6908-4af5-a327-a4f681dfc5f8

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.

prefill7.png

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’:

https://form.typeform.com/to/qRpyq4IY#answers-topic=9e8a2af1-66a5-4c8a-a96d-52152709d80a&answers-frequency=b9904e42-9543-414d-b8f4-a9b3048240b0

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 form.

Preselect answers in an email embed

Typeform's email embed option provides code for embedding your form 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.

statichf5.png

Once a respondent clicks on one of the options, the rest of the form opens in another tab.

You can't preselect the answer to your form's first question in an email embed, since respondents need to choose an answer to this question to continue with the form. However, you can add preselected answers to other form questions. 

1. Copy your form'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 form URL in the email embed code. If your form'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 form in which the first question is a Multiple Choice question with three answers. The form URL appears three times in the embed code, once for each Multiple Choice option.

threelevels.png

Each URL references a different answer to the question - that way, when the respondent answers the form's first question in their email, the form 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 form.

preselectemail.png

Continue adding references to the rest of the form URLs in your embed code, if applicable. 

HC_Warning_ilu_cropped.png
Warning: The Typeform team cannot provide support or troubleshooting tips for custom embed code, such as adding answer references. If you have questions about adapting the default Typeform embed code to your organization's needs, we recommend consulting with a developer colleague. 

Tap into our community knowledge