Como Personalizar o Layout do Campo de Endereço

Gostaria de personalizar o layout do campo Endereço em seu formulário? Temos o tutorial perfeito para você! Usando um pouco de PHP e CSS, vamos criar um esquema de endereço personalizado que omitirá o campo Estado do nosso formulário e, usando CSS, colocaremos o campo CEP/Código Postal ao lado do campo Cidade em nosso formulário.

Personalizando o layout do campo de endereço

Neste tutorial, começaremos criando um esquema de endereço personalizado, conforme detalhado em este tutorial, que terá apenas os seguintes campos.

• Linha 1 do Endereço
• Linha 2 do Endereço
• Cidade
• CEP (para nosso campo de código postal)

Por padrão, o campo de formulário CEP/Código Postal sempre aparecerá como o último campo dentro da seção de endereço no formulário.

/**
 * WPForms Add new address field scheme (Custom)
 *
 * @link   https://wpforms.com/developers/create-additional-schemes-for-the-address-field/
 */
 
function wpf_dev_new_address_scheme( $schemes ) {
 
    $schemes[ 'custom' ] = array(
        'label' => 'Custom',
        'address1_label' => 'Address Line 1',
        'address2_label' => 'Address Line 2',
        'city_label' => 'City',
        'postal_label' => 'Code Postal',
    );
 
    return $schemes;
 
}
 
add_filter( 'wpforms_address_schemes', 'wpf_dev_new_address_scheme', 10, 1);

Criando o formulário

Agora que o esquema de endereço personalizado foi criado com nosso trecho, é hora de criar nosso formulário. Se precisar de ajuda para criar seu formulário, por favor, confira esta documentação de ajuda.

Nosso formulário coletará apenas algumas informações básicas, que incluirão um campo Endereço.

Selecionando o esquema de endereço

Depois de adicionar seu Endereço, selecione o novo Esquema de Endereço no menu suspenso na aba Geral que criamos no trecho.

Adicionando o CSS

Agora é hora de adicionar o CSS ao nosso site que trará o campo CEP para a mesma linha do campo Cidade.

Para qualquer ajuda sobre como e onde adicionar seu CSS, por favor, revise este artigo.

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

É importante notar que estamos visando apenas o ID do formulário 2453 e o ID do campo 9; você precisará atualizar esses IDs para corresponder aos seus. Para obter ajuda para encontrar seus IDs, por favor, confira nossa útil documentação.

Gostaria de personalizar o estilo do campo Divisor de Seção com CSS? Confira este artigo sobre Como Personalizar o Divisor de Seção do WPForms Usando CSS.

Filtro de Referência

wpforms_address_schemes

Perguntas Frequentes

P: Como posso mudar a posição da Cidade e do Código Postal?

R: Para colocar seu campo CEP antes do campo Cidade, use este CSS em vez disso.

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: right;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

P: Como eu exibiria apenas o campo de Código Postal?

R: Se você quiser ter apenas um campo de código postal, poderia ocultar todos os outros campos com CSS. No entanto, se você apenas quisesse capturar o código postal, a solução mais fácil seria adicionar um campo de Números ao seu formulário para coletar essa informação.

P: Posso reorganizar completamente os outros campos?

R: Com certeza, no entanto, como pode haver tantas variações diferentes para um campo de endereço, não cobriremos todos os cenários específicos. Mas sinta-se à vontade para entrar em contato com nosso Círculo VIP da WPForms para obter assistência específica com isso.