Creating a quotation line generator with visual presentation
This example shows how to build a quotation line generator that stores line items in a JSON data field and displays the result on a customer-facing webpage — combining a data field schema, a generator page, and a display page.
TL;DR
3 components: (1) A data field (slug: df_tilbud) with JSON schema to store quotation lines. (2) A generator webpage (internal admin page) with HTML form, CSS, and JS that lets users add/edit/delete line items and saves to the data field. (3) A display webpage (customer-facing) that reads the JSON data field and renders a professional quotation layout.
Get started in 3 steps
Create the data field (JSON schema)
Go to Campaign settings → Data fields → New data field. Name it "tilbud" with slug df_tilbud. Define a JSON schema with properties for each quotation line (e.g. product name, quantity, unit price, description). This field stores the full array of line items as a JSON string at the lead level. If you use a different slug, update all references in the subsequent code files.
Create the generator webpage (admin tool)
Go to Campaign settings → Web pages → + New page template. Name it "generator". Set access to logged-in users only. Build the HTML form (product name, quantity, price, description inputs), CSS styling, and JavaScript that: reads existing lines from the data field, renders them in an editable table, handles add/edit/delete, and saves the updated JSON array back to the df_tilbud field on save.
Create the display webpage (customer view)
Create a second webpage named "Tilbudsvisning" (Quotation View). This page reads the data field value, parses the JSON array, and renders a professional formatted quotation with company info, lead details, line items table (with totals), and call-to-action. Access: public with URL (so the customer can open it via their unique lead link). Send the URL via email placeholder {{page.url}} in a Hubhus email template.
Common searches
quotation generator • quote builder • offer page • data field JSON • tilbudsside • line items • product table
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