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 Style of the Form's Border?

    Asked by ipbr21054 on February 24, 2016 at 02:25 AM

    I am using this form 51272609383356

    When in the css of design builder etc i dont see where to make the edit to change border colour etc.

    Using Firebug it tells me line 96 super nova.

    I am unable to see where this is on the css.

     

    Can you give me some advice how/where to make the edit using your option PADDING BORDER RADIUS etc etc

    style Change form builder colour border radius Make
  • Profile Image
    JotForm Support

    Answered by mert on February 24, 2016 at 09:01 AM

    Hi there,

    You can simply edit your form's border styles by injecting the following CSS codes to your form. Please, copy and paste the following codes by using the provided method:

     

    .form-all {

    border: 5px solid red !important; /.border's thickness, style, color./

    border-radius: 50px !important; /.border's radius./

    }

     

    Above, you can edit the thickness of the border by changing the "px" value on green marked area and you can customize the color on blue marked area. Orange marked area represents the radius of the border. 

    Please, see the results from the below:

     

    For further assistance, please do let us know.

    Thanks.

  • Profile Image

    Answered by ipbr21054 on February 24, 2016 at 09:02 AM

    Hi,

    I also need to change field border colours.

    Can you give me steps to where i need to make the changes,i mean page to page etc

  • Profile Image

    Answered by ipbr21054 on February 24, 2016 at 09:15 AM

    Hi,

    I understand how the code works but cant see where i make the change.

    I currently go to my form, designer, css.

    Am i then supposed to select the form then select border, width, background etc ?

     

    As if so that is what i did but no change was made.

  • Profile Image
    JotForm Support

    Answered by mert on February 24, 2016 at 09:26 AM

    Firstly, you need to apply the codes by following the steps from the below:

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

     

    If we come to the fields' border, you need to use the following CSS code to change its color:

     

    .form-textbox, .form-textarea {

    border: 3px solid red;

    }

     

    After the changes, please see the results,

     

    You can customize the "border" rule as it is described on my previous post. I hope everything is clear for you now. Please, do let us know, if you need further assistance.

     

    Thanks.

  • Profile Image

    Answered by ipbr21054 on February 24, 2016 at 09:38 AM

    Hi,

    Your given me the answers but not telling me where to put them ?

     

    Is it in css of designer ?

     

    Is it in preferences if so where ?

     

     

  • Profile Image

    Answered by ipbr21054 on February 24, 2016 at 09:58 AM

    pLEASE CHECK THE FORM.

    aS YOU WILL SEE I HAVE ADDED THE BELOW CODE BUT HAS NO AFFECT ON THE LOOK OF THE FORM.

     

    .form-textbox, .form-textarea {
    border: 3px solid #0099CF;
    }

  • Profile Image
    JotForm Support

    Answered by mert on February 24, 2016 at 09:58 AM

    As it is described in the guide that I've shared on my previous posts, you need to enter it on "Preferences" and also, please add the codes at the end of the current ones.

    Please, see the steps to reach it:

  • Profile Image
    JotForm Support

    Answered by mert on February 24, 2016 at 10:37 AM

    On my test, the CSS code for fields' border color is working properly as it is seen on the screenshot on my previous post. Please, don't forget to save the form after adding those codes to your form, because it doesn't save it automatically sometimes.

    Alternatively, if some other rules are overwriting our current one, we need to use the "!important". Please, see it from the below:

     

    .form-textbox, .form-textarea {

    border: 3px solid red !important;

    }

     

    Please, try this one and let us know the results.

    Thanks.