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.

  • Profile Image

    How can I customize the display of payment items?

    Asked by mkaske on January 17, 2012 at 07:45 PM

    How can I customize the display of payment items? For example I would like to make the price display larger and in bold so that people can better see the prices on things.



    This is a re-post of a comment on Order Form Basics

    prices
  • Profile Image
    JotForm Support

    Answered by liyam on January 17, 2012 at 11:17 PM

    Hello,

    You can do this by using CSS injection.  You can simply open the souce of the HTML page and find the relevant class, or ID of the tag that you wish to change the formatting.  Another possible way is to get the source code and paste it on your own web page.  This way you are more free to customize the whole page as long as the tags and fields are in tact.

    You may also just ask us which parts of your form you wish your layout formatted.  This way, we'll be able to see further if the layout that you're wanting to achieve is feasible without taking off the source code and placing it on your own web page.

    You may also read this user guide on how to do CSS injection in forms: http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes

  • Profile Image

    Answered by mkaske on January 18, 2012 at 09:03 AM

    Thank you for the response. I am attempting to make the prices of items in the Payment tools section display in bold and larger. When I look at the code for my form it says that the pricing is - <span id="">40.00</span>

    as an example. How do I make that span id larger and in bold? 

    Thank you again for your assistance!

  • Profile Image
    JotForm Support

    Answered by NeilVicente on January 18, 2012 at 09:26 AM

    Mark,

    These are the css codes you should inject in your form to customize the prices' appearance:

    .form-product-details b {
        font-size: 12px;
        font-style: normal;
    }

    You may adjust the value of font-size to your liking. The second property (font-style:normal;) removes its italicization.

    To inject these codes in your form:

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

    If you have further questions about this topic, please feel free to ask.

  • Profile Image

    Answered by mkaske on January 18, 2012 at 09:30 AM

    You guys have been most helpful! Thanks!