Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
LiveStream TV Forumeiros - #Forumeiros
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Parceiros Forumeiros
Quem está conectado
122 usuários online :: 10 usuários cadastrados, Nenhum Invisível e 112 Visitantes :: 2 Motores de busca

[MGZ]Jessica, juleic1123, Lincoln, Lineshooter, Luiz~, popoti, Shek Crowley, Sovereign, Uatyla, Vinicius Reis

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Personalizar formulário

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Personalizar formulário

Mensagem por Luiz~ em Qui 28 Jul 2016 - 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:


Gostaria que as bordas ficassem dessa forma.

Luiz~
Usuário avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 423
Pontos Ativos : 899

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por Luiz~ em Sex 29 Jul 2016 - 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~
Usuário avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 423
Pontos Ativos : 899

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por while em Sex 29 Jul 2016 - 2:02

Olá, é proibido mensagens consecutivas.

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

Até mais.

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2820
Pontos Ativos : 4155

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

Resolvido Re: Personalizar formulário

Mensagem por Luiz~ em Sex 29 Jul 2016 - 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~
Usuário avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 423
Pontos Ativos : 899

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por while em Sex 29 Jul 2016 - 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
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2820
Pontos Ativos : 4155

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

Resolvido Re: Personalizar formulário

Mensagem por REVIEW em Sex 29 Jul 2016 - 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
Membro do Fórum

Masculino
Inscrito dia : 30/12/2014
Mensagens : 1173
Pontos Ativos : 2969

http://ceudasart.forumeiros.com/

Resolvido Re: Personalizar formulário

Mensagem por Luiz~ em Sex 29 Jul 2016 - 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?



O seu tá assim:



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

Luiz~
Usuário avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 423
Pontos Ativos : 899

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por while em Sex 29 Jul 2016 - 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
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2820
Pontos Ativos : 4155

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

Resolvido Re: Personalizar formulário

Mensagem por Luiz~ em Sex 29 Jul 2016 - 13:28

Ficou assim:

Luiz~
Usuário avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 423
Pontos Ativos : 899

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por while em Sex 29 Jul 2016 - 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
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2820
Pontos Ativos : 4155

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

Resolvido Re: Personalizar formulário

Mensagem por Luiz~ em Sex 29 Jul 2016 - 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~
Usuário avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 423
Pontos Ativos : 899

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por while em Sex 29 Jul 2016 - 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
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2820
Pontos Ativos : 4155

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

Resolvido Re: Personalizar formulário

Mensagem por Luiz~ em Sex 29 Jul 2016 - 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: 

Luiz~
Usuário avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 423
Pontos Ativos : 899

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por while em Sex 29 Jul 2016 - 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
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2820
Pontos Ativos : 4155

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

Resolvido Re: Personalizar formulário

Mensagem por Luiz~ em Sex 29 Jul 2016 - 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~
Usuário avançado

Masculino
Inscrito dia : 23/04/2016
Mensagens : 423
Pontos Ativos : 899

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por while em Sex 29 Jul 2016 - 15:25

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
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2820
Pontos Ativos : 4155

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

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5