> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://typeform.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://typeform.ferndocs.com/_mcp/server.

# URL Parameters

> Use URL parameters (hidden fields) to pass information to embedded typeforms for personalization and tracking.

> **Info**
>
> 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.

> **Warning**
>
> 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.

## Pass URL parameter values

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:

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

```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>
```

## Pass values from host page URL

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

In JavaScript:

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

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

## What's next?

Read more about how to pass callbacks.

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