Product order form: Is there a way to make less space between lines so it is more condensed?

1. The items in my Products box is very spread out. Is there a way to make less space between lines so it is more condensed? And perhaps add more space between the 9 Products themselves to section them off better?

Could you please illustrate with screenshots what space you want to reduce and increase between the products of your order form? 

To reduce space between all product items, you can do it by injecting this code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

.form-product-item {

    padding-bottom: 0px;

    padding-top: 0px;

    margin-bottom: 0px;

    margin-top: 0px;

}

Please inject the following CSS code in your form: 

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

/*Code to reduce the space between products of the same category, and keep a space between categories */

#cid_7 span.form-product-item:nth-of-type(5){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(9){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(12){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(15){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(17){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(20){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(23){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(24){

padding-top: 50px !Important;

}

/*END*/

Result:

Note: this code targets the main products in the order they are currently listed, if you add more products, then it could target other products. So, you can contact us to update the code.

Sorry, forgot to mention that you need to include this portion of code too:

.form-product-item {

    padding-bottom: 0px;

    padding-top: 0px;

    margin-bottom: 0px;

    margin-top: 0px;

}

So, the whole code would be:

/*Code to reduce the space between products of the same category, and keep a space between categories */

.form-product-item {

    padding-bottom: 0px;

    padding-top: 0px;

    margin-bottom: 0px;

    margin-top: 0px;

}

#cid_7 span.form-product-item:nth-of-type(5){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(9){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(12){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(15){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(17){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(20){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(23){

padding-top: 50px !Important;

}

#cid_7 span.form-product-item:nth-of-type(24){

padding-top: 50px !Important;

}

/*END*/

By adding your code it got rid of all my red heading boxes. So not good.

Hi,

I cloned your form and add my colleague's codes, I'm unable to replicate the issue. I'm still showing the red heading boxes on your form.

Kindly provide us a screenshot or the issue you are referring to, for us to better assist you. 

Looking forward to your response. Thank you.

The screenshot you have shared seems to from a different form, not the form where you want to remove the checkboxes out products that you are using as category titles: https://www.jotform.com/form/200164161802139

Here is my current clone version of your form, where all the provided code has been injected, and it works correctly: https://form.jotform.com/200197849869979

What do you mean a different form? Did I go into a wrong saved version or something? I've been working on it for hours and have made quite a number of changes! How could that be? And how do I make sure the most current form is the exact one I'm working on now??

It looks beautiful what you did, I just need it to be in the version I'm working on. :( 

UPDATE: I just clicked on the link you have above for my form, and it is in fact the same form as it even includes some revisions I made in the last 5 minutes. Something is wrong.

Could you please share the link of the form that you are currently working on? https://www.jotform.com/help/401-Where-to-Find-My-Form-URL

https://www.jotform.com/build/200164161802139

See my UPDATE note above.

Sorry, the previous screenshot you shared confused me. Anyways, I am glad to see that it is the same form. I have now injected the whole code in your form(200164161802139) to accomplish the desired design.

All of the product items are still very spaced out. I'd like them tighter with more space between individual product sections and the word "Quantity" indented and smaller like in my image above.

Kindly try to replace the value of the 'padding-top : 50px !Important;' to 80px on the codes provided by my colleague or try to replace these CSS codes:

To this: 

#cid_7 span.form-product-item:nth-of-type(5), #cid_7 span.form-product-item:nth-of-type(9), #cid_7 span.form-product-item:nth-of-type(12), #cid_7 span.form-product-item:nth-of-type(15), #cid_7 span.form-product-item:nth-of-type(17), #cid_7 span.form-product-item:nth-of-type(20), #cid_7 span.form-product-item:nth-of-type(23), #cid_7 span.form-product-item:nth-of-type(24) 

{

    padding-top : 80px !Important;

}

Then, if you want to add more space in between the products you can change 80px to a higher value. Let us know if it didn't meet your requirements.

There is no 50px, the only padding I see is 25px and I'm not seeing that exact coding to replace it. So what to do?

