Input Masking

Features

• Real-time formatting. Characters are formatted as the visitor types, and the mask's literal characters, such as parentheses and hyphens, are inserted for them.
• Invalid character prevention. A character that does not fit the mask position, such as a letter in a phone number slot, is not accepted.
• Paste handling. Pasted text is stripped of its formatting and run through the mask.
• Completeness check. On submit, a masked field that has a value but not every position filled blocks the submission with a message such as "Phone is incomplete. Expected format: (000) 000-0000 (7 of 10 characters entered)".
• Clean data. When the mask is complete, the value submitted is only the characters the visitor typed: (555) 123-4567 is stored as 5551234567. The field on the page keeps showing the formatted value.
• Predefined masks. Thirteen common masks cover US phone, SSN, EIN, credit card, postal codes, dates, times, currency, and percentage.
• Custom patterns. Define your own masks using #, A, and * 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

Input Masking can take its list of masked fields from three places. When two of them name the same field, the one higher in this list wins:

1. A data attribute on the field's input
2. The plugin record (recommended)
3. A global config object set by page code

The plugin record (recommended)

Put the JSON in the Configuration Schema field of the plugin's Input_Masking record (see Configuring a Plugin). It is the only one of the three that an admin can set without code, and it works on both Experience Cloud and Salesforce Sites:

{
  "fields": {
    "phone":        { "mask": "us-phone", "label": "Phone" },
    "ssn":          { "mask": "ssn",      "label": "Social Security Number" },
    "licensePlate": { "mask": "AAA-####", "label": "License Plate" }
  }
}

Each key under fields is a Field ID. An entry takes mask (a predefined name or a pattern) and an optional label used in the incomplete-value message, which otherwise uses the field's own label. A plain string also works: "phone": "us-phone". A mask attaches only to a single-line text input, and it limits the input to the mask's length.

The placeholder is generated from the mask for you: # becomes 0 and A or * becomes _, so us-phone shows (000) 000-0000.

An entry also accepts a required flag, but the plugin does not enforce it. To make a masked field required, turn on Required Field in the field editor, as for any other field.

Data attributes

Page code can set data-mask, and optionally data-mask-label, on a field's input by the time the form finishes loading. The plugin looks for these in the page document, so they apply to Salesforce Sites forms only. On Experience Cloud each field sits in a shadow root that the page document cannot see into.

// On a Salesforce Sites form a field's input has the id 'field-' + its Field ID
var phone = document.getElementById('field-phone');
phone.setAttribute('data-mask', 'us-phone');            // predefined mask
phone.setAttribute('data-mask-label', 'Phone');

document.getElementById('field-serial')
  .setAttribute('data-mask', 'AA-####-**');              // custom mask

A global config object

Page code, such as another plugin's script, can set window.QuikFormsInputMaskingConfig before the form loads, using the same fields shape. Use it when the mask depends on something only the page knows.

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: "###-##-####"

// Attach a mask. Both take a QuikForms FIELD ID, not a DOM element:
// the plugin finds the input through QuikFormsPlugins.getFieldElement.
QuikFormsInputMasking.attachMask('phone', 'us-phone', { label: 'Phone' });

// Remove a mask from that field
QuikFormsInputMasking.detachMask('phone');

Lifecycle Hooks

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

Range Slider

Features

• Configurable bounds. Set the minimum, maximum, step, and unit label for any numeric range.
• Floating value bubble. A bubble follows the slider thumb while the visitor drags it, showing the current value and unit. The value is also shown below the slider at all times, with the minimum and maximum at either end.
• Optional tick marks. Labeled reference marks can appear at an interval you choose.
• Color-fill track. The filled part of the track, the thumb, and the bubble use your form's highlight color (--qf-highlight-color).
• Touch and keyboard friendly. The slider is built on a native range input, so touch, arrow keys, and screen readers work, with ARIA values that include the unit.
• Theme integration. The slider also uses the form's input background, input border, and text colors and its small corner radius, through the QuikForms CSS variables.

Configuration

After the plugin is deployed and active, set a field to use it:

1. Open the field in the field editor, from QuikField Manager or from the field's edit button in the form builder.
2. On the Options & Structure tab, set Plugin Field Type to Range Slider (Interactive). The list shows field types from active plugins, on the Professional plan.
3. Plugin Configuration (JSON) fills in with the slider's defaults. Change them using the properties below. The editor checks that the JSON is valid before it saves.
4. Save the field.

The field's own field type is kept and is used wherever the plugin is not active. If the plugin is deactivated, the picker shows the setting as rangeSlider (plugin not active) so it is not lost when the field is saved.

The slider always holds a value, starting at defaultValue, so a required slider field is always answered. A field set up before Plugin Configuration existed can hold the same JSON in its Description / Help Text instead. Plugin Configuration is read first, and it is the better place: a description is translated on a multi-language form, while Plugin Configuration is delivered exactly as stored.

