Formulario

In this example below you will see how to do a Formulario with some HTML / CSS and Javascript

Forked from ozkarri's Pen WbeYvP.

Thumbnail
This awesome code was written by wertyl, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wertyl ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Formulario</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="contact">
<h1>Contacta conmigo</h1>
 <form action="#" method="post">
 <fieldset>
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Escribe tu nombre" />

 <label for="email">Email:</label>
 <input type="email" id="email" placeholder="Añade tu correo electrónico" />

 <label for="message">Mensaje:</label>
 <textarea id="message" placeholder="que estas pensando?"></textarea>

 <input class="enviar" type="submit" value="Pinche aqui" />

 </fieldset>
 </form>
 </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/wertyl/formulario-OPLGWP */
body, div, h1, form, fieldset, input, textarea {
	margin: 0; padding: 0; border: 0; outline: none;
}

html {
	height: 100%;
}

body {
	background: #728eaa;
	background: -moz-linear-gradient(top, #25303C 0%, #728EAA 100%); /* firefox */	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25303C), color-stop(100%,#728EAA)); /* webkit */
	font-family: sans-serif; 
}

#contact {
	width: 430px; margin: 60px auto; padding: 60px 30px;
	background: #c9d0de; border: 1px solid #e1e1e1;
	-moz-box-shadow: 0px 0px 8px #444;
	-webkit-box-shadow: 0px 0px 8px #444;
}

h1 { 
  font: 16px; 
  text-transform: uppercase; 
  color: #445668; 
  text-align: center;
  
  -webkit-text-shadow: 2px 2px 0px rgba(255,255,255,1.0);
  -moz-text-shadow: 2px 2px 0px rgba(255,255,255,1.0);
  text-shadow: 2px 2px 0px rgba(255,255,255,1.0);
}

label { 
  float: left;
  clear: left; /* Romple el float */
  width: 95px;
  margin: 11px 20px 0 0;
  text-transform: uppercase;
  font: 16px Arial;
  text-align: right;
  
  -webkit-text-shadow: 2px 2px 0px #f2f2f2;
  -moz-text-shadow: 2px 2px 0px #f2f2f2;
  text-shadow: 2px 2px 0px #f2f2f2;
}

input {
  width: 260px;
  height: 35px;
  padding: 5px 20px 0px 20px;
  margin: 0 0 20px 0;
  
  -moz-border-radius: 0px 10px 0px 10px;
  -webkit-border-radius: 0px 10px 0px 10px;
  border-radius: 0px 10px 0px 10px;
}

textarea { 
  width: 260px;
  height: 170px;
  padding: 12px 20px 0px 20px;
  margin: 0 0 20px 0;
  
  -moz-border-radius: 0px 10px 0px 10px;
  -webkit-border-radius: 0px 10px 0px 10px;
  border-radius: 0px 10px 0px 10px;
  
  font: 20px;
}

input:focus, textarea:focus { background: #f00; }


.enviar { 
  width:185px;
  height: 52px;
  float: right;
  padding: 10 px 15px;
  cursor:pointer;
}


Comments