Falha no aspeto em formulário

Detalhes da questão

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

Descrição

Olá!

Vi alguns tópicos sobre formulários e como andei parado um tempo antes não dava suporte sobre isso mas agora parecem dar, por isso a minha dúvida é que tenho este formulário HTML:

Código:

<form id="form-submit" method="post" action="/post">
        <div id="main">
                        <img id="fechar" src="http://i10.servimg.com/u/f10/12/46/70/00/fechar11.png" />
                        <div id="conteudo">
                                <center>
                                        <img src="" />
                                </center>
                        </div><script>
function criar(){
 
var logo = " \n [center][img]"+jQuery('input#1.campo.logo').val()+"[/img][/center] \n \n";
var nome = "[b]Nome completo do fórum: [/b]\n"+jQuery('input#2.campo.nome').val()+" \n \n";
var link = "[b]Link do fórum: [/b]\n[url="+jQuery('input#7.campo.www').val()+"]"+jQuery('input#7.campo.www').val()+"[/url]\n\n";
var desc = "[b]Descrição objetiva do fórum: [/b]\n"+jQuery('textarea#3.campo.desc').val()+" \n \n";
var temas = "[b]Temas debatidos: [/b]\n"+jQuery('textarea#5.campo.textarea.temas').val()+"\n \n";
var imagens = "[b]Imagens diversas: [/b]\n[img]"+jQuery('input#imagens').val()+"[/img]\n "+jQuery('input#img2').val()+" \n "+jQuery('input#img3').val()+"";
 
jQuery('textarea[name="message"]').val(logo+nome+link+desc+temas+imagens);
jQuery('input[name="subject"]').val(jQuery('input#2.campo.nome').val());
jQuery('input[name="f"]').val('60');
}
 
jQuery(document).ready(function(){
jQuery("#conteudo").html("<center><img src='" + jQuery('input#1.campo.logo').val() + "'></center>");
jQuery("input#pre.button2").click(function(){
jQuery("#conteudo").slideDown(200).html("<br><b></b><br><center><img src='" + jQuery('input#1.campo.logo').val() + "'></center><br><br><b>Nome completo do fórum: </b><br>"+jQuery('input#2.campo.nome').val()+"<br><br><b>Link do fórum: </b><br><a href='"+jQuery('input#7.campo.www').val()+"'>"+jQuery('input#7.campo.www').val()+"</a><br><br><b>Descrição objetiva do fórum: </b><br>"+jQuery('textarea#3.campo.desc').val()+"<br><br><b>Temas Debatidos: </b><br>"+jQuery('textarea#5.campo.textarea.temas').val()+"<br><br><b>Imagens diversas: </b><br><img src='"+jQuery('input#imagens').val()+"'><br>"+jQuery('input#img2').val()+"<br>"+jQuery('input#img3').val()+"<br><br>");
jQuery("#fechar").show();
});
jQuery("#fechar").click(function(){
jQuery("#conteudo").slideUp(200);
jQuery("#fechar").hide();});
 
jQuery("#moreimg").click(function(){
jQuery("input#img2,input#img3").slideDown(200);
jQuery(this).hide();
});
jQuery("#removeimg").click(function(){
jQuery("input#img2,input#img3").slideUp(200);
jQuery("#moreimg").show();
});
});
jQuery(document).ready(function(){
jQuery("td:eq(4)").css({"display":"none"});
});
 
jQuery(document).ready(function(){
document.getElementById('5').placeholder = "Informe neste campo os temas aos quais seu fórum abrange, sobre o que o fórum debate, é de extrema importância o preenchimento deste campo.";
});
jQuery(document).ready(function(){
document.getElementById('3').placeholder = "Fale objetivamente sobre seu fórum, o que é? qual é o principal meta do fórum? essas são apenas algumas perguntas que podem lhe ajudar no preenchimento.";
});
jQuery(document).ready(function(){
document.getElementById('imagens').placeholder = "Imagem para previsualização do fórum.";
});
jQuery(document).ready(function(){
document.getElementById('img2').placeholder = "Imagem 2";
});
jQuery(document).ready(function(){
document.getElementById('img3').placeholder = "Imagem 3";
});
</script><style>
.post_public{padding-top:50px!important;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;background-color:#fff;}#fechar{display:none;margin-left:640px !important;}#conteudo{display:none;background-color: rgb(236, 243, 247);
color: rgb(83, 100, 130);
margin-bottom: 4px;
padding: 30px 30px 30px 30px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}#moreimg.more,#moreimg{cursor:pointer;}input#img2,input#img3{display:none;}#img3{margin-left:5px;margin-right:5px;}
#fechar{cursor:pointer;}
.panel .inner textarea, .panel .inner input{
    display: inline;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(188, 188, 188);
    color: rgb(102, 102, 102);
    padding: 2px;
    cursor: text;
}
.panel .inner input{
width:230px!important;
}
.panel.row2 .inner fieldset.submit-buttons input:hover{
background-color:#999999;
color:#fff;
}
.panel.row2 .inner fieldset.submit-buttons input{
cursor: pointer;
background-image: url("");
background-color:#f4f5f4;
border: 1px solid rgb(221, 221, 221);
border-radius: 2px 2px 2px 2px;
color: rgb(102, 102, 102);
display: inline;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 0px;
padding: 3px 7px;
text-align: center;
text-decoration: none;
border-radius:4px!important;
-moz-border-radius:4px !important;
}
 
#removeimg{cursor:pointer;margin-left:5px!important;}span.temas{font-weight:bold!important;margin-bottom:30px!important;}.descriptive{text-align:justify;height:115px!important;}
.geralzao .panel .inner fieldset.submit-buttons input#pre.button2, .geralzao .panel .inner fieldset.submit-buttons input[name="post"]{padding:5px 5px 5px 5px;}</style>
                        <h1 class="page-title">
                                Gerar publicação
                        </h1>
                       
                        <div class="panel row2">
                                <div class="inner">
                                        <span class="corners-top"><span></span></span>
                                        <div style="margin-top: 7px;" class="h3">
                                                Sobre o formulário
                                        </div>
                                       
                                        <p style="font-size: 12px;">
                                                As publicações feitas por este formulário serão enviadas para uma seção aonde serão analisadas e assim liberadas, preencha corretamente o formulário para que sua publicação seja aceita pela equipe de moderação do fórum.
                                        </p><span class="corners-bottom"><span></span></span>
                                </div>
                               
                        </div>
                       
                        <div style="height: 6px;" class="clear">
                        </div>
                       
                        <div class="panel">
                                <div class="inner">
                                        <span class="corners-top"><span></span></span>
                                        <div style="margin-top: 7px;" class="h3">
                                                Informações gerais do fórum
                                        </div>
                                        <fieldset class="fields1"> <dl><dt> <label>Nome completo do fórum :</label></dt><input onkeyup="this.value!=''?post.disabled=false:post.disabled=true" id="2" class="campo nome" type="text" /></dl><dl><dt> <label>Link do fórum :</label></dt><input onkeyup="this.value!=''?post.disabled=false:post.disabled=true" id="7" class="campo www" type="text" /></dl> </fieldset> <span class="corners-bottom"><span></span></span>
                                </div>
                        </div>
                       
                        <div class="panel">
                                <div class="inner">
                                        <span class="corners-top"><span></span></span>
                                        <div style="margin-top: 7px;" class="h3">
                                                Imagens referentes a visualização do fórum
                                        </div>
                                        <fieldset class="fields1"> <dl><dt> <label>Logo do seu fórum :</label></dt><input onkeyup="this.value!=''?post.disabled=false:post.disabled=true" id="1" class="campo logo" type="text" /></dl><dl><dt> <label>Imagens do fórum :</label></dt> <input placeholder="Imagem para previsualização do fórum." value="" id="imagens" type="text" /><input placeholder="Imagem 2" id="img2" type="text" /><input placeholder="Imagem 3" id="img3" type="text" /><span class="ferramentas"><img id="moreimg" src="http://i10.servimg.com/u/f10/12/46/70/00/add10.png" /><img id="removeimg" src="http://i10.servimg.com/u/f10/12/46/70/00/remove10.png" /></span></dl></fieldset>
                                </div>
                                <span class="corners-bottom"><span></span></span>
                </div>
               
                <div class="panel">
                        <div class="inner">
                                <span class="corners-top"><span></span></span>
                                <div style="margin-top: 7px;" class="h3">
                                        Informações especificas do fórum
                                </div>
                                <fieldset class="fields1"> <dl><dt> <label>Descrição objetiva do fórum :</label></dt><textarea placeholder="Fale objetivamente sobre seu fórum, o que é? qual é o principal meta do fórum? essas são apenas algumas perguntas que podem lhe ajudar no preenchimento." style="margin: 2px; width:506px; height: 106px;" id="3" class="campo desc"></textarea></dl><dl><dt> <label>Temas debatidos :</label></dt> <textarea placeholder="Informe neste campo os temas aos quais seu fórum abrange, sobre o que o fórum debate, é de extrema importância o preenchimento deste campo." onkeyup="this.value!=''?post.disabled=false:post.disabled=true" style="margin: 2px; width:506px; height: 106px;" id="5" class="campo textarea temas" rows="6" cols="10" name="5"></textarea></dl> </fieldset> <span class="corners-bottom"><span></span></span>
                        </div>
                </div>
               
                <div class="geralzao">
                        <div class="panel row2">
                                <div class="inner">
                                        <span class="corners-top"><span></span></span><fieldset class="submit-buttons"><input type="button" id="pre" value="Pré-visualizar" class="button2" />  <input onclick="criar();" type="submit" accesskey="s" tabindex="6" value="Enviar" name="post" class="button1" /></fieldset> <input value="newtopic" name="mode" type="hidden" /> <input value="0" name="lt" type="hidden" /> <textarea value="" name="message" style="display:none"></textarea> <input value="a" name="subject" type="hidden" /> <input value="60" name="f" type="hidden" /><span class="corners-bottom"><span></span></span>
                                </div>
                        </div>
                </div>
        </div>
