Formulário personalizado

Detalhes da questão

Endereço do fórum: http://ceudasart.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Olá,
gostaria de saber como deixa meu formulário um pouco mais atraente, com um visual básico porém bonito, ele está muito simples e queria coloca algum fundo é personaliza as caixas é campos de textos.

Como está;

Está muito simples, é "feio" gostaria de deixar igual da FdF, não igual para não parecer "plágio" apenas a cor,campos arredondados, uma base.

Exemplo;

Se possível agradeço.

Até.

Olá, poderia me fornecer o código da sua pagina html?
Até mais.

Boa noite,
seria esse;

Código:

<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="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">

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

<dl>
<dt>Tipo de pedido</dt>
<dd><select data-type="field" id="field0"><option value="Escolhe o tipo">Escolhe o tipo</option><option value="Logo">Logo</option><option value="Banner">Banner</option><option value="Assinatura">Assinatura</option><option value="Avatar">Avatar</option><option value="Icones">Icones</option><option value="Botões">Botões</option><option value="Ranks">Ranks</option><option value="Outros">Outros</option></select></dd>
</dl>

<dl><dt>Dimensões</dt>
<dd><input type="text" data-type="field" value="[i]Não especificado[/i]" id="field1"></dd>
</dl>

<dl><dt>Cores primárias</dt>
<dd><input type="color_picker" class="color" data-type="field" value="#FFFFFF" id="field2"></dd>
</dl>

<dl><dt>Cores secundárias</dt>
<dd><input type="color_picker" class="color" data-type="field" value="#FFFFFF" id="field3"></dd>
</dl>

<dl>
<dt>Imagens a ser utilizadas</dt>
<dd><textarea data-type="field" id="field4"></textarea></dd>
</dl>

<dl><dt>Texto a ser inserido</dt>
  <dd><input type="text" data-type="field" value="[i]Não especificado[/i]" id="field7"></dd>
</dl>

<dl><dt>Fonte</dt>
  <dd><input type="text" data-type="field" value="[i]Não especificado[/i]" id="field8"></dd>
</dl>

<dl><dt>Cor da fonte</dt>
<dd><input type="text" data-type="field" value="[i]Não especifiado[/i]" id="field9"></dd>
</dl>

<dl>
<dt>Link do meu fórum</dt>
<dd><textarea data-type="field" id="field10"></textarea></dd>
</dl>

<dl>
<dt>Descrição</dt>
<dd><textarea data-type="field" id="field11"></textarea></dd>
</dl>


<input type="hidden" name="f" value="7">
<input type="hidden" name="subject" value="O script não enviou o título" template="Pedido gráfico">
<input type="hidden" name="description" value="O script não enviou a descrição" template="">
<textarea name="message" style="display:none"></textarea>

<textarea id="message-template-bbcode-0" style="display:none"><h3 class="post_content">Informações básicas</h3><strong>Tipo de pedido</strong>: {field0}
<strong>Dimensões</strong>: {field1}
<strong>Cores primárias</strong>: {field2}
<strong>Cores secundárias</strong>: {field3}
<strong>Imagens a ser utilizadas</strong>: {field4}
<strong>Texto a ser inserido</strong>: {field7}
<strong>Fonte</strong>: {field8}
<strong>Cor da fonte</strong>: {field9}
<strong>Link do meu fórum</strong>: {field10}
<h3 class="post_content">Informações adicionais</h3> 
<strong>Descrição</strong>: {field11}</textarea>
<input type="hidden" name="mode" value="newtopic">
<input type="hidden" name="lt" value="0">
<input type="submit" name="post" class="button2" value="Enviar">


</form>

Até mais.

Altere para esta:

Código:

