Blog ComercialWeb - São Paulo - SP
E-mail: [email protected]
E-mail: [email protected]
Estruture um formulário leve e acessível em AMP, incluindo a extensão amp-form, estilos customizados e o boilerplate exigido pela especificação.
<!DOCTYPE html>
<html amp lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Formulário Responsivo para páginas AMP.</title>
<!-- carrega a biblioteca JavaScript AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Carrega a extensão amp-form. -->
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Estilizando formulário -->
<style amp-custom>
*{ margin: 0; padding: 0; }
body{ background:#fff; font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; margin:0; padding:0; text-align: center; font-size:60%; }
.container-form{ width:95%; margin:0 auto; }
.form-input{ width:100%; color:#292929; font-size:18px; background:#fabfbf; border:1px solid #990000; border-radius:5px; height:40px; margin-bottom:20px; border-bottom:1px solid #990000; border-left:1px solid #990000; text-indent:20px; }
.form-textarea{ width:100%; color:#292929; font-size:18px; background:#fabfbf; border:1px solid #990000; border-radius:5px; height:110px; margin-bottom:20px; border-bottom:1px solid #990000; border-left:1px solid #990000; text-indent:20px; padding-top:16px; font-family:Arial, Times, serif; }
.form-button{ width:100%; font-size:18px; border-radius:4px; color:#fff; height:40px; opacity:.8; margin-bottom:20px; cursor:pointer; background:#990000; display:block; border:none; border-bottom:3px solid #000; border-right:3px solid #000; transition:.5s; }
.form-button:hover{ background:#FF0909; }
</style>
</head>
<body>
<h1>Formulário Responsivo para páginas AMP.</h1>
<form class="sample-form" method="GET" action="Aqui-sua-pagina-que-envia-o-form" target="_top">
<div class="container-form">
<input type="text" class="form-input" name="nome" placeholder="Seu Nome" required>
<input type="email" class="form-input" name="email" placeholder="Seu Email" required>
<input type="text" class="form-input" maxlength="12" name="assunto" placeholder="Assunto">
<textarea class="form-textarea" name="conteudo" placeholder="Deixe uma mensagem" maxlength="1480" required></textarea>
<input type="submit" value="Enviar" class="form-button">
</div>
</form>
</body>
</html>
