How to customize my form with custom CSS code?

  • Profile Image
    esupport.tw
    Asked on April 15, 2018 at 11:57 AM

    Hi,

    Our form width is 820px.

    I hope our each fields a little longer.  Also the button is next to our fields.

    All fields and button in one row.


    1) How to adjust the fields size.

    2) Our button more close to second field.  Not a blank between it.


    I tried to adjust it.  It get small result.

    What option or CSS that I can change?

    Thanks!

  • Profile Image
    Kevin_G
    Answered on April 15, 2018 at 12:05 PM

    1) You can adjust the drop down size with the code injected on the widget: 

    .select2-container {

        width: 48%!important;

    margin-right: 2% !important;

    }

    You can just change the width value to see how the fields change as well.

    2) Please inject the following CSS code to your form: 

    .form-col-1 {

        width: 85%;


    }

    .form-col-2{

        width: auto;

        padding-left: 0px;

    }

    #id_4 div, iframe#customFieldFrame_4 {

        width: 100% !important;

    }

    #id_4{

        padding-right: 0px;

    }

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

    Result: https://form.jotform.com/81044468434962 

    I hope this helps. 

  • Profile Image
    esupport.tw
    Answered on April 15, 2018 at 12:57 PM

    Hi,

    Wonderful!

    One more issue:

    The button will jump to next row when submit it.

    Hope to keep it in same row.


    Thanks!

  • Profile Image
    Adrian
    Answered on April 15, 2018 at 02:45 PM

    To make the button stay in the same row, please make the following changes in the CSS of your form. The changes need to be done in line 11 and line 29.

    button#input_5 {
      height : 50px !important;
      margin : 2px 0px !important;
      font-size : 16px;
      width: 128px;
    }

    .form-col-1 {
        width: 80%;
    }

    Result: https://form.jotform.com/81045676109963

    15238179061.gif

  • Profile Image
    esupport.tw
    Answered on April 15, 2018 at 11:01 PM

    It's great now!