Formulário de contato usando apenas Html5 e Css3
 06 Setembro 2017
 Css | Html
 Rodrigo Costa Corrêa

Vou compartilhar o código que uso para fazer o formulário de contato do meu site. Usei como base um formulário que baixei do site HtmlDrive.net.

Código Css:
*:focus{
		outline:none; /* Prevents blue border in Webkit */
		}
		
		#info{
			float: left;
			width: 100%;
			text-align: center;
			font-size:20px;
			margin: 20px auto;
		}
		
		a, a:visited, a:active, a:hover {
			text-decoration: none;
			color:#0c4ea2;
		}
		
		form {
			width:100%;
			margin: 20px auto;
		}

		p {
			line-height: 1.6;
		}

		form input, form textarea {
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			background-color:#fff;
			border:1px solid #ccc;
			font-size:20px;
			display:block;
			float: center;
			margin: 8px auto 16px auto;
			padding: 0px 10px;
			
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;
			
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
		}

		form input {
			width:90%;
			min-height:60px;
		}

		form textarea {
			width:95%;
			min-height:200px;
		}

		form input:focus, form textarea:focus {
			-webkit-box-shadow:0 0 25px #ccc;
			-moz-box-shadow:0 0 25px #ccc;
			box-shadow:0 0 25px #ccc;
			
			-webkit-transform: scale(1.05);
			-moz-transform: scale(1.05);
			transform: scale(1.05);
		}
		
		form input:not(:focus), form textarea:not(:focus) {
			opacity:0.5;
		}
		
		form input:required, form textarea:required {
			background:url("asterisk.png") no-repeat right 22px;	
			background-origin: content-box;
			background-position: right 0% 10%; 			
		}

		form input:valid, form textarea:valid {
			background:url("tick.png") no-repeat right 20px;	
			background-origin: content-box;
			background-position: right 0% 10%; 			
		}		

		form input:focus:invalid, form textarea:focus:invalid {
			background:url("cancel.png") no-repeat right 22px;	
			background-origin: content-box;
			background-position: right 0% 10%; 						
		}

		form input[type=submit] {
			padding:10px;
			background:#fff;
			opacity:1.0;
			float: center;
			width:200px;
			margin: 0px auto;
			cursor: pointer;
		}

		form input[type=submit]:hover {
			color:#fff;
			background:#0c4ea2;
		}	
		
		#contactForm {
			width: 90%;
			margin: 0px auto;
			height: auto;
		}
			
		#contactForm .contactBlock{
			float: left;
			width: 50%;
		}
			
		#contactForm .contactBlockMessage{
			float: left;
			width: 100%;
		}
			
		#contactForm .contactBlockButton{
			float: left;
			width: 100%;
		}
			
		.contactBlock label{
			display: table;
			float: center;
			width: 90%;
			margin: 10px auto 0px auto;
			text-align: left;
			font-size:20px;
			font: Georgia, "Times New Roman", Times, serif;
		}
			
		.contactBlockMessage label{
			display: table;
			float: center;
			width: 95%;
			margin: 10px auto 0px auto;
			text-align: left;
			font-size:20px;
			font: Georgia, "Times New Roman", Times, serif;
		}
Código Html:
<div class="contactBlock">
					<label for="name">Nome:</label>
					<input type="text" name="name" required placeholder="Nome" value="" />
				</div>

				<div class="contactBlock">
					<label for="email">E-mail:</label>
					<input type="email" name="email" required placeholder="Nome@E-mail.com" value="" />
				</div>

				<div class="contactBlock">
					<label for="phone">Telefone:</label>
					<input type="tel" name="phone" required maxlength="20" placeholder="+55 21 988887777" pattern="\+[0-9]{2,3} [0-9]{2,3} [0-9]{8,9}$" value="" />
				</div>

				<div class="contactBlock">
					<label for="subject">Assunto:</label>
					<input type="text" name="subject" required placeholder="Assunto" value="" />
				</div>

				<div class="contactBlockMessage">
					<label for="message">Mensagem:</label>
					<textarea cols="30" rows="10" name="message" required wrap="virtual"></textarea>
				</div>

				<div class="contactBlockButton">
					<input name="send" type="submit" value="Enviar Mensagem" />
				</div>
Exemplo do Formulário:

Clique Aqui para baixar o código completo, incluindo as imagens usadas no exemplo.