Change "State" input field to a dropdown style input on order form?

Max Classic
1

Hello,
My name is Tim and this is the first Infusionsoft community question I’ve ever asked!
Thanks ahead for all of your help!

I want to change the state field to a drop down style menu instead of an input field.
We get a lot of customers who put many different abbreviations for their states and it effects the sales tax generation and our quarterly reports when we gather data for our meetings, records, etc…

We have already added the different types in the sales tax section under marketing settings, but we get too many new ones daily to keep up so we want to just change it overall to a drop down choice.
Please HELP! Lol

Thank You

Tim

Here is one of our order form pages.

https://ra128.infusionsoft.com/app/orderForms/3de7e880-283b-4206-b88d-c5600c50b942

2

In order forms, the only way to have it as a drop down is to add it in the html sections and populate it with the option tags for each state and then be sure to use the id/name in the select element that maps to your state field.

3

Thank you for your reply.

Where can I find the core html file for the billing and shipping section? I want to change the existing state field. NOT add a new one. I just want to change the input field to a select one instead and then add my option tags from there. Is this possible?

4

Hi @Tim_Parenteau,

There isn’t direct access to files. In your ecommerce setup (not the same as ecommerce settings), you can edit your order forms or the templates and the interface has a place to add html (which can also have javascript within it as well). So if you wish to modify the existing field, you will need to use javascript to do so.

1 Like
5

Thanks for your help John.

I found this java from someone trying to do a similar thing in IS and it looks correct, but for some reason it’s not working. It is from 2013 but should still work. Any clue what is going wrong here?

<script>
$(document).ready(function()
{
    $("#state").attr('maxlength','2');
    $("#shipState").attr('maxlength','2');
});
</script>
<script>
$(function() {
var availableTags = [
'AL',
'AK',
'AZ',
'AR',
'CA',
'CO',
'CT',
'DE',
'FL',
'GA',
'HI',
'ID',
'IL',
'IN',
'IA',
'KS',
'KY',
'LA',
'ME',
'MD',
'MA',
'MI',
'MN',
'MS',
'MO',
'MT',
'NE',
'NV',
'NH',
'NJ',
'NM',
'NY',
'NC',
'ND',
'OH',
'OK',
'OR',
'PA',
'RI',
'SC',
'SD',
'TN',
'TX',
'UT',
'VT',
'VA',
'WA',
'WV',
'WI',
'WY',

];
$( '#state' ).autocomplete({
source: availableTags
});
$( '#shipState' ).autocomplete({
source: availableTags
});
});
</script>

I really appreciate the help!

Tim

6

@Tim_Parenteau,

That’s Javascript (no Java) but specifically it’s jQuery. I would imagine that the #state and #shipState names are no longer correct and would have to be changed to what the form generates for those fields.

7

Hi Tim,

https://www.apphp.com/index.php?snippet=javascript-converting-text-input-to-select

I was looking at doing the same thing myself this morning when I found your thread. Here is one JQuery solution you could easily modify to use however there is a downside to making this change.

International Order Constraint
The Infusionsoft order forms have a text entry field for the State for a good reason, this order form is international in nature and needs to allow USA, Canadian plus other country state code entry.

If you limit this field to be just USA abbreviations it may cause a payment acceptance problem.

JQuery Solution
To cover international sales, you could place a default value of something like “Other” in the drop down option choice to cover non US states and use the examples given in the above link to construct all the states as drop down options.

Import Solution
One solution is to export all contact with orders inside the USA, update their State field record doing a search and replace in Microsoft Excel spreadsheet with the standardized USA state codes. Then you do an import/record update back into the system. You could do this every so often throughout the year to standardize just the USA order records.

Updating billing & shipping address can be done via the Contact table but for order records its more challenging.

To import into the Orders table you have to ask Infusionsoft to extend your import functionality so the order table shows up. Importing new orders can be tricky as Infusionsoft doesn’t offer much guidance of the correct order import structure and format but updating existing orders should be easier as you can reference the existing order ID.

Personally I’ve decided to hold off on this JQuery replacement of the text field with a drop down field due to the need to accept international payments.

Hope this helps you.

Alastair

2 Likes
8

Thinking through this some more, credit card approvals require the billing address matches exactly so if you limit people from non US states to have an international field like “Other” it may almost certainly reject their credit card payments.

This leaves you with the import (every so often) solution.

9

Thank you Alastair!

Our clients are all US based so it wouldn’t actually hurt in the long run and also for International based sales I could just use another template for those targeted sales specifically and only revert to the US accordingly. I appreciate your help and will be looking into that solution you provide this week!

I will keep you updated!

Thanks again,

Tim

10

Hi Tim,

You are most welcome, I hope the code works out for you.

Alastair

1 Like