Can we combine checkbox with a textbox?

  • Profile Image
    Asked on September 22, 2015 at 02:47 PM

    I created a job application form. can I combine a check box with a text field? I created a check box field with days of the week. I want to know their availability. I want them to check which days they can work...and associated with each day, I want a text box for them to fill in hours available. How do I do that?

  • Profile Image
    Answered on September 22, 2015 at 03:31 PM


    Unfortunately, you can not combine check boxes with text boxes. There is a workaround that you may try.

    You can place a check box for each day. Next to it you may add a text box. This would mean that you would have 7 check boxes and 7 text boxes. Once you have completed you may add the following condition so when the user check a day a text box will appear next to it.

    I have cloned your form and added this fields. You may clone it so you may review and see if this works for you.

    Please let us know if you require more assistance.


  • Profile Image
    Answered on September 22, 2015 at 03:47 PM

    I would actually do something similar using the 7 check boxes but if you go in to the properties of the check box and select the "Allow Other" option. In the end it will look something like this. Where it says hours you can make it say virtually anything you want.

  • Profile Image
    Answered on September 22, 2015 at 05:06 PM

    Both solutions seem attractive so I would like to thank you @kingkest for providing the additional way to achieve the same.

    There is only one thing to consider when removing the options completely from the checkbox so that only the other field is shown - there will be one extra checkbox that is always selected, so the best thing to do is to actually name one option as something meaningfull to you. For example "entire day", while the other allows us to set the "Hours".

    It would look like something like this:

    But once we add this CSS:

    [data-type="control_checkbox"] .form-checkbox-item:first-child {
        display: none;

    This is how the form would look:

    To turn on this option to "allow other", just click on the checkbox field and then you will see the option to turn it on in the toolbar:

    Do of course let us know if you have any issues setting it all up or if you happen to have any questions and we would be happy to assist with the same.

  • Profile Image
    Answered on January 20, 2017 at 01:52 PM

    Ben, I am having trouble with your instructions. I put in the CSS and it is saying there is one error. I am not able to do it and I want it exactly how you have it. please help
  • Profile Image
    Answered on January 20, 2017 at 03:33 PM


    I have created a separate thread for your issue so that we can assist you properly. Please refer to this link:

    Thank you.