Introdução
Gostaria de adicionar a validação do campo de código postal aos seus WPForms? Por padrão, ao usar o campo Endereço, há apenas um local para inserir um CEP junto com o endereço. No entanto, neste tutorial, mostraremos como você pode criar um campo que pesquisará os códigos postais que podem ser atendidos e falhará ao enviar o formulário se o código postal não estiver em sua área de serviço preferencial.
Criando o formulário
Vamos começar criando um novo formulário e adicionando todos os nossos campos obrigatórios.
Adicionaremos um campo de formulário de texto de linha única que terá uma máscara de entrada que funcionará como nosso campo de CEP. Isso permitirá que, quando o formulário for enviado, o snippet pegue o valor inserido nesse campo e compare-o com uma lista de códigos postais que estão em nossa área de serviço. Se houver falha, o usuário verá uma mensagem informando que não atendemos a essa área no momento.
Se precisar de ajuda para criar formulários, consulte este guia útil.
Usando a máscara de entrada
Como queremos que nosso campo de formulário de texto de linha única apareça como um campo de código postal padrão, adicionaremos uma máscara de entrada a esse campo. Para isso, clique no campo e navegue até a guia Advanced (Avançado ). No campo Input Mask (Máscara de entrada ), digite 99999. Isso significa que esse campo específico aceitará apenas 5 dígitos numéricos.
Para obter mais informações sobre máscaras de entrada no WPForms, consulte este tutorial para obter mais exemplos.
Adicionando o snippet
Agora é hora de adicionar nosso snippet. Se precisar de ajuda sobre como e onde adicionar snippets, consulte esta documentação.
/**
* Add zip code field validation.
*
* @link https://wpforms.com/developers/how-to-add-zip-code-field-validation-on-your-forms/
*/
function wpf_dev_validate_zip_code( $fields, $entry, $form_data ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #3382.
if ( absint( $form_data[ 'id' ] ) !== 3382 ) {
return $fields;
}
// Get the value of the zip code field the user entered
// Field ID for zip code field is '6'
$zip_code = $fields[6][ 'value' ];
// Zip code array, each zip code separated by a comma
$zip_code_list = array(
'85224',
'85225',
'85226',
'85233',
'85234',
'85244',
'85246',
'85248',
'85249',
'85286',
'85295',
'85296',
'85297',
'85298',
'85299'
);
if (!in_array($zip_code, $zip_code_list)) {
// Check the field ID 75 and show an error message at the top of the form and under the specific field
wpforms()->process->errors[ $form_data[ 'id' ] ]['6'] = esc_html__( 'We apologize for the inconvenience, but we currently do not service your area. Please check back in the future.', 'plugin-domain' );
}
}
add_action( 'wpforms_process', 'wpf_dev_validate_zip_code', 10, 3 );
Vamos detalhar esse snippet para explicar cada parte. A primeira seção do snippet procura ver se o ID do formulário que o snippet está analisando corresponde ao ID do formulário que especificamos no snippet. Para este exemplo, esse snippet será executado somente no ID do formulário 3382.
A próxima linha do snippet está procurando o campo ID 6 e pegando o valor que foi inserido no formulário. Quando tiver esse valor, ele comparará o valor inserido com a lista de códigos postais que inserimos na matriz $zip_code_list. Você precisará atualizar o ID do formulário, o ID do campo e atualizar os códigos postais exibidos nessa matriz para que correspondam aos seus próprios códigos postais.
Para obter ajuda na localização dos números de ID do formulário e do campo, consulte nosso tutorial sobre Como localizar o ID do formulário e o ID do campo.
Depois de fazer os ajustes no snippet, você perceberá que o formulário não processará o envio do formulário se o código postal inserido não for encontrado na lista de array $zip_code_list.
E isso é tudo o que você precisa para adicionar com êxito a validação do campo de CEP a um campo de texto de linha única. Gostaria de limitar também os países que são exibidos ao usar o campo Endereço e o preenchimento automático? Dê uma olhada em nosso tutorial sobre Como restringir o preenchimento automático de endereços a um país específico.
Relacionado
Referência da ação: wpforms_process