> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alumio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Format to form URL encoded

> Converts the context data into form url encoded string.

export const FormField = ({property, label, required = false, diType, uiPatterns, children}) => {
  const patterns = Array.isArray(uiPatterns) ? uiPatterns : uiPatterns ? [uiPatterns] : [];
  return <div style={{
    margin: '1.5rem 0'
  }}>
      <div style={{
    display: 'flex',
    alignItems: 'baseline',
    flexWrap: 'wrap',
    gap: '0.5rem',
    marginBottom: '0.25rem'
  }}>
        <strong>{label}</strong>
        <span style={{
    fontSize: '0.7rem',
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.04em',
    color: required ? '#6241f5' : '#6b7280'
  }}>
          {required ? 'Required' : 'Optional'}
        </span>
      </div>

      <div>{children}</div>

      {diType || patterns.length > 0 ? <p style={{
    fontSize: '0.85rem',
    color: '#6b7280',
    marginBottom: 0
  }}>
          {diType ? <>
              See the <a href={`/references/${diType}`}>{diType}</a> reference.{' '}
            </> : null}
          {patterns.length > 0 ? <>
              Accepts a <a href={`/documentation/placeholders-and-patterns/patterns#${patterns[0]}`}>pattern</a>.
            </> : null}
        </p> : null}
    </div>;
};

Turns your data into a form URL encoded string, the `key=value&key=value` format that web forms and many APIs expect in a request body. Each field becomes a `name=value` pair, the pairs are joined with `&`, and any characters that are not safe in a URL are encoded. The only choice is how spaces are written, which differs between two web standards.

This documentation describes: [Schema](/schemas/serializer/form-urlencoded)

## Fields

<FormField property="encodingType" label="Encoding type">
  Which standard to follow when encoding spaces and special characters:

  * **RFC 1738 Spaces to +** writes spaces as a plus sign (`+`). This is the default and what most web forms expect.
  * **RFC 3986 Spaces to %20** writes spaces as `%20`, the stricter modern form some APIs require.
</FormField>

## Sample data

| Field         | Value                |
| ------------- | -------------------- |
| Encoding type | RFC 1738 Spaces to + |

Input:

```json theme={null}
{ "first_name": "Jane Doe", "city": "Den Bosch", "tags": ["new", "vip"] }
```

Output:

```json theme={null}
"first_name=Jane+Doe&city=Den+Bosch&tags%5B0%5D=new&tags%5B1%5D=vip"
```

Spaces became `+`, and the nested list `tags` was flattened into `tags[0]` and `tags[1]` (with the brackets encoded as `%5B` and `%5D`).

```json Configuration theme={null}
{
  "prototype": "form-urlencoded",
  "parameters": {
    "encodingType": 1
  }
}
```