Getting Started with QuikForms

Welcome to QuikForms! This guide will walk you through installing QuikForms in your Salesforce org and creating your first form in minutes.

Overview

QuikForms is a powerful form builder for Salesforce that enables you to create beautiful, functional forms with features like version control, multi-language support, and extensible plugin architecture.

Prerequisites

Before you begin, ensure you have the following:

• Salesforce Org - Developer, Sandbox, or Production org with admin access
• Salesforce CLI (SFDX) - Install from Salesforce Developer Tools
• Git - For cloning the repository
• Cloudflare Turnstile Keys - Optional but recommended. Get keys from the Cloudflare Turnstile Dashboard

Public Site Setup

QuikForms requires a Salesforce public site to be configured for external form access. Follow these steps to set up your QuikForms site:

Configure Salesforce Site

1. In Salesforce Setup, navigate to Sites (under User Interface > Sites and Domains > Sites)
2. Enable custom domain if not already enabled (required for Sites)
3. If QuikForms site doesn't exist, click New
4. Enter site details:
   • Name: QuikForms
   • URL Path Prefix: you can leave blank, or use "quikforms" (or your preferred path)
5. Set homepage to the qf Visualforce page
6. Click Save
7. Activate the site
8. Configure Guest User Profile permissions using the Public Access Settings link on the site record
9. Add your domain to Trusted Sites for Content Security Policy

Quick Start: Create Your First Form

Now that QuikForms is installed, let's create your first contact form in just a few minutes!

Step 1: Create Fields

First, create reusable fields in the Field Library:

1. Navigate to the Field Library page
2. Click New Field
3. Create the following fields:

Email Field

{
  "Name": "contact_email",
  "Label": "Email Address",
  "Type": "inputText",
  "ObjectField": "Case.SuppliedEmail",
  "IsRequired": true,
  "ValidationRegex": "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$"
}

Name Field

{
  "Name": "contact_name",
  "Label": "Full Name",
  "Type": "inputText",
  "ObjectField": "Case.SuppliedName",
  "IsRequired": true
}

Subject Field

{
  "Name": "contact_subject",
  "Label": "Subject",
  "Type": "inputText",
  "ObjectField": "Case.Subject",
  "IsRequired": true
}

Message Field

{
  "Name": "contact_message",
  "Label": "Message",
  "Type": "inputTextarea",
  "ObjectField": "Case.Description",
  "IsRequired": true
}

Field Editor with configuration options

Step 2: Create Form

Create a new form definition:

1. Navigate to the QuikForms Manager page
2. Click New
3. Enter form details:

Click Save. QuikForms will automatically create a draft version and open the Form Builder.

Step 3: Add Fields to Form

In the Form Builder, add your fields:

1. Click the Fields tab
2. In the Available Fields section, find your created fields
3. Drag each field to the Display Fields section in this order:
   • Full Name
   • Email Address
   • Subject
   • Message
4. Adjust column spans for layout (e.g., Full Name: 3 columns, Email: 3 columns)
5. Click Save

Form Builder - Fields Tab

Step 4: Style the Form

Customize the form's appearance:

1. Click the Styling tab
2. Choose a color preset or customize colors:
   • Background Color: #ffffff
   • Button Color: #1e5ba8
   • Highlight Color: #AA28B9
3. Select a font family (e.g., Inter)
4. Click Save

Settings Configuration

Click the Settings tab and configure:

Step 5: Preview & Test

Test your form before publishing:

1. Click the Preview tab
2. The form will load with your current configuration
3. Fill out and submit the form to test functionality
4. Check that a Case record is created in Salesforce
5. Verify the confirmation message displays

Form Preview with live rendering

Step 6: Publish and Access the Form

Once you're satisfied with your form, publish it:

1. In the Form Builder, click Publish
2. Enter a version number (e.g., 1.0)
3. Add release notes (optional)
4. Click Publish Version

Form URL

Your form is now accessible at:

https://[your-domain].my.salesforce-sites.com/qf?fc=contact-us

Where [your-domain] is your Salesforce Site domain.

<iframe
  src="https://[your-domain].my.salesforce-sites.com/qf?fc=contact-us"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

Admin Guide

Complete guide to managing forms, fields, and all administrative features in QuikForms.

