Codigo de Formulario de Contato. Problema não responsivo

Felipe Barros Gontijo · Setembro 8, 2018

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

wanderval · Setembro 16, 2018

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%;
  }
}