HI, looking to create a simple calendar on my application form.

  • Profile Image
    Asked on February 25, 2016 at 07:17 PM

    I don’t need this calendar to integrate, or anything fancy. The applicant filling out my form needs to simply check, mark, or highlight several dates that they can work for me. Is there a way to create a calendar like this? Once the applicant submits their form I want to be able to see what dates they checked or marked. Also,

    is there a css code that i can inject to make more than 3 horizontal columns for the radio buttons? Please let me know, I’ve become stuck on this. 
  • Profile Image
    Answered on February 25, 2016 at 11:00 PM

    A possible widget you can use is the Date Reservation widget, which allows a user to select several dates that they want to reserve. However, once the dates have been selected, other users will not be able to select the dates previously selected.


    Another widget you can use would be the Date Picker widget. However, this widget only allows the user to select one date so if you have multiple dates in mind, you will need to add several of this widget in your form.


    If you want the user to be able to add several dates dynamically, then the best option for your form is the configurable list. Although it doesn't display a calendar, a user can select the dates and add more fields by clicking the "+" or "Add More" button.


    Here's a demo form of all the widgets: https://form.jotform.com/60558215974968

    You can also clone it to your account by following this guide: How To Clone A Form

    To add a widget to a form, simply follow this guide: How to Add a Widget to your Form

    As for your question regarding the css, I have moved it to a new thread so we can assist you better. Here's the link to that thread: http://www.jotform.com/answers/781937


  • Profile Image
    Answered on February 25, 2016 at 11:43 PM

    Thanks for the response, I went a slightly different route using check boxes. I used these check boxes and assigned them dates. I also injected a css to reduce the space between each check box so I could squeeze in 7 columns. 

    Now I have an issue where on the form builder page everything works and looks as it should. Then when I preview my form and it is live, then everything changes and is messed up. I can’t figure out why. I took some screen shots to show you. 

  • Profile Image
    Answered on February 26, 2016 at 12:57 AM

    You can inject the css below to make the columns appear properly.

    span.form-checkbox-item {

        width: 100px!important;


    Here's how: How to Inject Custom CSS Codes

    Do let us know if you need further assistance.

  • Profile Image
    Answered on February 26, 2016 at 01:28 AM

    That fixed the issue with my screen shot area, but now the rest of my form is effected. I tried copying the field id

    #input_39_0, #input_39_1, #input_39_2, #input_39_3, #input_39_4, #input_39_5, #input_39_6, #input_39_7, #input_39_8, #input_39_9, #input_39_10, #input_39_11, #input_39_12, #input_39_13, #input_39_14, #input_39_15, #input_39_16, #input_39_17, #input_39_18, #input_39_19, #input_39_20, #input_39_21, #input_39_22, #input_39_23, #input_39_24, #input_39_25, #input_39_26, #input_39_27, #input_39_28, #input_39_29, #input_39_30, #input_39_31, #input_39_32

    though putting this took everything back to my initial problem you just helped me with...I know there is a way to target this field, but I can’t get it..

  • Profile Image
    Answered on February 26, 2016 at 02:46 AM

    You can try injecting this css code instead:

    #cid_39 span.form-checkbox-item {

        width: 100px!Important;


    By adding #cid_39, the css only affects the checkboxes under the div #cid_39.

    URL of cloned form: https://form.jotform.com/60560469127962