Jump to content
Felipe Barros Gontijo

Codigo de Formulario de Contato. Problema não responsivo

Recommended Posts

Preciso passar esse código do formulario de contato para responsivo. Preciso usar ele, pois já está configurado com conexão com o banco de dados.

 

Me desculpem pela ignorância, estou adicionando esse código em um campo html nessa página wordpress e o que sei sobre programação é o básico do básico como mudar cor, fonte e imagem responsiva e algo mais.

 

página:

http://www.mundoagua.com.br/banheiras/spa-3-pessoas/

 

 

Código:

<h2 id="orcamento">Solicite um orçamento</h2>
<form id="contact-mail-page" 

action="http://www.mundoagua.com.br/enviar.php" 

method="post" accept-charset="UTF-8">
<div id="contato-titulo">
  <p class="vermelho"><strong>(* Preenchimento 

obrigatório )<br />
  </strong></p>
  <table id="bgtabela" width="478" border="0" 

cellspacing="0" cellpadding="0">
<tbody>


<tr>
<td width="77"><span class="style4">*Nome:</span></td>
<td width="436"><br />
  <input type="text" name="nome" size="65" 

maxlength="80" />
    <br />
    <br /></td>
</tr>
<tr>
<td>
<p class="style4">*E-mail:</p></td>
<td><input type="text" name="email" size="65" 

maxlength="50" /></td>
</tr>
<tr>
  <td><span class="style4">*DDD:</span></td>
  <td><br />
    <input type="text" name="ddd" size="3" maxlength="2" 

id="ddd" />
    <br />
    <br /></td>
</tr>
<tr>
<td>
<p class="style4">*Telefone:</p></td>
<td><input type="text" name="telefone" size="20" 

maxlength="10" /></td>
</tr>
<tr>
<td>
<p class="style4">Sexo:</p></td>
<td><select name="sexo"> <option selected="selected" 

value="M">Masculino</option> <option 

value="F">Feminino</option> </select></td>
</tr>
<tr>
<td>
<p class="style4">*Cidade:</p></td>
<td><input type="text" name="cidade" size="65" 

maxlength="50" /></td>
</tr>
<tr>
<td>
<p class="style4">Estado:</p></td>
<td><select name="estado"> <option 

selected="selected">AC</option> <option>AL</option> 

<option>AM</option> <option>AP</option> 

<option>BA</option> <option>CE</option> 

<option>DF</option> <option>ES</option> 

<option>GO</option> <option>MA</option> 

<option>MG</option> <option>MS</option> 

<option>MT</option> <option>PA</option> 

<option>PB</option> <option>PE</option> 

<option>PI</option> <option>PR</option> 

<option>RJ</option> <option>RN</option> 

<option>RO</option> <option>RR</option> 

<option>RS</option> <option>SC</option> 

<option>SP</option> <option>SE</option> 

<option>TO</option> </select></td>
</tr>
<tr>
<td>
<p class="style4">Mensagem:</p></td>
<td><textarea name="comentarios" rows="4" 

cols="60"></textarea></td>
</tr>
<tr>
<td></td>
<td><input onclick="javascript:valida_cadastro(); return 

false" type="submit" name="EnviarBt" value="Enviar" /> 

<input type="reset" name="Reset" value="Limpar" /></td>
</tr>
</tbody>
</table>

 

 

Share this post


Link to post
Share on other sites

realmente você tem um problema de responsividade, somente pra te informar esse padrão de construção de layout utilizando "table" é desaconselhavel, com o uso de css o resultado fica muito mais limpo hoje em dia.

 

bom felipe fiz um refactor no seu código para deixar responsivo, mative as caracteristicas originais, alterando a estrutura html e criando um arquivo css, agora se essa prataforma não permitir adicionar um arquivo css separado ai será um problema, pois as alteraçoes podem ser feitas para deixar os campos do form fruidos com os inputs se adptando com o tamanho da tela quando em tamanho menor mas responsive layout é quando o layout também pode assumir um novo posicionamento, ai não me vem em mente como seria possivel, se a plataforma permite arquivo html separado de css ai fica mais facil. fica ai minha contribuição pro seu site.

 

Html com estrutura alterada:

<h2 id="orcamento">Solicite um orçamento</h2>
<form 
    id="contact-mail-page" 
    action="http://www.mundoagua.com.br/enviar.php" 
    method="post" accept-charset="UTF-8">

  <div id="contato-titulo">
    <p class="vermelho info-message"><strong>(* Preenchimento obrigatório )<br /></strong></p>

    <div class="container-form">
      <label>
        <span>*Nome:</span>
        <input type="text" name="nome" size="65" maxlength="80" />
      </label>
      <label>
        <span>*E-mail:</span>
        <input type="text" name="email" size="65" maxlength="50" />
      </label>
      <label>
        <span>*DDD:</span>
        <input type="text" name="ddd" size="3" maxlength="2" id="ddd" />
      </label>
      <label>
        <span>*Telefone:</span>
        <input type="text" name="telefone" size="20" maxlength="10" />
      </label>
      <label>
        <span>Sexo:</span>
        <select name="sexo">
          <option selected="selected" value="M">Masculino</option>
          <option value="F">Feminino</option>
        </select>
      </label>
      <label>
        <span>*Cidade:</span>
        <input type="text" name="cidade" size="65" maxlength="50" />
      </label>
      <label>
        <span>Estado:</span>
        <select name="estado">
          <option selected="selected">AC</option>
          <option>AL</option> 
          <option>AM</option> <option>AP</option> 
          <option>BA</option> <option>CE</option> 
          <option>DF</option> <option>ES</option> 
          <option>GO</option> <option>MA</option> 
          <option>MG</option> <option>MS</option> 
          <option>MT</option> <option>PA</option> 
          <option>PB</option> <option>PE</option> 
          <option>PI</option> <option>PR</option> 
          <option>RJ</option> <option>RN</option> 
          <option>RO</option> <option>RR</option> 
          <option>RS</option> <option>SC</option> 
          <option>SP</option> <option>SE</option> 
          <option>TO</option> 
        </select>
      </label>
      <label class="wrapper-message">
        <span class="span-center">Mensagem:</span>
        <div class="container-textbox">
          <textarea name="comentarios" rows="4"></textarea>
        </div>
      </label>
      <div class="actions">
        <input onclick="javascript:valida_cadastro(); return false" type="submit" name="EnviarBt" value="Enviar" /> 
        <input type="reset" name="Reset" value="Limpar" />
      </div>
    </div>
  </div>
