6:56 minutos de vídeo
FalaÊ Incuber beleza? Seja muito bem-vindo a mais uma aula do Curso gratuito Mago Contact Form 7 do Nano Academy. Aqui é o Paulo Felipe e nessa aula eu vou te ensinar Como Autocompletar Endereço Pelo CEP no Contact Form 7.
Esse recurso é muito utilizado em formulários de contato que coletam o endereço do usuário, fazendo com que ele ganhe agilidade e seja mais assertivo com os dados informados.
Conheça o CF7 Autofill no repositório do WordPress
Conheça um pouco sobre cada Classe que o plugin precisa para funcionar com o Contact Form 7:
cf7-cep-autofill no campo em que o usuário deve preencher o CEP
cf7-cep-autofill__rua para receber o valor do logradouro
cf7-cep-autofill__bairro para receber o valor do bairro
cf7-cep-autofill__cidade para receber o valor da cidade
cf7-cep-autofill__uf para receber o valor do estado
Segue abaixo um exemplo de uso para cada campo:
<label> CEP [text* cep class:cf7-cep-autofill] </label> <label> RUA [text* logradouro class:cf7-cep-autofill__rua] </label <label> Número [text* numero] </label <label> Bairro [text* bairro class:cf7-cep-autofill__bairro] </label> <label> Cidade [text* cidade class:cf7-cep-autofill__cidade] </label> <label> Estado Com Select (menu suspenso) [select* estado class:cf7-cep-autofill__uf include_blank "AC" "AL" "AP" "AM" "BA" "CE" "DF" "ES" "GO" "MA" "MT" "MS" "MG" "PA" "PB" "PR" "PE" "PI" "RJ" "RN" "RS" "RO" "RR" "SC" "SP" "SE " "TO"] </label> <label> Estado em campo de texto [text* estado class:cf7-cep-autofill__uf] </label>
Modelo para o corpo do e-mail com base nos campos acima:
<h2>Contato via site</h2> CEP: [cep] Rua: [logradouro] Número: [numero] Bairro: [bairro] Cidade: [cidade] UF: [estado]
