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

    JF altering Image Button

    Asked by SquareSpot on November 20, 2011 at 02:57 AM

    Hi,

    I uploaded an image Submit button to my form which has squared corners (screenshot) but the form is rounding the top corners.  I assume it has to do with the theme I am using..?

    Is it possible to either get rid of the rounded corners on my Image Button or at least round all 4 of them?

    Thanks.

    Page URL:
    http://form.jotform.com/form/13213553294

    Screenshot
  • Profile Image
    JotForm Support

    Answered by liyam on November 20, 2011 at 04:01 AM

    Yes, the round borders is due to the template that you are using.  This is rendered by the CSS script. If you do not wish to alter the theme, you can simply add this to your CSS injection script:

    .form-textbox,.form-textarea,.form-dropdown,.form-list{-webkit-border-radius: 0; -moz-border-radius:0;border-radius:0;

    Let us know if this does not work.

  • Profile Image
    JotForm Support

    Answered by abajan on November 20, 2011 at 05:01 AM

    With due respect to my colleague, as he has stated, the rounded borders are indeed due to the template but the declarations that need to be overridden in the said template are to be found in the following rule:

    .form-submit-button, .form-submit-reset, .form-submit-print {
    -moz-border-radius:4px 4px;
    -webkit-border-radius:4px 4px;
    border-radius:4px 4px;
    padding:8px 4px;
    border-color:#7C7C7C #C3C3C3 #DDDDDD;
    background:#f7f7f7;
    border-style:outset;
    border-width:1px;
    color:#333333;
    font-size:14px;
    font-weight:bold;
    line-height:18px;
    }

    Therefore, injecting the following will solve the problem:

    .form-submit-button {
    -moz-border-radius:0;
    -webkit-border-radius:0;
    border-radius:0;
    }

    After doing that, your "Apply" button should look like that in the screenshot below:

    (Click image to visit live form) 


    Although you didn't ask about it, I'm sure you're also wondering why the cursor:pointer declaration is not changing the hand to an arrow in Chrome (and possibly other browsers). There appears to be information about this online and should I find a solution I'll let you know.

    LOL My bad.
    cursor:pointer is supposed to be displayed as a hand.

  • Profile Image

    Answered by SquareSpot on November 20, 2011 at 03:59 PM

    Worked like a charm!!

    Thank you as always! :)

    Slade