</form>

Ele era de um fórum Phpbb3 neste caso: http://master-publicitario.forumeiros.com/f1-centro-de-pedidos

E estou a utilizar na versão PunBB mas fica incompleto ou seja o aspeto não fica como o da versão Phpbb3.

Phpbb3:


PunBB:


É possível deixar a versão PunBB como o do Phpbb3?

Troque sua pagina por essa:

Código:

<form id="form-submit" method="post" action="/post">
        <div id="main">
                        <img id="fechar" src="http://i10.servimg.com/u/f10/12/46/70/00/fechar11.png" />
                        <div id="conteudo">
                                <center>
                                        <img src="" />
                                </center>
                        </div><script>
function criar(){
 
var logo = " \n [center][img]"+jQuery('input#1.campo.logo').val()+"[/img][/center] \n \n";
var nome = "[b]Nome completo do fórum: [/b]\n"+jQuery('input#2.campo.nome').val()+" \n \n";
var link = "[b]Link do fórum: [/b]\n[url="+jQuery('input#7.campo.www').val()+"]"+jQuery('input#7.campo.www').val()+"[/url]\n\n";
var desc = "[b]Descrição objetiva do fórum: [/b]\n"+jQuery('textarea#3.campo.desc').val()+" \n \n";
var temas = "[b]Temas debatidos: [/b]\n"+jQuery('textarea#5.campo.textarea.temas').val()+"\n \n";
var imagens = "[b]Imagens diversas: [/b]\n[img]"+jQuery('input#imagens').val()+"[/img]\n "+jQuery('input#img2').val()+" \n "+jQuery('input#img3').val()+"";
 
jQuery('textarea[name="message"]').val(logo+nome+link+desc+temas+imagens);
jQuery('input[name="subject"]').val(jQuery('input#2.campo.nome').val());
jQuery('input[name="f"]').val('60');
}
 
