Input Masking

Features

• Real-time formatting — Characters are masked as the user types, providing instant visual feedback
• Invalid character prevention — Prevents entry of characters that do not match the mask position (e.g., letters in a phone number slot)
• Paste handling — Pasted values are stripped of formatting and re-applied through the mask engine
• Completeness validation — On submit, verifies that every mask position has been filled
• Clean data storage — Formatting characters are stripped before the value is sent to Salesforce
• Predefined masks — Ships with 12 common masks for US phone, SSN, EIN, credit card, postal codes, dates, currency, and percentage
• Custom patterns — Define your own mask patterns using #, A, * placeholders and literal characters

Predefined Masks

The following predefined masks are available out of the box. Use the Name value in your configuration to reference them.

Custom Mask Syntax

You can define your own masks using these placeholder characters:

Configuration

Configure input masking through the Plugin_Configuration__c JSON field on each FormField record, or use data-mask attributes directly on the field element.

JSON Configuration (Plugin_Configuration__c)

{
  "inputMasking": {
    "fields": {
      "Phone__c": {
        "mask": "us-phone",
        "placeholder": "(___) ___-____"
      },
      "SSN__c": {
        "mask": "ssn",
        "placeholder": "___-__-____"
      },
      "LicensePlate__c": {
        "mask": "AAA-####",
        "placeholder": "___-____"
      }
    }
  }
}

Data Attribute Usage

Alternatively, configure masks directly on fields using data-mask attributes. The plugin reads these at form load time.

<!-- Predefined mask -->
<input type="text" data-mask="us-phone" data-mask-placeholder="(___) ___-____" />

<!-- Custom mask -->
<input type="text" data-mask="AA-####-**" data-mask-placeholder="__-____-__" />

Public API

The Input Masking plugin exposes a public API on the QuikFormsInputMasking global object for programmatic access:

// Apply a mask to a raw value
QuikFormsInputMasking.applyMask('5551234567', 'us-phone');
// Returns: "(555) 123-4567"

// Strip mask formatting from a value
QuikFormsInputMasking.stripMask('(555) 123-4567', 'us-phone');
// Returns: "5551234567"

// Check if a masked value is complete (all positions filled)
QuikFormsInputMasking.isMaskComplete('(555) 123-____', 'us-phone');
// Returns: false

// Resolve a mask name to its pattern string
QuikFormsInputMasking.resolveMask('ssn');
// Returns: "###-##-####"

// Programmatically attach a mask to an input element
var input = document.getElementById('my-field');
QuikFormsInputMasking.attachMask(input, 'us-phone');

// Remove a mask from an input element
QuikFormsInputMasking.detachMask(input);

Lifecycle Hooks

The Input Masking plugin registers the following hooks with the QuikForms plugin framework:

Range Slider

Features

• Configurable bounds — Set min, max, step, and unit label for any numeric range
• Floating value bubble — A tooltip follows the slider thumb, showing the current value and unit
• Optional tick marks — Display reference marks at configurable intervals along the track
• Color-fill track — The filled portion of the track uses --qf-highlight-color from your form's theme
• Touch-friendly — Full touch support with appropriate ARIA attributes for screen readers
• Theme integration — Inherits QuikForms CSS variables for colors, border radius, and font sizing

Configuration

Configure the Range Slider through the Plugin_Configuration__c JSON field on the FormField record. The following properties are available:

Examples

NPS Score (0–10)

{
  "min": 0,
  "max": 10,
  "step": 1,
  "unit": "pts",
  "defaultValue": 5,
  "showTicks": true,
  "tickInterval": 1
}

Budget Selector ($0–$100,000)

{
  "min": 0,
  "max": 100000,
  "step": 5000,
  "unit": "$",
  "defaultValue": 25000,
  "showTicks": true,
  "tickInterval": 25000
}

Priority Level (1–5)

{
  "min": 1,
  "max": 5,
  "step": 1,
  "unit": "",
  "defaultValue": 3,
  "showTicks": true,
  "tickInterval": 1
}

Satisfaction Percentage (0–100%)

{
  "min": 0,
  "max": 100,
  "step": 5,
  "unit": "%",
  "defaultValue": 50,
  "showTicks": true,
  "tickInterval": 25
}

Smart Validation

Features

• Email typo detection — Catches common domain misspellings (e.g., gmial.com → "Did you mean gmail.com?") with clickable correction
• Phone validation — Validates that phone numbers contain at least 10 digits after stripping formatting
• Character counters — Displays live character counts on text areas with color-coded warnings as limits approach
• Inline error display — Validation errors appear directly beneath the field with smooth slide-in animations
• Cross-field rules — Enforce relationships between fields: matching values, date ordering, and conditional requirements
• Server-side regex enforcement — The Apex validator applies custom regex patterns that cannot be bypassed by the client

Cross-Field Rules

Cross-field rules enforce relationships between multiple form fields. Configure them in the crossFieldRules array:

