Imagem Flutuante no Rodape do Site

Layout
1

O cliente pediu para retirar o Whatsapp Flutuante e colocar um Icone de Email e quando clicar abriria o formulário do site para envio de informacoes.

Primeiro Passo : Inseri esse código Html com a imagem que eu precisava

Fale Conosco pelo E-mail

Segundo Passo: foi inserir um CSS
/* CONTATO */
.contato-modal {
position: fixed;
bottom:5px;
right:10px;
z-index: 99;
}

E pronto ao invés de ter um Whatsapp flutuante eu coloquei uma imagem que eu queria, porem ao clicar na Imagem eu preciso que ela abra o formulário da LI mas não consegui fazer isso.
Sei que falta algum comando no Primeiro Passo e se alguém souber como abrir me ajudaria muito.

1 curtida
2

Boa tarde amigo! Desenvolvi rapidamente essa opção para você, espero que goste. Não é necessário qualquer tipo de CSS, pois a “tag” style se encontra no próprio código. Caso queira mudar o ícone, terá que ser pelo fontawsome V4, basta substituir o “fa fa …” ao final do código. Quanto as cores o background-color é para o fundo e color para a cor do ícone.

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="#modalContato" data-toggle="modal" data-target="#modalContato" style="position:fixed;width:60px;height:60px;bottom:40px;left:40px;background-color:#000000;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888;
  z-index:1000;" target="_blank">
<i style="margin-top:16px" class="fa fa-envelope"></i>
</a>
</html>

image
image1201×805 30.9 KB

1 curtida
3

Grato pelo apoio, deu certo.

1 curtida