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

    Calendar size

    Asked by drakeladue on January 03, 2014 at 12:52 PM

    I saw a thread on increasing the calendar image size.   Is there a simple way through css to increase the calendar size?  Without using the source code.

    size source image size
  • Profile Image
    JotForm Support

    Answered by TitusN on January 03, 2014 at 02:32 PM

    Hello, 

    Thank you for contacting us. 

    You may be right, but perhaps your situation is unique, or we can whip up a quick workaround for you, while considering it as a feature request: 

    Which form element are you reffering to?

    Could it be the the datetime field?

    Or Could it be a calendar widget? 

     

    Concerning the form field/element in question (calendar), which image would you like to manipulate? 

    We would like to know this because for some of the elements/fields and their features, inline styling can be achieved on the source code, while others can be done by injecting CSS into the form.

    Please help us understand how we may assist further. 

  • Profile Image

    Answered by drakeladue on January 03, 2014 at 02:59 PM
    Thank you for getting back. Its the calendar icon for the native calendar widget. Not the new widget.
    Drake LaDueCEO/Owner
    919-257-3977drake@brand-x-mobile.com
    ---- On Fri, 03 Jan 2014 14:32:53 -0500 JotForm Support Forum<jotform@jotmails.com> wrote ----
    A new response has been received:

    Answered by TitusN

    Hello,
    Thank you for contacting us.
    You may be right, but perhaps your situation is unique, or we can whip up a quick workaround for you, while considering it as a feature request:
    Which form element are you reffering to?
    Could it be the the datetime field?

    Or Could it be a calendar widget?

    Concerning the form field/element in question (calendar), which image would you like to manipulate?
    We would like to know this because for some of the elements/fields and their features, inline styling can be achieved on the source code, while others can be done by injecting CSS into the form.
    Please help us understand how we may assist further.



    View this thread on JotForm Support Forum Unsubscribe



    ...
  • Profile Image
    JotForm Support

    Answered by TitusN on January 03, 2014 at 03:37 PM

    Thank you for the response.

     

    For that element/field (I think this is the element you want to change..if not, correct me...), You can increase the size of the Calendar Image using CSS by applying (injecting) the follwing CSS rules: 

    #input_10_pick {

    width: 32px;

    height: 32px;

    }

    But the image will get distorted (pixelate), because it was originally designed for 16*16px display:

    So, you can replace the image by adding the following CSS rules instead (you can change the image URL to whatever you want, this was just for demostration): 

    #input_10_pick {

    width: 32px;

    height: 32px;

    content: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/22838_calendar.png);

    }

    This will make your calendar look something like what is shown in this form: http://form.myjotform.com/form/40023800245540?

    Please test with all browsers, one of the CSS rules is fairly new. 

    Does this help? 

    Please let us know. 

  • Profile Image

    Answered by drakeladue on January 03, 2014 at 03:54 PM
    Worked GREAT!!!!!!! Thanks, image quality sucks but whatchya gonna do :) it's being displayed on a small screen
    Drake LaDueCEO/Owner
    919-257-3977drake@brand-x-mobile.com
    ---- On Fri, 03 Jan 2014 15:37:24 -0500 JotForm Support Forum<jotform@jotmails.com> wrote ----
    A new response has been received:

    Answered by TitusN

    Thank you for the response.

    For that element/field (I think this is the element you want to change..if not, correct me...), You can increase the size of the Calendar Image using CSS by applying (injecting) the follwing CSS rules:
    #input_10_pick {
    width: 32px;
    height: 32px;
    }
    But the image will get distorted (pixelate), because it was originally designed for 16*16px display:

    So, you can replace the image by adding the follwing CSS rules:
    #input_10_pick {
    width: 32px;
    height: 32px;
    content: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/22838_calendar.png);
    }
    This will make your calendar look something like what is shown in this form: http://form.myjotform.com/form/40023800245540?
    Please test with all browsers, one of the CSS rules is fairly new.
    Does this help?
    Please let us know.



    View this thread on JotForm Support Forum Unsubscribe



    ...
  • Profile Image

    Answered by drakeladue on January 03, 2014 at 03:56 PM
    Just FYI check it out here http://www.woweyebrows.com/renaissance-wow-brows.html go through the form as a returning vistor and click on Yes my info is up to date
    Drake LaDueCEO/Owner
    919-257-3977drake@brand-x-mobile.com
    ---- On Fri, 03 Jan 2014 15:37:24 -0500 JotForm Support Forum <jotform@jotmails.com> wrote ----
    A new response has been received:

    Answered by TitusN

    Thank you for the response.

    For that element/field (I think this is the element you want to change..if not, correct me...), You can increase the size of the Calendar Image using CSS by applying (injecting) the follwing CSS rules:
    #input_10_pick {
    width: 32px;
    height: 32px;
    }
    But the image will get distorted (pixelate), because it was originally designed for 16*16px display:

    So, you can replace the image by adding the follwing CSS rules:
    #input_10_pick {
    width: 32px;
    height: 32px;
    content: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/22838_calendar.png);
    }
    This will make your calendar look something like what is shown in this form: http://form.myjotform.com/form/40023800245540?
    Please test with all browsers, one of the CSS rules is fairly new.
    Does this help?
    Please let us know.



    View this thread on JotForm Support Forum Unsubscribe



    ...
  • Profile Image
    JotForm Support

    Answered by TitusN on January 03, 2014 at 04:12 PM

    Great! Good to know. :-)

    Try adding this CSS rule (don't remove the others), see if it helps with the image quality: 

    #input_10_pick {

    content: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/22841_calendar1.png);

    }

    Looks better? 

    Let us know.