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

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

    Asked by basse34 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. 
    Page URL:
    http://bassesfarms.com/employment/

    application form create a simple
  • Profile Image
    JotForm Support

    Answered by Chriistian 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.

    http://widgets.jotform.com/widget/date_reservation

    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.

    http://widgets.jotform.com/widget/date_picker 

    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.

    http://widgets.jotform.com/widget/configurable_list 

    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 by basse34 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
    JotForm Support

    Answered by Chriistian 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 by basse34 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
    JotForm Support

    Answered by Chriistian 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