Ajustar aspeto de formulários

Detalhes da questão

Endereço do fórum: http://suportedesign.forumeiros.com/
Versão do fórum: PunBB

Descrição

Olá!

Já tinha aberto uma dúvida com o mesmo problema: https://ajuda.forumeiros.com/t106304-falha-no-aspeto-em-formulario

E queria o mesmo mas para estes formulários:

Código:

<script src="http://forum-script.googlecode.com/files/VarGET.js"></script><script>
    html_tpl = "<b>Nome do fórum:</b> $1 <br><br><b>Endereço do fórum:</b> $2<br><br><b>Data de criação do fórum:</b> $3 <br><br><b>O fórum já foi avaliado anteriormente? Se já, quando?</b> $4 <br><br><b>Comentários adicionais:</b> $5<br><br>";
    bbcode_tpl = "[b]Nome do fórum:[/b] $1 \n\n[b]Endereço do fórum:[/b] $2 \n\n[b]Data de criação do fórum:[/b] $3\n\n[b]O fórum já foi avaliado anteriormente? Se já, quando?[/b] $4\n\n[b]Comentários adicionais:[/b] $5";
    $(document).ready(function(){
      $('#bt-apagar').click(function() {
          $('#form-submit input[type="text"],#form-submit textarea').val('');
          $('input[name="f"]').val($(this).val());
      });
      $('#bt-pr-questao').click(function() {
          tpl = html_tpl;
          tpl = tpl.replace("$1", $('#tituloforum').val());
          tpl = tpl.replace("$2", $('#endereco').val());
          tpl = tpl.replace("$3", $('#idade').val());
          tpl = tpl.replace("$4", $('#avaliacao').val());
          tpl = tpl.replace("$5", $('#comentario').val());
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideDown(300);
          $('#html-questao').html(tpl);
      });
      $('#bt-enviar').click(function() {
          tpl = bbcode_tpl;
          if($('#tituloforum').val()!=='' && $('#endereco').val()!=='' && $('#avaliacao').val()!=='' && $('#idade').val()!=='' && $('#comentario').val()!==''){
            tpl = tpl.replace("$1", $('#tituloforum').val());
            tpl = tpl.replace("$2", $('#endereco').val());
            tpl = tpl.replace("$3", $('#idade').val());
            tpl = tpl.replace("$4", $('#avaliacao').val());
            tpl = tpl.replace("$5", $('#comentario').val());
            $('input[name="message"]').val(tpl);
            $('input[name="subject"]').val($('#tituloforum').val());
            $('#bt-enviar-e').click();
            $('#form-submit').slideUp(300);
            $('#enviado').slideDown(800);
          }else{
            $('#erro').slideUp(1);
            $('#erro').slideDown(800);
          }
      });
      $('#bt-pr-fechar').click(function() {
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideUp(300);
          return false;
      });
      $('#tituloforum').click(function() {
          if($('#tituloforum').val()=='Coloque aqui um título descritivo sobre a sua questão'){
            $('#tituloforum').val('');
          }
      });
      jQuery('#tituloforum').keyup(function(){
          var t=document.getElementById('tituloforum').value.length;
          var i=document.getElementById('identifytitle');
          if(t<10&&t>0){
            var l=t-10;i.innerHTML='O nome do fórum necessita mais '+l*-1+' caracteres'
          }
          else{
            i.innerHTML=''
          }
      });
      var e='#endereco';
      var v='#validardominio'
      jQuery(e).after(' <div id=validardominio style=display:inline></div>')
      jQuery(e).keyup(function(){
          var u=jQuery(e).val();
          m=/^(https?:\/\/)?(www\.)?([a-zA-Z0-9_\-]+)+\.([a-zA-Z]{2,4})(?:\.([a-zA-Z]{2,4}))?\/?(.*)$/;
          if(u.match(m)){jQuery(v).html('')}else{jQuery(v).html('Esse domínio não é válido')};
      });
      if(VarGET('f')!==''){
          $('#form-part2, #bts').slideDown(800);
          $('input[name="f"]').val(VarGET('f'));
          $('#bt-selecciona-forum').val(VarGET('f'));
      }
    });
 
 
    </script>
     
<form action="/post" method="post" id="form-submit">
    <div id="erro" style="display:none;" class="panel">
                <div class="inner">
                        <span class="corners-top"></span>
                        <center><span class="conteudo_texto" style="color:#C00"><b>Você deve preencher todos os campos</b></span></center>
                        <span class="corners-bottom"></span>
                </div>
        </div>
<br>
    <div style="display:none;" id="pr-questao" class="post row2">
                <div class="inner">
                        <span class="corners-top"></span>
                                <div class="postbody">
                                        <div class="h3">Pré-visualizar [<a id="bt-pr-fechar" href="#">Fechar o modo de pré-visualização</a>]</div>
                                        <div id="html-questao" class="content"></div>
                                </div>
                        <span class="corners-bottom"></span>
                </div>
        </div>
