passe o mouse sobre os campos do formulário…
Para obter esse efeito você vai precisar adicionar a classe icone ao formulário em:
Configurações de Módulo / Avançado / Classes & ID do CSS / Classes CSS
Em seguida adicione o código abaixo no CSS principal
*Ainda precisam ser feitas algumas modificações no estilo das bordas de cada campo, veja o passo a passo no vídeo.
video
.icone .et_pb_contact_form p:before {
position: absolute;
padding-top:15px;
right:0;
padding-right:5px;
color: #eee!important;
z-index: 3;
}
.icone .et_pb_contact_form_0 .input {
position: relative;
padding-left: 55px;
height: 50px;
}
.icone .et_pb_contact_field_0:before {
font-family: "ETmodules";
font-size:30px;
content: "\e08a";
color:#eee!important;
}
.icone .et_pb_contact_field_1:before {
font-family: "ETmodules";
font-size:30px;
content: "\e076";
color:#eee!important;
}
.icone .et_pb_contact_field_2:before {
font-family: "ETmodules";
font-size:30px;
content: "c";
color:#eee!important;
}
Comentários