Examples

Each example is the complete contents of a field's Plugin Configuration (JSON).

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 suggestions. When the visitor leaves an email field whose domain is one or two letters away from a common provider (for example gmial.com), the plugin shows "Did you mean ...@gmail.com?". Clicking the suggestion applies it. The providers are gmail.com, yahoo.com, hotmail.com, outlook.com, aol.com, icloud.com, mail.com, protonmail.com, live.com, and msn.com.
• Email and phone checks. An email field must hold a well-formed address, and a phone field must contain at least 10 digits once formatting is ignored. Both are checked in the browser and again on the server.
• Character counters. A live "120 / 500 characters" count appears under a field, turning amber as it nears the limit and red at the limit. A value over the limit blocks the submit.
• Inline messages. Messages appear under the field when the visitor leaves it and clear as soon as they change it.
• Cross-field rules. Rules enforce relationships between fields: matching values, date ordering, and conditional requirements.
• Server-side regex rules. The Apex validator applies regex patterns you configure, on the server.

Which fields the email and phone checks cover

The checks apply to every matching field on every form in your org as soon as the plugin is active. There is no per-form switch. A field counts as an email field when the Salesforce field it maps to has "email" in its API name (Email, SuppliedEmail, Personal_Email__c), and as a phone field when it has "phone" (Phone, MobilePhone). In the browser, a field whose label contains "Email" or "Phone" also counts.

Empty fields always pass. Whether a field is required is decided by the field's own Required Field setting, not by this plugin.

Phone minimum

The phone check requires 10 digits unless you set phoneMinDigits at the top level of the plugin record's Configuration Schema. Many international numbers are shorter than 10 digits, so lower it, or set it to 0 to turn the phone check off:

{
  "phoneMinDigits": 8
}

phoneMinDigits applies to both checks: the one in the browser, which shows its message when the visitor leaves the field and blocks the submit, and the one on the server.

Cross-Field Rules

Cross-field rules enforce relationships between form fields. Add them to the plugin record's Configuration Schema as a crossFieldRules array at the top level. Fields are named by Field ID:

{
  "crossFieldRules": [
    {
      "type": "match",
      "fields": ["email", "confirmEmail"],
      "message": "Email addresses must match"
    },
    {
      "type": "dateAfter",
      "fields": ["startDate", "endDate"],
      "message": "End date must be after start date"
    },
    {
      "type": "requiredIf",
      "field": "companyName",
      "condition": {
        "field": "accountType",
        "operator": "equals",
        "value": "Business"
      },
      "message": "Company name is required for business accounts"
    }
  ]
}

Rule Types

A rule that fails blocks the submit and shows its message. Cross-field rules and character limits run in the browser only. The server checks email, phone, and the regex rules below.

Character Limits

Configure character limits for text fields in a characterLimits object at the top level, keyed by Field ID:

{
  "characterLimits": {
    "description": {
      "max": 500,
      "warnAt": 400,
      "showCounter": true
    },
    "notes": 1000
  }
}

A plain number sets max. warnAt defaults to 80% of max, and showCounter defaults to true. The counter is the default color below warnAt, amber from warnAt, and red once the limit is reached. A value longer than max shows "Maximum 500 characters allowed (512 entered)." and blocks the submit.

Server-Side Validation

The Apex class implements IQuikFormsFieldValidator. QuikForms runs it on the server for each submitted field of every form, once the form's own checks (required fields and each field's Validation Regex) have passed. Fields hidden by a dependency rule and custom HTML fields are skipped. Its plugin record sets Validation Mode to Sync, so QuikForms calls its validateSync method during the submission.

A failed check refuses the submission, and its message comes back on that field in the same way as a failed Required Field or Validation Regex check. The server checks are:

• Email: the value must be a well-formed address. Message: "Please enter a valid email address."
• Phone: the value must contain at least phoneMinDigits digits (10 unless configured). Message: "Phone number must contain at least 10 digits."
• Custom regex rules, below.

Custom Regex Rules

Add regex rules to the plugin record's Configuration Schema as a customRegexRules array at the top level:

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

• field is a Field ID, or the API name of the Salesforce field that form fields map to. A rule without field applies to every filled field on every form, so always set it.
• pattern must match the whole value, as if it began with ^ and ended with $. That differs from a field's Validation Regex setting, which passes when the pattern is found anywhere in the value. Patterns use Apex (Java) regex syntax, and every backslash is written twice inside JSON.
• message is what the visitor sees. Without it, the visitor sees "Value does not match the required pattern."
• A pattern that does not compile is skipped rather than blocking every submission.
• The rules run on the server only, so the visitor sees the message after pressing Submit.
• The shape {"serverValidation": {"regexRules": [ ... ]}} is also accepted.

