What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to adjust Product list container and change the labels?

    Asked by Scienceposters on May 05, 2017 at 04:11 AM

    hello - i am havign issues with the forum and also this form - the script has got corrupted and also i have tried asking a question for help twice and no replly - hence resurrecting this post.

    The titles on the form (paper printin, fabric printing and delivery) now have the word "free" next to it - can this please be removed. Secondly the quantity choice boxes are no longer to the right of the descriptions - meaning the form is untidy and twice as long as it needs to be - can this be changed too? I would be most grateful if you could help please?

    many thanks

  • Profile Image
    JotForm Support

    Answered by Nik_C on May 05, 2017 at 05:01 AM

    I checked your form and I see what you're referring to:

    The word Free appeared because the product doesn't have a price so it is automatically marked as Free.

    Regarding the QTY alignment I changed this two lines:

    Or you can copy and paste the below CSS instead of your CSS code:

    .form-product-item .form-sub-label-container {

        float : right !important;

        display : block;

        position : relative;

        margin-top : -24px!important;

    }

    .form-product-item .form-sub-label-container {

        margin-right : -66px!important;

    }

    .form-product-item.hover-product-item {

        width : 450px;

    }

    .form-submit-button {

        margin-left : -193px;

    }

    .form-special-subtotal {

        margin-top : 25px;

        margin-left : 250px;

    }

    #input_1_quantity_1003_1 {

        width : 50px;

        margin-top : 35px;

    }

    #input_1_custom_1003_0 {

        width : 150px;

        margin-top : 35px;

    }

    #label_1 {

        font-size : 16px;

    }

    .form-dropdown {

        width : 50px;

    }

    .form-description {

        margin-top : 55px;

        margin-right : 510px;

        width : 375px !important;

        max-width : 375px !important;

    }

    #coupon-container {

        width : 400px !important;

    }

    input[id*="1017"], input[id*="1018"], input[id*="1019"] {

        display : none;

        pointer-events : none;

    }

    input[id*="1017"] + label > .form-product-details, input[id*="1018"] + label > .form-product-details, input[id*="1019"] + label > .form-product-details {

        display : none;

    }

    label[for*="1017"],label[for*="1018"],label[for*="1019"] {

        font-weight : bold;

        text-decoration : underline;

        pointer-events : none;

    }

    And it will align them like this:

    Regarding the wording Free, I'm still checking how to adjust that, I'll get back to you with my findings.

    Thank you!

  • Profile Image

    Answered by Scienceposters on May 05, 2017 at 05:20 AM

    thankyou - if you could just save my form with the changes I would be most grateful

  • Profile Image
    JotForm Support

    Answered by amy on May 05, 2017 at 07:00 AM

    Hi,

    Would you please let us know the URL of your form? Also, please confirm us to operate on the form via this thread. Otherwise, we will not be able to take any action on your form without your permission. 

    We'll be awaiting for your response.

    Thanks in advance.

    Kindest Regards.

  • Profile Image

    Answered by Scienceposters on May 05, 2017 at 08:07 AM

    I've already asked if you can make the changes on my previous comment?! I hereby authorise you to make the changes that I want - is that ok?

    my form is hosted here https://www.scienceposters.co.uk/thanks2.htm

    https://form.jotform.com/61401339504952

     

    maybe it just needs making wider too - the 10.80 has dropped onto the next line also - but please can you help - it was perfect until the upgrade...I have made no changes at all

     

  • Profile Image
    JotForm Support

    Answered by amy on May 05, 2017 at 09:49 AM

    Hi,

    I would like to inform you that I have injected the Custom CSS codes which my colleague has shared as per your request. We can guide you to change your forms yourself. Because of this reason, we cannot apply all custom changing requests. 

    You can change the width of your form in the Advanced Designer panel. Please click on the "Form Designer" button and then open the "Advanced Designer".

    Then please change the width of your form from the "Form Layout" tab.

    If you need any further assistance, please let us know.

    Thank you.

     

  • Profile Image

    Answered by Scienceposters on May 05, 2017 at 10:23 AM

    thankyou for this. Ok hopefully last couple of things - the Royal Mail Special Delivery option has the 10.80 GBP on the next line - can this be made to the right (ie one line)? Can all the quantity boxes be moved slightly to the right - at the moment it is overlapping with the A4 handouts option. And lastly - is there any way to remove the "Free" which is after each header?

    many thanks

  • Profile Image

    Answered by RyanC on May 05, 2017 at 11:58 AM

    I think this solves your problem. Just add these CSS codes

     

    .form-product-item.hover-product-item {

        width: 550px;

    }

     

    .form-checkbox {

        margin-right: 2px;

    margin-top: 7px;

    }

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 05, 2017 at 12:08 PM

    @Scienceposters,

    I can see on your CSS code you have reduced the width for the products item container to 450px: 

    .form-product-item.hover-product-item {

        width : 450px;

    }

    If you either remove that code or inject the one below, you will notice the product names will display in one  line only: 

    .form-product-item.hover-product-item {

        width : 100%;

    }

    It may also be required to increase the form's width, you could do it by following the steps given by Amy above. 

    Regarding to hide the "free" word after the product section, this code should help you to get rid of it: 

    span.form-product-item:nth-child(2) .form-product-details, span.form-product-item:nth-child(10) .form-product-details, span.form-product-item:nth-child(30) .form-product-details {

        display: none;

    }

    To get the check box and product name aligned, you could achieve it by injecting this code: 

    .form-product-item .form-checkbox {

      margin-top: 7px;

    }

    The same code given by @RyanC, but specifying that only check boxes inside the ".form-product-item" class should be affected, otherwise all the check boxes on your form would be affected for this code. 

    Please, check my cloned form where you can see the result of injecting the given code: https://form.jotformpro.com/71244453109956 

    Hope this helps. 

  • Profile Image

    Answered by Scienceposters on May 08, 2017 at 03:52 AM

    this cloned form is perfect - can you please amend my form - I've already given permission for this to happen in this thread. I cannot see the cloned form on my account to use it. thanks!

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 08, 2017 at 03:59 AM

    Hi,

    To clone the demo form of my colleague to your account to use it, please refer to this guide on How to Clone an Existing Form from a URL.

    Thanks.

  • Profile Image

    Answered by Scienceposters on May 08, 2017 at 04:05 AM

    thanks Chriistian - however I would be much happier if my form were just amended - otherwise i'll have to redo my entire website and reupload the entire website to my server. As per the numerous comments and permissions can the script just be applied to my form and saved? please? feel like i'm going around in circles here!

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 08, 2017 at 04:27 AM

    As per your request, I have now added the custom CSS provided by my colleague to your form and also adjusted the form width.

    Please let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by Scienceposters on May 08, 2017 at 04:37 AM

    thankyou very much