Can I change size of image button

  • Profile Image
    leilee
    Asked on October 16, 2012 at 05:59 PM

    I used an image from another source for my 'submit' button. The image is too big for the form. How can I reduce the size?

     

     

  • Profile Image
    Rodjit
    Answered on October 16, 2012 at 06:11 PM

    Hi,

    You can either edit your image to any image editor or by injecting custom CSS codes;

    #input_18 {

    height: 40px;

    width: 135px;

    }

    Change the height and width to the size that suit your needs.

    Let us know if you have further questions. Thanks

  • Profile Image
    EduardoMendez
    Answered on October 16, 2012 at 06:22 PM

    Hi there,

    To add to my colleague's comment, it would be a good suggestion to edit the actual size of the image before uploading it.  This will give you the best visual results as the CSS code does not resize the image but the button itself in stead.

    Let us know if you need further assistance!

  • Profile Image
    guest_22896966413063
    Answered on October 16, 2012 at 06:54 PM

    Rodjit's method sounds straightforward.

    However, my 1st thought was to edit the size of the image before uploading it. But I had to use a URL to put into properties where it says Button Image. If I resized the button and saved it in My Pictures, there's no URL for it. So, wondering how to do that?

  • Profile Image
    guest_22896966413063
    Answered on October 16, 2012 at 06:58 PM

    Guys, don't answer yet. Let me try to figure it out.

    Thanks kindly

  • Profile Image
    jonathan
    Answered on October 16, 2012 at 07:02 PM

    Please do let us know of your results. =)

    Thanks.

  • Profile Image
    leilee
    Answered on October 19, 2012 at 10:41 AM

    http://www.jotform.com/?formID=22817655821256

     

    I used Rodgit's method-it was easier.

    Now, I wouldn't mind a smaller image but it wont reduce any further. And the border line doesn't go around the image fully.

    How can I get the border to surround the whole image?

  • Profile Image
    EduardoMendez
    Answered on October 19, 2012 at 11:32 AM

    Hello there, 

    As I explained on my previous post, reducing the submit button using the CSS code will not resize the image.  

    If your image was 100 by 100 and you imjected the CSS to make it 10 by 10.  It will only show a 10x10 section of your image.

    If you choose to resize your image (without injecting CSS to change the size of the button), here are some suggestions on how to upload it and have a URL for it.

     

    Let us know if this helps!

  • Profile Image
    leilee
    Answered on October 28, 2012 at 04:12 PM

    Ok, I understand about the size.

    How do I get the border to go around the entire 'submit' button?

  • Profile Image
    idarktech
    Answered on October 28, 2012 at 04:50 PM

    Copy this code and inject this to your form. This will resize your button image so it will fit exactly on your buttons width.

    .form-submit-button img {

    width: 99px;

    height: 40px;

    }

    Result should be like this:
    If you want the bigger one, let us know so we can adjust the CSS codes for you. Thanks!
  • Profile Image
    guest_23015864990054
    Answered on October 28, 2012 at 10:02 PM

    You have it perfect. However, I did as you suggested but it didn't change. Here's what I have for the css codes:

    .form-required {
    color: pink !important;}#input_18 {.form-submit-button img {width: 99px;height: 40px;}

  • Profile Image
    EduardoMendez
    Answered on October 28, 2012 at 10:10 PM

    Please substitute your code with the following and let us know if that worked.

    .form-required {

    color: pink !important;}

    .form-submit-button img {

    width: 99px;height: 40px;}

  • Profile Image
    guest_23027975124049
    Answered on October 29, 2012 at 08:10 PM

    This looks great, thanks. I dont have the border around the image but that's no problem. I'm happy with this.