The quote form is the form that allows your customers to leave their request information at your store. This form is for users of the new version who installed the app after December 20, 2024.

A. Form Elements

By default, two forms are generated:

• Step 1 - Product Inquiry: This form is designed to collect product information. You can customize it with dynamic fields to include details like weight, description, and additional notes.
• Step 2 - Contact Information: This form gathers customer information. For DTC customers, it includes email, contact information, shipping address, and a customer note for quotes.
• Empty State: In this section, you can customize the label and add your business logo to display when there are no quotes.

1. Step 1: Product Inquiry

a. Change the form header

Click on Title field: "Step 1: Product Inquiry" to configure the header label

b. Delete the Step 1: Product Inquiry

You can delete "Step 1: Product Inquiry" by hovering over it if you prefer not to use a multi-step form or want to skip filling in the product information.

c. Add / Duplicate / Delete forms

You will have the Form 1 as the default form, this form will apply to all products.

To create multiple forms, you can click "Add Form" button. There's no limit on the number of created forms, and these forms will be used for specific products.

• Each form can be configured to group specific products together. We use the latest form for storefront display based on each condition. Additionally, you can duplicate or delete forms as needed to further customize your product form setup.

d. Customise form

Each form will have five settings (Display condition, Product info, Product note, Add To Quote button, Form attribute) to help you customize it to fit your needs

1. Display conditions

To configure display form conditions, click on each form to select the corresponding condition form. There are 2 cases:

Case 1: Form 1 (All Products),

• Display condition: you can't change the display conditions

Case 2: Form 2 - Form n aka Added Forms (Specific Products)

• Display condition:

1. Specific Product – This allows you to set the condition for a particular product. Select more than 1000 items will harm your website perfomance. For more, select the option below.
2. Group Product – This condition applies to a group of products based on specific criteria such as tag, title, price, etc.

2. Product info: You only can edit this information in Step 2: Contact Info to ensure information consistency.

3. Product note: You can add other information field to collect more information from your buyers

Here’s a quick rundown of each “Add Field” option and when you’d use it:

• Simple text: A single line of plain text. Great for short answers like names, titles, or any free‑form input that doesn’t need validation.
• Text field: Often multiline, this lets customers enter longer blocks of text—think comments, descriptions, or anything that might span several sentences.
• Select: A dropdown menu where you define a fixed list of choices. Customers pick one option from the list. Ideal when you want to constrain answers (e.g., “What’s your T‑shirt size?” S, M, L, XL).
• Radio button: A set of on‑screen options where only one can be selected. Use this when you want all options visible at once (e.g., “Choose your payment method: ◉ Credit card ◯ PayPal ◯ Bank transfer”).
• Checkbox: A list of items where each can be checked on or off independently. Use when users may need to select multiple items (e.g., “Which add‑on services do you require?” ☐ Installation ☐ Training ☐ Maintenance).
• Datetime picker: A calendar/date‑time widget. Lets customers choose a date via a calendar interface rather than typing it, ensuring consistent formatting.
• Upload files: Allows customers to attach one or more files (images, PDFs, docs, etc.).

• Phone: A field specifically formatted for telephone numbers.
• Country: A dropdown (or autocomplete) listing all countries. Normalizes entries so you don’t get “U.S.”, “USA”, “United States” variants—every submission maps to a standard country code.
• State: Similar to Country, but scoped to first‑level subdivisions (states, provinces) of a selected country. Ensures standardized region data (e.g., California, Ontario, Bavaria).

4. Add To Quote and Close button

To configure the Add To Quote and Close button, you can set it up in the "Add to Quote" button option. This allows you to customize the button label and adjust its alignment. You can position the button to the center, left, or right, giving you the flexibility to enhance the UI/UX of your form based on your preferences.

5. Form attribute

To change the name of the form, you can select the "Form attribute" option

2. Form Step 2 - Customer Information Setting

a. Change the form header

Similar to Step 1, you can click on "Step 2 - Contact Info" to configure the header.

b. Customise the Step 2: Contact Info

In Step 2, when you expand the settings for more details, you will find the following configuration options:

1. Product List – Customize how products are displayed within the contact information form.
2. Customer Info – Set up the fields required to collect customer details, such as name, email, and contact information.
3. Note – Configure the customer note section, allowing additional information to be added to the form.
4. Submit Button – Customize the label and positioning of the submit button to improve form usability and appearance.

