Quote form is the form that your customer can leave their request information on your store. This form is for users of the new version, 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. Form Step 1 - Product Information Setting

Click on "Step 1 - Product Inquiry" to configure the header and the label for the close button.

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. This option allows you to simplify the form setup and eliminate the product inquiry step entirely, making the process quicker and more streamlined.

To expand the detailed settings for Step 1, you can add additional forms. A form is always required for all product conditions, but you have the option to add more forms. 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.

To configure display form conditions, click on each variant to select the corresponding condition form.

We offer three options for setting conditions:

1. Any Product – This applies the condition to all products.

2. 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.

3. Group Product – This condition applies to a group of products based on specific criteria such as tag, title, price, etc.

These options give you flexibility in customizing the conditions for when the form should be displayed.

The option to set variant product information is only available in Step 2 and is always disabled in Step 1. If you wish to configure this setting, you will need to navigate to Step 2 to make the necessary adjustments.

To configure the product note, it is an important option in your settings. This will allow you to have a dynamic product form where you can set up multiple fields. You can customize the form to include various product details, ensuring that the information displayed is tailored to your needs.

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).

To configure the "Submit Product Information" 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.

2. Form Step 2 - Customer Information Setting

Similar to Step 1, you can click on "Step 2 - Contact Info" to configure the header and customize the label for the close button. This allows you to adjust the appearance and functionality of the section to align with your desired user experience and branding.

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.

• Note: Similar to the product information 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.

• 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.

Check: When selecting "Display as a Toast," the system should display the toast message accurately, reflecting the information entered in the text field.

Display as a Full-Size Message

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

Check: When selecting "Display as a Full-Size Message," the system should display the confirmation with the correct information as configured.

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.

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: 21/07/2025