Dash board

Quick Setup Guide

Follow the steps below to start using the app.

Step 1: Create Your First Form

Inside the app, open the Dashboard page and click on Create Form.

After clicking Create Form, a list of ready-to-use form templates will appear. These templates are designed for different business needs and help you create forms faster without starting from scratch.

You can simply choose the form type that best matches your requirement and customize it according to your preference.

Available form templates include:

• Contact Us

• Market Research Survey

• Resume Application

• Product Review

• Travel Booking

• Multi-Step Form

• Referral Questionnaire

• Order Cancellation

• Free Registration

• COD Order Confirmation

• Sales Inquiry

• User Registration

• Feedback Form

• Event Registration

• Booking

• Documentation

• Giveaway Registration

• Wholesale

• Or select Blank Form to build everything from scratch

Once you select a template, the form structure is automatically created based on your chosen use case. You can then customize and manage your form through three main sections:

• Form Settings

• Form Design

• Form Integration

These sections give you full control over your form behavior, appearance, and integrations according to your business requirements.

1. Form Settings

The Form Settings section helps you configure your form behavior, submission rules, scheduling, and customer interactions.

Why use it?

Use this section to control how your form works and manage submission settings efficiently.

This section includes the following sub-sections:

• Form Details

Configure the basic details and submission restrictions for your form.

Available options:

• Form Name

• Accept only one submission per email

• Accept only one submission per phone number

• Enable Email Blocklist

Example:

Market Research Survey Allow only one submission per email to avoid duplicate responses.

Resume Application Allow one submission per phone number to prevent multiple applications.

• Form Schedule

Control when your form should become active and when it should stop accepting submissions.

Why use it?

Perfect for campaigns, events, giveaways, or limited-time registrations.

Available options:

• Enable scheduling

• Start date

• End date

• Submission limits

• Start/End messages

• Limit total submissions

Example:

Giveaway Registration Start Date: July 1 End Date: July 10

Message: "This form has expired."

• Post Submission Actions

This section controls what happens right after a user successfully submits a form. It lets you define the next step, such as showing a confirmation, redirecting users, or managing how submissions are handled.

Available Options:

Show Thank You Message Displays a success message on the same page after submission. Example: “Thank you for sharing your feedback.”

Redirect to Another Page Sends users to a different page after submission (e.g., thank you page or custom URL). Example: After a booking form submission: “Your booking request has been submitted successfully.”

Clear Form & Allow Another Submission Resets the form so users can submit again immediately. Example: Useful for lead forms where multiple entries are expected.

Only One Entry Per User Restricts users to a single submission to avoid duplicates. Example: Registration forms where each user can sign up only once.

Show & Download Responses Let users view and download their submitted responses. Example: Survey users can review and save their answers.

• Load Form in Popup

Choose how your form appears on your storefront.

Why use it?

Increase visibility and improve user engagement.

Display types:

Embedded Displays the form directly within page content.

Popup Displays the form as a modal or popup window.

Example:

Free Registration → Embedded inside a landing page

Newsletter Signup → Popup on homepage

• Ticket System

When enabled, each form submission automatically receives a unique ticket number. This helps you and your customers easily track and identify requests.

It is especially useful for forms related to support requests, return requests, order tracking, and similar use cases.

Available Options

Enable Ticket System Turn ticket generation on or off.

Ticket Prefix Add a custom prefix to the beginning of each ticket ID.

Example:

TKT-

The system combines your custom prefix with the current date (Julian format) and a daily-resetting counter to automatically generate unique and organized ticket IDs.

Example Ticket ID: TKT-25145001

• Customize Form Messages

Customize validation, error, and system messages shown to customers.

Why use it?

Provide better guidance and improve customer experience.

Available categories:

General Validation

• Required field messages

• Invalid email messages

• Invalid phone messages

Advanced Validation

• Number limits

• Character limits

• Password rules

• Password mismatch

• Password strength

File Upload

• File size limits

• Unsupported file formats

Security

• reCAPTCHA validation messages

Example:

User Registration "Email address is required."

Resume Application "Resume file size cannot exceed 20MB."

2. Form Design

The Form Design section allows you to fully customize your form layout, design, and field structure.

Why use it?

Create forms that match your branding and collect information according to your business requirements.

This section includes:

• Form Heading

Customize:

• Form title

• Heading styles

• Display settings

• Form Elements