<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 dt {margin-left:70px;!important;color:#fff;font-size:17px;font-weight:700;}
        #generated_form select, #generated_form input, #generated_form textarea {border-radius:6px;background:#fff;margin-left:-40px;}
        button.button2, input.button2 {margin-left:53%!important;margin-bottom:10px;background:blue!important;border-color:blue;
        color:#fff!important;padding:10px!important;font-size:17px;width:100px!important;font-weight:700;}
 .formposttext {border-bottom:3px solid #FFF;color:#fff;font-weight:700!important;font-size:28px!important;width:58%!important;padding:19px;margin-bottom:20px;}
#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 {background:blue!important;}
#generated_form input[type=text], #generated_form input[type=fields_list] {
width: 300px;
cursor: text;
}
</style>
 
 
 
<form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">
 
<input type="hidden" name="form_mode" value="0">
 <h3 class="formposttext">FORMULÁRIO DE PEDIDO</h3>
<dl>
<dt>Tipo de pedido</dt>
<dd><select data-type="field" id="field0"><option value="Escolhe o tipo">Escolhe o tipo</option><option value="Logo">Logo</option><option value="Banner">Banner</option><option value="Assinatura">Assinatura</option><option value="Avatar">Avatar</option><option value="Icones">Icones</option><option value="Botões">Botões</option><option value="Ranks">Ranks</option><option value="Outros">Outros</option></select></dd>
</dl>
 
<dl><dt>Dimensões</dt>
<dd><input type="text" data-type="field" value="[i]Não especificado[/i]" id="field1"></dd>
</dl>
 
<dl><dt>Cores primárias</dt>
<dd><input type="color_picker" class="color" data-type="field" value="#FFFFFF" id="field2"></dd>
</dl>
 
<dl><dt>Cores secundárias</dt>
<dd><input type="color_picker" class="color" data-type="field" value="#FFFFFF" id="field3"></dd>
</dl>
 
<dl>
<dt>Imagens a ser utilizadas</dt>
<dd><textarea data-type="field" id="field4"></textarea></dd>
</dl>
 
<dl><dt>Texto a ser inserido</dt>
  <dd><input type="text" data-type="field" value="[i]Não especificado[/i]" id="field7"></dd>
</dl>
 
<dl><dt>Fonte</dt>
  <dd><input type="text" data-type="field" value="[i]Não especificado[/i]" id="field8"></dd>
</dl>
 
<dl><dt>Cor da fonte</dt>
<dd><input type="text" data-type="field" value="[i]Não especifiado[/i]" id="field9"></dd>
</dl>
 
<dl>
<dt>Link do meu fórum</dt>
<dd><textarea data-type="field" id="field10"></textarea></dd>
</dl>
 
<dl>
<dt>Descrição</dt>
<dd><textarea data-type="field" id="field11"></textarea></dd>
</dl>
 
 
<input type="hidden" name="f" value="7">
<input type="hidden" name="subject" value="O script não enviou o título" template="Pedido gráfico">
<input type="hidden" name="description" value="O script não enviou a descrição" template="">
<textarea name="message" style="display:none"></textarea>
 
<textarea id="message-template-bbcode-0" style="display:none"><h3 class="post_content">Informações básicas</h3><strong>Tipo de pedido</strong>: {field0}
<strong>Dimensões</strong>: {field1}
<strong>Cores primárias</strong>: {field2}
<strong>Cores secundárias</strong>: {field3}
<strong>Imagens a ser utilizadas</strong>: {field4}
<strong>Texto a ser inserido</strong>: {field7}
<strong>Fonte</strong>: {field8}
<strong>Cor da fonte</strong>: {field9}
<strong>Link do meu fórum</strong>: {field10}
<h3 class="post_content">Informações adicionais</h3> 
<strong>Descrição</strong>: {field11}</textarea>
<input type="hidden" name="mode" value="newtopic">
<input type="hidden" name="lt" value="0">
<input type="submit" name="post" class="button2" value="Enviar">
 
 
</form>

Procure por blue nesse código html e altere pela cor desejada

Até mais.

Olá,
fico muito estranho, é possível deixa-lo assim?


Até mais.

UP!

Up!

Up!

Olá!

Isso não é muito complicado, basta usar o seu Inspecionar Elemento para visualizar quais são as classes do seu fórum e atribuir o formulário dentro dos seletores que ele usa. Exemplo:

Código:

<div class='panel row3'>
   <div class='inner'></div>
      <span class='corners-top'><span></span></span>
         <div id='cp-main'>
            CONTENT_HERE
         </div>
      <div class='clear'></div>
   <span class='corners-bottom'></span>
</div>

No lugar do "CONTENT_HERE" é só colocar o HTML do seu formulário!

É só olhar como é feito a estrutura do HTML e copiá-lo.

Até mais.

Fico ótimo shek, já consegui fazer outras alterações além dessa com sua dica, enfim poderia mim tirar uma dúvida? No meu formulário quando cria algum tópico ele vem com um titulo padrão já assim "Pedido gráfico" como faço para coloca, para quando o "usuário" for criar o tópico ele coloca o seu próprio título juto com as informações?

Passar bem.

Vejamos...

Tenta remover o código:

Código:

<input type="hidden" name="subject" value="O script não enviou o título" template="Pedido gráfico">

E depois cola abaixo do

Código:

 <h3 class="formposttext">FORMULÁRIO DE PEDIDO</h3>

O seguinte código:

Código:

<input type="text" name="subject" value="">

Olá shek,
se não se incomodar, poderia editar para mim? Fiz algumas modificações recentes e não estou conseguindo localizar;
código:

Código:

<div class='panel row3'>
  <div class='inner'></div>
      <span class='corners-top'><span></span></span>
        <div id='cp-main'>
            <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: #FFF;
}
 
#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;
    border: 1px solid #fff;
    border-radius: 5px;
}
 
#generated_form input[disabled] {
background-color:#ddd;
cursor:pointer;
}
 
#generated_form select {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    cursor: default;
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    / Bug IE / padding: 1px;
    border-radius: 3px;
    border: 1px solid #fff;
}
 