Good day @ResumeProducts! 

I see that the space of the products is not looking as I had left them last time:

May I know what happened? I had injected the whole code to make the space look like in the screenshot example you shared:

Anyways, here is the link of latest clone version of your form(which looks very similar to your screenshot example): https://form.jotform.com/200197849869979

If my clone version is still want you want, would you mind cloning and using it instead?

You can clone it as shown of this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

I just reread everything in another thread and posted this. Please coordinate so I can finalize everything:

I've come to realize that since I'm not able to list all of the individual items in a drop-down list, I CAN actually go with something like what Mike G mentioned (see below). That would actually work fine. However, I'd like to keep the bold headings (without the "Free") and the price on each item as I have on my form. I like the "Product Option" and "Quantity" the way they are as captions.

There was other code added and now I don't know what to do to make it like that.

Hi again, I have injected this CSS code at the end of your form's CSS code area: 

#cid_7 span.form-product-item:nth-of-type(5), #cid_7 span.form-product-item:nth-of-type(9), #cid_7 span.form-product-item:nth-of-type(12), #cid_7 span.form-product-item:nth-of-type(15), #cid_7 span.form-product-item:nth-of-type(17), #cid_7 span.form-product-item:nth-of-type(20), #cid_7 span.form-product-item:nth-of-type(23), #cid_7 span.form-product-item:nth-of-type(24) {

    padding-top : 80px !Important;

}

.form-product-item {

    padding-bottom: 0px;

    padding-top: 0px;

    margin-bottom: 0px;

    margin-top: 0px;

}

Your form products space is now looking as desired:

Link to your form: https://form.jotform.com/200164161802139 

This looks very good. I'd prefer the method in the other thread (pictured above under Mike, with modifications) though because it's more straight forward.

If for some reason that can't be done and we use this method, 

1. Please delete some of the extra space between sections.

2. Delete check-off button in front of Mini Resume Workbooks.

3. Can the Titles come more to the left up to the product image?

4. Can the product image be made bigger?

TIA

Hi again,

Kindly give me some time to work on your requirements. I will also try to ask for a cloned form of @Mike's version so that we could start from there and will probably add new CSS codes.

 I will get back to you shortly. Thank you.

I am still waiting on this, has it been done?? I'm so late getting this form completed. Please tell me you figured out a solution. 

We are still working on your form.

I still need more time to finalize the style/format of the products.

But here is Sample Form that is a cloned version of  your form and is based on your most recent requirements — https://form.jotform.com/200245903740952

Please check that form and let us know if there's anything you want to add/remove.

It is starting to look a lot better!

1. Can the Item Subtotal line be the same size as Price and Quantity—with less space before it?

2. There needs to be more space between the 9 products.

3. Can the PRICE and QUANTITY columns line up on the right all the way down?

4. Can the Product image be bigger?

5. Oh and when I tried filling out the form, once I checked off a Quantity, it wouldn't allow me to uncheck it or bring it to "0."

If you can make all can happen, it will be perfect!!

Thanks for providing more information. We'll check on that and revert.

1. Also I noticed that Resume Writer System-in-a-Box doesn't have anything underneath it to select, so I added "Whole Resume Writer System $1389."

2. I made a couple of word changes in the Product section. That shouldn't change any of your coding, correct? And I will be able to change verbiage in the future too, right?

3. I see that the Quantity goes up to 10 for everything. To be safe, let's make it 25. Is that something I'd be able to change on my own going forward?

4. Lastly, there's no reason for anyone to order more than one when ordering "All" of a category. Do you have any suggestions about that (I was thinking a check-off box for that one, but that would throw off the look you've created). Otherwise, I guess we can just leave it, but change the Quantity option to "0, 1, 2, 3." Thoughts? 

When do you think you will have this done? I'm so behind in finishing this form, as it's the only thing holding me up to get my website published.

Additionally, we suggest hiring a freelancer on Upwork to meet your deadline because we are only doing such a thing in our free time. Also, we are currently receiving a lot of tickets and threads so we are unable to give you an estimated time for your requests. Thank you.

