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 lugar para inserir um código postal junto com o endereço. No entanto, neste tutorial, vamos mostrar-lhe como pode criar um campo que irá procurar os seus códigos postais e falhar na submissão do formulário se o código postal não estiver na sua área de serviço preferida.
Criar o formulário
Vamos começar por criar um novo formulário e adicionar 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 falhar, o utilizador verá uma mensagem a indicar que, neste momento, não prestamos serviços nessa área.
Se precisar de ajuda para criar formulários, consulte este guia útil.
Utilizar a máscara de entrada
Como queremos que o nosso campo de formulário de texto de linha única apareça como um campo de código postal padrão, vamos adicionar uma máscara de entrada a este campo. Para tal, clique no campo e navegue até ao separador Avançadas. No campo Input Mask (Máscara de entrada ), introduza 99999. Isto significa que este campo específico só aceitará 5 dígitos numéricos.
Para obter mais informações sobre máscaras de entrada no WPForms, consulte este tutorial para obter mais exemplos.
Adicionar o snippet
Agora é hora de adicionar o 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 dividir esse snippet para explicar cada parte. A primeira secção do snippet procura ver se o ID do formulário que o snippet está a ver corresponde ao ID do formulário que especificámos no snippet. Para este exemplo, este snippet só será executado no ID de 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. Assim que tiver este valor, vai comparar esse valor introduzido com a lista de códigos postais que introduzimos na matriz $zip_code_list. Terá de atualizar o ID do formulário, o ID do campo e atualizar os códigos postais que são apresentados nesta matriz para corresponderem 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 o nosso tutorial sobre Como localizar o ID do formulário e o ID do campo.
Depois de ter feito os seus ajustes ao snippet, irá reparar que o formulário não processará a submissão do formulário se o código postal introduzido não for encontrado na lista de array $zip_code_list.
E é tudo o que precisa para adicionar com êxito a validação do campo do código postal a um campo de texto de linha única. Gostaria também de limitar os países que são apresentados quando utiliza o campo Endereço e o preenchimento automático? Veja o nosso tutorial sobre Como restringir o preenchimento automático de endereços a um país específico.
Relacionadas
Referência da ação: wpforms_process