jQuery(document).ready(function(){
jQuery("#conteudo").html("<center><img src='" + jQuery('input#1.campo.logo').val() + "'></center>");
jQuery("input#pre.button2").click(function(){
jQuery("#conteudo").slideDown(200).html("<br><b></b><br><center><img src='" + jQuery('input#1.campo.logo').val() + "'></center><br><br><b>Nome completo do fórum: </b><br>"+jQuery('input#2.campo.nome').val()+"<br><br><b>Link do fórum: </b><br><a href='"+jQuery('input#7.campo.www').val()+"'>"+jQuery('input#7.campo.www').val()+"</a><br><br><b>Descrição objetiva do fórum: </b><br>"+jQuery('textarea#3.campo.desc').val()+"<br><br><b>Temas Debatidos: </b><br>"+jQuery('textarea#5.campo.textarea.temas').val()+"<br><br><b>Imagens diversas: </b><br><img src='"+jQuery('input#imagens').val()+"'><br>"+jQuery('input#img2').val()+"<br>"+jQuery('input#img3').val()+"<br><br>");
jQuery("#fechar").show();
});
jQuery("#fechar").click(function(){
jQuery("#conteudo").slideUp(200);
jQuery("#fechar").hide();});
 
jQuery("#moreimg").click(function(){
jQuery("input#img2,input#img3").slideDown(200);
jQuery(this).hide();
});
jQuery("#removeimg").click(function(){
jQuery("input#img2,input#img3").slideUp(200);
jQuery("#moreimg").show();
});
});
jQuery(document).ready(function(){
jQuery("td:eq(4)").css({"display":"none"});
});
 
jQuery(document).ready(function(){
document.getElementById('5').placeholder = "Informe neste campo os temas aos quais seu fórum abrange, sobre o que o fórum debate, é de extrema importância o preenchimento deste campo.";
});
jQuery(document).ready(function(){
document.getElementById('3').placeholder = "Fale objetivamente sobre seu fórum, o que é? qual é o principal meta do fórum? essas são apenas algumas perguntas que podem lhe ajudar no preenchimento.";
});
jQuery(document).ready(function(){
document.getElementById('imagens').placeholder = "Imagem para previsualização do fórum.";
});
jQuery(document).ready(function(){
document.getElementById('img2').placeholder = "Imagem 2";
});
jQuery(document).ready(function(){
document.getElementById('img3').placeholder = "Imagem 3";
});
</script><style>
.post_public{padding-top:50px!important;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;background-color:#fff;}#fechar{display:none;margin-left:640px !important;}#conteudo{display:none;background-color: rgb(236, 243, 247);
color: rgb(83, 100, 130);
margin-bottom: 4px;
padding: 30px 30px 30px 30px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}#moreimg.more,#moreimg{cursor:pointer;}input#img2,input#img3{display:none;}#img3{margin-left:5px;margin-right:5px;}
#fechar{cursor:pointer;}
.panel .inner textarea, .panel .inner input{
    display: inline;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(188, 188, 188);
    color: rgb(102, 102, 102);
    padding: 2px;
    cursor: text;
}
.panel .inner input{
width:230px!important;
}
.panel.row2 .inner fieldset.submit-buttons input:hover{
background-color:#999999;
color:#fff;
}
.panel.row2 .inner fieldset.submit-buttons input{
cursor: pointer;
background-image: url("");
background-color:#f4f5f4;
border: 1px solid rgb(221, 221, 221);
border-radius: 2px 2px 2px 2px;
color: rgb(102, 102, 102);
display: inline;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 0px;
padding: 3px 7px;
text-align: center;
text-decoration: none;
border-radius:4px!important;
-moz-border-radius:4px !important;
}
 