{
  "smartValidation": {
    "crossFieldRules": [
      {
        "type": "match",
        "fields": ["Email__c", "ConfirmEmail__c"],
        "message": "Email addresses must match"
      },
      {
        "type": "dateAfter",
        "fields": ["StartDate__c", "EndDate__c"],
        "message": "End date must be after start date"
      },
      {
        "type": "requiredIf",
        "field": "CompanyName__c",
        "condition": {
          "field": "AccountType__c",
          "operator": "equals",
          "value": "Business"
        },
        "message": "Company name is required for business accounts"
      }
    ]
  }
}

Rule Types

Character Limits

Configure character limit warnings for text area fields:

{
  "smartValidation": {
    "characterLimits": {
      "Description__c": {
        "max": 500,
        "warnAt": 400,
        "showCounter": true
      },
      "Notes__c": {
        "max": 1000,
        "warnAt": 800,
        "showCounter": true
      }
    }
  }
}

The counter text changes color based on proximity to the limit: default color up to the warnAt threshold, amber between warnAt and max, and red when the limit is exceeded.

Server-Side Validation

The Apex component of Smart Validation implements IQuikFormsFieldValidator with SYNC_ONLY validation mode. This means all regex rules are enforced server-side during form submission and cannot be bypassed by disabling JavaScript.

Custom Regex Rules

Define custom regex patterns in the Apex plugin configuration:

{
  "serverValidation": {
    "regexRules": [
      {
        "field": "ZipCode__c",
        "pattern": "^\\d{5}(-\\d{4})?$",
        "message": "Please enter a valid US zip code (e.g., 90210 or 90210-1234)"
      },
      {
        "field": "EmployeeId__c",
        "pattern": "^EMP-\\d{6}$",
        "message": "Employee ID must be in the format EMP-000000"
      },
      {
        "field": "Website__c",
        "pattern": "^https?://[\\w.-]+\\.[a-zA-Z]{2,}(/.*)?$",
        "message": "Please enter a valid URL starting with http:// or https://"
      }
    ]
  }
}

Lifecycle Hooks

Submission Enrichment

Features

• Metadata stamping — Automatically populates fields with the submission timestamp, browser user agent string, submitter IP address, and HTTP referrer URL
• Case transformations — Converts field values to uppercase, lowercase, or titlecase before record insertion
• Follow-up Task creation — Creates a Salesforce Task linked to the newly created record with configurable subject, description, and due date
• Pre-submission enrichment — All metadata stamping and case transforms run in the onBeforeSubmit phase, ensuring data is clean before the record is created
• Post-submission actions — Task creation runs in onAfterSubmit so it has access to the new record ID for the WhatId relationship

Configuration

Full Configuration Example

{
  "submissionEnrichment": {
    "timestampField": "Submitted_At__c",
    "userAgentField": "Browser_Info__c",
    "ipAddressField": "Submitter_IP__c",
    "referrerField": "Referrer_URL__c",
    "caseTransformFields": {
      "FirstName": "titlecase",
      "LastName": "titlecase",
      "Company": "titlecase",
      "State__c": "uppercase"
    },
    "createFollowUpTask": true,
    "taskSubject": "Review new form submission",
    "taskDaysUntilDue": 3
  }
}

Metadata Stamping Only

{
  "submissionEnrichment": {
    "timestampField": "Submitted_At__c",
    "userAgentField": "Browser_Info__c",
    "ipAddressField": "Submitter_IP__c",
    "referrerField": "Referrer_URL__c"
  }
}

Case Transforms Only

{
  "submissionEnrichment": {
    "caseTransformFields": {
      "FirstName": "titlecase",
      "LastName": "titlecase",
      "Email": "lowercase",
      "State__c": "uppercase"
    }
  }
}

Task Creation Only

{
  "submissionEnrichment": {
    "createFollowUpTask": true,
    "taskSubject": "Follow up on lead submission",
    "taskDaysUntilDue": 5
  }
}

Lifecycle Hooks

External Verification

How It Works

External Verification follows a three-step flow:

1. JavaScript trigger (onFieldBlur) — When a configured field loses focus, the JS hook collects the field value and verification type, then calls QuikFormsPlugins.callServer() to invoke the Apex handler.
2. Apex callout (executeCallout) — The Apex class makes an HTTP request to the configured external API endpoint (or Named Credential), passing the field value. It parses the response and returns a structured result.
3. JavaScript display — The JS hook receives the callout response and displays a verification badge next to the field: a green checkmark for verified, a yellow warning for uncertain, or a red cross for invalid.

Configuration

Full Configuration Example

{
  "externalVerification": {
    "endpoint": "https://api.verifyservice.com/v1",
    "timeoutMs": 3000,
    "verificationTypes": {
      "email": "/verify/email",
      "phone": "/verify/phone",
      "domain": "/verify/domain"
    },
    "fields": [
      {
        "fieldName": "Email__c",
        "verificationType": "email",
        "debounceMs": 500
      },
      {
        "fieldName": "Phone__c",
        "verificationType": "phone",
        "debounceMs": 300
      },
      {
        "fieldName": "Website__c",
        "verificationType": "domain",
        "debounceMs": 500
      }
    ]
  }
}

Using Named Credentials

For production deployments, use a Named Credential instead of a raw endpoint URL. This approach stores authentication tokens securely and allows Salesforce to manage credential rotation.