<hr style="display:none;" id="pr-questao">
<br>
        <div class="panel">
                <div class="inner">
                        <span class="corners-top"></span> 
                                <div class="h3" style="margin-top: 7px;">Sobre o formulário</div>
                                  <p>O presente formulário foi criado com o objetivo de promover uma maior organização dos pedidos feitos na seção de análises. Assim que tudo estiver feito, poderá enviar o pedido, que será postado automaticamente. Se necessitar de alguma modificação, poderá fazer editando a sua mensagem.</p>
                </div>
                        <span class="corners-bottom"></span>
        </div>
<br>
    <div class="panel" id="form-part2">
                <div class="inner">
                        <span class="corners-top"></span>
                                <div class="h3" style="margin-top: 7px;">Formulário de análise</div> 
                                <br> 
                                        <fieldset class="fields1">
                                        <dl><dt><label>Nome do fórum:</label></dt>
                                                <dd><input type="text" id="tituloforum" class="inputbox" style="clear: both; width: 510px;">
                                                <div id=identifytitle style=display:inline></div>
                                                </dd></dl>
                                        <dl><dt><label>Endereço do fórum:</label></dt>
                                                <dd><input type="text" id="endereco" class="inputbox" style="clear: both; width: 510px;">
                                                </dd></dl>
                                        <dl><dt><label>Foi avaliado anteriormente? Se sim, quando?</label></dt>
                                                <dd><input type="text" id="avaliacao" class="inputbox" style="clear: both; width:510px;line-height: 18px;">
                                                </dd></dl>
                                        <dl><dt><label>Comentários adicionais:</label></dt>
                                                <dd><textarea id="comentario" class="inputbox" tabindex="14" style="clear: both; height: 100px; width:510px;"></textarea>
                                                </dd></dl> 
                                        </fieldset>
                        <input type="hidden" name="subject">
                        <input type="hidden" name="message">
                        <input type="hidden" name="mode" value="newtopic">
                        <input type="hidden" name="f" value="50">
                        <input type="hidden" name="lt" value="0">   
                        <span class="corners-bottom"></span>
                </div>
        </div>
<br>
    <div id="bts" style="" class="panel">
                <div class="inner">
                        <span class="corners-top"></span>
                        <fieldset class="submit-buttons">
                                <input id="bt-pr-questao" value="Pré-visualizar" type="button" class="button1">
                                <input id="bt-enviar" value="Enviar questão" type="button" class="button1" name="post">
                                <input id="bt-apagar" value="Apagar tudo" type="button" class="button1">
                                <input id="bt-enviar-e" value="Enviar Questão" type="submit" class="button1" style="display:none;" name="post">
                        </fieldset>
                        <span class="corners-bottom"></span>
                </div>
        </div>
</form>

- http://suportedesign.forumeiros.com/f50-analises-de-foruns

Código:

<style>
.previsu {
 background: url('http://i.imgur.com/PrP18sN.png');
 border: 1px solid #1675BC;
 display: none;
 position: absolute;
 top: 350px;
 margin: auto;
 margin-left: 150px !important;
}
 .previsuimg {
 position: relative;
 }
 .previsuimg div {
 position: absolute; top: 30px; left: -10px; border: 3px double #E0E0E0; background: rgba(250, 250, 250, 0.9);
 }
 
 
 
 
 
 
 
 