In #4 above I said that each of the main products shouldn't have "Quantity" as they would only order one since it includes everything, and that would throw off the column theme if you guys went with the alternative look.

So instead of you guys trying to figure out how to correct that issue, I viewed this thread and the first image I posted shows what I originally requested. I only need a Quantity field after the subheads (preferably on the same line as there is a lot of space on the right side that it should be extended to) and it would include the check-off boxes as I had wanted. This would solve the quantity problem and I believe would be easier for you guys to complete as a lot of the field is already set up this way.

I totally want to go with this for the Product section (it also addresses the request to make the products larger, fix the spacing problem, and will make the form a whole lot shorter!):

Also please widen the "*List Your Product Selections" text box under it so it lines up with the Terms text box. In fact, all text boxes should be lined up to the right on the form. 

This would resolve the entire Product section. Please tell me you guys can do this!

Kindly give us some time to meet your other requirements, as we can only do so much due to time constraints and will get back to you as soon as possible.

If you have a deadline to meet, you can consider hiring a freelancer in Upwork.com to build the form on time.

Thank you. 

Okay, but I can have my Products section look like the image I included right?

If this format/style is exactly what you are looking to achieve with the products in your form

then, yes, that would be possible, using custom CSS codes. However, we cannot guarantee that it can be done anytime soon. But, once we have an update we will notify you in this thread the soonest.

Okay thanks. The sooner the better. They had adjusted it before to look similar (what's on my form now) and it didn't take long though (same day). 

Please note that once we have an update on this form, we'll update via this thread.

Please, please, please make this happen today. My husband is in the hospital again having yet another heart surgery, I'm so hoping when I come back home later I will have something to cheer me up. :(

I have below is a cloned version of your form.

https://form.jotform.com/200305457924957

If you check you will see that I have made changes to the first section of the payment field. And I hope that is what you are looking to achieve.

It is based on your screenshot above. https://www.jotform.com/answers/2124585#2136019

I'm sorry if that is what I only have for now, but I hope it will somehow cheer you up. We will continue to work on your form and update you in this thread.

OMG yes exactly! Thank you so much! 

(I see that in the preview it runs off the page, so I'm going to delete the word "selections" to make it shorter.) Also the price should be smaller (same font size). And a little more space (one line) between products.

Let's make it happen!

Thank you for confirming.

Please allow me some time to continue working on your form. I'll also make the adjustments you mentioned in your last reply.

Okay thank you.

Anything yet? How close are you to finishing this section?

Let me check with my colleague and we'll revert via this thread.

Okay, but it's been a week though. :( Please hurry.

You may reduce the price font and create a space between the quantity using this custom CSS

span.form-product-details {
    font-size: 14px !important;
    margin-right: 5px;
}

Sample Screenshot:

Sample Form:https://form.jotform.com/200375965948974

Let us know if this fits your requirements.

First of all, we would like to let you know that we appreciate your time and patience in waiting for the solution we have for your concern.

Below is the final form I have created that is based on the requirements you mentioned in one of your replies above.

Here's the link:

https://form.jotform.com/200397249356966

That would be fine but the whole section hasn't been done yet, so why would I add more code now? Also the circles can be made smaller and Quantity not bold so it would all look and fit better.

I've been waiting for this section to be corrected for like 2 weeks now. Please get it done in a day or so. TIA

Please check the form link shared by my colleague above. The bold option for the term "Quantity" has been removed.

Oh yay that looks great! Just bring the Quantity up on the same line on the ones that it went to a second line.

I just checked it on mobile, and it's not responsive, everything is getting cut off and the Quantity box is way too extended. 

Once those things are corrected, it will be done!

Please allow me some more time to figure out the code to use.

I will get back to you on this thread shortly.

Okay, great, thanks.

Hi again - Please try adding this few lines of custom CSS codes to your form:

@media screen and (max-width: 480px){

span.form-product-item{

    width:97%!important;

}

.form-product-name{

    font-size:12px!important;

}

#product-name-input_7_1001, #product-name-input_7_1002, #product-name-input_7_1003, #product-name-input_7_1004, #product-name-input_7_1010, #product-name-input_7_1006, #product-name-input_7_1007, #product-name-input_7_1005, #product-name-input_7_1009{

  font-size:16px!important;

}

}

This will make the product field appear more responsive when viewed on mobile.

I added it but am unable to see it on mobile, not sure what to do. Also don't we still need to add coding for the actual section? And what coding would that be?

I checked your form and it seems that you have removed all the quantity selector for all products. Are you finalizing your form without the quantity selection?

No I didn't remove or change anything. In fact, I haven't touched it in like a month because you guys were working on making it look right. You never told me how to incorporate your fixes. Do I need to add coding or what to make it look like you did?

Since it is easier if we just apply the changes to the style of a cloned version of your form first before we give you its link so you can create a copy of it in your account, we didn't give you the codes that you need to inject to the existing original version of your form in your account. Also, this is to avoid confusion with the instructions.

Nevertheless, I have below another cloned version of your form where I have applied some changes to make it mobile responsive.

https://form.jotform.com/200465563193960

Kindly check it and let us know if you need any further assistance.

This is looking great. The only thing is I don't like the extra spacing between listed items. Also, there need not be any cents after the dollars. If we could fix those 2 things we'd be right on target!

Can you describe what "extra space" are you referring to, please? Is that something that can be seen when the form is viewed on mobile, or on desktop, or both?

As for removing the decimal, that can be done under the Additional Gateway Settings of the payment field.

I have disabled the "Use Decimals" in my Sample Form, but I see that I need to make some more adjustments so the quantity field in some products will move to the next line.

If you click on the link you provided above, that's where I saw the extra spacing between check-off circles.

Do you mean changing the space from this:

To this?

If that is correct, please inject this code:

#cid_7 span.form-product-item:nth-of-type(2),

#cid_7 span.form-product-item:nth-of-type(3),

#cid_7 span.form-product-item:nth-of-type(6),

#cid_7 span.form-product-item:nth-of-type(7),

#cid_7 span.form-product-item:nth-of-type(10),

#cid_7 span.form-product-item:nth-of-type(13),

#cid_7 span.form-product-item:nth-of-type(18),

#cid_7 span.form-product-item:nth-of-type(21),

#cid_7 span.form-product-item:nth-of-type(26){

    margin-bottom: 0px !important;

}

