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 customize the layout of the payment section using custom CSS codes?

    Asked by sgambilldesign on February 26, 2016 at 06:26 PM

    On this form: 

    https://form.jotform.com/60547088034961

     

    The field for the custom amount of donation is too small.  How can I make this wider, so that someone can enter a number longer than 3 characters? 

     

    Also, the donation section is too close to the Email field above it. How do I add more space there? 

     

    Finally, can we delete the horizontal line that is showing up beside the USD dollar amount? 

     

    Thanks!

    Page URL:
    https://form.jotform.com/60547088034961

    JotForm donation thanks wider layout CSS custom
  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 26, 2016 at 09:14 PM

    Please inject each portion of CSS code to achieve each point that you want.

    The field for the custom amount of donation is too small.  How can I make this wider, so that someone can enter a number longer than 3 characters? 

    input[id*="_donation"] {

        width: 100px;

     

    }

    Also, the donation section is too close to the Email field above it. How do I add more space there? 

    li#id_19 {

        margin-top: 5%;

     

    }

    Finally, can we delete the horizontal line that is showing up beside the USD dollar amount? 

    #id_19 hr {

        display: none;

     

    }

    You may also change the values so you will increase the width of the custom amount for example, or you may also increase the space between the email field and the payment section.

    Hope this helps.