Personalizar formulário

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:


Gostaria que as bordas ficassem dessa forma.

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

Olá, é proibido mensagens consecutivas.

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

Até mais.

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!

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.

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.

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?



O seu tá assim:



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

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.

Ficou assim:

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.

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

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.

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: 

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.

Obrigado, While, agora deu certo!  

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