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

    Change look of buttons inside of the form

    Asked by Jon_Best on May 17, 2015 at 03:44 AM

    I am trying to set only the right and left borders for the submit and reset buttons at 5px double #333.  However, even if I !important the rules for right and left borders in CSS Helper, they only show up in Designer and not on the actual contact form.  So then I set border width 5px, border style double, and border color #333 in Button Styles and set rules for the top and bottom borders of the buttons at 0 (while adding !important to the end of the rules, which is how the form is currently set) in CSS Helper with the same results: they borders show up (or in the case of the top and bottom borders, don't show up) correctly in Designer but not on the actual form.

     

    Is there a way to set the right and left borders of the buttons without affecting the top and bottom borders?  Thanks for your time.

    <div_prefs id="div_prefs">

    Page URL:
    http://form.jotform.us/form/51151299781157

    style designer in contact form JotForm border color
  • Profile Image
    JotForm Support

    Answered by BJoanna on May 17, 2015 at 06:30 AM

    I have tested your form and it seems that there are some CSS conflicts.

    Can you please try to add this code inside of your code for button inside of form designer.

    #input_2, #input_reset_2 {

        background : linear-gradient(#333 2%, #666 5%, #999 15%, #ccc 45%, #fff 48%, #fff 52%, #ccc 55%, #999 85%, #666 95%, #333 98%) !important;

        border-right : 5px double #333 !important;

        border-left : 5px double #333 !important;

        border-top : 0 !important;

        border-bottom : 0 !important;

        border-radius : 15px !important;

        padding : 0 0 2px 0 !important;

    }

    After adding new code your form will look like this.

    Here is a demo form I made with new code: http://form.jotformpro.com/form/51362902961960? 

    Hope this will help. Let us know if you need further assistance.