A single field can carry its own rules: put a customRegexRules array in the field's Plugin Configuration (JSON), and it is used for that field instead of the plugin record's rules. The same box can hold {"fieldType": "email"} or {"fieldType": "phone"} to have the server treat a field as an email or phone field whatever it maps to. The box is on the field editor's Options & Structure tab.

Lifecycle Hooks

Submission Enrichment

Features

• Metadata stamping. The plugin writes the submission time, the visitor's browser user agent, their IP address, and the HTTP referrer into fields you name.
• Case transformations. Answers are converted to uppercase, lowercase, or title case before the record is created.
• Follow-up Task creation. The plugin creates a Salesforce Task related to the new record, with a subject and due date you configure.
• Runs before the record exists. Stamping and case changes happen in onBeforeSubmit, so the record is created with them in place.
• Runs after the record is saved. Task creation happens in onAfterSubmit, when the new record's ID is known.

Submission handlers also run when a survey is submitted. There the record is the survey response (Survey__c), so the fields you name must exist on that object.

Configuration

Put these keys at the top level of the plugin record's Configuration Schema. Every key is optional.

How fields are named

• The four stamping keys name a field on the form's object by its Salesforce API name. They can instead name a Field ID on the form, which writes to the field that form field maps to. On a multi-object form, only a Field ID is written.
• The keys of caseTransformFields are always Field IDs, because they change an answer the visitor gave. The changed value goes to the field that form field maps to.

Experience Cloud forms

The IP address and referrer are filled on Experience Cloud forms as on Salesforce Sites forms. The user agent is filled on an Experience Cloud form only when the form's Log User Browser Info setting is on. The timestamp, case transformations, and the follow-up Task work on both.

Full Configuration Example

{
  "timestampField": "Submitted_At__c",
  "userAgentField": "Browser_Info__c",
  "ipAddressField": "Submitter_IP__c",
  "referrerField": "Referrer_URL__c",
  "caseTransformFields": {
    "firstName": "titlecase",
    "lastName": "titlecase",
    "company": "titlecase",
    "state": "uppercase"
  },
  "createFollowUpTask": true,
  "taskSubject": "Review new form submission",
  "taskDaysUntilDue": 3
}

Metadata Stamping Only

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

Case Transforms Only

{
  "caseTransformFields": {
    "firstName": "titlecase",
    "lastName": "titlecase",
    "email": "lowercase",
    "state": "uppercase"
  }
}

Task Creation Only

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

Where the Task is related

The Task is related to the new record through its Related To field (WhatId). A Task cannot be related to a Lead or a Contact that way, so on a Lead or Contact form no Task is created and the submission still succeeds. On a multi-object form the Task is related to the parent record.

Lifecycle Hooks

External Verification

How It Works

External Verification follows a three-step flow:

1. JavaScript trigger (onFieldBlur). When a configured field loses focus and has a value, the browser code waits for the field's debounceMs, if set, then calls QuikFormsPlugins.callout() with the value and the field's verification type.
2. Apex callout (executeCallout). The Apex class sends the value to the configured endpoint or Named Credential and returns the service's JSON response to the browser.
3. Result display. The note under the field reads "Verifying..." while it waits, then shows a check mark or a warning sign with a message (see API Contract).

The field's value is sent to the service you configure, outside Salesforce. Choose a service your data policies allow.

Configuration

Put these keys at the top level of the plugin record's Configuration Schema:

Field entries

The plugin record ships with Supports Callout selected. QuikForms refuses the callout if it is cleared.

Full Configuration Example

{
  "endpoint": "https://verify.example.com/v1",
  "verificationTypes": {
    "email": "/verify/email",
    "phone": "/verify/phone",
    "domain": "/verify/domain"
  },
  "fields": [
    { "fieldId": "email", "verificationType": "email", "debounceMs": 500 },
    { "objectField": "Phone", "verificationType": "phone" },
    { "fieldId": "website", "verificationType": "domain", "debounceMs": 500 }
  ]
}

Using Named Credentials

For production, use a Named Credential instead of a raw endpoint URL. Salesforce then stores the service's authentication and adds it to each call, and no Remote Site Setting is needed.

{
  "namedCredential": "VerifyServiceCredential",
  "fields": [
    { "fieldId": "email", "verificationType": "email", "path": "/verify/email" }
  ]
}

API Contract

Request (sent by Apex)

The Apex class sends a POST to the endpoint plus the path, with Content-Type: application/json and this body:

{
  "value": "user@example.com",
  "type": "email"
}

Response (expected from the service)

The service returns a JSON object. The plugin reads three possible success flags and a message, and ignores anything else:

{
  "verified": true,
  "message": "Email address is valid and deliverable"
}

Lifecycle Hooks

The plugin has no onValidate hook, so verification results are not part of the submission and do not affect it.

