post

Adicionar ícones nos campos com formulário do Elementor

Publicado em: 01/03/2023

Categorias: BlogElementorWordpress

Neste post trago um código CSS simples que vai lhe ajudar a adicionar ícones nos campos do formulário do Elementor.

Para isso, adicione o código abaixo no Elementor em “Elementor > Código personalizado” com as mesmas configurações da imagem.

Print das configurações:

Código personalizado:

.formulario-contato-site input, .formulario-contato-site textarea, .formulario-contato-site select {
    padding: 14px 20px 14px 56px !important;
}

.formulario-contato-site [class*="elementor-field-group"]::before {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px 30px;
    position: absolute;
}

/* Troque os links das imagens pelo seus links */
.formulario-contato-site .elementor-field-group-nome::before {
    background-image: url('../wp-content/uploads/2023/03/icone-usuario.svg');
}

.formulario-contato-site .elementor-field-group-email::before {
    background-image: url('../wp-content/uploads/2023/03/icone-email.svg');
}

.formulario-contato-site .elementor-field-group-telefone::before {
    background-image: url('../wp-content/uploads/2023/03/icone-telefone.svg');
}

.formulario-contato-site .elementor-field-group-empresa::before {
    background-image: url('../wp-content/uploads/2023/03/icone-empresa.svg');
}

.formulario-contato-site .elementor-field-group-mensagem::before {
    background-image: url('../wp-content/uploads/2023/03/icone-mensagem.svg');
    background-position: top;
    top: 20px;
}

Resultado:

Espero que este post lhe ajude, um forte abraço e até mais.

Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/2507

ID de Referência: 2507

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários