Articles on: Quote Snap B2B

Quote Form Builder B2B

Quote form is the form that your customer can leave their request information at your store.


Help: If you want to customize your form design, our CS team will be available on live chat or email: [email protected]


πŸ“š Table of Contents


  1. Form Elements

  1.1. Step 1 – Product Inquiry

  1.2. Step 2 – Contact Info

  1.3. Empty State

  1. After Submit
  2. Translation
  3. Form Appearance
  4. Preview

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. It includes fields such as email, contact information, location, shipping address, billing address, and a special 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.


πŸ’‘ If you prefer to have only one step, you can simply remove Step 1 – Product Inquiry by clicking the "trash bin" icon when you hover over Step 1


Form Elements


1. Form Step 1 - Product Inquiry


In your form builder, Step 1 – Product Inquiry contains variants like:

  • Default Form (applied to all products)
  • Add form (applied to specific products)


Each form variant allows for separate inquiry forms based on product display conditions. However, if you prefer a single-step form or do not need product-level inquiries, you can remove this step entirely.


πŸ“Œ If you prefer not to use a multi-step form or want to skip the product information, you can delete 'Step 1 – Product Inquiry' by hovering over it


Click this button to delete Step 1

To change the Step 1's name, you can edit the Title field.


Edit the title


Default Form (applied to all products)


πŸ“Œ By default, this form is applied across all products and you can't delete this default form


This form includes:

  • Display conditions: You can't edit the display condition of this form since this is fixed as the default form.
  • Product info: 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.
  • Product note: You can add different notes including (Upload files, Checkbox, Datetime picker, Simple Text, Text field, Select, Radio button, Phone, Country, State)


Step 1: Product note


  • Add to Quote button: Edit the button label and button alignment


πŸ“Œ This setting applies to every form in step 1


Step 1: Add To Quote button


  • Form Attribute: Edit the form attribute if you want to change the form's name


Form Attribute

Form Attribute will change the name of the form



Add Form (Create form for specific product)


Click "Add Form" to create a new form (this form is applied to specific products)


πŸ’‘ There’s no limit to the number of forms you can create, and you can easily duplicate these forms


Step1: Add new form

After adding form, this form will be applied to specific product, and you can edit this form:

  • Display condition
  • Product info
  • Product note
  • Add To Quote button
  • Form attribute


Everything will stay the same as the default form, except the Display condition. We offer two options (Specific products and Group products) for setting Display conditions:

  • Specific products: You can manually select your products


⚠️ Select more than 1000 items will harm your website performance


  • Group products: This condition applies to a group of products based on specific criteria such as tag, title, price, etc


New Form's display condition


2. Form Step 2 - Contact Info


Similar to Step 1, you can click "Title" field to customize the Step's label.


Step 2: Step's label


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.
  5. Behavior – Set up the quote behavior (Single Product Quote, Google reCAPTCHA, Tracking UTM)


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


Step 2 configuration options

Product List:

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.


Step 2: Product List


Customer Info


πŸ“Œ These information will be auto-filled if customers log in with their customer account


This option allows you to configure the display of customer information fields

  • Company info
  • Shipping address
  • Billing address
  • Payment terms


Step 2: Customer Info


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.


Step 2: Note


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.


Step 2: Submit button


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.


Empty State


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


After Submit: Display as A Toast


After submit: Display as a full-size message

Translation


This setting allows you to customize translation for content via quote inquiry form.


πŸ“Œ At the moment (July 2025), you can only translate the form manually


There are 6 sections that you can translate:

  • Common information (Customer information section title, Products section title, Email address label, Location label)
  • Contact & Company (Contact & company title, Contact person, Company)
  • Shipping address (Shipping address title)
  • Billing address (Billing address title)
  • Payment terms (Payment terms title)
  • Note (Note title)


Translation


Form Appearance


These settings allow you to adjust font size, colors, and styling for various elements of the form to match your brand or design preferences.

  • Font size
  • Text color
  • Background color
  • Button color
  • Button Background color


Form Appearance


Preview


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.


πŸ’‘ Please ensure that you preview every settings before displaying to customers


Click Preview button

Preview


Congrats!


You've finished setting up the Quote Form Builder. You can explore yourself for more customization of your own store.


πŸ“Œ If you have any further concerns, please contact our CS team through live chat or email: [email protected]

Updated on: 24/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!