The Form Elements section allows you to add, edit, remove, or reorder fields based on the information you want to collect from customers. Each form template comes with default fields that you can easily customize anytime.

Example: Market Research Survey

• Dropdown: What is your age range? – Let users select an age group

• Dropdown: What is your yearly income range? – Helps categorize users by income

• Radio Button: Gender – Allows users to choose one option

• Radio Button: What was your overall impression of our product? – Collects quick feedback

• Multi-line Text: What would have to change for a better experience? – Collects detailed feedback

You can also configure each field using Field Settings, like label, placeholder, width, and alignment.

Additionally, you can use the Required Field option. When enabled, users must fill that field before submitting the form, ensuring important information is always collected.

You can also enable Conditional Logic to control when a field should appear. This allows you to show the next field only after users select a specific option from a previous field, creating a more guided and dynamic form experience.

Conditional logic includes two conditions:

• OR – Allows multiple options to trigger the next field. If the user selects any one of the selected options, the next field will appear.

• ONE – Restricts the condition to a single selected option. Users must select that option before they can proceed to choose that specific option and see the next field.

Example: You can show the next question only when "What is your age range?" is selected as 18–24 or 25–34 using OR, or display it only for one specific age group using ONE.

Shopify Integration for Form Elements

Each supported form element includes a Shopify Integration section where you can map the field to a Shopify Customer Metafield.

When a customer submits the form, the entered value is automatically saved to the mapped Customer Metafield in Shopify.

Note: Shopify Integration is available for all supported form elements except Password, Confirm Password, File Upload, Image Upload, and Signature.

How to Configure Shopify Integration

Step 1: Open Form Design

1. Go to Form List.

2. Create a new form or edit an existing form.

3. Open Form Design.

4. Navigate to the Form elements tab.

Step 2: Select a Form Element

Click on the form element you want to connect with Shopify.

Scroll down to the Shopify Integration section.

You will see the following field:

Shopify Metafield Namespace & Key

Example placeholder: custom.birthdate

Step 3: Create a Customer Metafield in Shopify

Before entering the namespace and key, you must first create a Customer Metafield in Shopify.

1. Open Shopify Admin.

2. Go to Settings → Metafields and Metaobjects.

3. Select Customers.

4. Click Add definition.

5. Enter:

   • Name

   • Description (Optional)

   • Type

6. Shopify automatically generates the Namespace & Key.

Example

Name	Namespace & Key
Birth Date	custom.birthdate
Company Name	custom.company_name
GST Number	custom.gst_number

Click Save.

Step 4: Copy the Namespace & Key

After saving the metafield, copy the Namespace & Key from Shopify.

Example: custom.company_name or custom.birthdate

Step 5: Paste it into the Form Element

Return to ZAP Contact Form Builder.

Inside the selected form element, locate the Shopify Metafield Namespace & Key field.

Paste the value exactly as it appears in Shopify.

Example: custom.company_name

Save the form.

How It Works

Suppose you create a Customer Metafield in Shopify:

Name	Namespace & Key
Company Name	custom.company_name

Then your form contains a field:

Company Name

In the Shopify Metafield Namespace & Key field, enter: custom.company_name

When a customer submits: Company Name: MageComp

The app automatically sends the value to Shopify.

The customer's profile will contain:

Company Name: MageComp

No manual data entry is required.

Supported Form Elements

The following form elements support Shopify Integration.

Form Element	Shopify Integration
Heading	✅
Paragraph	✅
Single Line Text	✅
Multi-line Text	✅
Paragraph Text	✅
Dropdown	✅
Radio Button	✅
Checkbox	✅
Multiple Choice	✅
Date	✅
Time	✅
Email Address	✅
Number	✅
Address	✅
Ratings	✅
Emoji Feedback	✅
Phone	✅
Booking	✅
Privacy Policy	✅
Page Break	✅
Password	❌
Confirm Password	❌
File Upload	❌
Image Upload	❌
Signature	❌

Important Notes

• The Namespace & Key entered in the app must exactly match the value created in Shopify.

• Namespace & Key values are case-sensitive.

• The selected Shopify Customer Metafield type should match the corresponding form element.

• If the Namespace & Key is incorrect, the data will not be saved to Shopify.

• You must create the Customer Metafield in Shopify Admin → Settings → Metafields and Metaobjects → Customers → Add definition before mapping it in the app.

• Form

The Form section lets you customize the overall appearance and structure of your form so it matches your store design and branding.

Available customization options include:

