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 can I use a custom button color for the Submit and Reset buttons?

    Asked by soulz2003 on May 30, 2013 at 02:43 PM

    I want to use the HEX color code #283ABF for my submit/reset buttons.  How do I do this?

    custom button
  • Profile Image

    Answered by Khrisell on May 30, 2013 at 03:48 PM

    Hello @soulz2003,

    Here's the complete guide on how to do that.

    1. Go to “setup & embed” tab and select “preferences”

    submit button css
     

    2. Go to “form styles” tab and click to the empty space next to “Inject custom CSS”
     inject custom css


    3. Copy the CSS code to the place where it says "Click to edit"
     
    .form-submit-button{
    background:#0066A2;
    color:white;
    border-style:outset;
    border-color:#0066A2;
    height:50px;
    width:100px;
    font: bold 15px arial,sans-serif;
    }
     

    Here's how it'll look
    4. Click close settings and you're done


    Details of the CSS code for your submit button
     
    .form-submit-button - Selects the submit button on your form.
     
    background - Sets up the background color behind the text.
     
    color - Determines the color of your text.
     
    border-style - Sets the style of your submit button borders.
     
    border-color - Sets the color of your submit button borders.
     
    height - Sets the height of your button and is indicated with pixels.
     
    width - Sets the width of your button and is indicated with pixels.
     
    font - Sets the font properties.
     
    NOTE: Do not forget to add semicolons (;) after each property.


    Submit Button CSS3 & Hover Effect

    Follow the steps on changing your submit button as above. The only thing that changes is the code.

    Example CSS3 for a submit button:

    .form-submit-button{
    background:#B9DFFF;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #eee;
    }
    .form-submit-button:hover{
    background:#016ABC;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #eee;
    }

    Here's how it looks.

    css3 submit button
    and on hovering the mouse over it:
    css3 submit button hover

    Details each CSS3 code for your submit button

    .form-submit-button:hover - This is the class when the mouse is hovered on to the submit button. Every other field is left the same except the background to show what's happening on mouse hover.

    border-radius - Rounds the corner of your submit buttons.
     
    box-shadow - Sets a shadow for your submit button.

    text-shadow (not applied to example) - Sets a shadow for the text inside your submit button.


    Feel free to let us know if you have further questions or inquiry.
    Thank you for contacting JotForm.
    Cheers!
  • Profile Image

    Answered by soulz2003 on May 30, 2013 at 04:31 PM

    How do I ensure that both buttons are the same height?  Through CSS?  'Clear' and 'Submit' that is.

     

    http://new.converseconsultants.com/contact-us

  • Profile Image

    Answered by khrisell on May 30, 2013 at 05:08 PM

    Yes, Make sure they have the same value on the injected CSS code.

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 30, 2013 at 09:31 PM

    @soulz2003

    In addition to my colleague, here are the CSS classes for the the 3 different form buttons. Submit, Reset and Print.

    .form-submit-button,

    .form-submit-reset,

    .form-submit-print{

    height:40px !important;

    }

    You can change 40 before injecting that to your form. Thanks!