Dashboard Overview

The QuikForms admin interface consists of three main pages:

• QuikForms Manager - Manage all form definitions, versions, and publishing
• Field Library - Create and manage reusable form fields
• Analytics Manager - View form analytics including views, submissions, conversion rates, and trends
• Error Manager - Monitor exceptions and troubleshoot issues

Form Management

Forms Dashboard

The QuikForms Manager displays all form definitions with powerful search and filtering:

QuikForms Manager - Main Dashboard

Table Columns

Available Actions

• New - Create new form definition
• Edit Draft - Modify unpublished changes
• Edit Published - View published version (creates draft if edited)
• Create Draft - Start new draft from published version
• Preview - Test form with preview token
• Delete - Remove form and all versions
• Import - Import forms from JSON
• Export - Export selected forms to JSON

Search & Filtering

Find forms quickly using multiple filters:

• Text Search - Search by form name, title, or ID
• Object Filter - Show only forms for specific Salesforce objects
• Status Filter - Active, Inactive, or All

Creating Forms

To create a new form:

1. Click New in QuikForms Manager
2. Fill in form details:
   • Name - Internal name for the form
   • Form ID - URL-friendly identifier (lowercase, hyphens only)
   • Description - Optional description
   • Form Object - Case, Survey__c, or custom object
   • Form Type - Email, Survey, Record Creation, or Chat
3. Click Save

QuikForms automatically creates a draft version and opens the Form Builder.

Form Builder Interface

The Form Builder is a tabbed interface with five main sections:

Form Builder - Complete Interface

Settings Tab

Configure form metadata, messaging, and behavior:

Basic Information

Display Options

• Disable Field Icons - Hide icons next to field labels
• Disable CAPTCHA - Disables Cloudflare Turnstile verification (not recommended for public forms). Honeypot protection remains active even when CAPTCHA is disabled.
• Description Position - Show field descriptions inside or outside inputs

Images & Custom HTML

• Logo - Upload form logo (static resource)
• Favicon - Upload favicon for browser tab
• Custom Header HTML - Inject HTML above form
• Custom Footer HTML - Inject HTML below form
• Custom <head> HTML - Add custom scripts, meta tags, etc.

Advanced Features

• Enforce iframe Embedding - Only allow form to load in iframes
• Log User Browser Info - Capture IP address and user agent
• Post-Submit Redirect URL - Redirect after submission
• Supported Languages - Configure available languages (JSON format)

{
  "en_US": "English",
  "es": "Español",
  "fr": "Français",
  "de": "Deutsch"
}

Fields Tab

The Fields tab manages which fields appear on your form and their layout:

Fields Tab - Drag and Drop Interface

Field Sections

1. Available Fields - All fields from Field Library
2. Display Fields - Visible fields on the form (in order)
3. Hidden Fields - Fields saved but not shown to users
4. Populated Fields - Fields with pre-filled default values

Managing Fields

• Add Field - Drag from Available Fields to Display Fields
• Reorder - Drag fields within Display Fields to change order
• Hide Field - Drag to Hidden Fields section
• Set Default Value - Drag to Populated Fields and configure value
• Remove - Drag back to Available Fields

Column Spans

Configure responsive layout with column spans (1-6 columns):

• 1-2 columns - Narrow fields (checkboxes, short text)
• 3 columns - Medium fields (name, email)
• 6 columns - Full-width fields (text areas, long text)

Styling Tab

Customize the visual appearance of your form:

Styling Tab - Theme Customization

Color Presets

Choose from 8 professionally designed themes:

• Azure Horizon (Blue professional)
• Corporate Steel (Gray corporate)
• Forest Executive (Green professional)
• Navy Professional (Navy blue)
• Midnight Professional (Dark blue)
• Charcoal Elegance (Dark gray)
• Sage Minimal (Light green)
• Deep Ocean (Dark ocean blue)

Custom Colors (21 fields)

Typography

Select from 30+ Google Fonts:

• Sans Serif - Inter, Roboto, Open Sans, Lato, Poppins, Montserrat
• Serif - Merriweather, Lora, Playfair Display
• Display - Oswald, Raleway, Ubuntu
• Monospace - Roboto Mono, Source Code Pro

