Web designer | Salvador

Podemos deixar um formulário de contato mais atrativo utilizando CSS para formatação de layout, customizar labels, inputs, background….

Além do CSS podemos usar o javascript para contribuir com o design e a usabilidade. Neste post vamos usar pequenos javascript para incrementar nossos formulários.

  

Formulário com caixas de mensagens.

Neste exemplo de formulário, uma pequena caixa aparecerá ao lado quando o campo (input) for acionado através do mouse ou a tecla tab.

Você poderá usar esta caixa para ajudar o usuário a preencher o seu formulário.

Vamos para os códigos usados.

Um pouco de CSS

<style type="text/css">
<!--
input{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#003300;
background-color:#D3E2E2;
color:#006600;
border:#336600 1px solid;
}
label{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
display:block;
color: #003300;
font-weight:bold;

}
.mensagem{
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:3px 3px;
border:solid 1px #DEDEDE;
background:#669999;
font-size:11px;
color:#FFFFFF;
margin-left:2px;

}
-->
</style>

A função javascript é que faz a caixa aparecer e desaparecer.

<script type="text/javascript">
<!--

function toggleMsg(idElement){
element = document.getElementById(idElement);
if(element.style.visibility!='hidden'){
element.style.visibility='hidden';
} else {
element.style.visibility='visible';
}
}
-->
</script>

O código html do formulário

<form action="" method="post">
<label for="usuario">Usuário</label>
<input type="text" id="usuario" onFocus="javascript:toggleMsg('mensagem-1')" onBlur="javascript:toggleMsg('mensagem-1')" />
<span id="mensagem-1" class="mensagem" style="visibility:hidden;">Este nome aparecerá no seu cadastro</span>

<label for="email">E-mail</label>
<input type="text" id="email" onFocus="javascript:toggleMsg('mensagem-2')" onBlur="javascript:toggleMsg('mensagem-2')" />
<span id="mensagem-2" class="mensagem" style="visibility:hidden;">Você receberá uma notificação através deste e-mail</span>
<label for="senha">Senha</label>
<input type="text" id="senha" onFocus="javascript:toggleMsg('mensagem-3')" onBlur="javascript:toggleMsg('mensagem-3')"/>
<span id="mensagem-3" class="mensagem" style="visibility:hidden;">No mínimo 4 caracteres</span>
</form>

  

Formulário com contador de caracteres

Este formulário é caso você precise limitar a quantidade de caracteres que o usuário tem que digitar em um determinado campo.

Uma opção muita usada anteriormente e colocar no input do campo o código maxlenght

<input name="textfield" maxlength="25" />

Mas por questão de usabilidade, mostraremos quantos caracteres faltam para chegar ao limite máximo.

Código do CSS

<style type="text/css">
<!--
input{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#003300;
}
label{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #666666;
font-weight:bold;
}

.counter{
font-family:Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
color:#006699;
}

.texto_quantidade {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}

-->
</style>

Código do javascript, que calcula a quantidade caracteres e muda a cor quando esta perto para chegar no limite.

<script type="text/javascript">
<!--
function countChars(idElement){
max_chars = 25;/*número máximo permitido de caracteres*/
counter = document.getElementById(idElement);
field = document.getElementById('text').value;
field_length = field.length
remaining_chars = max_chars-field_length;
if(remaining_chars<=8){/*quando faltar 8 ou menos caracteres, mudar a cor para vermelha*/
counter.style.color="#CC0000";/*cor vermelha*/

}else{/*se não*/
counter.style.color="#006699";/* cor azul*/
}

// Atualiza o contador na página
counter.innerHTML = remaining_chars;
}
-->
</script>

O código html do formulário

 <form action="" method="post">
<label for="text">Envie sua mensagem</label>
<input type="text" id="text" onKeyUp="javascript:countChars('counter_number')" maxlength="25"/>
<span id="counter_number">25</span>  <span>quantidade de caracteres.</span>
</form>