Blog ComercialWeb - São Paulo - SP
E-mail: comercial2@comercialweb.com.br
Atualizado: 20/11/2019

Formulário Responsivo para páginas AMP

Aprenda a fazer um Formulário Responsivo para páginas AMP, super simples.

<!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">

    <!-- 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>

<!--  Boilerplate CSS para ocultar inicialmente o conteúdo até o carregamento do AMP JS. -->
    <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;background-color: #fff;
overflow-x: hidden;text-align: center;font-size:60%;}
.container-form {
    width: 95%;
    margin: 0 auto;
}
.form-input {
  width: 100%;
  color: #292929;
  font-size: 18px;
  background-color: rgb(250, 191, 191);
  border: 1px solid #990000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  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-color: rgb(250, 191, 191);
  border: 1px solid #990000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 110px;
  margin-bottom: 20px;
  border-bottom: 1px solid #990000;
  border-left: 1px solid #990000;
  text-indent: 20px;
  padding-top: 16px;
  padding-left: 0;
  padding-right: 0;
  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 #000000;
  border-right: 3px solid rgb(0, 0, 0);
  transition: 0.5s;
}
.form-button:hover {
   background: #FF0909;
}
    </style>


    <title>Formulário Responsivo para páginas AMP</title>
</head>
<body>
        <br>
    <h1>Formulário Responsivo para páginas AMP.</h1>
<br>
    <form class="sample-form" method="GET" action="pagina-que-envia.php"
        target="_top">
        <div class="container-form">
            <br>
            <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>

Veja o resultado

Fonte: Luciano

Comente esta matéria:


Compartilhe esta matéria




Veja Também