• Background Type - Choose between Transparent, Color, Gradient, or Image background

• Background Shadow - Add or remove shadow effects

• Border - Enable form borders for better visibility

• Border Color - Select your preferred border color

• Border Size - Adjust border thickness

• Border Radius - Control corner roundness

• Form Width - Set the overall form width

• Form Padding - Adjust spacing inside the form

These settings help create a clean and visually appealing form layout.

• Input

The Input section allows you to customize the appearance of form fields and labels for a better user experience.

Available customization options include:

Input Background & Borders

• Background color

• Focus background color

• Border color

• Focus border color

• Border radius

Input Typography

• Font size

• Font color

• Placeholder color

Label Typography

• Font size

• Font color

These settings help ensure your form fields match your store theme and remain easy for customers to read and use.

• Submit Button

The Submit Button section allows you to customize the appearance and text of the button customers use to submit the form.

Available customization options include:

Button Text

• Submit Button Label - Change the button text (Example: Submit Survey)

Button Colors

• Background color

• Text color

Button Border & Styling

• Border color

• Border width

• Border radius

Button Layout

• Alignment

• Width

These settings help you create a submit button that matches your store branding and improves the overall user experience.

• Layout

The Layout section allows you to control how labels and form content are displayed, helping create a cleaner and more organized form experience.

Available customization options include:

Label Style

• Block Label - Displays labels above each field for a clean and structured layout

• Inline Label - Displays labels beside input fields to save space

• Floating Label - Displays labels inside the input field that move upward when users begin typing

Split Layout (Image on Side)

• Enable Split Layout - Display the form alongside an image for a more visually engaging layout

This is useful when creating modern forms, registration pages, or landing pages with a more polished design.

• Captcha

Google reCAPTCHA v3 helps protect your form from spam, bots, and unwanted submissions using an invisible verification process that works in the background without interrupting users.

To enable protection, turn on Enable reCAPTCHA v3.

You can click Get your keys here to open the setup documentation. Follow the steps provided in the document to create and configure reCAPTCHA in your Google account. Once completed, you will receive a Site Key and Secret Key.

• Site Key – Enter the generated Site Key here. It is used on the front-end to enable reCAPTCHA on your form.

• Secret Key – Enter the generated Secret Key here. It is used for server-side verification and should be kept secure.

Once both keys are added, reCAPTCHA protection will be activated for your form.

Example: For a Contact Us form, reCAPTCHA helps prevent bots from sending fake inquiries or repeated spam submissions.

Add your Google reCAPTCHA keys before enabling this feature.

3. Form Integration

Connect your forms with external tools and track form performance.

Why use it?

Automatically save data and identify where submissions are coming from.

This section includes:

• Marketing Attribution (UTM)

Marketing Attribution (UTM) helps you capture marketing data and display it in form responses. This allows you to track where customers came from before submitting your form and measure the performance of your campaigns.

You can track details such as:

• UTM Source – Identifies where the visitor came from (e.g., Facebook, Newsletter)

• UTM Medium – Identifies the marketing channel (e.g., Email, CPC, Social)

• UTM Campaign – Tracks the specific campaign name

• UTM Content – Helps identify different ads, links, or content variations

To start tracking, enable Tracking.

You can also use the Campaign Link Generator to create tagged URLs for your ads, newsletters, or marketing campaigns.

Campaign Configuration

Target Page URL – Enter the page URL where your form is published.

Campaign Source – Add the traffic source (e.g., Facebook, newsletter).

Campaign Medium – Add the marketing channel type (e.g., cpc, email, social).

Campaign Name – Enter a campaign name (e.g., summer_sale, launch_promo).

Once configured, responses will automatically include UTM details, helping you understand which campaigns drive the most form submissions.

Example:

Sales Inquiry Form

Know whether submissions came from:

• Facebook Ads

• Google Ads

• Email campaigns

• Marketing promotions

• Google Sheets Integration

Google Sheets Integration allows you to automatically send all form submissions directly to a Google Spreadsheet. This helps you store, organize, and manage responses without manually copying data.

Why use it?

• Automatically save form responses in one place

• Easily track and manage submissions

• Avoid manual data entry and save time

Example: Event Registration – Automatically save all registration entries into a spreadsheet for easy tracking and management.

To enable the integration, first turn on Enable Integration.

Step 1: Share Your Sheet

You need to share your Google Sheet with the provided Service Account Email: [e-mail] and grant Editor access. This permission allows the app to automatically write submission data into your spreadsheet.