#generated_form textarea {
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    width: 500px;
    height: 50px;
    padding: 2px;
    padding-left: 20px;
    cursor: text;
    border: 1px solid #FFF;
    border-radius: 8px;
}
input.button2 {
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #222;
    border: 1px solid #222;
    border-radius: 3px;
    padding: 15px 50px;
    margin: 3px 10px;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}
input.button2 {
    background: url(http://i38.servimg.com/u/f38/18/21/41/30/right10.png) no-repeat 100% 50% #EB3;
    border-color: #EB3;
   height: 70px;
   padding: 0px 100px !important;
   margin: 3px 650px;
}
 .dataform {
    color: #FFF;
    background: #39C;
    border-radius: 3px;
}
#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="/posting.forum" onsubmit="submit_form();">
     <input value="0" name="form_mode" type="hidden" />  <dl><dt><strong>Tipo de pedido:</strong></dt><dd><select id="field0" data-type="field"><option value="Escolhe o tipo">Escolhe o tipo</option><option value="Logo">Logo</option><option value="Banner">Banner</option><option value="Assinatura">Assinatura</option><option value="Avatar">Avatar</option><option value="Icones">Icones</option><option value="Botões">Botões</option><option value="Ranks">Ranks</option><option value="Outros">Outros</option></select></dd></dl>  <dl><dt><strong>Dimensões:</strong></dt><dd><input id="field1" value="[i]Não especificado[/i]" data-type="field" type="text" /></dd></dl>  <dl><dt><strong>Cores primárias:</strong></dt><dd><input id="field2" value="#FFFFFF" data-type="field" class="color" type="color_picker" /></dd></dl>  <dl><dt><strong>Cores secundárias:</strong></dt><dd><input id="field3" value="#FFFFFF" data-type="field" class="color" type="color_picker" /></dd></dl>  <dl><dt><strong>Imagens a ser utilizadas:</strong></dt><dd><textarea id="field4" data-type="field"></textarea></dd></dl>  <dl><dt><strong>Texto a ser inserido:</strong></dt>  <dd><input id="field7" value="[i]Não especificado[/i]" data-type="field" type="text" /></dd></dl>  <dl><dt><strong>Fonte:</strong></dt>  <dd><input id="field8" value="[i]Não especificado[/i]" data-type="field" type="text" /></dd></dl>  <dl><dt><strong>Cor da fonte</strong></dt><dd><input id="field9" value="[i]Não especifiado[/i]" data-type="field" type="text" /></dd></dl>  <dl><dt><strong>Link do meu fórum:</strong></dt><dd><textarea id="field10" data-type="field"></textarea></dd></dl>  <dl><dt><strong>Descrição:</strong></dt><dd><textarea id="field11" data-type="field"></textarea></dd></dl>    <input value="7" name="f" type="hidden" /><input template="Pedido gráfico" value="O script não enviou o título" name="subject" type="hidden" /><input template="" value="O script não enviou a descrição" name="description" type="hidden" /><textarea style="display:none" name="message"></textarea>  <textarea style="display:none" id="message-template-bbcode-0"><h3 class="post_content">Informações básicas</h3><strong>Tipo de pedido</strong>: {field0}
<strong>Dimensões</strong>: {field1}
<strong>Cores primárias</strong>: {field2}
<strong>Cores secundárias</strong>: {field3}
<strong>Imagens a ser utilizadas</strong>: {field4}
<strong>Texto a ser inserido</strong>: {field7}
<strong>Fonte</strong>: {field8}
<strong>Cor da fonte</strong>: {field9}
<strong>Link do meu fórum</strong>: {field10}
<h3 class="post_content">Informações adicionais</h3> 
<strong>Descrição</strong>: {field11}</textarea><input value="newtopic" name="mode" type="hidden" /><input value="0" name="lt" type="hidden" /><input value="Enviar" class="button2" name="post" type="submit" />   
</form>
        </div>
      <div class='clear'></div>
  <span class='corners-bottom'></span>
</div>

Até.

Você vai localizá-lo com o nome:

Código:

<input template="Pedido gráfico" value="O script não enviou o título" name="subject" type="hidden" />

Queremos ensiná-lo como fazer, para que você possa aprender, pois, só aprendemos na prática. Se tiver dúvidas, não hesite em perguntar.

Boa tarde,
veja como fico, ele fico no finalzinho, gostaria de deixa-lo em cima com um nome atrás assim

"Título do tópico:" e o campo de texto do <h3> </h3> lá no topo em cima do "tipo de pedido"

Até.

Up!

Up =/.

É só pesquisar o nome "Cores secundárias" no seu formulário... Provavelmente, depois do </dl>, você pode adicionar este código:

Código:

<dl><dt>TEXT</dt>
  <dd>INPUT_TEXT_HERE</dd>
</dl>

No lugar do TEXT, coloque o que deseja, para nomear o campo. Já para o INPUT_TEXT_HERE é o input text do título que te passei acima. É só copiar o HTML dos campos do seu próprio formulário.

Olá,
obrigado shek, conseguimos.

Até mais.