Quote Form Builder B2B
Quote form is the form that your customer can leave their request information at your store.
π Table of Contents
ββ1.1. Step 1 β Product Inquiry
ββ1.2. Step 2 β Contact Info
ββ1.3. Empty State
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.
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.
To change the Step 1's name, you can edit the Title field.
Default Form (applied to all products)
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)
- Add to Quote button: Edit the button label and button alignment
- Form Attribute: Edit the form attribute if you want to change the form's name
| |
---|
Add Form (Create form for specific product)
Click "Add Form" to create a new form (this form is applied to specific products)
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
- Group products: This condition applies to a group of products based on specific criteria such as tag, title, price, etc
2. Form Step 2 - Contact Info
Similar to Step 1, you can click "Title" field to customize the Step's label.
In Step 2, when you expand the settings for more details, you will find the following configuration options:
- Product List β Customize how products are displayed within the contact information form.
- Customer Info β Set up the fields required to collect customer details, such as name, email, and contact information.
- Note β Configure the customer note section, allowing additional information to be added to the form.
- Submit Button β Customize the label and positioning of the submit button to improve form usability and appearance.
- 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.
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.
Customer Info
This option allows you to configure the display of customer information fields
- Company info
- Shipping address
- Billing address
- Payment terms
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.
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.
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
Translation
This setting allows you to customize translation for content via quote inquiry form.
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)
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
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.
| |
---|
Congrats!
You've finished setting up the Quote Form Builder. You can explore yourself for more customization of your own store.
Updated on: 24/07/2025
Thank you!