#addimage .part { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -235px -600px; width: 60px; height: 20px;}
#addimage .more { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
.image .part { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -235px -548px; width: 60px; height: 20px;}
.image .remove { float: left;background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
.image .previsualise { float: left;background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -50px -436px; margin-left: 5px; padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
 
 
 
 
 .image { width: 300px; }
 
 
 
 
</style>
 
 
 
 
<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
<script>
 
 
 
 
 
 
 
 
function gerartitulo() {
 var tipo = document.getElementById("tipo").value;
 
 
 
 
switch(tipo) {
 case '[Avatar] ':
 tipob = 'Avatar';
 jQuery('input[name="f"]').val('26');
 break;
 case '[Assinatura] ':
 tipob = 'Assinatura';
  jQuery('input[name="f"]').val('26');
 break;
 case '[Userbar] ':
 tipob = 'Userbar';
  jQuery('input[name="f"]').val('26');
 break;
 case '[Banner] ':
 tipob = 'Banner';
  jQuery('input[name="f"]').val('26');
 break;
 case '[Logo] ':
 tipob = 'Logo';
  jQuery('input[name="f"]').val('26');
 break;
 
 
 
 
case '[Menu] ':
case '[Botões] ':
case '[Ícones] ':
case '[Ranks] ':
jQuery('input[name="f"]').val('26');
 break;
 
 
 
 
case '[Outros] ':
case '[Imagem] ':
jQuery('input[name="f"]').val('26');
 break;
 }
 
 
 
 
 var cor = document.getElementById("cor").value;
 var tamanho = document.getElementById("tamanho").value;
 var texto = document.getElementById("texto").value;
 var textotonalidade = document.getElementById("textotonalidade").value;
 var cortonalidade = document.getElementById("cortonalidade").value;
 
 
 
 
jQuery("input[name=subject]").attr('value', tipo+cor+cortonalidade+tamanho+texto+textotonalidade);
 jQuery("#titlecode").html(tipo+cor+cortonalidade+tamanho+texto+textotonalidade);
 
 
 
 
if(tipo == "[Avatar] " || tipo == "[Assinatura] " || tipo == "[Userbar] " || tipo == "[Banner] " || tipo == "[Logo] ") {
 jQuery('#size_extra optgroup').css('display','block');
 jQuery('#size_extra optgroup[label!=' + tipob + ']').css('display','none');
 jQuery('#size_extra_span').css('display','block');
 }
 else {
 jQuery('#size_extra_span').css('display','none');
 }
}
imagensdopedido = '';
 
 
 
 
function gerarpedido() {
 gerartitulo();
 var cordofundo = document.getElementById("fundo").value;
 var cordafonte = document.getElementById("fontecor").value;
 var nomedafonte = (document.getElementById("fonte").value == '') ? document.getElementById("fonteNome").value : document.getElementById("fonte").value;
 var tipodeanimacao = (document.getElementById("animacao").value == '') ? document.getElementById("animacaoNome").value : document.getElementById("animacao").value;
 var tipodemoldura = (document.getElementById("moldura").value == '') ? document.getElementById("molduraNome").value : document.getElementById("moldura").value;
 var descricaodopedido = document.getElementById("adicionais").innerHTML;
 var descricaodopedido = document.getElementById("adicionais").value;
 var dimensaoA = document.getElementById("dimensoesA").value;
 var dimensaoL = document.getElementById("dimensoesL").value;
 
 
 
 
var dimensaof = (document.getElementById("size_extra").value == '') ? dimensaoL + ' x ' + dimensaoA + ' px' : document.getElementById("size_extra").value;
 
 
 
 
var urlforum = document.getElementById("urlforum").value;
 
 
 
 
finalmessage = '[b]Endereço do fórum :[/b] [url]'+ urlforum + '[/url]\n[b]Imagens a serem usadas :[/b] ' + imagensdopedido + '\n [b]Dimensões :[/b] ' + dimensaof +' \n[b]Cor do fundo :[/b] #' + cordofundo + '\n[b]Cor da fonte :[/b] #' + cordafonte + '\n[b]Fonte :[/b] ' + nomedafonte + '\n[b]Animação :[/b] ' + tipodeanimacao + '\n[b]Moldura :[/b] ' + tipodemoldura + '\n[b]Descrição do trabalho :[/b] ' + descricaodopedido;
 
 
 
 
 
 
 
 
jQuery("input[name=message]").attr('value', finalmessage);
}
 
 
 
 
function outra(id) {
 var inputID = id+"Nome";
 (document.getElementById(id).value == '') ? document.getElementById(inputID).style.display = 'inline' : document.getElementById(inputID).style.display = 'none';
 document.getElementById(inputID).focus();
}
 
 
 
 
 function removeimg(obj) {
 obj.parent().parent().remove();
 update_img();
 }
 function addimg() {
 $('#addimage').before('<tr class=image><td class=part></td><td><input style="float:left; display: inline; background-color: #ffffff;border: 1px solid #BCBCBC;color: #666666;padding: 2px;cursor: text;" type=text name=images id="Imagens_AddMore" onchange="update_img_list()" /> <div class="previsualise"></div> <div class="remove" onClick="removeimg($(this))"></div><div class="previsuimg"><div></div></div></td></tr>');
 $('#addimage').prev().find('.previsualise').hover(
 function () {
 $(this).parent().find('.previsuimg').html('<div><img src="'+encodeURI($(this).parent().find('input').attr('value'))+'" /></div>').find('div').css('display','block');
 },
 function () {
 $(this).parent().find('.previsuimg div').css('display','none');
 }
 );
 update_img();
 }
 function update_img() {
 if($('.image').length<2) $('.image .remove').hide();
 else $('.image .remove').show();
 update_img_list();
 }
 
 
 
 
function update_img_list() {
 imagensdopedido = '';
 jQuery('input[name=images]').each( function(index) {
if($(this).val() != '') {
 imagensdopedido = imagensdopedido + $(this).val() + ' ; ';
}
 });
 gerarpedido();
 }
 
 
 
 
gerartitulo();
gerarpedido();
 
 
 
 
</script>
 <div class="panel row2"><div class="inner"><span class="corners-top"><span></span></span>
 <div class="h3" style="margin-top: 7px;">Sobre o formulário</div>
 <p style="font-size: 12px;">O presente formulário foi criado com o objetivo de promover uma maior organização dos pedidos feitos na seção gráfica deste fórum. Em cada uma das divisões abaixo poderá encontrar uma parte do código, a primeira caixa - "Informações gerais" - vale para o título e a segunda para o corpo da mensagem. Assim que tudo estiver feito, poderá enviar o pedido, que será postado automaticamente. Se necessitar de alguma modificação, poderá fazer editando a sua mensagem.
 
 
 
</p><span class="corners-bottom"><span></span></span>
 </div>
 </div>
 
 
 
 
 <div class="clear" style="height: 6px;"></div><div class="panel"><div class="inner"><span class="corners-top"><span></span></span><div class="h3" style="margin-top: 7px;">Informações gerais</div>
 
 
 
 
<form action="/posting.forum" method="post" id="fa_form" name="Pedidos" onSubmit="return ValidarFormulario();" >
 <fieldset class="fields1">
 
 
 
 
<dl><dt>
 <label>Tipo de pedido:</label></dt><dd><select id="tipo" tabindex="1" onChange="gerartitulo();" name="tipoPedido" />
 <option value=""></option>
 <option value="[Avatar] ">Avatar</option>
 
 
 
 
 
 
 
 
<option value="[Assinatura] ">Assinatura</option>
 <option value="[Userbar] ">Userbar</option>
 <option value="[Banner] ">Banner</option>
 <option value="[Logo] ">Logo</option>
 <option value="[Botões] ">Botões</option>
 <option value="[Ícones] ">Ícones</option>
 
 
 
 
 <option value="[Ranks] ">Ranks</option>
 <option value="[Outros] ">Outros</option>
 </select></dd></dl>
 
 
 
 
<dl><dt>
 <label>Cor geral:</label></dt><dd><select id="cor" tabindex="2" onChange="gerartitulo();" />
 
 
 
 
 <option value=" "></option>
 
 
 
 
<option value="Vermelho">Vermelho</option>
 <option value="Verde">Verde</option>
 <option value="Amarelo">Amarelo</option>
 <option value="Azul">Azul</option>
 <option value="Roxo">Roxo</option>
 
 
 
 
 <option value="Rosa">Rosa</option>
 
 
 
 
<option value="Laranja">Laranja</option>
 <option value="Branco">Branco</option>
 <option value="Preto">Preto</option>
 <option value="Cinza">Cinza</option>
 <option value="Marrom">Marrom</option>
 
 
 
 
 <option value="Transparente">Transparente</option>
 
 
 
 
<option value="">Nenhuma da lista</option></select> <select id="cortonalidade" onChange="gerartitulo();" />
 <option value=""></option>
 <option value="">Normal</option>
 <option value=" claro">Claro</option>
 <option value=" escuro">Escuro</option></select></dd></dl>
 
 
 
 
 
 
 
 
<dl><dt>
 <label>Tamanho geral:</label></dt><dd><select id="tamanho" tabindex="3" onChange="gerartitulo();" />
 
 
 
 
<option value=" "></option>
 <option value=" - Pequeno ">Pequeno</option>
 <option value=" - Médio ">Médio</option>
 <option value=" - Grande ">Grande</option></select></dd></dl>
 
 
 
 
<dl><dt>
 
 
 
 
 <label>Cor geral do texto:</label></dt><dd><select id="texto" tabindex="4" onChange="gerartitulo();" />
 <option value=" "></option>
 
 
 
 
<option value="- Texto vermelho ">Vermelho</option>
 <option value="- Texto verde ">Verde</option>
 <option value="- Texto amarelo ">Amarelo</option>
 <option value="- Texto azul ">Azul</option>
 
 
 
 
 <option value="- Texto roxo ">Roxo</option>
 <option value="- Texto rosa ">Rosa</option>
 
 
 
 
<option value="- Texto laranja ">Laranja</option>
 <option value="- Texto branco ">Branco</option>
 <option value="- Texto preto ">Preto</option>
 <option value="- Texto cinza ">Cinza</option>
 
 
 
 
 <option value="- Texto marrom ">Marrom</option>
 <option value="">Nenhuma da lista</option></select> <select id="textotonalidade" onChange="gerartitulo();" />
 
 
 
 
<option value=""></option>
 <option value="">Normal</option>
 <option value=" claro">Claro</option>
 <option value=" escuro">Escuro</option></select></dd></dl>
 
 
 
 
 
 
 
 
</fieldset>
 <span class="corners-bottom"><span></span></span></div></div><div class="clear" style="height: 6px;"></div>
 <div class="panel"><div class="inner"><span class="corners-top"><span></span></span>
 <div class="h3" style="margin-top: 7px;">Informações específicas</div>
 
 
 
 
<fieldset class="fields1">
 
 
 
 
<dl><dt>
 <label>Imagens a serem usadas:</label></dt>
 
 
 
 
 <dd>Indique o endereço da imagem a usar. Caso necessite de mais imagens, carregue em +, para que o endereço seja validado. Este irá desaparecer, e poderá então adicionar outro endereço.
 <table>
 <tr id="addimage">
 <td class="part"></td>
 <td>
 <div class="more" onClick="addimg()"></div>
 
 
 
 
</td>
 </tr>
 </table>
 
 
 
 
 
 
 
 
<script type="text/javascript">addimg()</script>
 
 
 
 
</dd></dl>
 <dl><dt>
 <label>Dimensões:</label></dt>
 <dd> <input class="inputbox" type="text" id="dimensoesL" tabindex="6" onChange="gerarpedido();" style="width: 30px; clear: both;" />
 
 
 
 
px (largura) X
 <input class="inputbox" type="text" id="dimensoesA" tabindex="7" onChange="gerarpedido();" style="width: 30px;" /> px (altura) </dd><dd> <span id="size_extra_span" style="display: none;"> Tamanhos padrões do tipo de pedido escolhido : <select id="size_extra">
 
 
 
 
 <option value=""></option>
 <optgroup label="Avatar">
 <option value="120 x 120 px">120 x 120 px</option>
 <option value="100 x 120 px">100 x 120 px</option>
 
 
 
 
<option value="120 x 160 px">120 x 160 px</option>
 <option value="140 x 180 px">140 x 180 px</option>
 <option value="140 x 200 px">140 x 200 px</option>
 
 
 
 
 <option value="150 x 180 px">150 x 180 px</option>
 <option value="150 x 200 px">150 x 200 px</option>
 </optgroup>
 
 
 
 
<optgroup label="Assinatura">
 <option value="400 x 120 px">400 x 120 px</option>
 <option value="400 x 150 px">400 x 150 px</option>
 <option value="450 x 150 px">450 x 150 px</option>
 
 
 
 
 </optgroup>
 <optgroup label="Userbar">
 <option value="350 x 19 px">350 x 19 px</option>
 
 
 
 
</optgroup>
 <optgroup label="Banner">
 <option value="70 x 30 px">70 x 30 px</option>
 <option value="90 x 15 px">90 x 15 px</option>
 
 
 
 
 <option value="120 x 60 px">120 x 60 px</option>
 <option value="150 x 50 px">150 x 50 px</option>
 <option value="468 x 60 px">468 x 60 px</option>
 
 
 
 
</optgroup>
 <optgroup label="Logo">
 <option value="600 x 200 px">600 x 200 px</option>
 <option value="750 x 200 px">750 x 200 px</option>
 
 
 
 
 <option value="800 x 220 px">800 x 220 px</option>
 <option value="150 x 50 px">830 x 200 px</option>
 </optgroup>
 
 
 
 
</select></span>
 </dd></dl>
 
 
 
 

 
 
 
 
 
 
 
 
<dl><dt>
 <label>Cor do fundo:</label></dt>
 
 
 
 
<dd>Código hexadecimal da cor que deverá ser usada :<br>
 <input type="text"  tabindex="9" onChange="gerarpedido();" class="inputbox color champ" value="FFFFFF" id="fundo" name="couleur_fond" maxlength="7" onblur="this.style.borderColor='#FFFFFF'" onfocus="this.style.borderColor='#FFFFFF'" style="width: 70px; background: url('http://i.imgur.com/0ZoqOrz.png') no-repeat right;" />
 </dd></dl>
 
 
 
 
 
 
 
 
<dl><dt>
 <label>Cor da fonte:</label></dt>
 <dd>Código hexadecimal da cor que deverá ser usada :<br>
 <input type="text" tabindex="10" onChange="gerarpedido();" class="inputbox color champ" value="FFFFFF" id="fontecor" name="couleur_fond" maxlength="7" onblur="this.style.borderColor='#FFFFFF'" onfocus="this.style.borderColor='#FFFFFF'" style="width: 70px; background: url('http://i.imgur.com/0ZoqOrz.png') no-repeat right;" />
 </dd></dl>
 
 
 
 
<dl><dt>
 
 
 
 
<label>Fonte:</label></dt><dd><select id="fonte" tabindex="11" onChange="outra('fonte'); gerarpedido();" />
 <option value=" "></option>
 
 
 
 
 <option value="Arial" style="font-family: Arial;">Arial</option>
 <option value="Arial Black" style="font-family: Arial Black;">Arial Black</option>
 <option value="Comic Sans MS" style="font-family: Comic Sans MS;">Comic Sans MS</option>
 <option value="Courier New" style="font-family: Courier New;">Courier New</option>
 
 
 
 
<option value="Georgia" style="font-family: Georgia;">Georgia</option>
 <option value="Times New Roman" style="font-family: Times New Roman;">Times New Roman</option>
 
 
 
 
 <option value="Calibri" style="font-family: Calibri;">Calibri</option>
 <option value="Trebuchet MS" style="font-family: Trebuchet MS;">Trebuchet MS</option>
 <option value="Verdana" style="font-family: Verdana;">Verdana</option>
 <option value="Visitor TTK 2" style="font-family: Visitor TTK 2;">Visitor TTK 2 (usada em Userbars)</option>
 
 
 
 
<option value="">Outra</option>
 </select> <input id="fonteNome" style="display: none; width: 400px;" class="inputbox" value="Qual?" onclick="if (this.value == 'Qual?') this.value = '';" onblur="if (this.value == '') this.value = 'Qual?';" onChange="gerarpedido();" onfocus="if (this.value == 'Qual?') this.value = '';" onblur="if (this.value == '') this.value = 'Qual?';"></dd></dl>
 
 
 
 
 
 
 
 
<dl><dt>
 <label>Animação:</label></dt><dd><select id="animacao" tabindex="12" onChange="outra('animacao'); gerarpedido();" />
 <option value=" "></option>
 <option value="Não">Não</option>
 <option value="">Sim</option>
 
 
 
 
</select> <input id="animacaoNome" style="display: none; width: 400px;" class="inputbox" value="Como?" onclick="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';" onChange="gerarpedido();" onfocus="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';"></dd></dl>
 
 
 
 
<dl><dt>
 
 
 
 
 <label>Moldura:</label></dt><dd><select id="moldura" tabindex="13" onChange="outra('moldura'); gerarpedido();" />
 <option value=" "></option>
 <option value="Não">Não</option>
 <option value="">Sim</option>
 </select> <input id="molduraNome" style="display: none; width: 400px;" class="inputbox" value="Como?" onclick="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';" onChange="gerarpedido();" onfocus="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';" /></dd></dl>
 
 
 
 
<dl><dt>
 <label>Descrição do trabalho:</label></dt>
 
 
 
 
 <dd><textarea class="inputbox" id="adicionais" tabindex="14" onChange="gerarpedido();" style="clear: both; height: 100px; width: 500px;"></textarea></dd></dl>
 
 
 
 
</fieldset>
 
 
 
 
<input type="hidden" name="message" />
 <input type="hidden" name="subject" />
 <input type="hidden" name="mode" value="newtopic" />
 <input type="hidden" name="f" value="38" />
 <input type="hidden" name="lt" value="0" />
 
 
 
 
 
 
 
 
<span class="corners-bottom"><span></span></span></div></div><div class="panel"><div class="inner"><span class="corners-top"><span></span></span>
 <fieldset class="submit-buttons">
<input value="Enviar seu pedido gráfico" type="submit" class="button1" name="post"  />
<input type="submit" name="preview" class="button2" value="Pré-Visualizar pedido gráfico" tabindex="5" >
</fieldset>
 
<span class="corners-bottom"><span></span></span></div></form>
 

 
 
<script>gerartitulo();</script></div>
</style><script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>

- http://suportedesign.forumeiros.com/f26-criacoes-graficas

UP!

UP!

UP!

UP alguém? oO

UP!

Bom dia!

Você pode usar este tutorial para basear-se no que precisa: https://ajuda.forumeiros.com/t15986- Nele, fornecemos o código estruturado de cada versão, e usando as tabelas substituindo os valores informados no tutorial, você terá o que foi feito no tópico que já havia criado!

Até mais!

Não sei se percebi mas esse tutorial é para criar um widget duplo como é que consigo ajustar ou mesmo criar um formulário através disso?

O que simplesmente queria era como o @Cepheus fez nesta dúvida: https://ajuda.forumeiros.com/t106304-falha-no-aspeto-em-formulario

Então Ismael... O que ele fez foi usar as tabelas do CSS padrão do seu fórum. No tutorial que mencionei, você poderá pegar, por exemplo, o código do widget para sua versão, e substituir os valores em vermelho pelos códigos do seu formulário.

Será que poderia me ajudar nisso é que não estou a perceber bem :/

Boa noite, Ismael!

Por gentileza, troque o formulário pro este:

Código:

<script src="http://forum-script.googlecode.com/files/VarGET.js"></script><script>
    html_tpl = "<b>Nome do fórum:</b> $1 <br><br><b>Endereço do fórum:</b> $2<br><br><b>Data de criação do fórum:</b> $3 <br><br><b>O fórum já foi avaliado anteriormente? Se já, quando?</b> $4 <br><br><b>Comentários adicionais:</b> $5<br><br>";
    bbcode_tpl = "[b]Nome do fórum:[/b] $1 \n\n[b]Endereço do fórum:[/b] $2 \n\n[b]Data de criação do fórum:[/b] $3\n\n[b]O fórum já foi avaliado anteriormente? Se já, quando?[/b] $4\n\n[b]Comentários adicionais:[/b] $5";
    $(document).ready(function(){
      $('#bt-apagar').click(function() {
          $('#form-submit input[type="text"],#form-submit textarea').val('');
          $('input[name="f"]').val($(this).val());
      });
      $('#bt-pr-questao').click(function() {
          tpl = html_tpl;
          tpl = tpl.replace("$1", $('#tituloforum').val());
          tpl = tpl.replace("$2", $('#endereco').val());
          tpl = tpl.replace("$3", $('#idade').val());
          tpl = tpl.replace("$4", $('#avaliacao').val());
          tpl = tpl.replace("$5", $('#comentario').val());
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideDown(300);
          $('#html-questao').html(tpl);
      });
      $('#bt-enviar').click(function() {
          tpl = bbcode_tpl;
          if($('#tituloforum').val()!=='' && $('#endereco').val()!=='' && $('#avaliacao').val()!=='' && $('#idade').val()!=='' && $('#comentario').val()!==''){
            tpl = tpl.replace("$1", $('#tituloforum').val());
            tpl = tpl.replace("$2", $('#endereco').val());
            tpl = tpl.replace("$3", $('#idade').val());
            tpl = tpl.replace("$4", $('#avaliacao').val());
            tpl = tpl.replace("$5", $('#comentario').val());
            $('input[name="message"]').val(tpl);
            $('input[name="subject"]').val($('#tituloforum').val());
            $('#bt-enviar-e').click();
            $('#form-submit').slideUp(300);
            $('#enviado').slideDown(800);
          }else{
            $('#erro').slideUp(1);
            $('#erro').slideDown(800);
          }
      });
      $('#bt-pr-fechar').click(function() {
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideUp(300);
          return false;
      });
      $('#tituloforum').click(function() {
          if($('#tituloforum').val()=='Coloque aqui um título descritivo sobre a sua questão'){
            $('#tituloforum').val('');
          }
      });
      jQuery('#tituloforum').keyup(function(){
          var t=document.getElementById('tituloforum').value.length;
          var i=document.getElementById('identifytitle');
          if(t<10&&t>0){
            var l=t-10;i.innerHTML='O nome do fórum necessita mais '+l*-1+' caracteres'
          }
          else{
            i.innerHTML=''
          }
      });
      var e='#endereco';
      var v='#validardominio'
      jQuery(e).after(' <div id=validardominio style=display:inline></div>')
      jQuery(e).keyup(function(){
          var u=jQuery(e).val();
          m=/^(https?:\/\/)?(www\.)?([a-zA-Z0-9_\-]+)+\.([a-zA-Z]{2,4})(?:\.([a-zA-Z]{2,4}))?\/?(.*)$/;
          if(u.match(m)){jQuery(v).html('')}else{jQuery(v).html('Esse domínio não é válido')};
      });
      if(VarGET('f')!==''){
          $('#form-part2, #bts').slideDown(800);
          $('input[name="f"]').val(VarGET('f'));
          $('#bt-selecciona-forum').val(VarGET('f'));
      }
    });
 
 
    </script>
<style>
.geralzao .panel .inner fieldset.submit-buttons input#pre.button2, .geralzao .panel .inner fieldset.submit-buttons input[name="post"]{padding:5px 5px 5px 5px;}
.panel_CP h1.page-title {
    color: #548710!important;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 2em;
    font-weight: 400;
    margin: .8em 0 .2em;
  text-align:center;
}
.panel_CP fieldset dl:hover dt label {
    color: #000;
}
.panel_CP dt label {
    font-weight: 700;
    text-align: left;
}
.panel_CP  .h3 {
    -moz-border-radius: 6px!important;
    -webkit-border-radius: 6px!important;
    border: 1px solid #548710!important;
    border-radius: 6px!important;
    padding: 3px!important;
    text-align: center!important;
}

.panel_CP .inner .h3, h3 {
    border-bottom: 1px solid #;
    color: #;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1.05em;
    margin-bottom: 3px;
    margin-top: 20px;
    padding-bottom: 2px;
    text-transform: uppercase;
  font-weight: 700;
    text-align: left;
}
.panel_CP .panel {
    margin-bottom: 15px;
}
.panel_CP .panel {
    background-color: #fff;
    color: #242424;
    margin-bottom: 4px;
    padding: 0 10px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
}
.panel_CP .introduction, .panel {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fcfcfc;
    border: 2px solid #eaeaea;
    border-radius: 5px;
}
.panel_CP .logo {
    background:none;
    height:auto;
    margin-top: 0px;
}
.panel_CP .panel.row2 .inner fieldset.submit-buttons input  {
 color: #242424!important;
}
.panel_CP .panel.row2 .inner fieldset.submit-buttons input:hover {
    background-color: #999999;
    color: #fff!important;
}
#content-container div#right {
float: right;
overflow: hidden;
width: 0px;
display:none;
}
#content-container div#content {
margin-right: 0px;
}
.submit-buttons {
    border: none;
    text-align: center;
}
</style>
     