Progress Indicator

Features

• Three display modes. Choose a progress bar, a row of dots, or a count to match your form's design.
• Required field tracking. The indicator counts the visible required fields. Optional fields and custom HTML are left out, and a checkbox counts as filled when it is checked.
• Dependency awareness. Fields hidden by a dependency rule are left out of the count, and the count updates as rules show or hide fields.
• Multi-page aware. On a multi-page form it counts the required fields on the current page and updates on every page change. Set scope to "form" to count the whole form instead.
• Animated transitions. The bar slides to its new width and filled dots grow slightly.
• Optional sticky positioning. The indicator can stay at the top of the visible area while the visitor scrolls.
• Completion pulse. Optionally, the indicator pulses once when the count first reaches 100%.

Display Modes

The label line reads "3 of 8 fields complete". When the count covers only the current page of a multi-page form, it reads "3 of 5 fields on this page complete". showLabel turns the label line on or off.

Bar Mode

The label sits above a horizontal bar that fills left to right. The bar has no percentage text; 3 of 8 fills it to 38%.

  3 of 8 fields complete
  [===========-------------------]

Dots Mode

The label is followed by one dot per required field. A filled dot is a completed field, and hovering over a dot shows that field's label.

  3 of 8 fields complete
  (*) (*) (*) ( ) ( ) ( ) ( ) ( )

Fraction Mode

The count appears as larger text, with the completed number in the form's highlight color and no graphic. It repeats the label's wording, so set showLabel to false with this mode:

  3 of 8 fields complete

Configuration

Replace the contents of the plugin record's Configuration Schema with a JSON object of the options you want, at the top level. An option you leave out takes its default.

Configuration Example

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

CSS Variables

The Progress Indicator takes its colors and corner radius from the form's theme, through these QuikForms CSS variables:

Lifecycle Hooks

Writing Plugins for Both Renderers

An Experience Cloud form renders each field inside its own shadow root, which document.getElementById and document.querySelector cannot see into. The browser code of the plugins above reaches its elements through methods on QuikFormsPlugins that both renderers provide, or, for Range Slider, through the container QuikForms passes it, which is why the plugins work on Experience Cloud and Salesforce Sites alike. Build your own plugins the same way.

Element API

QuikFormsPlugins.register('myPlugin', {
  hooks: {
    onFormLoad: function (ctx) {
      QuikFormsPlugins.addStyles('my-plugin-styles', '.my-plugin-note { color: #b45309; }');
    },
    onFieldBlur: function (ctx) {
      var container = QuikFormsPlugins.getFieldContainer(ctx.fieldId);
      if (!container) return null;
      var note = container.querySelector('.my-plugin-note');
      if (!note) {
        note = document.createElement('div');
        note.className = 'my-plugin-note';
        container.appendChild(note);
      }
      note.textContent = ctx.value ? '' : 'Please add a value';
      return null;
    }
  }
});

Where a hook gives you a value (ctx.value, ctx.fieldValues), use it rather than reading the control. On Experience Cloud the value the form reports through the hook is the one it submits.

Custom Field Types

A plugin registers field types under fieldTypes. The name you register is what the field editor's Plugin Field Type stores, and a QuikForms Custom Field Type metadata record (Plugin, Field Type Name, Display Label, Category, Default Configuration) lists it in that picker. Range Slider's zip includes one to copy.

QuikFormsPlugins.register('starRating', {
  fieldTypes: {
    starRating: {
      // Returns the field's HTML as a string
      render: function (field, ctx) {
        return '<div class="stars"><input type="hidden" class="stars-value" value="">...</div>';
      },
      // Runs once, after the HTML is in place
      initialize: function (fieldId, container) { /* attach listeners */ },
      // The container is the LAST argument on both renderers
      getValue: function (fieldId, container) {
        return container.querySelector('.stars-value').value;
      },
      setValue: function (fieldId, value, container) {
        container.querySelector('.stars-value').value = value;
      },
      validate: function (fieldId, field, container) {
        return { isValid: true, errors: [] };
      }
    }
  }
});

• render(field, ctx) returns an HTML string. field includes id, label, required, and pluginConfiguration, the field's Plugin Configuration (JSON) exactly as stored. ctx includes locale and placeholder.
• initialize(fieldId, container) runs once, after the markup is in the page.
• getValue, setValue, and validate receive the field's container as their last argument on both renderers. Find your elements with container.querySelector, never through document. validate returns { isValid, errors }, where errors is a list of messages.
• Report changes. Fire a bubbling input or change event from your control when its value changes. Experience Cloud reads getValue on those events; Salesforce Sites reads it at submit.
• The HTML is not sanitized: it is code you installed, not visitor or form content.
• A field whose plugin is not active renders as its own field type.

The complete JavaScript API, including every hook, is in the Field Type Interface and Available Hooks references.