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

  • Profile Image
    ResumeProducts
    Asked on January 20, 2020 at 06:15 PM

    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?

    1579564947Product spacing.jpg

  • Profile Image
    BDAVID
    Answered on January 20, 2020 at 06:26 PM

    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;

    }

  • Profile Image
    BDAVID
    Answered on January 20, 2020 at 08:20 PM

    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:

    1579569469fix.gif

    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.

  • Profile Image
    BDAVID
    Answered on January 20, 2020 at 08:22 PM

    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*/

  • Profile Image
    ResumeProducts
    Answered on January 21, 2020 at 02:16 PM

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

  • Profile Image
    KrisLei
    Answered on January 21, 2020 at 03:11 PM

    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.

    1579637361CSS codes.gif

    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.

  • Profile Image
    ResumeProducts
    Answered on January 21, 2020 at 03:44 PM

    1579639457Screen Shot 2020-01-21 at 3.42

  • Profile Image
    BDAVID
    Answered on January 21, 2020 at 04:58 PM

    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

    1579643830form.gif

  • Profile Image
    ResumeProducts
    Answered on January 21, 2020 at 05:23 PM

    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.

  • Profile Image
    BDAVID
    Answered on January 21, 2020 at 05:26 PM

    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

  • Profile Image
    ResumeProducts
    Answered on January 21, 2020 at 05:36 PM
  • Profile Image
    BDAVID
    Answered on January 21, 2020 at 06:14 PM

    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.

  • Profile Image
    ResumeProducts
    Answered on January 21, 2020 at 07:05 PM

    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.

  • Profile Image
    KrisLei
    Answered on January 21, 2020 at 08:38 PM

    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:

    1579656909CSS codes.jpg


    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.

  • Profile Image
    ResumeProducts
    Answered on January 22, 2020 at 02:02 PM

    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?

  • Profile Image
    BDAVID
    Answered on January 22, 2020 at 04:13 PM

    Good day @ResumeProducts

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

    1579727215space.gif

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

    1579564947Product spacing.jpg

    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

    1579726932cloneversion.gif

    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

  • Profile Image
    ResumeProducts
    Answered on January 23, 2020 at 01:39 PM

    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.

     

    1579806323Question List.png

     

  • Profile Image
    BDAVID
    Answered on January 23, 2020 at 02:39 PM

    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:

    1579808300CSScode.gif

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

  • Profile Image
    ResumeProducts
    Answered on January 23, 2020 at 05:51 PM

    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

  • Profile Image
    KrisLei
    Answered on January 23, 2020 at 08:38 PM

    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.

  • Profile Image
    ResumeProducts
    Answered on January 25, 2020 at 02:43 PM

    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. 

  • Profile Image
    Mike_G
    Answered on January 25, 2020 at 05:42 PM

    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.

  • Profile Image
    gerardw
    Answered on January 25, 2020 at 07:14 PM

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

  • Profile Image
    KrisLei
    Answered on January 26, 2020 at 03:44 PM

     

    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."

    To clarify, the price of this product is not visible on the form builder? Try to duplicate the product then it should show the price on the cloned product.

    1580070591duplicate product.jpg


    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?

    Yes, you are correct you can change any settings on the payment widget settings. But if the form is embedded to a website you still need to re-embed the form because the changes don't sync automatically on websites.

    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?

    Are you referring to the Quantity options on the products? Yes, you can change it on your end through the product settings. Scroll down to access the Quantity Options and you can change the range or the value on this option.

    1580071048product settings.gif


    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? 

    You can also change the range from 0-25, as shown in my answer to question 3.

    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.

    My colleague, @Mike_G, is still working on your form to meet your requirements. Please give him more time to come up with the necessary codes for the changes. 

  • Profile Image
    KrisLei
    Answered on January 26, 2020 at 04:24 PM

    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.

  • Profile Image
    ResumeProducts
    Answered on January 28, 2020 at 12:43 PM

    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!):

    1580232820Products List.png

    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!

  • Profile Image
    KrisLei
    Answered on January 28, 2020 at 02:11 PM

    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. 

  • Profile Image
    ResumeProducts
    Answered on January 28, 2020 at 02:12 PM

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

  • Profile Image
    Mike_G
    Answered on January 28, 2020 at 03:50 PM

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

    1580244300zt15_44_05.png

    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.

  • Profile Image
    ResumeProducts
    Answered on January 28, 2020 at 06:08 PM

    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). 

  • Profile Image
    gerardw
    Answered on January 28, 2020 at 07:17 PM

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

  • Profile Image
    ResumeProducts
    Answered on January 31, 2020 at 12:50 PM

    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. :(

  • Profile Image
    Mike_G
    Answered on January 31, 2020 at 03:44 PM

    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

    1580503306zt15_35_30.png

    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.

  • Profile Image
    ResumeProducts
    Answered on February 01, 2020 at 01:23 PM

    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!

  • Profile Image
    Mike_G
    Answered on February 01, 2020 at 02:47 PM

    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.

  • Profile Image
    ResumeProducts
    Answered on February 01, 2020 at 04:39 PM

    Okay thank you.

  • Profile Image
    ResumeProducts
    Answered on February 05, 2020 at 05:38 PM

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

  • Profile Image
    gerardw
    Answered on February 05, 2020 at 07:06 PM

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

  • Profile Image
    ResumeProducts
    Answered on February 07, 2020 at 01:38 PM

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

  • Profile Image
    Richie_P
    Answered on February 07, 2020 at 02:40 PM

    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.


  • Profile Image
    Mike_G
    Answered on February 10, 2020 at 06:57 PM

    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

  • Profile Image
    ResumeProducts
    Answered on February 10, 2020 at 08:12 PM

    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

  • Profile Image
    gerardw
    Answered on February 11, 2020 at 02:29 AM

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

  • Profile Image
    ResumeProducts
    Answered on February 15, 2020 at 12:53 PM

    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. 

    1581789052Screen Shot 2020-02-15 at 12.4

     

    Once those things are corrected, it will be done!

  • Profile Image
    JohnRex
    Answered on February 15, 2020 at 01:41 PM

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

    I will get back to you on this thread shortly.

  • Profile Image
    ResumeProducts
    Answered on February 15, 2020 at 01:52 PM

    Okay, great, thanks.


  • Profile Image
    JohnRex
    Answered on February 15, 2020 at 03:31 PM

    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.

  • Profile Image
    ResumeProducts
    Answered on February 15, 2020 at 06:50 PM

    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?

  • Profile Image
    Jed_C
    Answered on February 15, 2020 at 08:18 PM

    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?

    1581815875The Easiest Online Form Builde

  • Profile Image
    Evelyn Salvador
    Answered on February 16, 2020 at 02:03 PM

    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?

  • Profile Image
    Mike_G
    Answered on February 16, 2020 at 05:36 PM

    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.

  • Profile Image
    ResumeProducts
    Answered on February 18, 2020 at 02:24 PM

    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!

  • Profile Image
    Mike_G
    Answered on February 18, 2020 at 04:20 PM

    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.

    1582060698zt16_17_47.png

    1582060726zt16_18_31.png

    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.

  • Profile Image
    ResumeProducts
    Answered on February 18, 2020 at 04:21 PM

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

  • Profile Image
    BDAVID
    Answered on February 18, 2020 at 05:46 PM

    Do you mean changing the space from this:

    1582065813this.png

    To this?

    1582065829this_001.png


    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

  • Profile Image
    ResumeProducts
    Answered on February 18, 2020 at 05:47 PM

    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?

  • Profile Image
    BDAVID
    Answered on February 18, 2020 at 07:04 PM

    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:

    1582070466cloneversion.gif

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

  • Profile Image
    ResumeProducts
    Answered on February 19, 2020 at 10:02 AM

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

  • Profile Image
    Richie_P
    Answered on February 19, 2020 at 11:47 AM

    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.

  • Profile Image
    ResumeProducts
    Answered on February 21, 2020 at 03:03 PM

    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?

  • Profile Image
    JohnRex
    Answered on February 21, 2020 at 04:29 PM

    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.

  • Profile Image
    ResumeProducts
    Answered on February 23, 2020 at 12:24 PM

    I

    was going to say I love it, but the Quantity selections are not showing up as you had in your sample. Also please fix the error under Designer Resume Templates. Lastly, can the product rectangles be the actual shape (wider)? TIA
  • Profile Image
    Welvin
    Answered on February 23, 2020 at 12:54 PM

    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.