JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
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.
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
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.
You can inject the css below to make the columns appear properly.
Here's how: How to Inject Custom CSS Codes
Do let us know if you need further assistance.
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..