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

    Need to remove weird border around my submit button

    Asked by wildfirecap on June 29, 2012 at 03:08 PM

    Hello,

    I have a weird style border around my submit button image:

    http://enhancedbrand.com/wildfire/contact.html

    I searched your forums and found one person who had a similar issue, but their solution of going to the 'button styles' and choosing 'none' is not an option anymore.

    Iwould also like to have a different image appear on mouseover.

    I have injected some css to try to conquer both problems, but none of it is working.

    Please help!  Thank you so much!

    Screenshot
  • Profile Image
    JotForm Support

    Answered by abajan on June 29, 2012 at 10:14 PM

    To fix the first issue, add the following rule of the form's injected CSS:

    .form-submit-button:active {
    -moz-box-shadow: 0 1px #000 inset;
    -webkit-box-shadow: 0 1px #000 inset;
    box-shadow: 0 1px #000 inset;
    }

    As to having a different image appear on mouseover, first create the image. Ideally, it should be of the same dimensions as the un-mouseovered button image. I would recommend either just making its text white or the background green. Something like this:

    (In my opinion, both states would look better if they had white text with a white arrow but that's totally a matter of tastes.)

    Ha ha... I'm trying to figure out the best way to implement the mouseover (hover) effect. I'll have to get back to you on that but in the meantime, here's an alternative solution that uses the built-in buttons provided by the form builder.

    (If you want to use your own images for the normal and hover states, I believe this article points us in the right direction but I'll need to properly peruse it and test the solution.)

  • Profile Image
    JotForm Support

    Answered by abajan on June 29, 2012 at 10:25 PM

    My apologies. To match the color of your page, please change the hightlighted portions of the rule I provided above with #D5D5D5

    .form-submit-button:active {
    -moz-box-shadow: 0 1px #000 inset;
    -webkit-box-shadow: 0 1px #000 inset;
    box-shadow: 0 1px #000 inset;
    }