Como Personalizar o Layout do Campo de Endereço

Gostaria de personalizar o layout do campo Morada no seu formulário? Temos o tutorial perfeito para si! Usando um pouco de PHP e algum CSS, vamos criar um esquema de morada personalizado que omitirá o campo Distrito/Estado do nosso formulário e, usando CSS, colocaremos o campo Código Postal ao lado do campo Localidade no nosso formulário.

Personalizar o layout do campo Morada

Neste tutorial, começaremos por criar um esquema de morada personalizado, conforme detalhado em este tutorial, que terá apenas os seguintes campos.

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

Por defeito, o campo de formulário Código Postal aparecerá sempre como o último campo dentro da secção de morada 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);

Criação do formulário

Agora que o esquema de morada personalizado foi criado com o nosso snippet, é hora de criar o nosso formulário. Se precisar de ajuda na criação do seu formulário, por favor, consulte esta documentação de ajuda.

O nosso formulário irá recolher apenas algumas informações básicas, que incluirão um campo Morada.

Seleccionar o esquema de morada

Depois de adicionar a sua Morada, selecione o novo Esquema de Morada no menu suspenso no separador Geral que criámos no snippet.

Adicionar o CSS

Agora é hora de adicionar o CSS ao nosso site que irá colocar o campo Código Postal na mesma linha que o campo Localidade.

Para qualquer assistência sobre como e onde adicionar o seu CSS, por favor, reveja 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 apenas a direcionar o ID do formulário 2453 e o ID do campo 9; precisará de atualizar estes IDs para corresponder aos seus. Para assistência em encontrar os seus IDs, por favor, consulte a nossa documentação útil.

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

Filtro de Referência

wpforms_address_schemes

FAQ

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

R: Para colocar o seu campo Código Postal antes do campo Localidade, 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 posso exibir 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 quiser apenas capturar o código postal, a solução mais fácil seria adicionar um campo de Números ao seu formulário para recolher esta informação.

P: Posso reorganizar completamente os outros campos?

R: Absolutamente, no entanto, como pode haver tantas variações diferentes para um campo de morada, não cobriremos todos os cenários específicos. Mas sinta-se à vontade para contactar o nosso WPForms VIP Circle para assistência específica com isto.