How to change a drop-down field into a checkbox field after a link is clicked

Hi Jotform

I saw something very cool on a form that was not built with Jotform. Is there a way to do the same thing with jotform?

Please see

https://support.firstbook.org/give/121944?amount=90#!/donation/checkout

Click the box that asks, “Would you like your employer to match?”

When you do, boxes appear for Employer Name and Employer Email.

Yeah, I know how to do that much in Jotform.

Here is where it gets cool (and what I do not know how to do).

Employer Name has a dropdown list

If I do not find what I want on the list, I can click the little words “Not in list?”

If I do that, then the box changes from a dropdown to a short text box. Beneath it is a link saying, “Show list.” If I click it, the box changes back to a dropdown list.

This is great.

Can it be done in Jotform?

Thanks!
Robert

Thank you for sharing that with us. I have a workaround in mind, but the data would be collected separately. Which means the drop-down field and the textbox field are going to be treated as separate fields.

Please give me some time. I'll try to create a sample form for you and get back to you as soon as possible.

Is this what you have in mind? Something like I did here?


https://form.jotform.com/73567792084166





...

I think what you did is a good workaround but my colleague might come up a good one.

Here's mine if you like. You can use user-contributed dropdown widget https://widgets.jotform.com/widget/user_contributed_dropdown. If they can't find the option they want, they can add it to the dropdown field. The added options will be accessible to all the users.

Here is the sample form that I created based on the form on the website you shared with us.

https://form.jotform.com/73568631975976

I use the Button Checkboxes widget as the link and a condition to show/hide the drop-down field and textbox field in the form based on the widget's state (filled/unfilled).

I have also applied custom CSS codes both to the form — How-to-Inject-Custom-CSS-Codes and to the widget itself — How-to-Inject-CSS-Codes-to-Widgets

I would suggest you clone the form to your account so you can inspect it — How-to-Clone-an-Existing-Form-from-a-URL

I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

Very, very cool. You guys are awesome. Thanks!