1

Boas. Tenho o seguinte esboço de um formulário de contacto feito no wix.com mas queria colocá-lo também no meu projeto asp.net. esboço

Até agora, está assim :

amostra

O meu código é o seguinte:

<body>
    <style>
        textarea, input {
            border: 2px solid rgba(7, 143, 27, 1);
            padding: 5px 10px;
            background-color: white;
            font-family:Arial;
            width:400px;
            height:33px;
        }





    </style>
    <form id="form1" runat="server">
        <div>
            <table border="0" style="width: 409px">
                <tr>
                    <td>
                        <asp:TextBox ID="txtName" runat="server" ValidationGroup="contact" placeholder="Nome*"></asp:TextBox>
                        <br />

                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*Campo obrigatório"
                            ControlToValidate="txtName"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="TextBox1" runat="server" placeholder="Assunto*"></asp:TextBox>
                        <br />
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*Campo obrigatório"
                            ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="txtEmail" runat="server" placeholder="Email*"></asp:TextBox>
                        <br />

                        <asp:RegularExpressionValidator ID="valRegEx" runat="server"
                            ControlToValidate="txtEmail"
                            ValidationExpression=".*@.*\..*"
                            ErrorMessage="*Endereço de email inválido."
                            Display="dynamic">

                        </asp:RegularExpressionValidator>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="*Campo obrigatório"
                            ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" placeholder="Mensagem*"></asp:TextBox>
                        <br />

                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="*Campo obrigatório"
                            ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <%--<td></td>--%>
                    <td>
                        <asp:Button ID="btnSend"  runat="server" Text="Enviar"  OnClick="btnSend_Click" />
                    </td>
                </tr>
                <tr>
                    <%--<td></td>--%>
                    <td>
                        <asp:Label ID="lblMessage" runat="server" Text="" ForeColor="Green"></asp:Label>
                    </td>
                </tr>
            </table>

        </div>
    </form>
</body>
</html>

Alguém tem como ajudar por favor? Obrigado desde já!

2 Respostas 2

3

Nesse caso, é só "brincar" com o CSS e não colocar o seu botão em uma nova <tr>. Veja o exemplo abaixo:

textarea,
input,
button {
  border: 2px solid rgba(7, 143, 27, 1);
  padding: 5px 10px;
  background-color: white;
  font-family: Arial;
  width: 400px;
  height: 33px;
}

textarea {
  height: 150px;
}

button {
  width: 200px;
  height: 60px;
  display: block;
  margin: 80px auto;
  position: absolute;
}

td {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
}
<html>

<body>
  <form id="form1" runat="server">
    <div>
      <table border="0" style="width: 409px">
        <tr>
          <td>
            <input type="text" ID="txtName" ValidationGroup="contact" placeholder="Nome*" />
            <br />
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" ID="TextBox1" placeholder="Assunto*" />
            <br />
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" ID="txtEmail" placeholder="Email*">
            <br />
          </td>
        </tr>
        <tr>
          <td>
            <button ID="btnSend">Enviar</button>
            <textarea ID="TextBox2" TextMode="MultiLine" placeholder="Mensagem*"></textarea>
            <br />
          </td>
        </tr>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
  </form>
</body>

</html>

4
  • Boa jovem pensei a mesma coisa, só que com position apenas, pra não ter que mudar de table-cell para flex. Espero que não se importe de ter usado parte de seu código ;)
    – hugocsl
    Commented 22/05/2018 às 16:28
  • @hugocsl, É todo seu, css eu só dou pitaco pra não deixar o AP na mão e espero alguém vir com a resposta mais completa. Commented 22/05/2018 às 16:44
  • Para mim serviu! Obrigado :)
    – M.Carreira
    Commented 22/05/2018 às 16:56
  • Tem horas que o simples é o mais difícil de pensar rss e falando em CSS quase sempre tem mais de um jeito de fazer... []´s
    – hugocsl
    Commented 22/05/2018 às 17:04
1

Minha ressalva com relação ao código do Leandro é o cuidado em não mudar o display do elemento que é uma table-cell por flex. Acredito que com position apenas seja mais adequado para essa situação.

Usado parde do código do @LeandroAngelo fiz esse modelo.

textarea,
input,
button {
  border: 2px solid rgba(7, 143, 27, 1);
  padding: 5px 10px;
  background-color: white;
  font-family: Arial;
  width: 400px;
  height: 33px;
}

textarea {
  height: 150px;
}

button {
  width: 200px;
    height: 60px;
    position: absolute;
    bottom: -22px;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.rel {
  position: relative;
}
<form id="form1" runat="server">
  <div>
    <table border="0" style="width: 409px">
      <tr>
        <td>
          <input type="text" ID="txtName" ValidationGroup="contact" placeholder="Nome*" />
          <br />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" ID="TextBox1" placeholder="Assunto*" />
          <br />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" ID="txtEmail" placeholder="Email*">
          <br />
        </td>
      </tr>
      <tr>
        <td class="rel">
          <button ID="btnSend">Enviar</button>
          <textarea ID="TextBox2" TextMode="MultiLine" placeholder="Mensagem*"></textarea>
          <br />
        </td>
      </tr>
      <tr>
        <td></td>
      </tr>
    </table>
  </div>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .