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

    CSS changes to Purchase Order - Alignment, Font Size

    Asked by RogerYelvington01 on January 14, 2014 at 08:18 PM

    Hey Guys! 

    I would like to see how close I can come to the following changes by injecting the right CSS codes into my form - specifically for making changes to the Purchase Order section:

    1. Column & Field Alignment
    2. Increase Sub-Total Font Size
    3. Border 

    For reference I've attached an image of what I'm shooting for.  Thanks so much for your help!
    Kind regards,

    Roger 

    Page URL:
    http://forms.atfgyms.com/form/40135756773964

    Screenshot
    size alignment font size purchase
  • Profile Image

    Answered by Cesar on January 14, 2014 at 09:38 PM

    I have cloned your form. Once I perform some changes on it, I will let you know through this thread. Thank you.

  • Profile Image

    Answered by RogerYelvington01 on January 14, 2014 at 09:47 PM

    Cesar - you the man!  Thanks for your response, I'll look forward to you workin' your magic :)

    Thank you,

    Roger

  • Profile Image

    Answered by RogerYelvington01 on January 14, 2014 at 10:04 PM

    As a note - I did do an update to the fields in the section as far as content, but I doubt it would change any layout your working on?

    Just wanted to keep you posted.

  • Profile Image
    JotForm Support

    Answered by jonathan on January 14, 2014 at 10:41 PM

    Hi Roger,

    Thank you for taking the time to update us.

    I am sure our colleague Cesar will get back to you with his solution once he's back online.

    Thanks.

  • Profile Image

    Answered by Cesar on January 15, 2014 at 03:09 AM

    Sorry for the delay. Kindly try out my example form: http://form.jotformpro.com/form/40138165495962

    The Code I Injected goes as follows:

    #input_75_custom_1003_0 {
    float: right !important;
    position: relative !important;
    margin-top: -72px !important;
    left: 229px !important;
    }

    #input_75_custom_1003_0 + label {
    float: right;
    position: relative;
    margin-top: -50px;
    left: 218px;
    }

    #input_75_custom_1006_0 {
    position: relative;
    float: right;
    margin-top: -120px;
    left: 229px;
    }

    #input_75_custom_1006_0 + label {
    float: right;
    position: relative;
    margin-top: -98px;
    left: 70px;
    }

    #input_75_1006.form-checkbox{
    position: relative;
    top: -54px;
    }

    [for="input_75_1006"]{
    position: absolute;
    top:-47px;
    left: 30px;
    }

    .form-payment-total{top:-20px;
    position: absolute;
    left: 530px;
    top:300px;
    }

    label[for="input_75_1001"] span b{
    position: absolute;
    margin-left: 474px;
    margin-right: -600px;
    font-size: 16px;
    }

    label[for="input_75_1003"] span b{
    position: absolute;
    margin-left: 404px;
    margin-right: -600px;
    font-size: 16px;
    }

    label[for="input_75_1006"] span b{
    position: absolute;
    margin-left: 520px;
    margin-right: -600px;
    font-size: 16px;
    }

    End Result:

    https://cms.jotform.com/uploads/image_upload/image_upload/global/23460_css.png

    Feel free to clone the form is needed

    Do let us know if you need further assistance.

     

    Related Article:
    How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image

    Answered by RogerYelvington01 on January 15, 2014 at 11:19 AM

    Hey Guys!

     

    Upon injecting the CSS, I did not see the needed changes.  Is it because I changed some of the items in the order box?  Please advise, thank you!

     

    Roger

  • Profile Image

    Answered by EliezerN on January 15, 2014 at 12:33 PM

    @Roger

    Yes, it is due to the new items you added to the order section. Now, I cloned your form in order to help you to fix it, so, can you please confirm that the way Cesar had setup the form is the way you want it to be?

    In that way I can start looking for the correct code, also make sure to add all the needed items that will help us to accomplish this earlier.

    I will get back to you once I accomplish the desired style.

    Thanks

  • Profile Image

    Answered by RogerYelvington01 on January 15, 2014 at 03:02 PM

    Hi!  Yes, his layout was perfect, thank you- I'd like the same style.

  • Profile Image
    JotForm Support

    Answered by Mike_T on January 15, 2014 at 04:06 PM

    Is this the final product page? If there are any more products, please add them now, since each product will need a custom style injections.

  • Profile Image

    Answered by EliezerN on January 15, 2014 at 07:38 PM

    Hi again Roger, 

    I apologize for the delayed response and thank you for your patience.

    After working on the form I was able to give it the desired style. So, here is my cloned form: http://form.jotformpro.com/form/40146712275955

    It looks this way: 

    I removed the code suggested by my colleague and elaborated a new one, you can find the CSS code I used in this link: http://pastiebin.com/52d728b38f1f2

    If that is what you were looking for feel free to clone my form, here is how: How to clone an existing form from a URL

    Inform us if you need further assistance with this inquiry or kindly open new threads to post unrelated questions.

    Thanks