Step 2: Sheet Configuration

You need to provide the required spreadsheet details:

Spreadsheet ID – Copy the Spreadsheet ID from your Google Sheet URL and paste it here. This helps the system identify the correct spreadsheet.

Worksheet Name – Enter the worksheet/tab name where submissions should be stored. If left empty, Sheet1 will be used by default.

Once configured correctly, every new form submission will automatically appear in your selected Google Sheet.

The examples above use the Market Research Survey template for demonstration purposes. The same customization options and settings are available for all templates.

Whether you choose Contact Us, Resume Application, Booking, Event Registration, Wholesale, Feedback Form, or any other template, you can customize fields, design, settings, layout, integrations, and behavior according to your business requirements.

Shopify Integration

The Shopify Integration feature allows you to automatically create customers in your Shopify store whenever a form is submitted. In addition to creating customer accounts, you can:

• Automatically send account activation emails.

• Add customer tags for better organization.

• Save custom form data directly into Shopify Customer Metafields.

This eliminates manual data entry and keeps all customer information synchronized with your Shopify store.

How to Enable Shopify Integration

Step 1: Open Form Customization

• Go to Form List.

• Create a new form or edit an existing form.

• Open Form Integration.

Step 2: Open Shopify Integration

• Click the Shopify Integration tab.

Step 3: Enable Customer Creation

• Enable the Create Shopify customer on submission option.

Note: Your form must contain an Email field. Shopify requires an email address to create a customer profile.

Step 4: Send an Account Activation Email (Optional)

• Enable Send account activation email if you want Shopify to automatically invite customers to activate their accounts.

When enabled:

• Shopify sends an activation email automatically.

• Customers can create their password and activate their account.

• No manual invitation is required.

Step 5: Add Customer Tags (Optional)

• Enter one or more customer tags in the Add tags to customer field.

• Separate multiple tags using commas.

• Example : wholesale, VIP-lead, newsletter

These tags will automatically be added to the customer's Shopify profile after the form is submitted.

Step 6: Save the Form

Click Save to apply all Shopify Integration settings.

What are Shopify Customer Metafields?

Shopify provides standard customer fields such as:

• First Name

• Last Name

• Email

• Phone

• Address

However, many businesses need to collect additional information that Shopify does not store by default, such as:

• Company Name

• GST Number

• Date of Birth

• Customer Preferences

• Preferred Language

• Vehicle Model

• License Number

• Membership ID

• Product Interests

These are called custom customer data.

To store this information, Shopify provides Customer Metafields.

Customer Metafields allow you to create your own custom fields on customer profiles so that additional information collected through your forms is stored directly inside Shopify.

Why Use Customer Metafields?

Without Customer Metafields, Shopify only stores its default customer information.

Using Customer Metafields allows you to:

• Store additional customer information.

• Build richer customer profiles.

• Personalize marketing campaigns.

• Create customer segments.

• Use the data with Shopify Flow and other Shopify apps.

• Eliminate manual copying of customer information.

How to Create Customer Metafields in Shopify

Step 1 : Open your Shopify Admin.

Step 2 : Go to Settings → Metafields and Metaobjects

Step 3 : Select Customers under the Metafields section.

Step 4 : Click Add definition.

Step 5 : Configure the metafield.

Enter: Name, Description (Optional), Type

Shopify will automatically generate the Namespace and Key for the metafield. By default, it uses the custom namespace.

Example: Name, Company Name, Namespace and Key, custom.company_name, Click Save.

Repeat these steps for every additional customer field you would like to store.

Connect Your Form Field to Shopify Metafields

After creating the Customer Metafield in Shopify:

1. Open your form in ZAP Contact Form Builder.

2. Edit the form field you want to synchronize.

3. Locate the Shopify Field setting.

4. Enter the Name of the Customer Metafield that you created in Shopify.

5. Save the form.

Once mapped, every submission will automatically populate that Customer Metafield in Shopify.

Supported Metafield Types

Make sure the Shopify Customer Metafield type matches the corresponding form element.

Form Element	Shopify Metafield Type
Single Line Text	Single line text
Multi-line Text	Multi-line text
Paragraph Text	Multi-line text
Dropdown	Single line text
Radio	Single line text
Checkbox	True or False
Multiple Choice	Multi-line text
Date	Date
Time	Single line text
Number	Integer
URL	URL
Hidden Field	Single line text
Ratings	Integer
Validation Field	Single line text
Privacy Notices	True or False
Phone	Single line text
Product Choice	Multi-line text
Multi-column Text	Multi-line text

