Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>
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">
.container-form label {
.container-form label:not(.wrapper-message),
.container-form span{
.container-form input {
.container-form textarea {
.container-form input[name='telefone'] {
.container-form input[name='ddd'] {
.container-form .span-center {
.container-form .actions {
.container-form .actions input {
.container-form .container-textbox {
@media(max-width: 300px) {
.container-form label {