Quantity Gift Registry Widget: Change email answer format to be same like Configurable List Widget

I have four different product groups with two different characteristics and two different widgets.

1. Products (Multiple products (5) / Quantity Gift Registry)

2. Tools (Multiple products (5) / Quantity Gift Registry)

3. Auto Scrubber Pads (Can only select one product from drop-down / Configurable List)

4. Burnishing Pads (Can only select one product from drop-down / Configurable List)

I prefer the look of the results from the Configurable List Widget (see attached image). I would like to see the same for the Products and Tools while maintaining the four distinct groups. 

I believe the screenshot you've provided is for the notification email. Unfortunately, although you can customize the content of the email template, we could not customize to that extent the layout of each field answer.

What I would suggest is we use the Configurable List widget on your form then add custom CSS to it to make it display like the Quantity Gift Registry widget. This way, the email layout sent to you is the one you wanted.

Let me create a sample form for you and will get back to you once done.

Hi Vanessa,

Thank you for you quick response and willingness to put the CSS I need together. I look forward to receiving it.

I have now updated my cloned form to use Configurable List widget instead of Quantity Gift Registry widget, you may check the form here and can make test submissions if you like to see the actual email (don't forget to fill out the last email address field so you can receive the autoresponder email).

https://form.jotform.com/81584981079976

If this is something you'd like to consider, feel free to clone the form back to your account.

Vanessa Rocks!!!!

One more thing, How can I get the Auto Scrubber Pad Quantities and Burnishing Pad Quantities to 'look' exactly like sections you created?

1) You need to add two configurable list widgets to your form.

2) Label the first  Auto Scrubber Pad Quantities

3) Label the second Burnishing Pad Quantitites

4) Open the wizard for the first configurable list (magic wand icon). And where it says "Fields configuration" copy/paste this:

Quantity: number: 0

Auto Scrubber Pads: dropdown: Make Selection, Auto Scrubber Pads 11" (E84111-00) 5/cs {unlimited},Auto Scrubber Pads 12" (E84112-00) 5/cs {unlimited},Auto Scrubber Pads 13" (E84113-00) 5/cs {unlimited},Auto Scrubber Pads 15" (E84115-00) 5/cs {unlimited},Auto Scrubber Pads 16" (E84116-00) 5/cs {unlimited},Auto Scrubber Pads 17" (E84117-00) 5/cs {unlimited},Auto Scrubber Pads 20" (E841120-00) 5/cs {unlimited}

5) Then on the Custom CSS tab copy/paste this code in the box:

.checkbox, .radio {

margin: 3px 0;

min-width: 70px;

}

table#list {

width: 100%; border: 1px solid #ccc; padding:4px; 

} 

 .stepper-wrap input.stepper {

text-align: left; width: 20px; 

} 

select {

box-shadow: none; 

width: 100%; 

box-sizing: border-box; 

color: #444444;

outline: none; 

} 

th.col1, th.col2{

display:none !important;

padding: 0px;

margin: 0px;

} 

tr:first-child{

display:none;

}

6) Open the wizard for the second configurable list. And where it says "Fields Configuration" copy and paste this:

Quantity : number: 0

Burnishing Pads: dropdown: Make Selection,Burnishing Pads 21" (E84121-00) 2/cs {unlimited}, Burnishing Pads 24" (E84124-00) 2/cs {unlimited}, Burnishing Pads 27" (E84127-00) 2/cs {unlimited}

7) On the Custom CSS tab, copy and paste this code:

.checkbox, .radio {

margin: 3px 0;

min-width: 70px;

}

table#list {

width: 100%; border: 1px solid #ccc; padding:4px; 

} 

 .stepper-wrap input.stepper {

text-align: left; width: 20px; 

} 

select {

box-shadow: none; 

width: 100%; 

box-sizing: border-box; 

color: #444444;

outline: none; 

} 

th.col1, th.col2{

display:none !important;

padding: 0px;

margin: 0px;

} 

tr:first-child{

display:none;

}

Finally, you need to make sure the min and max rows is equal to 1 for both.

And the add, remove buttons are blank.

Like this: