post #2507

Adicionar ícones nos campos com formulário do Elementor

Publicado em: 01/03/2023 / Atualizado em: 02/03/2023

Categorias: Blog Elementor Wordpress

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: