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

<input glue="email" />
<input glue="glue_fname" />

​
ID-based Selectors

<input id="glue_email" />
<input id="field_glue_fname" />

​
Class-based Selectors

<div class="field_email">
    <input /> <!-- Automatically populated -->
</div>

​
Fillout Integration

For Fillout forms, DataGlue automatically adds data attributes: 
<!-- 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

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

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