Order Form - Image Choice Feature: Quantity Dropdown & Line Breaks Needed

Ask the Community General Questions
1

I’ve used the Form Builder to create a simple product order form - this is intended for existing customers to designate items they want included for delivery, with no payment processing (will call). The form consists of an area for basic contact info, a catalog of ~40 items with images and descriptions, and a form submit button.

Preview test page: Johnson Pool & Spa - Sonoma County Jacuzzi® Dealer & Pool Builder - ChemShop - Order Requests for Existing Commercial Customers

Two things that are issues/currently missing:

1 - Item quantity selection: there doesn’t seem to be a way to add a quantity dropdown to Image Choice items. That is a huge bummer, because we often have customers who want multiples of these items. So far the only workaround I can find is to have an “Order Notes” text box on the page and request the customer to note any products they want more than one of in that box. Very clunky, and might be a dealbreaker.

2 - Multiple products within the Image Choice component: this component doesn’t allow for line breaks, meaning that if you add a multitude of products, it just makes the existing products tiny to make them fit on one row. Current workaround: have multiple Image Choice components and break out items into product categories. Not great, but works.

Thanks for considering!

3 Likes
2

It works. I’m supporting you.

1 Like
4

Hi there and welcome to the Community, @Tanya_Alexander :waving_hand:

Glad to say that it’s possible to create a quantity dropdown for each product using the conditional logic feature.

So, you should create a dropdown field for each option and set it to appear if the required product is chosen.

Here is a video screencast showing how this feature works. Please try it out and let me know if it worked for you:

The workaround with the line breaks is really nice, but it’s also possible to set a specific number of products per row using a CSS code (if the same number of products should appear in each row).

In you’d like to try this option, please let me know how many products you’d like to display per row. Our devs will come up with a solution for you!

Great form, by the way :wink:

1 Like
5

Thank you for the response. Is there a way for the quantity dropdowns to always appear using the conditional logic? Also can you please provide the CSS code snippet for forcing the number of products per row? Thank you!

1 Like
6

Hi @Tanya_Alexander :waving_hand:

  1. Do you mean to automatically apply the conditional logic to all quantity dropdowns, so you don’t have to set them up manually each time?

  2. Could you please specify how many products per row you’d like to have?

7

We’d like 6 products per row for the CSS.

For the conditional logic, it would be great if ALL products quantity dropdowns appeared on page load (like a standard form), rather than them popping up if products are selected, but if the per-product selection is required I can make that work. If there’s a way to auto-apply so I don’t have to manually set up 40+ that would be stellar!

1 Like
8

Ah, I see!

You can also use this fields without conditional logic! Just set the needed width, so that these dropdowns appeared right under the image choice:

image
image1871×879 291 KB

As for the codes to set the number of items per row, I’ve forwarded it to the devs and will let you know once the solution is ready :slightly_smiling_face:

9

So it’s as simple as adding the dropdown, adjusting width to product in row, and then naming each to correspond to the product the selection relates to (so it’s clear in the received email notification)? That was literally staring me in the face the whole time, I don’t know how I missed that… that’s what I get for trying to make things more complicated! :woman_facepalming:

Thanks for your help, I’ll keep an eye out for the CSS for the forced row quantity.

10

The conditional logic solution will likely be the way to go, because having the quantity dropdown as a separate element from the item makes for a messy end result on the resulting receiving email (especially if someone designates only one product selection with quantity, but all the empty fields come through in the end-email). So I guess it was worthwhile to reach out for a solution after all :slight_smile: Thanks for your help!

1 Like
11

Got it! That’s great that the conditional logic feature would for your case :slightly_smiling_face:

As for the CSS code, worry not! I’ll keep you updated :wink:

12

Hi there, @Tanya_Alexander :waving_hand:

We’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings to display not more than 6 image options per line:

[class*="ImageChoice__OptionsContainer-sc"] {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  max-width: calc(7 * 120px + 5 * 10px); 
}

Check it out and let me know if you like the result

2 Likes