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

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

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

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

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

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

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