Personalizar formulário

3 participantes

Ir para baixo

Tópico resolvido Personalizar formulário

Mensagem por Luiz 28.07.16 23:00

Detalhes da questão


Endereço do fórum: jornalrhc.forumeiros.com
Versão do fórum: PhpBB3

Descrição


Olá, gostaria de ajuda para personalizar os formulários gerados pelo gerador do FdF.

Exemplo de como queria:
Personalizar formulário 2hmzigz

Gostaria que as bordas ficassem dessa forma.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por Luiz 29.07.16 1:01

Vale lembrar que no meu fórum, existem vários formulários.
Gostaria de editar poucas coisas em cada, pra que fique mais fácil.
Tipo só ter que adicionar um CSS em todos. e.e
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por while 29.07.16 2:02

Olá, é proibido mensagens consecutivas.

Bom, poderia me informar o código html de sua pagina? Deseja igual a imagem?

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por Luiz 29.07.16 2:16

Olá, tenho várias como:

Código:
<br />             <script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script src="http://ajuda.forumeiros.com/29110.js"></script>
                <script src="http://ajuda.forumeiros.com/28074.js"></script>
                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>
          


 <form onsubmit="submit_form();" action="/post" id="generated_form" method="post" enctype="multipart/form-data">

 <input type="hidden" name="form_mode" value="1">

<h1 data-type="field">Relatório de Aulas</h1>

<p data-type="field">Preencha os campos abaixo com o que for pedido. Os campos marcados como "Opcional", não precisam ser preenchidos obrigatoriamente.</p>

<dl><dt>Nick dos recrutas:</dt>
                            <dd><input type="text" data-type="field" value="" id="field0"></dd>
                        </dl>

<dl><dt>Número total de recrutas:</dt>
                            <dd><input type="number" min="0" max="10" data-type="field" value="" step="1" id="field1"></dd>
                        </dl>

<dl><dt>Número de recrutas aprovados:</dt>
                            <dd><input type="number" min="0" max="10" data-type="field" value="" step="1" id="field2"></dd>
                        </dl>

<dl><dt>Nick do Guia:</dt>
                            <dd><input type="text" data-type="field" value="" id="field3"></dd>
                        </dl>

<dl>
                            <dt>Observação (Opcional):</dt>
                            <dd><textarea data-type="field" id="field4"></textarea></dd>
                        </dl>

<dl><dt>Atenciosamente,</dt>
                            <dd><input type="text" data-type="field" value="" id="field5"></dd>
                        </dl>


         <textarea id="message-template-bbcode-1" style="display:none">[h3]Relatório de Aulas [/h3]

[b] Nick dos recrutas: [/b]   {field0}

[b] Número total de recrutas:[/b]   {field1}

[b] Número de recrutas aprovados:[/b]   {field2}

[b] Nick do Guia:[/b]   {field3}

[b] Observação (Opcional):[/b]   {field4}


Atenciosamente,   {field5}
</textarea>
            <input type="hidden" name="attach_sig" value="">
            <input type="hidden" name="mode" value="reply">
            <input type="hidden" name="t" value="51">
            <input type="hidden" name="lt" value="146">
            <input type="hidden" name="notify" value="1">
            <input type="submit" name="post" class="button2" value="Enviar">
         
                <textarea name="message" style="display:none"></textarea>
           

</form>


Mas nada muito diferente.
Se precisar de todos, avise.

Sim, desejo algo parecido com o da imagem.
Me desculpe, não sabia que era proibido mensagens consecutivas! Triste
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por while 29.07.16 2:29

Bom, se sua dúvida se trata sobre a aparência das input ser assim ,e do enviar assim, então deixaria aqui o código e você poe em todas as paginas html ... mais simples e pratico !

