AI Summary
Would you like to customize how the State/Province/Region field behaves when a user selects the United Kingdom in your Address field? When using the International scheme, WPForms hides the State/Province/Region field by default for the United Kingdom, since the UK doesn’t use states in the traditional sense. If you’d like to collect a value such as the country (England, Scotland, Wales, or Northern Ireland) or county instead, you can do that with a custom code snippet.
This tutorial will show you how to re-enable the State/Province/Region field for the United Kingdom, change its label, and replace the text input with a dropdown of UK countries.
Creating the Snippet
Before we get started, be sure to check out our tutorial on how to add custom code snippets to your site.
This snippet does two things. First, it removes the United Kingdom from the list of countries that hide the State/Province/Region field. Second, it adds a small piece of JavaScript to the frontend that updates the field’s label and replaces the text input with a dropdown whenever the user selects the United Kingdom.
Go ahead and add the following snippet to your site.
/**
* Customize the Address field State/Province/Region input when
* the United Kingdom is selected in the International scheme.
*
* @link https://wpforms.com/developers/customizing-the-state-field-for-the-united-kingdom-in-the-international-address-scheme
*/
add_filter( 'wpforms_forms_fields_address_frontend_strings_list_countries_without_states', 'wpf_forms_fields_address_frontend_strings_list_countries_without_states' );
function wpf_forms_fields_address_frontend_strings_list_countries_without_states( $countries ) {
return array_diff( $countries, [ 'GB' ] );
}
add_action( 'wpforms_frontend_js', 'wpf_forms_fields_address_frontend_great_britain_countries_list' );
function wpf_forms_fields_address_frontend_great_britain_countries_list( $forms) {
$load = false;
foreach ( $forms as $form ) {
if ( wpforms_has_field_type( 'address', $form ) ) {
$load = true;
break;
}
}
if ( ! $load ) {
return;
}
?>
<script>
jQuery( document ).ready( function ( $ ) {
const countryLabel = 'Country'; // TODO: Change it if needed.
const countryPlaceholder = '--- Country ---'; // TODO: Change it if needed.
const gbCountries = [ // TODO: Update it if needed.
{ value: 'England', label: 'England' },
{ value: 'Scotland', label: 'Scotland' },
{ value: 'Wales', label: 'Wales' },
{ value: 'Northern Ireland', label: 'Northern Ireland' }
];
const originalFields = {};
$( '.wpforms-field-address-state' ).each( function () {
const $field = $( this ),
$label = $field.closest( '.wpforms-field-row-block' ).find( 'label' ),
fieldId = $field.attr( 'id' );
originalFields[ fieldId ] = {
label: $label.length ? $label.text() : '',
placeholder: $field.attr( 'placeholder' ) || '',
value: $field.val(),
};
} );
$( document )
.on( 'change', '.wpforms-field-address-country', function () {
const $countryField = $( this ),
$field = $( this ).closest( '.wpforms-field' ),
$stateField = $field.find( '.wpforms-field-address-state' ),
$stateLabel = $stateField.closest( '.wpforms-field-row-block' ).find( 'label' ),
stateFieldId = $stateField.attr( 'id' ),
stateFieldName = $stateField.attr( 'name' );
if ( $countryField.val() === 'GB' ) {
$stateLabel.text( countryLabel );
let selectHTML = `<select class="wpforms-field-address-state" id="${ stateFieldId }" name="${ stateFieldName }">`;
selectHTML += `<option value="">${ countryPlaceholder }</option>`;
$.each( gbCountries, function ( index, country ) {
selectHTML += `<option value="${ country.value }">${ country.label }</option>`;
} );
selectHTML += '</select>';
$stateField.replaceWith( selectHTML );
return;
}
// Replace the select field back to input text
if ( $stateField.is( 'select' ) ) {
$stateField.replaceWith( `<input type="text" class="wpforms-field-address-state" id="${ stateFieldId }" name="${ $stateField.attr( 'name' ) }" placeholder="${ originalFields[ stateFieldId ].placeholder }" value="${ originalFields[ stateFieldId ].value }">` );
}
// Replace label back.
if ( originalFields[ stateFieldId ] ) {
$stateLabel.text( originalFields[ stateFieldId ].label );
}
} );
} );
</script>
<?php
}
Customizing the Snippet
The snippet is designed to be adjusted to fit your use case. Here are the three variables near the top of the JavaScript block you may want to edit.
countryLabel: The label shown above the field when the United Kingdom is selected. It’s set toCountryby default. If you’d preferCountyor any other label, change this value.countryPlaceholder: The placeholder shown as the first option in the dropdown. Update this to match your new label.gbCountries: The list of options shown in the dropdown. By default, this contains England, Scotland, Wales, and Northern Ireland. You can add, remove, or rename entries as needed. For example, if you’d like to collect UK counties instead, replace the list with your preferred counties.
When the user selects a country other than the United Kingdom, the snippet restores the original State/Province/Region text input and its label automatically.
That’s it! You’ve successfully customized the Address field for the International scheme when the United Kingdom is selected. Would you like to explore more ways to customize your form fields? Take a look at our tutorial on how to choose the right address field format.