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

    Can you provide some style improvements that will widen the payment widget and correct other issues?

    Asked by abennet4 on September 15, 2016 at 08:28 PM

    Now - any way to improve the presentation?  Can you provide some style improvements that will widen the payment widget, make the "calc" provided values look the same as the text its next to and remove the bounding box?

    https://www.jotformpro.com/form/62586721030956?preview=true

     

    The reason my subscription description is so long is I need this when it gets to the payment gateway to properly categorize my donation in Quickbooks.  ie. Baby's Home - $30 Sponsorship

  • Profile Image
    JotForm Support

    Answered by BDAVID on September 15, 2016 at 08:43 PM

    You can inject the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-product-item{

        width: 520px !important;

    }

    Result:

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image

    Answered by abennet4 on September 15, 2016 at 08:59 PM

    thank you.

    Any way to also make the "calc" provided values look the same as the text its next to and remove the bounding box around the number?

  • Profile Image
    JotForm Support

    Answered by BDAVID on September 15, 2016 at 10:27 PM

    If you want to remove the borders of the calculation field, and make the input text the same as the label, inject the following code:

    #input_148{

    border: none !important;

    background: transparent !important;

    -webkit-box-shadow: none !important;

    -moz-box-shadow: none !important;

    box-shadow: none !important;

    font-family: "Merriweather", serif  !important;

    font-weight: bold  !important;

    }

    Let us know if you need more help.

  • Profile Image

    Answered by abennet4 on September 16, 2016 at 08:10 AM

    let me try again.  The screen shot below is after I used the provided CSS.

    Reference screen shot below from payment widget.  I want to remove the bounding box and make the price value match the text in the same line.  

    https://www.jotform.com//?formID=62586721030956#

    This is the CSS code you've provided so far but it did not correct the presentation issue.

    form-product-item {

        width : 600px !important;

    }

    #input_148 {

        border : none !important;

        background : transparent !important;

        -webkit-box-shadow : none !important;

        -moz-box-shadow : none !important;

        box-shadow : none !important;

        font-family : "Merriweather", serif  !important;

        font-weight : bold  !important;

    }

     

    thank you for your time!

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 16, 2016 at 11:07 AM

    As I can understand you want to remove the text box and show the price in the same style than the other text in the product. 

    Please to remove the text box style inject the next CSS code: 

    .form-product-custom_price{

        background: transparent;

        border-width: 0px;

        font-size: 16px;

        font-family: "Merriweather", serif;

    }

    This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    This should be the result: 

    Hope this helps.