Result: https://form.jotform.com/200487254055958

EXACTLY! Now it is perfect! THANK YOU SOOO MUCH!

Do I inject the code in the whole section at the bottom of the other codes?

Oh I just noticed, once a quantity is clicked, there is no way of going back to zero (if it was clicked on by accident or they changed their mind). Can you make that happen please?

Yes, inject the code at the bottom after the other codes.

In order to make the total zero when the quantity is selected, the product needs to be unchecked:

Please open a new forum thread if you need anything else, we will be glad to assist you.

 I injected the code in the Product Order section and nothing happened, it still looks the same as before. :/ 

I have checked a cloned version of your form and it seems the issue is with the current custom CSS in your form.

I'm not sure which custom CSS is making the issue however, you may clone my form and copy and paste all the custom CSS inside the Inject Custom CSS to fix the issue with your form.

Here is my cloned form:https://form.jotform.com/200494562157961

To clone a form, you can follow this guide:https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

Please give it a try and let us know if the issue still remains.

I'm afraid to do that as last time I did I lost my form and got very worried. Can you just paste the correct code in my existing form  p l e a s e?

As requested, I have replaced the custom CSS codes you have in your form with the codes found in my colleague's form above.

Please test the form again and see if it works now based on the requirement.

By the way, I have secured a back-up of the previous codes you have in the form. In case you want to revert, we can paste the previous code again.

I

This thread is too long to read now. I think many of the previous questions have been answered already. Allow me to address your new questions in separate thread below.

https://www.jotform.com/answers/2176695 

I'll follow up shortly.