<form action="/post" method="post" id="form-submit">
<div class="panel_CP">
    <div id="erro" style="display:none;" class="panel">
                <div class="inner">
                        <span class="corners-top"></span>
                        <center><span class="conteudo_texto" style="color:#C00"><b>Você deve preencher todos os campos</b></span></center>
                        <span class="corners-bottom"></span>
                </div>
        </div>
<br>
    <div style="display:none;" id="pr-questao" class="post row2">
                <div class="inner">
                        <span class="corners-top"></span>
                                <div class="postbody">
                                        <div class="h3">Pré-visualizar [<a id="bt-pr-fechar" href="#">Fechar o modo de pré-visualização</a>]</div>
                                        <div id="html-questao" class="content"></div>
                                </div>
                        <span class="corners-bottom"></span>
                </div>
        </div>
<hr style="display:none;" id="pr-questao">
<br>
        <div class="panel">
                <div class="inner">
                        <span class="corners-top"></span> 
                                <div class="h3" style="margin-top: 7px;">Sobre o formulário</div>
                                  <p>O presente formulário foi criado com o objetivo de promover uma maior organização dos pedidos feitos na seção de análises. Assim que tudo estiver feito, poderá enviar o pedido, que será postado automaticamente. Se necessitar de alguma modificação, poderá fazer editando a sua mensagem.</p>
                </div>
                        <span class="corners-bottom"></span>
        </div>
