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

# Form Integration

> How to integrate DataGlue with forms for automatic field population and data capture.

# Form Integration

DataGlue automatically populates form fields with stored visitor data, reducing friction and improving conversion rates.

## Basic Setup

Add `glue` attributes to your form fields:

```html theme={null}
<form>
    <input type="text" glue="glue_fname" placeholder="First Name" />
    <input type="email" glue="email" placeholder="Email Address" />
    <input type="hidden" glue="glue_initial_utm_source" />
    <button type="submit">Submit</button>
</form>
```

## Selector Patterns

DataGlue recognizes multiple selector patterns:

### Direct Glue Attributes

```html theme={null}
<input glue="email" />
<input glue="glue_fname" />
```

### ID-based Selectors

```html theme={null}
<input id="glue_email" />
<input id="field_glue_fname" />
```

### Class-based Selectors

```html theme={null}
<div class="field_email">
    <input /> <!-- Automatically populated -->
</div>
```

## Fillout Integration

For Fillout forms, DataGlue automatically adds data attributes:

```html theme={null}
<!-- Before DataGlue -->
<div data-fillout-id="form123"></div>

<!-- After DataGlue processes -->
<div data-fillout-id="form123"
     data-glue_email="user@example.com"
     data-utm_source="linkedin">
</div>
```

## Advanced Configuration

### Multiple Forms

```html theme={null}
<!-- Different forms can use the same data -->
<form id="newsletter">
    <input glue="email" />
</form>

<form id="contact">
    <input glue="email" /> <!-- Same email auto-populated -->
</form>
```

### Conditional Fields

```javascript theme={null}
// Show/hide fields based on visitor data
if (window.glue.storage.get('glue_user_tier') === 'premium') {
    document.getElementById('premium-fields').style.display = 'block';
}
```

## Best Practices

1. **Use Consistent Naming**: Stick to `glue_` prefix for custom attributes
2. **Test Selectors**: Verify form fields populate correctly
3. **Handle Missing Data**: Provide fallbacks for empty fields
4. **Privacy Compliance**: Only collect necessary information