> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/zap-contact-form-builder/dash-board.md). # 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:\ \&#xNAN;*"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**\ \&#xNAN;*"Email address is required."* **Resume Application**\ \&#xNAN;*"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 choose that specific option before they can move forward 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**.
#### • 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**: 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. ### 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