Digitalization of onboarding

Liquid Module: Create Custom Interfaces for Your Customer Journeys

|

When Standard Forms Aren't Enough

Sometimes your onboarding journey requires more than standard form fields. You might need:

  • Interactive data visualizations
  • Custom calculators or configurators
  • Drag-and-drop interfaces
  • Real-time integrations with external APIs
  • Branded experiences matching your design system

That's where the Liquid module comes in.

What is the Liquid Module?

The Liquid module is a flexible container that lets you embed custom HTML, CSS, and JavaScript directly into your Formulr journey. It provides:

  • Full control over the user interface
  • Access to collected data from previous steps
  • Ability to push data back to the journey
  • Integration with external APIs and services
  • Responsive design support

How It Works

1. Create Your Custom Interface

Write your HTML/CSS/JS code or use your favorite framework. Your interface can be as simple or complex as needed.

2. Access Journey Data

The Liquid module provides a JavaScript API to access all data collected in previous steps:

  • Read form field values
  • Access uploaded documents
  • Get user information
  • Retrieve calculated values

3. Push Data Back

Your custom interface can send data back to the journey, which can then be used in subsequent steps, documents, or integrations.

4. Navigate the Journey

Control navigation programmatically - validate data, show conditional content, or move to the next step when ready.

Use Cases

Property Configurator

A real estate developer creates an interactive 3D apartment configurator. Buyers select finishes, appliances, and options. Selections are captured and included in the reservation contract.

Investment Calculator

A wealth management firm builds a custom retirement calculator. Users adjust parameters and see projections in real-time. Final selections are saved for advisor review.

Document Comparison

An insurance company creates a side-by-side comparison tool for policy options. Users explore coverage levels interactively before selecting their plan.

Signature Pad

A delivery company implements a custom signature capture interface that works on mobile devices and integrates with their logistics system.

Technical Capabilities

  • Support for modern JavaScript frameworks (React, Vue, etc.)
  • CSS preprocessor support (SASS, LESS)
  • External library integration via CDN
  • Secure sandbox environment
  • Mobile-responsive by default
  • Accessibility (WCAG) support

Integration with Other Modules

The Liquid module seamlessly integrates with all other Formulr modules:

  • Receive data from form modules
  • Trigger document generation
  • Initiate electronic signatures
  • Pass data to API integrations
  • Control conditional logic

Get Started

Ready to build custom experiences? Try Formulr free for 14 days and explore the possibilities of the Liquid module.

Back to Blog