Use URL Parameters in embedded typeforms

NOTE: Form URL parameters were formerly known as Hidden fields.

You can use URL parameters to pass information to a typeform embedded on your site.

URL parameters are key-value pairs that contain pre-existing information about your respondents, which you can use to customize the form's content and flow before they begin filling it out — for example, to gather more information about an individual respondent.

URL parameter values are pre-filled when respondents start the form and cannot be populated with information they enter during the form (variables handle that instead). Unlike query parameters, URL parameters provide specific information the form is expecting to receive, such as a first name for personalized greetings.

You can add URL parameter values manually to the form's URL before sharing it, or use a customer relationship management system (like Salesforce) or a marketing automation platform (like Mailchimp) to populate them automatically. In either case, you'll configure URL parameters when you create your typeform.

NOTE: You are responsible for any information you share with URL parameters. Recording and transmitting identifying information, like email addresses, is prohibited by some services (e.g., Google Analytics). Make sure the way you use URL parameters stays within the laws of your country and the terms and conditions of any service you are using with Typeform.

When you embed a typeform, you need to pass URL parameters into the embed itself. The embed will handle passing the values correctly in the typeform URL.

In JavaScript:

import { createWidget } from '@typeform/embed'
import '@typeform/embed/build/css/widget.css'

createWidget('<form-id>', {
  container: document.getElementById('wrapper'),
  hidden: {
    full_name: 'John Doe',
    email: 'john@example.com',
  },
})

Or via HTML:

<div data-tf-widget="<form-id>" data-tf-hidden="full_name=John Doe,email=john@example.com"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

You can also configure the embed to read URL parameter values from the host page query parameters.

In JavaScript:

import { createWidget } from '@typeform/embed'
import '@typeform/embed/build/css/widget.css'

createWidget('<form-id>', {
  container: document.getElementById('wrapper'),
  transitiveSearchParams: ['full_name', 'email'],
})

Or via HTML:

<div data-tf-widget="<form-id>" data-tf-transitive-search-params="full_name,email"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

The typeform will load values from query params of you page where you embedded it. For example if your typeform is embedded at https://example.com/embed.html, you can use a URL with query params like this:

https://example.com/embed.html#full_name=John%20Doe&email=john%40example.com&age=18

The embed will pass URL parameters full_name and email to the typeform. Query param age will be ignored.

Read more about how to pass callbacks.

Or check out what other open-source developers have created on the Community projects page.