Change “State” input field to a dropdown style input on a webform?

Max Classic
, ,
1

Hello,

I had HTML code created to be able to change the state field to a drop down; it still has the ability to be typed in. We have an “other” option for international submitters.

However, because of the limitations on HTML, “select, textarea,” etc, the code does not work. It gets pasted in, and nearly all of it gets deleted by KEAP since it is dependent on select.

It is a big waste of time correcting people who misspell their states and reuploading lists in order to have all of our contacts have their state addresses be abbreviated (CA instead of California). We also have people who will write nonsense. We also are running out of fields and it seems it would cause problems having the state field be disconnected from the rest of the address fields. I’m hoping for a solution. It seems like it would be easier for KEAP to offer the option of a drop down or write in to users, but that’s wishful thinking!

Thank you,

2

Hi Dana,

If you are using the Web Form HTML Code then you can make changes to it and do what you need.

When you create a Web Form with the Billing State field added in, it come up with this code below.
It will be a normal Text field, which means anything can be entered.

<div class="infusion-field">
        <label for="inf_field_State">Billing State</label>
        <input id="inf_field_State" name="inf_field_State" placeholder="Billing State" type="text" />
</div>

As it is HTML, you can convert it to a dropdown as shown below.
This would be a normal dropdown field, so there is no text entry search.
You would need to fill in the rest of the US States, so only 2 are shown here.

<div class="infusion-field">
        <label for="inf_field_State">Billing State</label>
        <select id="inf_field_State" name="inf_field_State" placeholder="Billing State">
            <option value="">Select State or Other</option>
            <option value="Other">Other</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
             ............etc...........
        </select>
</div>

Now, if you want to have text entry searching you need something like Select2 - https://select2.org/
One of their examples has something very similar to what you want, eg: Basic usage | Select2 - The jQuery replacement for select boxes
Select2 only requires a minimum amount of code, so that can be added alongside the Web Form HTML Code.

If you are using Order Forms instead, then you would need to have additional code to change the Text field into a Dropdown list instead.

Hope that helps.