Layout Settings

• Border Width - Form border thickness (0-5px)
• Border Radius Large - Form corners (0-50px)
• Border Radius Small - Field corners (0-20px)
• Container Width - Max form width (px, %, rem, vw)

Gradients

Create two-color gradients for backgrounds:

Gradient Color 1: #1e5ba8 (Blue)
Gradient Color 2: #AA28B9 (Purple)

Related Objects Tab

Configure multi-object forms for complex data structures:

Related Objects - Multi-Object Configuration

Hierarchy Levels

QuikForms supports up to 3 levels of object relationships:

• Level 1 - Parent object (from form definition)
• Level 2 - Direct children of parent
• Level 3 - Grandchildren of children

Configuration Steps

1. Enable multi-object mode
2. Add child object to parent
3. Select lookup field linking child to parent
4. Assign fields to each object
5. Add nested children if needed (level 3)

Preview Tab

Test your form before publishing:

Preview Tab - Live Form Rendering

Preview Features

• Real-time form rendering with current configuration
• All styling applied (colors, fonts, layout)
• Functional form submission (creates test records)
• Secure preview tokens (24-hour expiration)
• Responsive preview (test different screen sizes)

Version Control

QuikForms includes robust version control with draft, publish, and archive lifecycle:

Version States

Publishing Workflow

1. Make changes in draft version
2. Test using Preview tab
3. Click Publish
4. Enter version number (semantic versioning: Major.Minor)
5. Add release notes (optional)
6. Click Publish Version

Version History

View all previous versions with:

• Version number and tag
• Publication date and user
• Release notes
• Field count
• Ability to rollback to previous version

Field Library

The Field Library is where you create and manage reusable form fields:

Field Library - All Available Fields

Field Types

QuikForms supports 9 built-in field types:

Creating Fields

To create a new field:

1. Navigate to Field Library
2. Click New Field
3. Fill in field properties (see Field Editor section)
4. Click Save

Field Editor Interface

The Field Editor has multiple tabs for comprehensive configuration:

Basic Info Tab

Object Field Mapping

Link form fields to Salesforce object fields:

• Target Object - Salesforce object (Case, Lead, Contact, etc.)
• Object Field - Specific field on that object
• Special Values:
  • $ATTACHMENT - Single file upload (images, PDF, Word, text)
  • $CONTENTDOCUMENT - Multiple file upload (broader file types including Excel, PowerPoint, ZIP)

Custom Structures

For select fields (dropdown, radio, checkboxes), configure options:

Simple Options (Array)

["Option 1", "Option 2", "Option 3"]

Advanced Options (Objects with Labels/Values)

[
  {"label": "Small", "value": "S"},
  {"label": "Medium", "value": "M"},
  {"label": "Large", "value": "L"}
]

Decorators

Add visual enhancements to select options:

• stars - Display as star rating (1-5 stars)
• icons - Show icons next to options
• colors - Color-coded options

Other Option

Enable "Other" option to allow custom text input:

{
  "OtherOption__c": true
}

Field Validation

Add client-side validation with regex patterns:

Common Validation Patterns

Multi-Language Support

QuikForms supports multiple languages using JSON-based localization:

Configuring Languages

In the Settings tab, configure supported languages:

{
  "en_US": "English",
  "es": "Español",
  "fr": "Français",
  "de": "Deutsch",
  "ja": "日本語"
}

Translating Fields

Field labels support JSON format for translations:

Single Language (String)

Email Address

Multiple Languages (JSON)

{
  "en_US": "Email Address",
  "es": "Dirección de correo electrónico",
  "fr": "Adresse e-mail",
  "de": "E-Mail-Adresse"
}

Translatable Properties

• Field labels
• Field descriptions
• Field tooltips
• Select options
• Error messages
• Form title and subtitle
• Button labels
• Confirmation messages

Survey Forms

Create time-limited surveys with secure tokens:

Creating Surveys

To create a survey:

1. Create a form with Form Type = "Survey"
2. Set Form Object to Survey__c
3. Configure survey-specific settings:
   • Validity Days (default: 30)
   • Allow Multiple Completions (default: false)
   • Expired Message
   • Completed Message
4. Publish the form
5. Use Survey Creator to generate survey links

Survey Tokens