ponha isto nas suas paginas html:
Código:
<style>#generated_form input , #generated_form textarea {
    background: #FCFCFC none repeat scroll 0 0;
    border: 1px solid #D4D4D4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    color: #9F9F9F;
    padding: 6px;
    text-shadow: 0 1px 0 #FFF;
}
#generated_form > input.button2 {
color:#000!important;
text-align:center!important;
background:green!important;
text-shadow: none!important;
box-shadow: none!important;
border: none!important;
padding:10px!important;
width:50%!important;
}
</style>

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por REVIEW 29.07.16 2:41

Olá meu caro,
personalizei o código HTML de acordo com a imagem fornecida, veja se está como pretende:
Código:
<br />            <script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script src="http://ajuda.forumeiros.com/29110.js"></script>
                <script src="http://ajuda.forumeiros.com/28074.js"></script>
                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
  margin-bottom: 10px;
  font-size: 1.1em;
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
  width: 30%;
  padding-top: 5px;
  border: none;
  float: left;
}
 
#generated_form dd {
  padding: 5px;
  padding-right: 5px;
  margin-left: 30%;
  vertical-align: middle;
}
#generated_form dl:hover dt {
  color: #666;
}
 
#generated_form input {
  font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333333;
  padding: 2px;
  vertical-align: middle;
  padding-left: 4px;
  position: relative;
  margin-left: -294px;
    top: 13px;
    height: 27px;
    width: 180px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
}
 
#generated_form input[disabled] {
  background-color:#ddd;
  cursor:pointer;
}
 
#generated_form select {
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  cursor: default;
  vertical-align: middle;
  width:auto;
  max-width:100%;/* Bug IE */
  padding: 1px;
}
 
#generated_form textarea {
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  width: 300px;
  height: 100px;
  padding: 2px;
  padding-left: 4px;
  cursor: text;
  margin-left: -294px;
  position: relative;
    top: 15px;
    height: 80px;
    width: 500px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
  width: 600px;
  cursor: text;
  margin-left: -296px;
  position: relative;
  top: 15px;
  border-radius: 9px;
  height: 32px;
  border:1px solid #e3e3e3;
}
</style>
         
 
 
 <form onsubmit="submit_form();" action="/post" id="generated_form" method="post" enctype="multipart/form-data">
 
 <input type="hidden" name="form_mode" value="1">
 
<h1 data-type="field">Relatório de Aulas</h1>
 
<p data-type="field">Preencha os campos abaixo com o que for pedido. Os campos marcados como "Opcional", não precisam ser preenchidos obrigatoriamente.</p>
 
<dl><dt>Nick dos recrutas:</dt>
                            <dd><input type="text" data-type="field" value="" id="field0"></dd>
                        </dl>
 
<dl><dt>Número total de recrutas:</dt>
                            <dd><input type="number" min="0" max="10" data-type="field" value="" step="1" id="field1"></dd>
                        </dl>
 
<dl><dt>Número de recrutas aprovados:</dt>
                            <dd><input type="number" min="0" max="10" data-type="field" value="" step="1" id="field2"></dd>
                        </dl>
 
<dl><dt>Nick do Guia:</dt>
                            <dd><input type="text" data-type="field" value="" id="field3"></dd>
                        </dl>
 
<dl>
                            <dt>Observação (Opcional):</dt>
                            <dd><textarea data-type="field" id="field4"></textarea></dd>
                        </dl>
 
<dl><dt>Atenciosamente,</dt>
                            <dd><input type="text" data-type="field" value="" id="field5"></dd>
                        </dl>
 
 
        <textarea id="message-template-bbcode-1" style="display:none">[h3]Relatório de Aulas [/h3]
 
[b] Nick dos recrutas: [/b]  {field0}
 
[b] Número total de recrutas:[/b]  {field1}
 
[b] Número de recrutas aprovados:[/b]  {field2}
 
[b] Nick do Guia:[/b]  {field3}
 
[b] Observação (Opcional):[/b]  {field4}
 
 
Atenciosamente,  {field5}
</textarea>
            <input type="hidden" name="attach_sig" value="">
            <input type="hidden" name="mode" value="reply">
            <input type="hidden" name="t" value="51">
            <input type="hidden" name="lt" value="146">
            <input type="hidden" name="notify" value="1">
            <input type="submit" name="post" class="button2" value="Enviar">
       
                <textarea name="message" style="display:none"></textarea>
           
 