These options give you full control over the layout and functionality of Step 2, allowing for a fully tailored form experience.

• Product List Setting: This feature allows you to configure the display and labels for each item in the product table, such as product name, quantity, SKU, variants, price, total, subtotal, and other values. You can customize how each field appears, providing clarity and ensuring the table aligns with your specific layout and labeling preferences.

• Customer Info: This option allows you to configure the display of customer information fields based on customer type, including Contact information and Shipping address

• Note: Similar to the Step 1: Product inquiry setup, this feature enables you to create a dynamic customer form by adding multiple customizable fields. This flexibility allows you to collect additional customer details tailored to your specific requirements.

• Submit button: This feature lets you personalize the button label and choose its alignment. You can position the button to the left, center, or right, offering flexibility to optimize the form’s UI/UX according to your design preferences. You can also edit the Close button label

• Behavior: This feature lets you control how customers interact with your product‐selection and submission process

• Single product quote

What it does: Restricts each quote request to exactly one product. Once a customer adds a product to the quote, they can’t add any others before hitting “Submit.”

When to use: If you sell complex or customized items that require one‑at‑a‑time specifications (e.g. custom machinery, bespoke garments), or if you want to simplify your quoting workflow by handling one product per inquiry.

• Google reCAPTCHA

What it does: Inserts a CAPTCHA challenge (the “I’m not a robot” checkbox or invisible widget) on your form. This helps block spam‑bots and automated scripts from submitting fake quote requests. Check this guide to create Google reCAPTCHA keys.

When to use: If you’re seeing a lot of junk or bot‑generated submissions, or simply want to add an extra layer of security and ensure you only get genuine inquiries.

• Tracking UTM

What it does: Captures and attaches UTM parameters from the referring URL (e.g. utm_source, utm_medium, utm_campaign) to each quote submission. You’ll see exactly which marketing channel or campaign drove that lead.

When to use: If you’re running multiple ads, email blasts, or social campaigns and need to know which ones are generating quote requests—this makes ROI measurement and follow‑up segmentation much easier.

3. Empty State:

You can customize the label, notification text, and business logo that will be displayed when there are no quotes. This allows you to create a personalized confirmation message and branding for users.

B. After Submit

After Submit: This section defines the actions that occur after a quote is submitted. The flow includes:

Display as a Toast

• Shows a brief pop-up notification upon successful quote submission.

Display as a Full-Size Message

• Shows a larger, comprehensive confirmation message after the quote is successfully submitted.

C. Translation

The Translation panel in your Quote Form builder is there so you can fully localize—or simply re‑brand—the copy that appears on your request‑a‑quote flow. Instead of shipping the form with hard‑coded English labels (“Name,” “Email,” “Shipping Address,” “Get a Quote,” etc.), you get to override every bit of text to match your customer’s language or your brand voice.

What you can do

• Translate: Swap in any language you need. For example, change “Shipping Address” → “Dirección de envío” (Spanish), or “Nom complet” (French) for “Full Name.”
• Re‑label: Even in a single language you might prefer “Project Details” instead of “Note,” or “Get My Quote” vs. “Submit.”
• Adjust placeholders: Provide more context inside the fields themselves (e.g. placeholder text like “Enter your company registration number…”).

By customizing these strings, you ensure your quote form feels native to your market and perfectly on‑brand—no more “generic” English labels slipping through to your German, Japanese, or Spanish customers.

D. Form appearance

The Appearance Form panel is where you fine‑tune the visual style of your quote form so it fits seamlessly into your site or brand. Here’s what each control does:

Tips for a polished look

• Contrast is key: Make sure text and buttons stand out against their backgrounds (WCAG recommends a contrast ratio of at least 4.5:1 for normal text).
• Brand consistency: Match your site’s primary/secondary brand colors so the embedded form doesn’t feel “tacked on.”
• Whitespace & hierarchy: Use secondary backgrounds or section‑title backgrounds sparingly to group related fields, rather than coloring every other element.

By tweaking these values—hex codes and opacity sliders—you can get an on‑brand, accessible quote form that feels like a natural extension of your storefront.

E. Result

All of the settings above come with visual examples to help you understand how your form will appear in the storefront. Once setup is complete, you’ll be able to see a sample form that reflects all the configurations applied, providing a clear preview of the final result as it will be displayed to customers.

Updated on: 04/09/2025