Survey tokens are cryptographically secure 32-character identifiers:

Example Token: 7a9f2b1c3d4e5f6a7b8c9d0e1f2a3b4c

Token Features

• Unique per survey
• Time-limited (configurable expiration)
• One-time use (unless multiple completions enabled)
• Validated on every submission

Response Management

Survey responses are stored in the Survey__c object with:

• Survey name and token
• Parent record association (polymorphic)
• Submission status and date
• Overall satisfaction rating
• Issue resolution flag
• Response data in JSON format

Error Management

Monitor and troubleshoot errors using the Error Manager:

Error Manager - Exception Dashboard

Exception Dashboard

View all exceptions with detailed information:

Table Columns

• Log Number
• Created Date
• Severity (Critical, High, Medium, Low, Info)
• Error Code (APEX-*, LWC-*, API-*, PLUGIN-*)
• Error Message
• Component (where error occurred)
• Source (Apex, LWC, API)

Filtering Errors

Find specific errors quickly:

• Text Search - Search by log number, error code, message, component
• Severity Filter - Critical, High, Medium, Low, Info
• Source Filter - Apex, LWC, API
• Date Range - From/To date filters

Error Details

Click any error to view full details:

• Complete stack trace
• Form and record context
• User information (IP, user agent)
• Request context (referrer, method)
• Governor limits consumed
• Resolution notes (editable)

Analytics

QuikForms includes built-in analytics to help you understand how your forms are performing. Track views, submissions, conversion rates, and more — all natively within Salesforce, with no third-party analytics service required.

Analytics Overview

Analytics can be accessed in two ways:

• Analytics Manager - A dedicated admin page showing aggregate analytics across all forms
• Per-Form Analytics - An Analytics tab within the Form Builder showing detailed metrics for a specific form

Analytics Manager

The Analytics Manager provides a high-level overview of all form performance:

Aggregate Metrics

Trend indicators show percentage changes compared to the previous period (e.g., +12% views vs. prior 30 days).

Per-Form Breakdown Table

The table lists each form with sortable columns:

Date Range Filtering

Filter analytics data by time period:

• Last 7 days
• Last 30 days (default)
• Last 90 days
• All time

Per-Form Analytics

Click on a form name in the Analytics Manager or navigate to the Analytics tab within the Form Builder to see detailed analytics for a specific form.

Headline Metrics

• Total Views - Number of times the form was loaded (with trend indicator)
• Unique Visitors - Distinct visitors, with return visitor rate
• Submissions - Number of successful submissions (with trend indicator)
• Conversion Rate - Percentage of views that resulted in submissions
• Avg. Time to Complete - Average duration from form load to submission

Daily Trends Chart

A bar chart showing daily views, unique visitors, and submissions over the selected date range. Hover over bars to see exact counts for each day.

Device Breakdown

See how users access your forms by device type:

• Desktop
• Mobile
• Tablet

Browser Breakdown

Submission counts by browser:

• Chrome
• Safari
• Firefox
• Edge
• Other

Top Referrers

See which websites are driving traffic to your forms, with visit counts per referring domain.

Metrics & Data

All analytics data is stored natively in Salesforce. No external analytics services or third-party scripts are required.

Best Practices

Form Design

• Keep forms short (5-10 fields maximum)
• Use clear, concise field labels
• Mark only essential fields as required
• Group related fields together
• Provide helpful descriptions for complex fields

Field Reusability

• Create fields in the Field Library first
• Use consistent naming conventions
• Don't delete fields used in published forms
• Clone fields when you need similar variations

Version Control

• Always test in Preview before publishing
• Use semantic versioning (1.0, 1.1, 2.0)
• Add meaningful release notes
• Keep major versions for breaking changes
• Minor versions for incremental updates

Performance

• Limit file upload sizes (default 9MB max)
• Use field validation to catch errors early
• Keep Turnstile CAPTCHA enabled on public forms
• Configure origin validation for security
• Use the Analytics dashboard to monitor form performance and conversion rates

Security

• Always use HTTPS for form URLs
• Keep Cloudflare Turnstile enabled on public forms (honeypot protection is always active)
• Configure valid referrer domains
• Review error logs regularly
• Don't expose sensitive data in hidden fields