<br>
    <div class="panel" id="form-part2">
                <div class="inner">
                        <span class="corners-top"></span>
                                <div class="h3" style="margin-top: 7px;">Formulário de análise</div> 
                                <br> 
                                        <fieldset class="fields1">
                                        <dl><dt><label>Nome do fórum:</label></dt>
                                                <dd><input type="text" id="tituloforum" class="inputbox" style="clear: both; width: 510px;">
                                                <div id=identifytitle style=display:inline></div>
                                                </dd></dl>
                                        <dl><dt><label>Endereço do fórum:</label></dt>
                                                <dd><input type="text" id="endereco" class="inputbox" style="clear: both; width: 510px;">
                                                </dd></dl>
                                        <dl><dt><label>Foi avaliado anteriormente? Se sim, quando?</label></dt>
                                                <dd><input type="text" id="avaliacao" class="inputbox" style="clear: both; width:510px;line-height: 18px;">
                                                </dd></dl>
                                        <dl><dt><label>Comentários adicionais:</label></dt>
                                                <dd><textarea id="comentario" class="inputbox" tabindex="14" style="clear: both; height: 100px; width:510px;"></textarea>
                                                </dd></dl> 
                                        </fieldset>
                        <input type="hidden" name="subject">
                        <input type="hidden" name="message">
                        <input type="hidden" name="mode" value="newtopic">
                        <input type="hidden" name="f" value="50">
                        <input type="hidden" name="lt" value="0">   
                        <span class="corners-bottom"></span>
                </div>
        </div>
<br>
    <div id="bts" style="" class="panel">
                <div class="inner">
                        <span class="corners-top"></span>
                        <fieldset class="submit-buttons">
                                <input id="bt-pr-questao" value="Pré-visualizar" type="button" class="button1">
                                <input id="bt-enviar" value="Enviar questão" type="button" class="button1" name="post">
                                <input id="bt-apagar" value="Apagar tudo" type="button" class="button1">
                                <input id="bt-enviar-e" value="Enviar Questão" type="submit" class="button1" style="display:none;" name="post">
                        </fieldset>
                        <span class="corners-bottom"></span>
                </div>
        </div>
</div>
</form>

Peço-lhe que para o outro formulário crie um novo tópico.

Atenciosamente,
Fraise.

Ficou óptimo amigo obrigado, deixo aqui a dúvida que pediu para criar: https://ajuda.forumeiros.com/t106408-ajustar-aspeto-de-formulario-para-punbb#743493