{
  "externalVerification": {
    "namedCredential": "callout:VerifyServiceCredential",
    "timeoutMs": 5000,
    "fields": [
      {
        "fieldName": "Email__c",
        "verificationType": "email",
        "path": "/verify/email"
      }
    ]
  }
}

API Contract

The External Verification plugin expects the external API to return responses in the following format:

Request (sent by Apex)

{
  "value": "[email protected]",
  "type": "email",
  "metadata": {
    "formId": "a0B5f00000ABC123",
    "fieldName": "Email__c"
  }
}

Response (expected from API)

{
  "status": "verified",
  "confidence": 0.98,
  "details": {
    "deliverable": true,
    "disposable": false,
    "freeProvider": true
  },
  "message": "Email address is valid and deliverable"
}

The status field determines the badge displayed to the user:

Lifecycle Hooks

Progress Indicator

Features

• Three display modes — Choose between a progress bar, completion dots, or a numeric fraction to match your form's design
• Required field tracking — Automatically counts only visible, required fields; skips hidden or optional fields
• Dependency awareness — Respects QuikForms dependency visibility rules; fields hidden by dependency logic are excluded from the count
• Animated transitions — Smooth CSS transitions when the progress value changes
• Optional sticky positioning — Pin the indicator to the top of the form so it remains visible as the user scrolls
• Completion celebration — Optional confetti-style animation when all required fields are filled

Display Modes

Bar Mode

Renders a horizontal progress bar that fills left-to-right as fields are completed:

  3 of 8 required fields completed
  [============-----------------] 37%

Dots Mode

Shows one dot per required field. Filled dots indicate completed fields:

  Progress: 3 / 8
  [*] [*] [*] [ ] [ ] [ ] [ ] [ ]

Fraction Mode

Displays a simple numeric fraction with no graphical element:

  3 / 8 completed

Configuration

Configuration Example

{
  "progressIndicator": {
    "mode": "bar",
    "sticky": true,
    "showLabel": true,
    "celebrateOnComplete": true,
    "position": "top"
  }
}

CSS Variables

The Progress Indicator inherits the following QuikForms CSS variables for theme consistency:

/* Progress bar fill color */
--qf-highlight-color: #2563eb;

/* Progress bar track background */
--qf-input-bg: rgba(30, 35, 55, 0.4);

/* Text color for labels */
--qf-text-color: #e2e8f0;

/* Border radius for bar corners */
--qf-border-radius: 8px;

/* Font size for labels */
--qf-font-size: 0.875rem;

Lifecycle Hooks

Confirmation Step

Features

• Read-only summary — Displays all visible field values in a clean, read-only format organized by form sections
• Smart field filtering — Skips hidden fields, empty optional fields, and internal-only fields automatically
• Rich formatting — Formats checkboxes as Yes/No, renders masked field values in their display format, lists multi-select values as comma-separated text, and shows file upload names
• Accessible modal — Implements a focus trap to keep keyboard navigation within the modal, supports Escape key to close, and includes proper ARIA attributes (role="dialog", aria-modal="true", aria-labelledby)
• Theme integration — Inherits QuikForms CSS variables for a consistent look with the rest of the form
• Edit navigation — Each section in the summary includes an "Edit" link that closes the modal and scrolls the user back to the relevant form section

Two-Phase Flow

The Confirmation Step plugin transforms the submission process into a two-phase flow:

Phase 1: Review

1. User clicks the Submit button
2. The onValidate hook intercepts the submission and runs all other plugin validations first
3. If validation passes, the plugin builds a summary of all field values and displays it in a modal overlay
4. The user reviews their entries. Each section has an "Edit" link to return to the form
5. Two buttons are displayed: Go Back (closes modal, returns to form) and Confirm & Submit

Phase 2: Submit

1. User clicks "Confirm & Submit"
2. The plugin sets an internal flag to bypass the confirmation on the next submission cycle
3. The form submission proceeds normally through the remaining plugin hooks and Apex handlers
4. The modal is closed and the form shows the standard success message

Configuration Example

{
  "confirmationStep": {
    "title": "Review Your Submission",
    "subtitle": "Please review the information below before submitting.",
    "confirmButtonText": "Confirm & Submit",
    "cancelButtonText": "Go Back",
    "showEditLinks": true,
    "excludeFields": ["Internal_Notes__c", "Hidden_Tracking__c"]
  }
}

CSS Variables

The Confirmation Step modal inherits QuikForms CSS variables:

/* Modal overlay background */
--qf-modal-overlay: rgba(0, 0, 0, 0.6);

/* Modal content background */
--qf-card-bg: rgba(30, 35, 55, 0.95);

/* Modal border */
--qf-border-color: rgba(255, 255, 255, 0.1);

/* Section header color */
--qf-highlight-color: #2563eb;

/* Text colors */
--qf-text-color: #e2e8f0;
--qf-text-muted: #94a3b8;

/* Button styles */
--qf-btn-primary-bg: linear-gradient(135deg, #1e5ba8, #2563eb);
--qf-btn-secondary-bg: rgba(255, 255, 255, 0.1);

Lifecycle Hooks