#removeimg{cursor:pointer;margin-left:5px!important;}span.temas{font-weight:bold!important;margin-bottom:30px!important;}.descriptive{text-align:justify;height:115px!important;}
.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><div class="panel_CP">
                        <h1 class="page-title" style="text-align:center">
                                Gerar publicação
                        </h1>
                        
                        <div class="panel row2">
                                <div class="inner">
                                        <span class="corners-top"><span></span></span>
                                        <div style="margin-top: 7px;" class="h3">
                                                Sobre o formulário
                                        </div>
                                        
                                        <p style="font-size: 12px;">
                                                As publicações feitas por este formulário serão enviadas para uma seção aonde serão analisadas e assim liberadas, preencha corretamente o formulário para que sua publicação seja aceita pela equipe de moderação do fórum.
                                        </p><span class="corners-bottom"><span></span></span>
                                </div>
                                
                        </div>
                        
                        <div style="height: 6px;" class="clear">
                        </div>
                        
                        <div class="panel">
                                <div class="inner">
                                        <span class="corners-top"><span></span></span>
                                        <div style="margin-top: 7px;" class="h3">
                                                Informações gerais do fórum
                                        </div>
                                        <fieldset class="fields1"> <dl><dt> <label>Nome completo do fórum :</label></dt><input onkeyup="this.value!=''?post.disabled=false:post.disabled=true" id="2" class="campo nome" type="text" /></dl><dl><dt> <label>Link do fórum :</label></dt><input onkeyup="this.value!=''?post.disabled=false:post.disabled=true" id="7" class="campo www" type="text" /></dl> </fieldset> <span class="corners-bottom"><span></span></span>
                                </div>
                        </div>
                        
                        <div class="panel">
                                <div class="inner">
                                        <span class="corners-top"><span></span></span>
                                        <div style="margin-top: 7px;" class="h3">
                                                Imagens referentes a visualização do fórum
                                        </div>
                                        <fieldset class="fields1"> <dl><dt> <label>Logo do seu fórum :</label></dt><input onkeyup="this.value!=''?post.disabled=false:post.disabled=true" id="1" class="campo logo" type="text" /></dl><dl><dt> <label>Imagens do fórum :</label></dt> <input placeholder="Imagem para previsualização do fórum." value="" id="imagens" type="text" /><input placeholder="Imagem 2" id="img2" type="text" /><input placeholder="Imagem 3" id="img3" type="text" /><span class="ferramentas"><img id="moreimg" src="http://i10.servimg.com/u/f10/12/46/70/00/add10.png" /><img id="removeimg" src="http://i10.servimg.com/u/f10/12/46/70/00/remove10.png" /></span></dl></fieldset>
                                </div>
                                <span class="corners-bottom"><span></span></span>
                </div>
                
                <div class="panel">
                        <div class="inner">
                                <span class="corners-top"><span></span></span>
                                <div style="margin-top: 7px;" class="h3">
                                        Informações especificas do fórum
                                </div>
                                <fieldset class="fields1"> <dl><dt> <label>Descrição objetiva do fórum :</label></dt><textarea placeholder="Fale objetivamente sobre seu fórum, o que é? qual é o principal meta do fórum? essas são apenas algumas perguntas que podem lhe ajudar no preenchimento." style="margin: 2px; width:506px; height: 106px;" id="3" class="campo desc"></textarea></dl><dl><dt> <label>Temas debatidos :</label></dt> <textarea placeholder="Informe neste campo os temas aos quais seu fórum abrange, sobre o que o fórum debate, é de extrema importância o preenchimento deste campo." onkeyup="this.value!=''?post.disabled=false:post.disabled=true" style="margin: 2px; width:506px; height: 106px;" id="5" class="campo textarea temas" rows="6" cols="10" name="5"></textarea></dl> </fieldset> <span class="corners-bottom"><span></span></span>
                        </div>
                </div>
                
                <div class="geralzao">
                        <div class="panel row2">
                                <div class="inner">
                                        <span class="corners-top"><span></span></span><fieldset class="submit-buttons"><input type="button" id="pre" value="Pré-visualizar" class="button2" />  <input onclick="criar();" type="submit" accesskey="s" tabindex="6" value="Enviar" name="post" class="button1" /></fieldset> <input value="newtopic" name="mode" type="hidden" /> <input value="0" name="lt" type="hidden" /> <textarea value="" name="message" style="display:none"></textarea> <input value="a" name="subject" type="hidden" /> <input value="60" name="f" type="hidden" /><span class="corners-bottom"><span></span></span>
                                </div>
                        </div>
                </div>
        </div> </div>
</form>

Era isso mesmo, só queria se possível ocultar os widgets no formulário e deixar ajustado.

Eu editei a postagem acima com a pagina modificada : https://ajuda.forumeiros.com/t106304-falha-no-aspeto-em-formulario#742596

Só pegar o código novamente.
Abraço!

Ficou óptimo obrigado!