</form>

Atenciosamente,
Luig.
REVIEW
REVIEW
Super Membro

Membro desde : 30/12/2014
Mensagens : 1190
Pontos : 2285

http://ceudasart.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por Luiz 29.07.16 2:58

while escreveu:Bom, se sua dúvida se trata sobre a aparência das input ser assim ,e do enviar assim, então deixaria aqui o código e você poe em todas as paginas html ... mais simples e pratico !

ponha isto nas suas paginas html:
Código:
<style>#generated_form input , #generated_form textarea {
    background: #FCFCFC none repeat scroll 0 0;
    border: 1px solid #D4D4D4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    color: #9F9F9F;
    padding: 6px;
    text-shadow: 0 1px 0 #FFF;
}
#generated_form > input.button2 {
color:#000!important;
text-align:center!important;
background:green!important;
text-shadow: none!important;
box-shadow: none!important;
border: none!important;
padding:10px!important;
width:50%!important;
}
</style>

Até mais.

While tem como deixar assim?
Personalizar formulário 10d7c3l


O seu tá assim:
Personalizar formulário Wvxt3l


Além disso tem como dar uma arredondada nas bordas?
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por while 29.07.16 3:08

Olá, claro!

Troque o código que forneci acima por este:

Código:
<style>#generated_form input , #generated_form textarea {
    background: #FCFCFC none repeat scroll 0 0;
    border: 1px solid #D4D4D4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    color: #9F9F9F;
    padding: 6px;
    text-shadow: 0 1px 0 #FFF;
  margin-left:35%;
 border-radius:5px;
}
#generated_form > input.button2 {
color:#000!important;
text-align:center!important;
background:green!important;
text-shadow: none!important;
box-shadow: none!important;
border: none!important;
padding:10px!important;
width:23%!important;
margin-left:54%;
}
</style>

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por Luiz 29.07.16 13:28

Ficou assim:
Personalizar formulário 2viqm3n
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por while 29.07.16 14:19

Estranho... por acaso você trocou pelo formulário do luig?
Peço que deixe o seu! foi nele que fiz o teste e funcionou numa beleza, veja o resultado que devia ter dado: http://prntscr.com/bz29kl

Enfim, troque esse fórmula rio que me passaste por este:

Código:
<br />            <script src="http://jscolor.com/jscolor/jscolor.js" type="text/javascript"></script>              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>            <script src="http://ajuda.forumeiros.com/29110.js"></script>                <script src="http://ajuda.forumeiros.com/28074.js"></script>                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
  margin-bottom: 10px;
  font-size: 1.1em;
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
  width: 30%;
  padding-top: 5px;
  border: none;
  float: left;
}
 
#generated_form dd {
  padding: 5px;
  padding-right: 5px;
  margin-left: 30%;
  vertical-align: middle;
}
#generated_form dl:hover dt {
  color: #666;
}
 
#generated_form input {
  font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333333;
  padding: 2px;
  vertical-align: middle;
  padding-left: 4px;
}
 
#generated_form input[disabled] {
  background-color:#ddd;
  cursor:pointer;
}
 
#generated_form select {
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  cursor: default;
  vertical-align: middle;
  width:auto;
  max-width:100%;/* Bug IE */
  padding: 1px;
}
 
