Resumo da IA
Você gostaria de personalizar o comportamento do campo “Estado/Província/Região” quando um usuário seleciona o Reino Unido no campo “Endereço”? Ao usar o esquema internacional, o WPForms oculta o campo “Estado/Província/Região” por padrão para o Reino Unido, uma vez que o Reino Unido não utiliza estados no sentido tradicional. Se você quiser coletar um valor como o país (Inglaterra, Escócia, País de Gales ou Irlanda do Norte) ou o condado, pode fazer isso com um trecho de código personalizado.
Este tutorial irá mostrar como reativar o campo “Estado/Província/Região” para o Reino Unido, alterar seu rótulo e substituir o campo de texto por uma lista suspensa com os países do Reino Unido.
Criação do trecho
Antes de começarmos, não deixe de conferir nosso tutorial sobre como adicionar trechos de código personalizados ao seu site.
Este trecho de código realiza duas ações. Primeiro, remove o Reino Unido da lista de países que ocultam o campo “Estado/Província/Região”. Segundo, adiciona um pequeno trecho de JavaScript ao front-end que atualiza o rótulo do campo e substitui o campo de entrada de texto por um menu suspenso sempre que o usuário seleciona o Reino Unido.
Vá em frente e adicione o trecho a seguir ao seu 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
}
Personalização do snippet
Este trecho foi projetado para ser adaptado ao seu caso de uso. Aqui estão as três variáveis localizadas no início do bloco de JavaScript que você pode querer editar.
countryLabel: O rótulo exibido acima do campo quando o Reino Unido é selecionado. Está definido comoCountrypor padrão. Se você preferirCountyou qualquer outro rótulo, altere este valor.countryPlaceholder: O texto provisório exibido como primeira opção no menu suspenso. Altere-o para que corresponda ao seu novo rótulo.gbCountries: A lista de opções exibida no menu suspenso. Por padrão, ela contém Inglaterra, Escócia, País de Gales e Irlanda do Norte. Você pode adicionar, remover ou renomear entradas conforme necessário. Por exemplo, se preferir coletar dados sobre condados do Reino Unido, substitua a lista pelos condados de sua preferência.
Quando o usuário seleciona um país que não seja o Reino Unido, o snippet restaura automaticamente o campo de texto original “Estado/Província/Região” e seu rótulo.
É isso! Você personalizou com sucesso o campo “Endereço” para o esquema internacional quando o Reino Unido é selecionado. Gostaria de explorar outras maneiras de personalizar os campos do seu formulário? Dê uma olhada no nosso tutorial sobre como escolher o formato correto para o campo de endereço.