post
Adicionar ícones nos campos com formulário do Elementor
Publicado em: 01/03/2023
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.