Quick tutorial that explains how to add a country or state select/dropdown field to USP Pro. So users can select which country or state they are from before submitting the form. Actually you can use this technique to add any long list of select options, not just country or state. It takes a bit of work to set up, but should work well with any USP Pro Form. Estimated time to complete about 10 minutes.

Overview

Here is what we’re going to do in this tutorial. We’re going to add a custom select/dropdown field using a shortcode. Then we are going to view the source code of the form page and copy/paste the select field HTML into our USP Pro Form. Lastly we will replace the <option> values with the actual countries, states, or options that we want to use.

Pro Tip: This tutorial is meant for adding select fields that have many options, like all countries or states. If you want to add a select field that just has a few options, it is much easier to just use the shortcode method explained in this tutorial.

Step 1: Add a select/dropdown custom field

First add the following custom field shortcode to your USP Pro Form:

[usp_custom_field form="123" id="1"]

Change the form attribute value from 123 to the actual form ID. You can get this information by looking at the browser’s address bar. If this is the form’s first first custom field, leave the id set at 1. Otherwise change it to match the custom field that you want to use.

Then to make it a select/dropdown field, add the following custom-field definition:

field#select|options#null:Option 1:Option 2:Option 3|option_default#Please Select..|option_select#null|label#Options

No changes will be made to this custom-field definition. In fact, later in this tutorial, we will delete it.

Make sure to save changes to the form at this point.

Step 2: Copy and paste the field markup

Now that we’ve added a select/dropdown field to the form, visit the form on the front end and view the source code of the page. Locate the field we just added. Hint: you can Ctrl+F to find the text “Please Select..” in order to jump right to the field. It will look something like this:

<fieldset class="usp-fieldset usp-fieldset-default">
<label for="usp-custom-1" class="usp-label usp-label-select usp-label-custom usp-form-86">Options</label>
<select name="usp-custom-1" id="usp-custom-1" data-required="true" class="usp-input usp-select usp-form-86" required="required">
<option value="" selected="selected" disabled>Please Select..</option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
</select>
<input type="hidden" name="usp-custom-1-required" value="1" />
</fieldset>

That is the entire HTML/markup output by the custom field added in Step #1. So in your source code, locate the field markup that looks similar to the above and copy it. Then proceed to the next step.

Important: Do not copy the example markup given above. Instead make sure that you copy the actual markup that is output for your particular USP Pro Form. That way the form ID and other attributes will be all correct.

Step 3: Paste the markup into your form

Next, paste the markup copied in the previous step into your USP Pro Form. You can add it anywhere, before, after, or between any other form fields. After pasting the markup, you can delete the shortcode and the custom-field definition added in Step #1. They no longer are needed.

Important: Make sure to use the Plain-Text Editor when adding or working with HTML markup in your form. Otherwise the Rich-Text Editor will convert the angle brackets and other characters into their HTML equivalents, causing things to not work correctly.

Step 4: Replace the select options

Now that we have the correct working markup for a custom select field, the last step is to replace the <option> values with the actual country or state values that we want to use. For example, let’s say that we want to add a list of country values such as the ones provided here at Github. To do it, we copy ONLY the <option> tags like so:

<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
.
.
.
.
.

Copy that, or whichever options you want to use, and replace the options that are currently included in the custom markup in your form. So from Step #2 you would replace these current options:

<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>

Save changes and done.

Note you can replace with whichever options that you would like to include in your select field. So users can choose a country, state, city, or literally any options that are necessary.