Como personalizar o layout do campo de endereço

Gostaria de personalizar a disposição do campo Endereço no seu formulário? Temos o tutorial perfeito para si! 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/Postal ao lado do campo Cidade no nosso formulário.

Personalizar o layout do campo de endereço

Neste tutorial, vamos começar por criar um esquema de endereços personalizado, conforme detalhado neste tutorial, que terá apenas os seguintes campos.

• Linha de endereço 1
• Endereço Linha 2
• Cidade
• Código Postal (para o nosso campo de código postal)

Por predefinição, o campo do formulário Código postal aparecerá sempre como o último campo na secção de endereço do 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);

Criar o formulário

Agora que o esquema de endereço personalizado foi criado com nosso snippet, é hora de criar nosso formulário. Se precisar de ajuda para criar o formulário, consulte esta documentação de ajuda.

O nosso formulário só vai recolher algumas informações básicas que incluem um campo Endereço.

Seleção do esquema de endereços

Depois de adicionar o seu Endereço, selecione o novo Esquema de Endereços a partir do menu pendente no separador Geral que criámos no snippet.

Adicionar o CSS

Agora é hora de adicionar o CSS ao nosso site que puxará o campo Postal para a mesma linha que o campo Cidade.

Para obter ajuda sobre como e onde adicionar o CSS, consulte 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 apenas estamos a visar o ID de formulário 2453 e o ID de campo 9. Terá de atualizar estes IDs para corresponderem aos seus. Para obter ajuda para encontrar as suas IDs, consulte a nossa documentação útil.

Gostaria de personalizar o estilo do campo Section Divider com CSS? Confira este artigo sobre Como personalizar o divisor de seção do WPForms usando CSS.

Filtro de referência

wpforms_address_schemes

FAQ

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

R:Para colocar o campo Postal antes do campo Cidade, utilize este CSS.

#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 é que posso apresentar apenas o campo Código postal?

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

P: Posso reorganizar completamente os outros campos?

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