How It Works

Suppose your form contains the following fields:

Form Field	Stored in Shopify Default Customer Field	Stored in Customer Metafield
First Name	✔
Last Name	✔
Email	✔
Phone	✔
Company Name		✔
GST Number		✔
Date of Birth		✔
Preferred Language		✔

When a customer submits the form:

1. The app receives the submission.

2. A Shopify customer is automatically created (if the customer does not already exist).

3. Shopify stores the standard customer information such as Name, Email, and Phone.

4. The app maps any additional form fields to the Customer Metafields you created.

5. Those values are automatically saved in the customer's Shopify profile.

6. Customer tags are added if configured.

7. If enabled, Shopify sends an account activation email.

Everything happens automatically with a single form submission.

Example Workflow

Customer submits the form:

Name: John Smith Email: [e-mail] Phone: [phone] Company Name: ABC Ltd. GST Number: GST12345 Preferred Language: English

After submission:

Shopify Customer

• Name ✔

• Email ✔

• Phone ✔

Shopify Customer Metafields

• Company Name → ABC Ltd.

• GST Number → GST12345

• Preferred Language → English

All information becomes available directly within the customer's profile in Shopify.

Benefits

• Automatically create Shopify customers from form submissions.

• Send account activation emails automatically.

• Add customer tags during customer creation.

• Store unlimited custom customer information using Shopify Customer Metafields.

• Eliminate manual data entry.

• Build richer customer profiles.

• Improve customer segmentation and personalization.

• Keep form submissions synchronized with Shopify automatically.

Important Notes :

• Your form must contain an Email field to create Shopify customers.

• Customer Metafields must be created in Shopify before mapping them in the app.

• The Shopify Field entered in the form should match the Customer Metafield Name created in Shopify. Always select the correct metafield type based on the form element to ensure data is stored correctly.

• Metaobjects are not required for this integration. This feature works exclusively with Shopify Customer Metafields.

Step 2: Add the Form Builder App Block to Your Theme

After creating your form, click the Add App Block button from the app dashboard.

When you click Add App Block, Shopify will automatically redirect you to the Online Store Theme Editor, where you can place the form anywhere on your store.

You can add the form on:

• Home page

• Product page

• Collection page

• Contact page

• Any custom page supported by your theme

Simply choose the page where you want your form to appear and add the Form Builder block.

You need to paste the Form ID created in the app to display the selected form on your store page.

Additionally, you can customize the form appearance directly from Theme Settings. You can choose to use the app’s default design or enable the button to override the app design with theme settings to apply custom styling from the theme editor.

Available customization options include:

• Label Settings – Modify label font color and size

• Input Settings – Customize input background, border color, border radius, font color, focus styling, and font size

• Form Background – Change the overall form background color

• Submit Button Settings – Customize button colors, font size, border radius, and border styling

• Form Container Settings – Adjust form padding, width, border color, border size, and border radius

These settings help you match the form design with your store theme and branding.

Add Your Form ID

Once the Form Builder block is added, you need to connect it with the form you created.

On the right-side settings panel, you will find a Form ID field.

To connect your form:

1. Go back to the ZAP Contact Form Builder app

2. Open the form you created from the form list

3. Copy the generated Form ID

4. Return to the Theme Editor

5. Paste the copied ID into the Form ID field

As soon as you enter the Form ID, your selected form will automatically load and appear on the page.

💡 Note: Every form has a unique Form ID. Make sure you use the correct ID for the form you want to display.

After everything looks good, click Save, and your form is ready to collect customer submissions

Statistics Dashboard

The Statistics Dashboard provides a quick overview of your contact form's performance, helping you monitor customer engagement and lead generation from a single place.

What You Can Track

The dashboard displays key metrics, including:

• Forms Created – Total number of contact forms created in your store.

• Form Submissions – Number of customer submissions received through your forms.

• New Customers – Number of new customers acquired through form submissions.

You can also use the date filter (e.g., Last 7 Days) to view statistics for a specific time period.

Benefits

• 📊 Monitor form performance at a glance.

• 📈 Track customer engagement and lead generation.

• 👥 Measure how many new customers are acquired through your forms.

• 📅 Analyze performance over different time periods using the date filter.

Note: The statistics are updated based on the selected date range and reflect the performance of your contact forms during that period.