Script for Custom Form Field Dropdown


I’m looking for a more efficient way to add a custom dropdown field on a form than manually entering all of the fields in the form editor each time I want to use it. The field is for healthcare provider specialty, and the picklist has roughly 50 values (you can see why it would be a pain to enter them each time). Is there a script that can call on the form and add a field with those dropdown values? In my head I’m envisioning being able to paste the script/stylesheet into the scripts editor whenever a form requires this field since the form code is not readily accessible. Is there a better way to do this?


@Stefano This sounds like something within your wheelhouse, especially with your experience in the health care industry. Any pointers? :slight_smile:


Hi @Riley_Lico1,

Sorry to hear you are running into issues with your forms.

Unfortunately, there is no good way to solve your predicament. Forms with large dropdown fields are indeed a pain to setup.

However, here are a couple of options that might make it a bit easier on you:

  1. You can actually copy forms (or any other element) from one LP to another. It’s not ideal but at least if you setup the long dropdown field once, you can copy/paste it into another page.

  2. Use a bit of JS/CSS to write a custom dropdown field. Add a hidden field to your Unbounce form and capture the selected value before final submission. This might seem like an easier solution but unless you are really familiar with JS and CSS, I would strongly advise against it.

Hope the above can help you a bit.



Hey Riley!

We’ve run into the same issue with long medical lists.

In an effort to keep them short, we’ve opted for allowing the visitor to complete a single or multi-line field to complete the information themselves. Most of the time, they get this right.

We’ve ran into issues with picklists over 100 values and we felt that the experience wouldn’t be the best.

Happy to provide more insight if necessary!


Hi, I have a question that I’m wondering if anyone knows anything about. On one of our pages, we have a drop-down menu “Select A Store” within the form that seems to either appear or disappear when you refresh the page. We would like that field to always appear in the form on this page.

This is the line in the script: if (elementExists = document.getElementById(‘JotFormIFrame’)) {document.getElementById(‘JotFormIFrame’).src = “”;};

The person who created it no longer works at our company.

Thank you


Hi @MetalSupermarkets,

It seems that you are loading two different JotForm forms based on a URL parameter.

While the page is loading it looks for city=XYZ and loads the form accordingly.

However, if you load the page directly without URL parameters you get a different form.

Simply, embed the form you want to appear without any additional scripts and that should fix your issue.



Thank you for replying to me Hristian. It is because for campaigns in different cities, we want to load a different form. For this particular city name atlmetro, we always want to load this form. We’re just confused why sometimes the right form appears (that includes the “Select a Store”), and sometimes it doesn’t, even when clicking on the exact same link. It also seems to switch forms upon refreshing, back and forth.


Most probably because of the order the scripts load.

Falling back to the form without the dropdown if it doesn’t pick up the URL parameter fast enough.


Hmm okay that makes sense. Thank you for the insight!