</form>

CSS:

.container-form {
  display: flex;
  flex-direction: column;
}

.container-form label {
  display: inline-flex;
  justify-content: start;
}

.container-form label:not(.wrapper-message),
.info-message {
  margin-bottom: 31px;
}

.container-form span{
  min-width: 75px;
}

.container-form input {
  width: 100%;
  max-width: 401px;
}

.container-form textarea {
  width: 100%;
}

.container-form input[name='telefone'] {
  max-width: 131px;
}

.container-form input[name='ddd'] {
  max-width: 29px;
}

.container-form .span-center {
  align-items: center;
  display: flex;
}

.container-form .actions {
  display: inline-flex;
  max-width: 401px;
  justify-content: flex-start;
  margin-left: 75px;
}

.container-form .actions input {
  width: 48px;
  margin-right: 4px;
}

.container-form .container-textbox {
  max-width: 381px;
  width: 100%;
}

@media(max-width: 300px) {
  .container-form label {
    display: flex;
    flex-direction: column;
  }
  
  .container-form input,
  .container-form select {
    min-width: 100%;
  }
}

Segue o link com a demonstração do antigo e form alterado:

JsBin: https://jsbin.com/sozasorusi/edit?html,css,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Rafaelmcd
      Pessoal, eu tenho uma DIV, que por padrão ela vem com este css: 
      <div class="clickoff" style="pointer-events: none;">
      ......
      </div>
      Porém queria que, caso um determinado cookie exista, o style dessa div seja alterado para pointer-events: auto;
      Alguém teria uma dica de como poderia fazer isso? Se possível com PHP. 
       
    • By ThosuZ
      Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc").
       
      Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo?
       
      HTML:
       
      <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS:
      /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; }  
      Como ficou:

       
      Como eu gostaria que ficasse mais ou menos:
      http://miritigrafica.com.br/#faleconosco
    • By Gniusplay
      Olá pessoal, eu tenho um sistema de comentários que quando um "player" preenche esse comentário, ele vai direto para pagina inicial, funciona como um feedback, só que ele pode usar isso várias e várias vezes, eu queria que ele usasse apenas uma vez e não pudesse mais utilizar, sendo assim só seria possível usar uma vez.
      Ou q só poderia usar se tivesse x quantidades de pontos no banco de dados(eu tenho uma coluna com pontos) e a cada vez que ele usasse esse formulário(comentário), ele perderia 1 ponto,e  quando não tivesse mais pontos, ele não poderia comentar.
      Alguém tem alguma ideia de como posso fazer isso? e qual funções utilizar?
      VALEUU!!!
    • By tii3030
      Olá pessoal, desenvolvi um pequeno código em PHP com a função de verificar e validar usuário e senha de um formulário, juntamente com o meu banco de dados MySql.
      Gostaria de saber como aprimorar o meu código para torna-lo mais seguro e mais próximo de algo "profissional". Lembrando que minha senha no banco está criptografada (PASSWORD_BCRYPT).
       
      <?php
          #----------------- INCLUDING FILE --> "conf.php"
          include('conf.php');
              if (isset($_POST['submit'])) {
             
      #--------------------------------INPUTS ---------------------------------------------#
                  $email = mysqli_real_escape_string($conexao, $_POST['email']);
                  $password = mysqli_real_escape_string($conexao, $_POST['password']);
      #-----------------------#----------------------#-----------------_#-------------------#
                  $query_select_email = "SELECT email FROM usuarios WHERE email = '$email'";
                  $select_email = mysqli_query($conexao,$query_select_email);
                  $query_select_password = "SELECT password FROM usuarios";
                  $select_password = mysqli_query($conexao,$query_select_password);
                  while($array = mysqli_fetch_array($select_password)) {
                  $logarray = $array['password'];
                  
                      if (password_verify($password, $logarray)) {
                          if (mysqli_num_rows($select_email) == 1) {
                              
                          $_SESSION['email'] = $email;
                          header('location: XXX.html');
                          exit();
                          }
                      }
                      else {
                          echo "Loguin ou senha incorretos";
                      }
                  $logarray = '0';
                  }
              }
      ?>
    • By Deivid Santos
      Salve galera, estou quebrando a cabeça aqui, já pesquisei mas não achei nada sobre.
      Eu tenho alguns dados que busco no banco de dados e mostro em um datagrid, além do CRUD que implantei eu preciso ter a opção de mudar as posições no banco. Preciso fazer isso pois elas são informações que vão para um telão. e ele segue uma ordem na mostragem dos dados.
      Teria alguma forma de arrastar a linha do grid e assim ele mudar o ID do mesmo conforme a posição que ficaria e assim os outros também seriam atualizados?
      Como exemplo segue uma imagem de como ele funciona. por exemplo eu movimento o ID 1 na posição abaixo do ID 3, assim o ID 2 e 3 se tornariam 1 e 2 com essa movimentação e o que era 1 se torna 3.

       
      Agradeço qualquer ajuda que puder.
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.