Adjust width and location of Collapse field & Show Hide Conditional logic

Hello,

I am having some trouble figuring out a couple aspects of the form I am building for our redesigned website.

First I would like to resize 3 collapse fields for the can fit next to the image picker widget on the form. The 3 collapse fields are: Primary Color, Secondary Color, And Tertiary Color.

The idea is for the corresponding Color/image to display within each field when the image is selected in the image picker widget.

Not entirely sure how to go about setting up the conditional logic to accomplish this. I have been experimenting for several hours after receiving assistance with the previous issue I encountered this morning. I essentially duplicated the image picker widget for each collapse section to ensure the values/image for each color were the same. However, this is where I'm stuck in accomplishing the desired outcome. Would greatly appreciate the assistance in figuring this out.

Hi Frank,

Thanks for reaching out to Jotform Support. To place the section collapse elements, next to the image picker widget, you can replace the CSS code you've injected to your form, with the code below:

.form-line-column[id="id_42"] {

    width: calc(90 / 2* 1% - 8px);

    background-color: red;

}



.form-section-closed{

  width:50% !important;

}



ul.form-section:not(.page-section) {

    width: 50% !important;



}



ul#section_118 {

    margin-top: -380px;

    margin-left: 645px;

}





ul#section_116 {

    margin-top: -450px;

    margin-left: 645px;

}

As for the main requirement, where you need to display the image, can you elaborate more on that? I'm quite confused with what you want to do. I do see you have image picker widgets inside the section collapse as well, I'm not sure if your question is related to that.

Once we hear back from you, we'll be able to check if it's possible.

Hi, Thanks for the response. Yes, I can elaborate.

In this section, the customer is asked to select their team colors for the custom uniform design being requested. The idea is for them to select the team colors from the main image picker widget, in order of importance, and have the selections displayed within the 3 fields on the right side. The main team color, the first selection, in the "Primary Color" section. The second color they select in the "secondary Color" section. Third image/color selected in the "Tertiary Color" section.

Not sure if that can be accomplished with the widgets that are currently in the collapse sections. But those are the images of the colors options.

The above Code did not seem to do anything. I may be doing something wrong. Would greatly appreciate further assistance.

Hi Frank,

Thanks for getting back and explaining it in more details to us. Do you mean to say you want your users to select three colors from the main image picker widget? After that, those colors should get passed to three different image picker widgets, which will show the primary color, secondary color, and Tertiary Color?

If so, it would be better to show three different image picker widgets with all the color. Let the users select the primary, secondary, and Tertiary Color by themselves in those image picker widgets and remove the main image picker widget to avoid confusion.

If that’s not exactly what you’re looking for, can you explain a bit more, so I can help you better? It would also be great if you could share some reference if you have any, so we can check on it.

Once we hear back from you, we'll be able to move forward with a solution.

Hi Frank,

I believe this is how you wanted your Image picker widget should look like.Which is allowing your users to select primary color, secondary color, and Tertiary Color.

I cloned your form and made a few changes to it. First, I removed the Main Image picker widget and second enabled the Column function in the form, which will show three fields in a single row. That is the reason all three image picker widgets are showing in line.

It is easy to enable the column feature in form and to show the three fields in a single row.Let me show you how :

1. Click on the Paint brush icon in the top-right corner of the screen.
2. Scroll down to the end and click on the Advance designer button.
3. Expand the Form layout option on the left.
4. Enable the Enable form columns checkbox and set the Number of column to 3.
5. Click on the Save button in the upper-left corner of the screen.

Reach out again if you require any other help.

Hello, Thanks for the response. I apologize for the delayed response.

The Idea was to show the user in real time the 3 colors they chose while on that section of the form. What we didn't want was for the 3 sections to be super long, as in your example. Your suggestion did provide some inspiration for another way to accomplish this goal - We can just duplicate the original widget and use them as collapsible elements for Primary, Secondary, and tertiary selections.

Hi Frank,

Thanks for getting back to us. To clarify, you only want to display the colors that have been selected from the three color categories, is that correct? Say for example I'm on the Primary Color collapse section and I select white, you want all the other colors to disappear and simply retain the white color that was selected, making it less crowded with options.

If that's exactly what you're trying to do, then you may consider using the Image Choices widget instead. Check this out:

As you can see, at the end, it will display only the selected items. Is that something that'll work for you?

Let us know if there's anything else we can help you with.