I need to change the size of input boxes in Payment Wizard.

  • hmichaloski
    Asked on December 12, 2016 at 2:40 PM

    Hi.

    I made a form where people can submit and document for editing. They are charged by the number of words.  In the space for the number of words, the box is very small, making it hard to tell what was entered. For example I have put in 1000 below.  Most documents will be a few thousand words and it would be helpful to put the numbers in so they can be seen. What would you recommend to make the boxes bigger? 

    Thank you,

    Heidi I need to change the size of input boxes in Payment Wizard Screenshot 20

  • Özlem JotForm Developer
    Replied on December 12, 2016 at 3:28 PM

    Hi,

    I have cloned your form to my side. It is seen that you want to change the width of product textboxes in Payment Wizard.

    My recommendation is to inject custom CSS to change the width of these textboxes.

    #1- Copy the custom CSS codes below:

    input#input_7_quantity_1006_0{width:60px;}
    input#input_7_quantity_1007_0{width:60px;}
    input#input_7_quantity_1008_0{width:60px;}
    input#input_7_quantity_1009_0{width:60px;}

    #input_7_quantity_1006_0 and others are the name of textboxes.
    60px is the width of texboxes. You can change this number according yo your needs.

    #2- Paste these codes into your form Design>Inject CSS textarea.

    I need to change the size of input boxes in Payment Wizard Screenshot 40

    Please have a look at the following guide about how to inject custom CSS into your form: How-to-Inject-Custom-CSS-Codes

     

     

    #3- Finally, your form will be in the image below:

    I need to change the size of input boxes in Payment Wizard Screenshot 51

    This is the cloned form. You can clone this form to your side if you need more details about the issue: https://www.jotformpro.com/form/63466212123952

    Please follow the guide about how to clone: How-to-Clone-an-Existing-Form-from-a-URL

    In addition, if you want to learn how to find form field CSS names in the form, pelase follow the short instruction below:

    1- Open you form on the web browser, right click and Inspect.

    2- Click arrow icon in the below image. After that, please select the form field in the form that you want to change width of it. You can see the CSS name of this form field in this way.

    I need to change the size of input boxes in Payment Wizard Screenshot 62

    If you need any further supports, please feel free to let us know.

    Thank you.

  • hmichaloski
    Replied on December 12, 2016 at 4:10 PM

    Thank you. That worked perfectly!