#generated_form textarea {
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  width: 300px;
  height: 100px;
  padding: 2px;
  padding-left: 4px;
  cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
  width: 300px;
  cursor: text;
}
</style>               
<form enctype="multipart/form-data" method="post" id="generated_form" action="/post" onsubmit="submit_form();">
       <input value="1" name="form_mode" type="hidden" /> 
   <h1 data-type="field">
      Relatorio de Aulas
   </h1>
    
   <p data-type="field">
      Preencha os campos abaixo com o que for pedido. Os campos marcados como "Opcional", nao precisam ser preenchidos obrigatoriamente.
   </p>
     <dl><dt>Nick dos recrutas:</dt>                            <dd><input id="field0" value="" data-type="field" type="text" /></dd>                        </dl>  <dl><dt>Numero total de recrutas:</dt>                            <dd><input id="field1" step="1" value="" data-type="field" max="10" min="0" type="number" /></dd>                        </dl>  <dl><dt>Numero de recrutas aprovados:</dt>                            <dd><input id="field2" step="1" value="" data-type="field" max="10" min="0" type="number" /></dd>                        </dl>  <dl><dt>Nick do Guia:</dt>                            <dd><input id="field3" value="" data-type="field" type="text" /></dd>                        </dl>  <dl>                            <dt>Observacao (Opcional):</dt>                            <dd><textarea id="field4" data-type="field"></textarea></dd>                        </dl>  <dl><dt>Atenciosamente,</dt>                            <dd><input id="field5" value="" data-type="field" type="text" /></dd>                        </dl>            <textarea style="display:none" id="message-template-bbcode-1">[h3]Relatório de Aulas [/h3]
 
[b] Nick dos recrutas: [/b]  {field0}
 
[b] Número total de recrutas:[/b]  {field1}
 
[b] Número de recrutas aprovados:[/b]  {field2}
 
[b] Nick do Guia:[/b]  {field3}
 
[b] Observação (Opcional):[/b]  {field4}
 
 
Atenciosamente,  {field5}
</textarea>            <input value="" name="attach_sig" type="hidden" />            <input value="reply" name="mode" type="hidden" />            <input value="51" name="t" type="hidden" />            <input value="146" name="lt" type="hidden" />            <input value="1" name="notify" type="hidden" />            <input value="Enviar" class="button2" name="post" type="submit" />                          <textarea style="display:none" name="message"></textarea>             
</form><style>#generated_form input , #generated_form textarea {
    background: #FCFCFC none repeat scroll 0 0;
    border: 1px solid #D4D4D4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    color: #9F9F9F;
    padding: 6px;
    text-shadow: 0 1px 0 #FFF;
  margin-left:35%;
 border-radius:5px;
}
#generated_form > input.button2 {
color:#000!important;
text-align:center!important;
background:green!important;
text-shadow: none!important;
box-shadow: none!important;
border: none!important;
padding:10px!important;
width:23%!important;
margin-left:54%;
}
</style>

Lembrando que caso queira nesse mesmo estilo, você pode colocar esse código no fim de seus formulários :
Código:
<style>#generated_form input , #generated_form textarea {
    background: #FCFCFC none repeat scroll 0 0;
    border: 1px solid #D4D4D4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    color: #9F9F9F;
    padding: 6px;
    text-shadow: 0 1px 0 #FFF;
  margin-left:35%;
 border-radius:5px;
}
#generated_form > input.button2 {
color:#000!important;
text-align:center!important;
background:green!important;
text-shadow: none!important;
box-shadow: none!important;
border: none!important;
padding:10px!important;
width:23%!important;
margin-left:54%;
}
</style>

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por Luiz 29.07.16 14:30

O <style> deve ser colocado no lugar do antigo ou deixar o antigo lá e colocar o novo em baixo? (no fim)
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por while 29.07.16 14:33

Bom autor, deixei assim para ficar mais fácil ao senhor, não faz muita importância se ter no inicio e no fim... mas se quiser deixar organizado, você pode tirar o <style> e </style> no código que forneci, e procurar no seu formulário por <style> e deixar o código entre eles.

Deu o resultado esperado?
Sua dúvida foi sanada?

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por Luiz 29.07.16 14:37

Um dos formulários ficou bugado, codigo:

Código:
<br />               <script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script src="http://ajuda.forumeiros.com/29110.js"></script>
                <script src="http://ajuda.forumeiros.com/28074.js"></script>
                <style>
                  /*--- NOVO ESTILO DE FORMULARIO ---*/
                  #generated_form input , #generated_form textarea {
    background: #FCFCFC none repeat scroll 0 0;
    border: 1px solid #D4D4D4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    color: #9F9F9F;
    padding: 6px;
    text-shadow: 0 1px 0 #FFF;
  margin-left:35%;
 border-radius:5px;
}
#generated_form > input.button2 {
color:#000!important;
text-align:center!important;
background:green!important;
text-shadow: none!important;
box-shadow: none!important;
border: none!important;
padding:10px!important;
width:23%!important;
margin-left:54%;
}
                  /*--- FIM NOVO ESTILO DE FORMULARIO---*/
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>
          


 <form onsubmit="submit_form();" action="/post" id="generated_form" method="post" enctype="multipart/form-data">

 <input type="hidden" name="form_mode" value="1">

<h1 data-type="field">Relatório de aplicação de punições</h1>

<p data-type="field"><span style="color: rgb(46, 49, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 14.3px; background-color: rgb(242, 242, 242);">Preencha os campos abaixo com o que for pedido. Os campos marcados como "Opcional", não precisam ser preenchidos obrigatoriamente.</span></p>

<dl><dt>Nick do funcionário:</dt>
                            <dd><input type="text" data-type="field" value="" id="field2"></dd>
                        </dl>

<dl><dt>Cargo:</dt>
                            <dd><input type="text" data-type="field" value="" id="field3"></dd>
                        </dl>

<dl>
                            <dt>Tipo de punição:</dt>
                            <dd><select data-type="field" id="field4"><option value="Verbal">Verbal</option><option value="Continência">Continência</option></select></dd>
                        </dl>

<dl><dt>Tempo (Continência):</dt>
                            <dd><input type="number" min="0" max="10" data-type="field" value="" step="1" id="field5"></dd>
                        </dl>

<dl>
                            <dt>Motivo:</dt>
                            <dd><textarea data-type="field" id="field6"></textarea></dd>
                        </dl>

<dl><dt>Atenciosamente,</dt>
                            <dd><input type="text" data-type="field" value="" id="field7"></dd>
                        </dl>


         <textarea id="message-template-bbcode-1" style="display:none">[h3]Relatório de aplicação de punições[/h3]

[b]Nick do funcionário:[/b]   {field2}

[b]Cargo:[/b]{field3}

[b]Tipo de punição:[/b]   {field4}

[b]Tempo (Continência):[/b]   {field5}

[b]Motivo:[/b]   {field6}

Atenciosamente,   {field7}</textarea>
            <input type="hidden" name="attach_sig" value="">
            <input type="hidden" name="mode" value="reply">
            <input type="hidden" name="t" value="32">
            <input type="hidden" name="lt" value="146">
            <input type="hidden" name="notify" value="1">
            <input type="submit" name="post" class="button2" value="Enviar">
         
                <textarea name="message" style="display:none"></textarea>
           

</form>

Print: 
Personalizar formulário S4450g
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por while 29.07.16 14:43

Ok, mas esse é o ultimo que lhe ajudo ok?
Sinão vai ficar poluído o fórum, tente fazer sozinho... foi por isto que te passei o código que utilizei, ao invez de ter passado a pagina html.

Nesse formulário você troque o código que passei por este:
Código:
#generated_form input , #generated_form textarea, #generated_form select {
    background: #FCFCFC none repeat scroll 0 0;
    border: 1px solid #D4D4D4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    color: #9F9F9F;
    padding: 6px;
    text-shadow: 0 1px 0 #FFF;
  margin-left:35%;
 border-radius:5px;
}
#generated_form > input.button2 {
color:#000!important;
text-align:center!important;
background:green!important;
text-shadow: none!important;
box-shadow: none!important;
border: none!important;
padding:10px!important;
width:23%!important;
margin-left:54%;
}

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por Luiz 29.07.16 15:00

Obrigado, While, agora deu certo!   Tive uma idéia!

Obrigado Luig também 
pode fechar, muito obrigado a todos que me ajudaram
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar formulário

Mensagem por while 29.07.16 15:25

Personalizar formulário Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos