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
• Google reCAPTCHA Keys - Optional but recommended. Get keys from Google reCAPTCHA

Installation

Follow these steps to install QuikForms in your Salesforce org.

Step 1: Deploy Metadata

Clone the QuikForms repository and deploy the metadata to your org:

# Clone the repository
git clone https://github.com/your-org/quikforms.git
cd quikforms

# Authenticate with your org
sfdx auth:web:login -a MyOrg

# Deploy the source code
sfdx project deploy start -o MyOrg

Step 2: Configure Custom Metadata

Configure the QuikForms settings using Custom Metadata Types:

1. Navigate to Setup → Custom Metadata Types
2. Click on QuikForms_Setting
3. Click Manage Records
4. Click New to create a new setting record
5. Configure the following fields:

Custom Metadata configuration screen

Step 3: Create Named Credential

Create a Named Credential for Google reCAPTCHA verification:

1. Navigate to Setup → Named Credentials
2. Click New Named Credential
3. Configure the credential:

Step 4: Create Admin Pages

Create Lightning App Builder pages for the admin interface:

Forms Manager Page

1. Navigate to Setup → Lightning App Builder
2. Click New
3. Select App Page, click Next
4. Enter label: QuikForms Manager
5. Select One Region template
6. Drag the quikFormsManager component to the page
7. Click Save and Activate
8. Add to navigation menu

Field Library Page

Repeat the process for the Field Library page using the quikFieldsLibrary component.

Error Manager Page

Create another App Page using the quikFormsErrorManager component.

Step 5: Configure Permissions

Assign permissions to users who will manage forms:

1. Navigate to Setup → Permission Sets
2. Find and click QuikForms_Admin
3. Click Manage Assignments
4. Click Add Assignments
5. Select users who should have admin access
6. Click Assign

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": "$EMAIL",
  "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/qform?fc=contact-us

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

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

Next Steps

Congratulations! You've successfully installed QuikForms and created your first form. Here are some recommended next steps:

Additional Resources

• Creating Survey Forms
• Multi-Language Support
• Security Best Practices
• FAQ & Troubleshooting