Working with Data Fields in booking forms (Advanced JSON storage)
Data Fields let you store structured arrays or objects — product lists, window configurations, service lines, measurements — inside a Hubhus lead. Once stored, the data is available in emails, templates, and automations via @foreach.
TL;DR
Declare in form: hh-data-fields.raw-input slug="df_xxx". Save with JS: jQuery('#df_xxx').val(JSON.stringify(data)). Access in templates: @foreach($lead->df_xxx as $item). Always save whenever your data array changes — use setInterval for auto-save safety.
Get started in 4 steps
Declare the Data Field in your booking form content: <hh-data-fields.raw-input slug="df_windows" required />. The slug must match your Hubhus Data Field configuration. This creates a hidden input with id="df_windows".
Build your data array in JavaScript — e.g. a list of windows with type, room, model, color, price. Each item should have a unique id.
Save to the field: jQuery('#df_windows').val(JSON.stringify(windows)). Always use jQuery inside Hubhus forms. Call this function every time your array changes.
Add auto-save: setInterval(function() { saveToField(); }, 3000); — ensures data is persisted even if the user navigates quickly.
Read more⌄
Save function with error handling
function saveToField() {
try {
var jsonString = JSON.stringify(windows);
if (typeof jQuery !== 'undefined') {
jQuery('#df_windows').val(jsonString);
}
} catch (e) {
console.error('JSON save error:', e);
if (typeof jQuery !== 'undefined') {
jQuery('#df_windows').val('[]');
}
}
}
// Auto-save every 3 seconds:
setInterval(function() { saveToField(); }, 3000);
Saving additional calculated fields
To also save a calculated total (e.g. sum of all prices) into a normal Hubhus field, add a hidden @input and update it in JS:
var total = 0;
windows.forEach(function(w) { total += w.price || 0; });
document.getElementById('windows-total-price').value = total;
Accessing data in emails and templates
@foreach($lead->df_windows as $w)
{{$w['room']}} - {{$w['type']}} ({{$w['model']}})
{{$w['color']}} - {{$w['price']}} kr
@endforeach
Supports: tables, summaries, installation plans, order overviews.
Best practices
- Use clear property names:
model,room,color,price - Add a unique
idto each item in the array - Validate data before saving — handle JSON errors gracefully
- Store calculated values (totals) explicitly in separate fields
- Never store HTML, DOM elements, or functions in the JSON
- Don't assume jQuery is ready immediately — check
typeof jQuery !== 'undefined'
Full JSON schema boilerplate — klar til Hubhus Data Field
Kopier dette direkte ind i Hubhus Campaign Settings → Fields → Data Field JSON schema. Tilpas titler, enums og required-liste til din use case.
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"title": "Windows",
"type": "array",
"items": {
"$ref": "#/$defs/window"
},
"$defs": {
"window": {
"type": "object",
"properties": {
"id": {
"type": "string",
"title": "Window ID",
"minLength": 1
},
"type": {
"type": "string",
"title": "Window Type",
"enum": [
"velux",
"roof-window",
"skylight",
"standard-frame"
]
},
"room": {
"type": "string",
"title": "Room Name",
"minLength": 1
},
"model": {
"type": "string",
"title": "Model Number",
"example": "GGL-42"
},
"color": {
"type": "string",
"title": "Color",
"enum": [
"white",
"black",
"wood",
"antracite"
]
},
"notes": {
"type": "string",
"title": "Notes"
},
"price": {
"type": "number",
"title": "Price",
"minimum": 0
}
},
"required": [
"id",
"type",
"room",
"model"
],
"additionalProperties": false,
"title": "Window"
}
},
"minItems": 0
}
Common searches
data field booking form • hh-data-fields raw input • df_ JSON • jQuery val JSON.stringify • @foreach data field • structured data lead
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article