CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags <style> </style> na secção head dos documentos HTML, ou através de folhas de estilo externas (Ver Tutorial: Aprender o básico sobre CSS ). Neste artigo vamos-lhe demonstrar como criar um fantástico formulário de contato com HTML e CSS3 para surpreender os seus visitantes com um look arrojado e de qualidade, fornecendo uma via para os seus leitores e visitantes o contatarem rapidamente. Este artigo é baseado no formulario de contato apresentado pelos colegas da Voosh Themes, tendo sido adaptado com algumas alterações especialmente para si. Se é um curioso pela linguagem CSS, recomendamos a leitura dos seguintes artigos:

A criação de formulários de contato bonitos e atraentes normalmente significa a utilização de imagens e alguns truques Javascript / jQuery, mas neste tutorial vamos criar um fantástico fomulário de contato utilizando apenas HTML5 e CSS3. Iremos utilizar um conjunto diferentes técnicas CSS para estilizar o formulário, desde  gradientes, sombras, cantos arredondados e algumas simples animações. Este formulário irá funcionar em pleno no Google Chome e no Safari, tendo também a possibilidade de renderizar corretamente em Mozilla Firefox, Opera e Internet Explorer. Curioso? Continue a ler!

css3

1. HTML

O primeiro passo é criar o layout do nosso formulário de contato, e isso significa utilizar HTML, tirando partido das suas funcionalidades. Crie um ficheiro HTML e insira o seguinte código para criar os campos do formulário, as suas designações e o botão de envio do mesmo:

form action="#"> 

		<h1>Contate-nos já!</h1>

		<fieldset id="user-details">	

			<label for="nome">Nome:</label>
			<input type="text" name="name" value="" /> 

			<label for="email">Email:</label>
			<input type="email" name="email" value=""  /> 

			<label for="telefone">Telefone:</label>
			<input type="text" name="phone" value=""  /> 

			<label for="website">Website:</label>
			<input type="url" name="website" value=""  /> 

		</fieldset>

		<fieldset id="user-message">

			<label for="mensagem">Mensagem:</label>
			<textarea name="message" rows="0" cols="0"></textarea> 

			<input type="submit" value="Enviar Mensagem" name="submit" class="submit" />		

		</fieldset>

	</form>

Neste momento o nosso formulário de contato está com o seguinte aspeto:

Como criar um formulário de contato com CSS3

Apenas necessita do CSS3 para ficar com um estilo atrativo e que se adeque ao seu website, o que será feito no seguinte passo.

Na seção <head> do seu documento, insira o seguinte código para fazer a ligação ao futuro ficheiro CSS e utilizar um tipo de letra do Google Fonts:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<link type="text/css" rel="stylesheet" href="style.css" />

2. CSS

Como referimos, apenas iremos utilizar CSS3 e HTML5 para a criação deste formulário, e sendo assim resta-nos criar um ficheiro CSS e introduzir as regras de estilização para dar o look arrojado ao nosso formulário. Crie um ficheiro CSS com o nome style.css e insira o seguinte código para estilizar o corpo do formulário de contato:

* { margin: 0px; padding: 0px; }

	body {
		margin: 0 auto;
		background: #f5f5f5;
		background: #f5f5f5;
		color: #555;
		width: 800px; 

		font-family: 'Yanone Kaffeesatz', arial, sans-serif;
	}

De seguida introduza o seguinte código para estilizar os cabeçalhos e o título de cada um dos campos:

h1 {
		color: #555;
		margin: 0 0 20px 0;
	}	

	label {
		font-size: 20px;
		color: #666;
	}

Com o seguinte código iremos estilizar o corpo do formulário, sendo este o núcleo base da estilização:

form {
		float: left;
		border: 1px solid #ddd;
		padding: 30px 40px 20px 40px;
		margin: 75px 0 0 0;
		width: 715px;
		background: #fff;

		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px; 		

		background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF));
		background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); 

		-webkit-box-shadow:0px 0 50px #ccc;
		-moz-box-shadow:0px 0 50px #ccc;
		box-shadow:0px 0 50px #ccc;
	}

Neste momento o nosso formulário está com o seguinte aspeto:

Como criar um formulário de contacto atrativo em CSS3

Como poderá verificar, falta introduzir algumas regras de estilização que vão definir espaços entre os elementos, limites e ordenar de forma geral o nosso formulário. Para isso é necessário introduzir mais algum código CSS no nosso ficheiro:

textarea {
		width: 390px;
		height: 175px;
	}

	input:hover, textarea:hover {
		background: #eee;
	}

	input.submit {
		width: 150px;
		color: #eee;
		text-transform: uppercase;
		margin-top: 10px;
		background-color: #18a5cc;
		border: none;

		-webkit-transition: -webkit-box-shadow 0.3s linear;

		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px; 

		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8));
		background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);
	} 

	input.submit:hover {
		-webkit-box-shadow: 0px 0px 20px #555;
		-moz-box-shadow: 0px 0px 20px #aaa;
		box-shadow: 0px 0px 20px #555;
		cursor:  pointer;
	}

Neste momento o nosso formulário de contato está pronto a ser utilizado e apresentado aos seus visitantes!

Como criar um formulário de contacto atrativo em CSS3

A utilização de técnicas CSS em detrimento da utilização de imagens e Javascript é extremamente vantajosa, potenciado a velocidade de carregamento do seu website, diminuindo o tráfego utilizado. Além disso, através da utilização de CSS é possível poupar a utilização de código HTML extra, melhorar a acessibilidade do seu website, reduzir o tempo utilizado na programação do seu website e consequentemente reduzir os custos do mesmo.

Os custos podem estar relacionados com o tempo que poupa, tendo assim mais tempo para desenvolver outros projetos, ou caso contrate alguém para o fazer, o tempo dispendido pelo profissional irá ser menor sendo assim a fatura final um pouco menos dispendiosa. Por fim destacamos a flexibilidade que é dada ao design com a utilização do CSS, melhorando inclusivamente podendo criar uma versão de impressão que seja mais adequada e fácil para os seus visitantes.

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Walter Reis
    23 de junho de 2012

    O que significa esses elementos webkit? De onde você tirou?



    • James Leme
      29 de junho de 2012

      Walter, webkit é um motor de renderização utilizado em navegadores como Google Chrome e Safari. Da mesma forma que moz é para o Mozila Firefox, webkit é para os citados (:



  2. Fabio
    8 de agosto de 2012

    Ola amigo, meu design nao fica igual =/ , nome, email,telefone e website ficam em cima e mensagem embaixo, nao vai para a direita, obg!



  3. DCGercossimo
    8 de agosto de 2012

    Diogo, muito bom, mas faltaram as tags ! dá pra ver que é só posicionamento mas ainda assim está faltando.



  4. Vantuir de Souza
    10 de agosto de 2012

    Ola Meu caro Diogo, Olhando o projeto feito, e o que você tentou transmitir, tem uma grande diferença!
    Porque? Qual a intenção? Se não houve nenhuma intenção, sugiro, ver o site de nosso amigo Robson:www.upinside.com.br.

    Abraços



  5. Hugo
    3 de dezembro de 2012

    Amigo será que teria como colocar o codigo do action.

    Aquele estilo que colocamos o email para qual a mensagem vai ser enviada…



  6. kelven
    11 de fevereiro de 2013

    olá obrigado pelo codigo, esta muito bom, a estilização deu certo
    o formulário ficou como você mostrou, entretanto os campos não ficaram alinhado.
    o que eu faço agora



  7. marcelino
    26 de março de 2013

    qual o codigo para destinar para o meu e-mail?



  8. ...
    22 de julho de 2014

    Prezado candidato,

    Aumente sua popularidade no Facebook, e tenha mais eleitores, através da maior rede social do mundo.
    pacote a partir de R$500,00 para cada 10 mil curtidas, contratação somente por telefone, entregues em até 72 horas. 43-3037-1240



  9. ...
    3 de agosto de 2014

    Serviço de envio de mensagens Eleitorais via WhatsApp.
    Temos 52 milhões de usuários cadastrados no WhatsApp pelo Brasil, envie sua mensagem a todos eles, dividido por estado, maiores Informações e contratação ligue: 43-3037-1240



  10. ...
    23 de agosto de 2014

    Serviço de envio de mensagens Eleitorais via WhatsApp.
    Temos 52 milhões de usuários cadastrados no WhatsApp pelo Brasil, envie sua mensagem a todos eles, dividido por estado, maiores Informações e contratação ligue: 43-3037-1240

    Este é um e-mail automático disparado pelo sistema. Favor não respondê-lo, pois esta conta não é monitorada.



  11. ...
    30 de agosto de 2014

    Tenha milhares de seguidores no seu twitter.

    Pacotes a partir de 10 mil seguidores por apenas R$350,00 / ligue e contrate: 43-3037-1240

    Conseguimos até 200 mil novos seguidores.

    não respondemso via email.



  12. Fabiano
    25 de outubro de 2014

    Tutorial show de bola, porém meu projeto final ficou igual não esta todo bagunçado o foirmulário. Não ficou formatado lindo igual os eu.. e olha que esta tudo gual alguem pode me ajudar?


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz