Modificações em HTML

Olá, queria modificações neste codigo HTML.

Código:

<div id="main-content"><div style="height:8px"></div><style type="text/css">
      #form-send, .form-info h3 {
      background: #fcfcfc;
      border: 1px solid #ddd;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      }
      #form-send select, .form-info h3 {
      font: 16px bold arial, tahoma, georgia;
      }
      .form-info h3 {padding: 3px;font-weight: bold;text-align: center;}
      #form-send select {
      min-width: 150px;
      padding: 4px;
      cursor: pointer;
      outline: none;
      border: 1px solid #e0e0e0;
      background: white;
      }
      .warn {
      background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
      border: 1px solid #e599aa;
      margin: 3px 0;
      color: #80001c;
      padding: 3px;
      }
      fieldset.form-div dt {
      font: 15px bold arial, tahoma, georgia;
      padding: 5px 0;
      vertical-align: top;
      width: 13em;
      }
      fieldset.form-div dt, fieldset.form-div dd {
      display: inline-block;
      }
      fieldset.form-div dd {width: 75%;}
      fieldset.form-div dl:nth-child(odd) {
      background: #f5f8fa !important;
      }
      fieldset.form-div dl:nth-child(even) {
      background: #fff;
      }
      fieldset.form-div input[type="text"] {
      -moz-border-radius: 1px;
      -webkit-border-radius: 1px;
      border-radius: 1px;
      outline: none;
      border: 1px solid #f0f0f0;
      padding: 5px;
      }
      #countitle {
      background: white;
      color: #D60B8C;
      border: 1px solid #e0e0e0;
      padding: 5px;
      border-radius: 3px;
      }
      fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
      fieldset.form-div dl:after {
      clear: both;
      content: '.';
      display: block;
      height: 0px;
      visibility: hidden;
      }
      #form-send .area {position: relative;}
      #form-send .description {
      z-index: 3;
      top: 0;
      right: 0;
      width: 25%;
      position: absolute;
      background: white;
      line-height: 18px;
      color: #000000;
      font-family: Calibri, sans-serif;
      font-size: 13px;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      padding: 5px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid silver;
      }
      #form-send .area .buttons {
      -moz-background-clip: padding;
      -moz-border-radius: 3px 3px 0 0;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-background-clip: padding-box;
      -webkit-border-radius: 3px 3px 0 0;
      -webkit-user-select: none;
      background: #f7f7f7;
      background-clip: padding-box;
      border: 1px solid silver;
      border-radius: 3px 3px 0 0;
      line-height: 0;
      width: 70%;
      overflow: hidden;
      padding: 3px 5px 2px;
      }
      #form-send .area .buttons .button {
      background: white;
      cursor: pointer;
      outline: none;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #e0e0e0;
      padding: 3px;
      }
      #form-send .area .buttons .button:hover {border-color: #707070;}
      #form-send .textarea_nc #textarea {
      min-height: 200px;
      color: #111;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 13px;
      overflow: auto;
      border: 0;
      outline: none;
      width: 100%;
      }
      #form-send .btns {
      background: #f5f5f5;
      border-top: 1px solid #d7d7d7;
      padding: 10px;
      text-align: center;
      }
      #form-send .area .textarea_nc {
      background: white;
      min-height: 200px;
      cursor: se-resize;
      -moz-border-radius: 0 0 3px 3px;
      -webkit-border-radius: 0 0 3px 3px;
      border-radius: 0 0 3px 3px;
      overflow: hidden;
      padding: 3px 5px 2px;
      border: 1px solid silver;
      border-top: 0;
      width: 70%;
      }
    </style>
    <div class="form-info">
      <h3>Formulário de Dicas e Tutoriais</h3><br>
      <div class="warn" style="display: none;">
        É necessário preencher todos os campos em branco.
      </div>
    </div>
    <div id="form-send">
      <fieldset class="form-div">  
      <dl><dt>
      <label>Imagem do resultado:</label></dt>
      <dd>
        Largura <input type="text" style="width: 30px" id="largura" value="300">px <b>x</b> Altura <input type="text" style="width: 30px" id="altura" value="200">px<br><br>
        <input type="text" style="clear: both;width: 400px;" id="img-t" value="http://2img.net/i/fa/empty.gif"><br>
        <img id="prev-img" style="display: none;">
      </dd>
      </dl>
      <dl><dt>
      <label>Título do tutorial:</label></dt>
      <dd>
        <input type="text" style="clear: both;width: 400px;" id="titulo" placeholder="Título do tutorial"> <div id="countitle" style="display: none;"></div>
      </dd>
      </dl>
      <dl><dt>
      <label>Autor:</label></dt>
      <dd>
        <input type="text" style="clear: both;width: 400px;" id="autor" placeholder="Autor do código">
      </dd>
      </dl>
      <dl><dt>
      <label>Funcionalidade:</label></dt>
        <dd>
                            <select class="inputbox" id="funcionalidade">
                            <option value="PhpBB3">PhpBB3</option>
                            <option value="PunBB">PunBB</option>
                            <option value="PhpBB2">PhpBB2</option>
                            <option value="Invision">Invision</option>
                            <option value="PhpBB3/Phpbb2">PhpBB3/PhpBB2</option>
                            <option value="PhpBB3/PunBB">PhpBB3/PunBB</option>
                            <option value="PhpBB3/Invision">PhpBB3/Invision</option>
                            <option value="PunBB/PhpBB2">PunBB/PhpBB2</option>
                            <option value="PunBB/Invision">PunBB/Invision</option>
                            <option value="PhpBB2/Invision">PhpBB2/Invision</option>
                            <option value="PhpBB3/PhpBB2/PunBB">PhpBB3/PhpBB2/PunBB</option>
                            <option value="PhpBB3/PhpBB2/Invision">PhpBB3/PhpBB2/Invision</option>
                            <option value="PhpBB3/PunBB/Invision">PhpBB3/PunBB/Invision</option>
                            <option value="PhpBB2/PunBB/Invision">PhpBB2/PunBB/Invision</option>
                            <option value="Todas as versões">Todas as versões</option>
                            </select>
        </dd>
      </dl>
      <dl><dt>
      <label>Categoria:</label></dt>
        <dd class="frm-input">
                          <select class="inputbox" id="categoria">
                            <option value="Recursos BestSkins">Recursos Fóruns Stark</option>
                            <option value="Recursos de Outros Autores">Recursos de Outros Autores</option>
                          </select>
        </dd>
      </dl>
      <dl><dt>
      <label>Descrição do tutorial:</label></dt>
      <dd>
        <select id="selecionarpainel">
                <option>Selecionar diretório (opcional)</option>
                <option value="Página inicial">Página inicial</option>
                  <optgroup label="Geral ⇒ Fórum ⇒"></optgroup>
                <option value="Geral  Fórum  Configuração">Configuração</option>
                <option value="Geral  Fórum  Categorias e fóruns">Categorias e fóruns</option>
                <option value="Geral  Fórum  Endereço do Fórum">Endereço do Fórum</option>
                <option value="Geral  Fórum  Segurança">Segurança</option>
                <option value="Geral  Fórum  Cancelamento do Fórum">Cancelamento do Fórum</option>
                  <optgroup label="Geral ⇒ Mensagens e e-mails ⇒"></optgroup>
                <option value="Geral  Mensagens e e-mails  Configuração">Configuração</option>
                <option value="Geral  Mensagens e e-mails  Mensagens Privadas">Mensagens Privadas</option>
                <option value="Geral  Mensagens e e-mails  E-mails e formulário de contato">E-mails e formulário de contato</option>
                <option value="Geral  Mensagens e e-mails  Anúncios">Anúncios</option>
                <option value="Geral  Mensagens e e-mails  Anexos">Anexos</option>
                  <optgroup label="Geral ⇒ Promoção do Fórum ⇒"></optgroup>
                <option value="Geral  Promoção do Fórum  Convidar amigos">Convidar amigos</option>
                <option value="Geral  Promoção do Fórum  Motores de busca">Motores de busca</option>
                <option value="Geral  Promoção do Fórum  Diretório dos fóruns">Diretório dos fóruns</option>
                <option value="Geral  Promoção do Fórum  Troca de tráfego">Troca de tráfego</option>
                  <optgroup label="Geral ⇒ Estatísticas ⇒"></optgroup>
                <option value="Geral  Estatísticas  Estatísticas do fórum">Estatísticas do fórum</option>
                <option value="Geral  Estatísticas  Recapitulativo dos votos">Recapitulativo dos votos</option>
                <option value="Geral  Estatísticas  Google Analytics">Google Analytics</option>
                  <optgroup label="Geral ⇒ Newsletter ⇒"></optgroup>
                <option value="Geral  Newsletter  Redação e envio">Redação e envio</option>
                <option value="Geral  Newsletter  Rastreamento e arquivos">Rastreamento e arquivos</option>
                  <optgroup label="Geral ⇒ Censura ⇒"></optgroup>
                <option value="Geral  Censura  Censura das palavras">Censura das palavras</option>
                <option value="Geral  Censura  Censura de nomes de usuário">Censura de nomes de usuário</option>
                  <optgroup label="Geral ⇒ Relatório de alerta ⇒"></optgroup>
                <option value="Geral  Relatório de alerta  Configuração">Configuração</option>
                <option value="Geral  Relatório de alerta  Autorizações">Autorizações</option>
                <option value="Geral  Relatório de alerta  Justificações">Justificações</option>
                <option value="Geral  Relatório de alerta  Lista de Alertas">Lista de Alertas</option>
                  <optgroup label="Geral ⇒ Regulamentos e FAQ ⇒"></optgroup>
                <option value="Geral  Regulamentos e FAQ  Regulamento suplementar">Regulamento suplementar</option>
                <option value="Geral  Regulamentos e FAQ  FAQ">FAQ</option>
                  <optgroup label="Visualização ⇒ Temas ⇒"></optgroup>
                <option value="Visualização  Temas  Escolher um tema">Escolher um tema</option>
                <option value="Visualização  Temas  Gestão dos temas">Gestão dos temas</option>
                <option value="Visualização  Temas  Temas temporários">Temas temporários</option>
                  <optgroup label="Visualização ⇒ Página inicial ⇒"></optgroup>
                <option value="Visualização  Página inicial  Geral">Geral</option>
                <option value="Visualização  Página inicial  Estrutura e Hierarquia">Estrutura e Hierarquia</option>
                <option value="Visualização  Página inicial  Cabeçalho e Navegação">Cabeçalho & Navegação</option>
                  <optgroup label="Visualização ⇒ Imagens e Cores ⇒"></optgroup>
                <option value="Visualização  Imagens e Cores  Gestão das Imagens">Gestão das Imagens</option>
                <option value="Visualização  Imagens e Cores  Cores">Cores</option>
                  <optgroup label="Visualização ⇒ Avatares ⇒"></optgroup>
                <option value="Visualização  Avatares  Galeria dos avatares">Galeria dos avatares</option>
                <option value="Visualização  Avatares  Smileys">Smileys</option>
                  <optgroup label="Visualização ⇒ Templates ⇒"></optgroup>
                <option value="Visualização  Templates  Geral">Geral</option>
                <option value="Visualização  Templates  Portal">Portal</option>
                <option value="Visualização  Templates  Galeria">Galeria</option>
                <option value="Visualização  Templates  Calendário">Calendário</option>
                <option value="Visualização  Templates  Grupos">Grupos</option>
                <option value="Visualização  Templates  Postar & Mensagens Privadas">Postar & Mensagens Privadas</option>
                <option value="Visualização  Templates  Moderação">Moderação</option>
                <option value="Visualização  Templates  Perfil">Perfil</option>
                  <optgroup label="Usuários & Grupos ⇒ Usuários ⇒"></optgroup>
                <option value="Usuários  Selecionar usuário">Selecionar usuário</option>
                <option value="Usuários  Opções dos usuários">Opções dos usuários</option>
                <option value="Usuários  Perfis">Perfis</option>
                <option value="Usuários  Usuários especiais">Usuários especiais</option>
                <option value="Usuários  Usuários inativos">Usuários inativos</option>
                <option value="Usuários  Gestão dos usuários">Gestão dos usuários</option>
                <option value="Usuários  Controle das expulsões">Controle das expulsões</option>
                  <optgroup label="Usuários & Grupos ⇒ Grupos ⇒"></optgroup>
                <option value="Usuários  Grupos  Administração dos Grupos">Administração dos Grupos</option>
                  <optgroup label="Usuários & Grupos ⇒ Ranks ⇒"></optgroup>
                <option value="Usuários  Ranks  Administração dos Ranks">Administração dos Ranks</option>
                  <optgroup label="Usuários & Grupos ⇒ Autorizações especiais ⇒"></optgroup>
                <option value="Usuários  Autorizações especiais  Autorizações especiais">Autorizações especiais</option>
                  <optgroup label="Módulos ⇒ Portal & Widgets ⇒"></optgroup>
                <option value="Módulos  Portal & Widgets  Configuração do Portal">Configuração do Portal</option>
                <option value="Módulos  Portal & Widgets  Gestão dos widgets do fórum">Gestão dos widgets do fórum</option>
                  <optgroup label="Módulos ⇒ Barra de Ferramentas ⇒"></optgroup>
                <option value="Módulos  Barra de Ferramentas  Configuração">Configuração</option>
                  <optgroup label="Módulos ⇒ Galeria ⇒"></optgroup>
                <option value="Módulos  Galeria  Configuração">Configuração</option>
                <option value="Módulos  Galeria  Gestão">Gestão</option>
                <option value="Módulos  Galeria  Página inicial">Página inicial</option>
                <option value="Módulos  Galeria  Álbuns pessoais">Álbuns pessoais</option>
                <option value="Módulos  Galeria  Envio">Envio</option>
                <option value="Módulos  Galeria  Visualização">Visualização</option>
                <option value="Módulos  Galeria  Estoque">Estoque</option>
                  <optgroup label="Módulos ⇒ Links do rodapé ⇒"></optgroup>
                <option value="Módulos  Links do rodapé  Configuração">Configuração</option>
                  <optgroup label="Módulos ⇒ Redes sociais ⇒"></optgroup>
                <option value="Módulos  Redes sociais  Facebook Connect">Facebook Connect</option>
          <option value="Módulos  Redes sociais  Botão Gostar">Botão "Gostar"</option>
          <option value="Módulos  Redes sociais  Google +">Google +</option>
                  <optgroup label="Módulos ⇒ Pontos e Reputação ⇒"></optgroup>
                <option value="Módulos  Pontos e Reputação  Sistema de Pontos">Sistema de Pontos</option>
                <option value="Módulos  Pontos e Reputação  Reputação">Reputação</option>
                <option value="Módulos  Pontos e Reputação  Doação de Pontos">Doação de Pontos</option>
                  <optgroup label="Módulos ⇒ RPG ⇒"></optgroup>
                <option value="Módulos  RPG  Gestão dos Campos">Gestão dos Campos</option>
                <option value="Módulos  RPG  Estilo dos Campos">Estilo dos Campos</option>
                <option value="Módulos  RPG  Fichas de Personagem">Fichas de Personagem</option>
                <option value="Módulos  RPG  Preencher as fichas">Preencher as fichas</option>
                <option value="Módulos  RPG  Lançar dados">Lançar dados</option>
                  <optgroup label="Módulos ⇒ Chatbox ⇒"></optgroup>
                <option value="Módulos  Chatbox  Configuração">Configuração</option>
                <option value="Módulos  Chatbox  Usuários banidos">Usuários banidos</option>
                <option value="Módulos  Chatbox  Moderadores">Moderadores</option>
                  <optgroup label="Módulos ⇒ Calendário ⇒"></optgroup>
                <option value="Módulos  Calendário  Configuração">Configuração</option>
                  <optgroup label="Módulos ⇒ HTML & JAVASCRIPT ⇒"></optgroup>
                <option value="Módulos  HTML & JAVASCRIPT  Gestão das páginas HTML">Gestão das páginas HTML</option>
                <option value="Módulos  HTML & JAVASCRIPT  Gestão dos códigos JavaScript">Gestão dos códigos JavaScript</option>
                  <optgroup label="Diversos ⇒ Gestão dos créditos ⇒"></optgroup>
                <option value="Diversos  Gestão dos créditos  Resumo / Síntese">Resumo / Síntese</option>
                <option value="Diversos  Gestão dos créditos  Utilizar créditos">Utilizar créditos</option>
                <option value="Diversos  Gestão dos créditos  Comprar / Obter créditos">Comprar / Obter créditos</option>
                <option value="Diversos  Gestão dos créditos  Doações">Doações</option>
                <option value="Diversos  Gestão dos créditos  Histórico">Histórico</option>
                  <optgroup label="Diversos ⇒ Suporte ⇒"></optgroup>
                <option value="Diversos  Suporte  Queixas assinaladas">Queixas assinaladas</option>
                  <optgroup label="Diversos ⇒ Hospedagem ⇒"></optgroup>
                <option value="Diversos  Hospedagem  Hospedagem das imagens">Hospedagem das imagens</option>
              </select>
        <img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png">
        <input type="text" id="diretorioextracampo" maxlength="120">
        <input type="button" id="gerar_diret" value="Gerar"><br><br>
        <div class="area">
        <div class="buttons">
          <button class="button" onclick="bbcode_tag('[b]','[/b]')" type="button" id="addbbcode0" title="Negrito"><img src="http://imgur.com/z2xtYUE.png" alt="Negrito" title="Negrito"></button>
          <button class="button" onclick="bbcode_tag('[i]','[/i]')" type="button" id="addbbcode2" title="Itálico"><img src="http://imgur.com/EcEpCJ9.png" alt="Itálico" title="Itálico"></button>
          <button class="button" onclick="bbcode_tag('[u]','[/u]')" type="button" id="addbbcode4" title="Underline"><img src="http://imgur.com/i6Ergr1.png" alt="Underline" title="Underline"></button>
          <button class="button" onclick="bbcode_tag('[strike]','[/strike]')" type="button" id="addbbcode5" title="Strike"><img src="http://i.imgur.com/hWWoJSN.png" alt="Strike" title="Strike"></button>
          <button class="button" onclick="bbcode_tag('[left]','[/left]')" type="button" id="addbbcode52" title="Esquerda"><img src="http://2img.net/i/fa/wysiwyg/text_align_left.png" alt="Esquerda" title="Esquerda"></button>
          <button class="button" onclick="bbcode_tag('[center]','[/center]')" type="button" id="addbbcode30" title="Centralizar"><img src="http://2img.net/i/fa/wysiwyg/text_align_center.png" alt="Centralizar" title="Centralizar"></button>
          <button class="button" onclick="bbcode_tag('[right]','[/right]')" type="button" id="addbbcode32" title="Direita"><img src="http://2img.net/i/fa/wysiwyg/text_align_right.png" alt="Direita" title="Direita"></button>
          <button class="button" onclick="bbcode_tag('[justify]','[/justify]')" type="button" id="addbbcode33" title="Justificado"><img src="http://2img.net/i/fa/wysiwyg/text_align_justify.png" alt="Justificado" title="Justificado"></button>
          <button class="button" onclick="bbcode_tag('[code]','[/code]')" type="button" id="addbbcode41" title="code"><img src="http://i.imgur.com/LEJ7qoj.png" alt="Code" title="Code"></button>
          <button class="button" onclick="bbcode_tag('[list][*]','[/list]')" type="button" id="addbbcode10" title="-Lista"><img src="http://2img.net/i/fa/wysiwyg/text_list_bullets.png" alt="-Lista" title="-Lista"></button>
          <button class="button" onclick="bbcode_tag('[list=1][*]','[/list]')" type="button" id="addbbcode12" title="Lista ordenada"><img src="http://2img.net/i/fa/wysiwyg/text_list_numbers.png" alt="Lista ordenada" title="Lista ordenada"></button>
          <button class="button" onclick="bbcode_tag('[img]','[/img]')" type="button" id="addbbcode14" title="Imagem"><img src="http://2img.net/i/fa/wysiwyg/picture.png" alt="Imagem" title="Imagem"></button>
          <button class="button" onclick="bbcode_tag('[url=','][/url]')" type="button" id="addbbcode16" title="Link"><img src="http://2img.net/i/fa/wysiwyg/link.png" alt="Link" title="Link"></button>
        </div>
        <div class="textarea_nc">
          <textarea id="textarea" class="inputbox"></textarea>
        </div>
        <div class="description">
          1. O seu tutorial será avaliado pela staff antes de ser aprovado.<br><br>
          2. Uma boa ortografia e a ilustração com imagens facilita o entendimento do seu tutorial.<br><br>
          3. Sempre coloque os créditos do autor do tutorial, pois assim evitaremos problemas futuros.
        </div>
        </div>
      </dd>
      </dl>
      </fieldset>
        <div class="btns"><input type="button" id="envia_form" onclick="enviaForm()" value="Enviar"></div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#titulo').keyup(function() {
        var tvalue = document.getElementById('titulo').value.length;
        var icnt = document.getElementById('countitle');
        if(tvalue < 10 && tvalue > 0) {
          var l = tvalue-10;
          icnt.style.display = 'inline',
          icnt.innerHTML = 'O título necessita mais '+l*-1+' caracteres';
        }
        else {
          icnt.style.display = 'none',
          icnt.innerHTML = '';
        }
    });
    $('#img-t').keyup(function() {
      var _value = $(this).val();
      var px = {
          altura: $('#altura').val(),
          largura: $('#largura').val()
      }
      if (/png|jpg|jpeg|gif/ig.test(_value)) {
              $('#prev-img').attr('src',_value).css('height',px.altura).css('width',px.largura).css('display','block');
      } else {
              $('#prev-img').removeAttr('src').css('display','none');
      }
    });
    $('#gerar_diret').click(function() {
      var more;
      if($('#diretorioextracampo').val().length != 0) {
          more = '  ' + $('#diretorioextracampo').val();
      } else {
          more = '';
      }
      $('#textarea').val($('#textarea').val() + '[b]Painel de Controle  ' + $('#selecionarpainel').val() + more + '[/b]').focus();
    });
    });
    function enviaForm() {
      if($('#largura').val().length !== 0 && $('#altura').val().length !== 0 && $('#img-t').val().length !== 0 && $('#titulo').val().length !== 0 && $('#autor').val().length !== 0 && $('#funcionalidade').val().length !== 0 && $('#categoria').val().length !== 0 && $('#textarea').val().length !== 0) {
      var form = {
          largura: $('#largura').val(),
          altura: $('#altura').val(),
          imagem: $('#img-t').val(),
          titulo: $('#titulo').val(),
          autor: $('#autor').val(),
          funct: $('#funcionalidade').val(),
          cat: $('#categoria').val(),
          texto: $('#textarea').val()
      }
      var formfinal = '[center][img(' + form.largura + 'px,' + form.altura + 'px)]' + form.imagem + '[/img][/center]\n' +
                      '[b]Nome do Arquivo:[/b] ' + form.titulo + '\n' +
                      '[b]Autor:[/b] ' + form.autor + '\n' +
                      '[b]Funcionalidade:[/b] ' + form.funct + '\n' +
                      '[b]Categoria:[/b] ' + form.cat + '\n\n' + form.texto;
      $('#form-send').html(
            '<br />' +
            '<br />' +
            '<center>' +
            '  <img src="http://www.cosmeticchoice.com.au/image/loading.gif" />' +
            '  <br />' +
            '  <span style="color: #82C1ED;font-size: 15px;font-weight: bold;">Carregando...</span>' +
            '</center>'
      );
      $.post('/post', {
            message: formfinal,
            f: '10',
            mode: 'newtopic',
            post: 'submit',
            subject: form.titulo
      }).done(function(e) {
        var href = $(e).find('.message a:first').attr('href');
        location.href = href;
      }).fail(function() {
        alert("Falha ao enviar");
        location.href = location.pathname;
      });
      } else {
        $('.warn').slideUp(1);
        $('.warn').slideDown(500);
      }
    }
    function bbcode_tag(o,c) {
    var t = jQuery('#textarea');
    t.val(t.val().substring(0,t[0].selectionStart)+o+t.val().substring(t[0].selectionStart,t[0].selectionEnd)+c+t.val().substring(t[0].selectionEnd,t.val().length)).focus();
    }
    </script></div>

Invez de falar sobre tutorial quero sobre suporte espero que entendam rsrs mudar as palavras relacionado ao tutorial para relacionado ao suporte.

Em "Autor" colocar Link do forum
"Categoria" pode remover
"Funcionalidade" deixar só as plataformas da forumeiros (Ex: Punbb)
"Descrisão do tutorial" coloque descrição do suporte. e remover selecione diretorio

quero 3 formularios.
1 Escrito em cima "Formulario de suporte - CSS" outro "HTML" e o outro "JavaScript & jQuery

Olá!

Veja se é isto que o senhor deseja.
Formulário de suporte - CSS: http://pastebin.com/XRWKUppW
Formulário de suporte - HTML: http://pastebin.com/P8p2KUUN
Formulário de suporte - JavaScript & jQuery: http://pastebin.com/gyQeSBkh

Cumprimentos.
Fraise

Sim é exatamente isto. Mas quando clico em enviar não acontece nada.

Poderá me informar o site do seu fórum
Por gentileza,

Olá!

Vamos tentar este código:

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">

<h1 data-type="field">Formulário de suporte - JavaScript & jQuery</h1>

<dl><dt>Imagem do erro</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field3"></dd>
                        </dl>

<dl><dt>Título do Suporte</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field4"></dd>
                        </dl>

<dl><dt>Fórum</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field5"></dd>
                        </dl>

<dl>
                            <dt>Plataforma</dt>
                            <dd><select data-type="field" id="field6"><option value="PhpBB2">PhpBB2</option><option value="PhpBB3">PhpBB3</option><option value="PunBB">PunBB</option><option value="Invision">Invision</option></select></dd>
                        </dl>

<dl>
                            <dt>Categoria</dt>
                            <dd><select data-type="field" id="field7"><option value="Recursos Fóruns Stark">Recursos Fóruns Stark</option><option value="Recursos de Outros Autores">Recursos de Outros Autores</option></select></dd>
                        </dl>

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


                <input type="hidden" name="f" value="8">
                <input type="hidden" name="subject" value="O script não enviou o título" template="[Suporte] {field4} - {field6}">
                <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"></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>

Este é apenas da seção de JavaScript e jQuery, teste e veja se o erro persiste.

Cumprimentos.
Fraise

Acho que deu certo. Quando clico em enviar vai pra pagina de criar topico padrão. e fala pra escrever uma mensagem mas ja escrevi e nada.
Do jeito que eu queria, mas tem como tirar aquele negocio de categoria e deixar naquele "Design" lá?

Olá!

Você terá de autorizar formulários não oficiais de postarem no fórum. Para isso vá em:

Painel de Controle Geral Segurança

Em "Desautorizar formulários não oficiais de postarem no fórum e enviar mensagens privadas" marque Não.

Cumprimentos.
Fraise

Já fiz isto '-' quando escreve algo na descrição do suporte ele não vai e da este erro http://prntscr.com/80dar5

Olá!

Troque o formulário que lhe passei anteriormente por este e veja se o resultado surge:

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">

<h1 data-type="field">Formulário de suporte - JavaScript & jQuery</h1>

<dl><dt>Imagem do erro</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field3"></dd>
                        </dl>

<dl><dt>Título do Suporte</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field4"></dd>
                        </dl>

<dl><dt>Fórum</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field5"></dd>
                        </dl>

<dl>
                            <dt>Plataforma</dt>
                            <dd><select data-type="field" id="field6"><option value="PhpBB2">PhpBB2</option><option value="PhpBB3">PhpBB3</option><option value="PunBB">PunBB</option><option value="Invision">Invision</option></select></dd>
                        </dl>

<dl>
                            <dt>Categoria</dt>
                            <dd><select data-type="field" id="field7"><option value="Recursos Fóruns Stark">Recursos Fóruns Stark</option><option value="Recursos de Outros Autores">Recursos de Outros Autores</option></select></dd>
                        </dl>

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


                <input type="hidden" name="f" value="8">
                <input type="hidden" name="subject" value="O script não enviou o título" template="[Suporte] {field4} - {field6}">
                <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"></textarea>
                <input type="hidden" name="mode" value="newtopic">
                <input type="hidden" name="lt" value="8">
                <input type="submit" name="post" class="button2" value="Enviar">
           

</form>

Cumprimentos.
Fraise

Deu erro geral http://prntscr.com/80dg71

Olá!

Tente criar um formulário por aqui: https://ajuda.forumeiros.com/h15-
E depois nos diga resultados.

Cumprimentos.
Fraise

Não sei criar por ai kkk'

Olá!

Basta ler as instruções que se encontram no próprio gerador:

Os formulários de postagem servem para agilizar a postagem de tópicos que seguem um determinado padrão. Anteriormente era necessário desenvolver cada formulário manualmente, porém com esse gerador é possível produzir um trabalho de qualidade sem ter que escrever uma linha de código.
Para adicionar controles, basta arrastar os controles que estão do lado esquerdo para o setor indicado logo abaixo desse quadro.
Caso queira excluir algum campo, basta clicar duas vezes e confirmar.
Para personalizar o campo criado, clique sobre ele, uma caixa aparecerá abaixo do espaço dos controles, na esquerda.
Para alterar a ordem em que aparecem: arraste e solte.

Cumprimentos.
Fraise

Consegui muito obrigado! Como faço pra personalizar ele?

Olá!

Como gostaria de o personalizar?

Cumprimentos.
Fraise

Gostaria igual este: h

HTML doque eu fiz agora:

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">

<h1 data-type="field">Formulario Suporte</h1>

<h3 data-type="field">JavaScript & jQuery</h3>

<dl><dt>Imagem</dt>
                            <dd><input type="text" data-type="field" value="Insira a imagem aqui" id="field6" required="required"></dd>
                        </dl>

<dl><dt>Titulo do tópico:</dt>
                            <dd><input type="text" data-type="field" value="Título" id="field2" required="required"></dd>
                        </dl>

<dl><dt>Fórum</dt>
                            <dd><input type="text" data-type="field" value="Insira o link de seu Fórum" id="field3" required="required"></dd>
                        </dl>

<dl>
                            <dt>Plataforma</dt>
                            <dd><select data-type="field" id="field4"><option value="Phpbb2">Phpbb2</option><option value="Phpbb3">Phpbb3</option><option value="Punbb">Punbb</option><option value="Invision">Invision</option></select></dd>
                        </dl>

<dl>
                            <dt>Descrição do Suporte</dt>
                            <dd><textarea data-type="field" id="field5" required="required"></textarea></dd>
                        </dl>


                <input type="hidden" name="f" value="8">
                <input type="hidden" name="subject" value="O script não enviou o título" template="[Suporte Js] {field2} [{field4}]">
                <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">[center][h2][b][size=24][color=#ff0000]{field2}[/color][/size][/b][/h2][/center]
[center][img]{field6}[/img][/center]
[b]~Fórum:[/b]{field3}.
[b]~Plataforma:[/b]{field4}.
[b]~Descrição do Suporte:[/b]{field5}</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>

Olá!

Vamos por partes, aqui está o Formulário - CSS:

Código:

    <div id="main-content"><div style="height:8px"></div><style type="text/css">
          #form-send, .form-info h3 {
          background: #fcfcfc;
          border: 1px solid #ddd;
          -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          border-radius: 2px;
          }
          #form-send select, .form-info h3 {
          font: 16px bold arial, tahoma, georgia;
          }
          .form-info h3 {padding: 3px;font-weight: bold;text-align: center;}
          #form-send select {
          min-width: 150px;
          padding: 4px;
          cursor: pointer;
          outline: none;
          border: 1px solid #e0e0e0;
          background: white;
          }
          .warn {
          background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
          border: 1px solid #e599aa;
          margin: 3px 0;
          color: #80001c;
          padding: 3px;
          }
          fieldset.form-div dt {
          font: 15px bold arial, tahoma, georgia;
          padding: 5px 0;
          vertical-align: top;
          width: 13em;
          }
          fieldset.form-div dt, fieldset.form-div dd {
          display: inline-block;
          }
          fieldset.form-div dd {width: 75%;}
          fieldset.form-div dl:nth-child(odd) {
          background: #f5f8fa !important;
          }
          fieldset.form-div dl:nth-child(even) {
          background: #fff;
          }
          fieldset.form-div input[type="text"] {
          -moz-border-radius: 1px;
          -webkit-border-radius: 1px;
          border-radius: 1px;
          outline: none;
          border: 1px solid #f0f0f0;
          padding: 5px;
          }
          #countitle {
          background: white;
          color: #D60B8C;
          border: 1px solid #e0e0e0;
          padding: 5px;
          border-radius: 3px;
          }
          fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
          fieldset.form-div dl:after {
          clear: both;
          content: '.';
          display: block;
          height: 0px;
          visibility: hidden;
          }
          #form-send .area {position: relative;}
          #form-send .description {
          z-index: 3;
          top: 0;
          right: 0;
          width: 25%;
          position: absolute;
          background: white;
          line-height: 18px;
          color: #000000;
          font-family: Calibri, sans-serif;
          font-size: 13px;
          font-style: normal;
          font-variant: normal;
          font-weight: normal;
          padding: 5px;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          border: 1px solid silver;
          }
          #form-send .area .buttons {
          -moz-background-clip: padding;
          -moz-border-radius: 3px 3px 0 0;
          -moz-user-select: none;
          -ms-user-select: none;
          -webkit-background-clip: padding-box;
          -webkit-border-radius: 3px 3px 0 0;
          -webkit-user-select: none;
          background: #f7f7f7;
          background-clip: padding-box;
          border: 1px solid silver;
          border-radius: 3px 3px 0 0;
          line-height: 0;
          width: 70%;
          overflow: hidden;
          padding: 3px 5px 2px;
          }
          #form-send .area .buttons .button {
          background: white;
          cursor: pointer;
          outline: none;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          border: 1px solid #e0e0e0;
          padding: 3px;
          }
          #form-send .area .buttons .button:hover {border-color: #707070;}
          #form-send .textarea_nc #textarea {
          min-height: 200px;
          color: #111;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 13px;
          overflow: auto;
          border: 0;
          outline: none;
          width: 100%;
          }
          #form-send .btns {
          background: #f5f5f5;
          border-top: 1px solid #d7d7d7;
          padding: 10px;
          text-align: center;
          }
          #form-send .area .textarea_nc {
          background: white;
          min-height: 200px;
          cursor: se-resize;
          -moz-border-radius: 0 0 3px 3px;
          -webkit-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
          overflow: hidden;
          padding: 3px 5px 2px;
          border: 1px solid silver;
          border-top: 0;
          width: 70%;
          }
        </style>
        <div class="form-info">
          <h3>Formulario de suporte - CSS</h3><br>
          <div class="warn" style="display: none;">
            É necessário preencher todos os campos em branco.
          </div>
        </div>
        <div id="form-send">
          <fieldset class="form-div"> 
          <dl><dt>
          <label>Imagem do resultado:</label></dt>
          <dd>
            Largura <input type="text" style="width: 30px" id="largura" value="300">px <b>x</b> Altura <input type="text" style="width: 30px" id="altura" value="200">px<br><br>
            <input type="text" style="clear: both;width: 400px;" id="img-t" value="http://2img.net/i/fa/empty.gif"><br>
            <img id="prev-img" style="display: none;">
          </dd>
          </dl>
          <dl><dt>
          <label>Título do tópico:</label></dt>
          <dd>
            <input type="text" style="clear: both;width: 400px;" id="titulo" placeholder="Título"> <div id="countitle" style="display: none;"></div>
          </dd>
          </dl>
          <dl><dt>
          <label>Endereço do fórum:</label></dt>
          <dd>
            <input type="text" style="clear: both;width: 400px;" id="autor" placeholder="http://">
          </dd>
          </dl>
          <dl><dt>
          <label>Funcionalidade:</label></dt>
            <dd>
                                <select class="inputbox" id="funcionalidade">
                                <option value="PhpBB3">PhpBB3</option>
                                <option value="PunBB">PunBB</option>
                                <option value="PhpBB2">PhpBB2</option>
                                <option value="Invision">Invision</option>
                                <option value="Todas as versões">Todas as versões</option>
                                </select>
            </dd>
          </dl>
          <dl><dt>
          <label>Descrição do suporte:</label></dt>
          <dd>
            <div class="area">
            <div class="buttons">
              <button class="button" onclick="bbcode_tag('[b]','[/b]')" type="button" id="addbbcode0" title="Negrito"><img src="http://imgur.com/z2xtYUE.png" alt="Negrito" title="Negrito"></button>
              <button class="button" onclick="bbcode_tag('[i]','[/i]')" type="button" id="addbbcode2" title="Itálico"><img src="http://imgur.com/EcEpCJ9.png" alt="Itálico" title="Itálico"></button>
              <button class="button" onclick="bbcode_tag('[u]','[/u]')" type="button" id="addbbcode4" title="Underline"><img src="http://imgur.com/i6Ergr1.png" alt="Underline" title="Underline"></button>
              <button class="button" onclick="bbcode_tag('[strike]','[/strike]')" type="button" id="addbbcode5" title="Strike"><img src="http://i.imgur.com/hWWoJSN.png" alt="Strike" title="Strike"></button>
              <button class="button" onclick="bbcode_tag('[left]','[/left]')" type="button" id="addbbcode52" title="Esquerda"><img src="http://2img.net/i/fa/wysiwyg/text_align_left.png" alt="Esquerda" title="Esquerda"></button>
              <button class="button" onclick="bbcode_tag('[center]','[/center]')" type="button" id="addbbcode30" title="Centralizar"><img src="http://2img.net/i/fa/wysiwyg/text_align_center.png" alt="Centralizar" title="Centralizar"></button>
              <button class="button" onclick="bbcode_tag('[right]','[/right]')" type="button" id="addbbcode32" title="Direita"><img src="http://2img.net/i/fa/wysiwyg/text_align_right.png" alt="Direita" title="Direita"></button>
              <button class="button" onclick="bbcode_tag('[justify]','[/justify]')" type="button" id="addbbcode33" title="Justificado"><img src="http://2img.net/i/fa/wysiwyg/text_align_justify.png" alt="Justificado" title="Justificado"></button>
              <button class="button" onclick="bbcode_tag('[code]','[/code]')" type="button" id="addbbcode41" title="code"><img src="http://i.imgur.com/LEJ7qoj.png" alt="Code" title="Code"></button>
              <button class="button" onclick="bbcode_tag('[list][*]','[/list]')" type="button" id="addbbcode10" title="-Lista"><img src="http://2img.net/i/fa/wysiwyg/text_list_bullets.png" alt="-Lista" title="-Lista"></button>
              <button class="button" onclick="bbcode_tag('[list=1][*]','[/list]')" type="button" id="addbbcode12" title="Lista ordenada"><img src="http://2img.net/i/fa/wysiwyg/text_list_numbers.png" alt="Lista ordenada" title="Lista ordenada"></button>
              <button class="button" onclick="bbcode_tag('[img]','[/img]')" type="button" id="addbbcode14" title="Imagem"><img src="http://2img.net/i/fa/wysiwyg/picture.png" alt="Imagem" title="Imagem"></button>
              <button class="button" onclick="bbcode_tag('[url=','][/url]')" type="button" id="addbbcode16" title="Link"><img src="http://2img.net/i/fa/wysiwyg/link.png" alt="Link" title="Link"></button>
            </div>
            <div class="textarea_nc">
              <textarea id="textarea" class="inputbox"></textarea>
            </div>
            <div class="description">
              1. O seu tutorial será avaliado pela staff antes de ser aprovado.<br><br>
              2. Uma boa ortografia e a ilustração com imagens facilita o entendimento do seu tutorial.<br><br>
              3. Sempre coloque os créditos do autor do tutorial, pois assim evitaremos problemas futuros.
            </div>
            </div>
          </dd>
          </dl>
          </fieldset>
            <div class="btns"><input type="button" id="envia_form" onclick="enviaForm()" value="Enviar"></div>
        </div>
        <script type="text/javascript">
        $(document).ready(function() {
        $('#titulo').keyup(function() {
            var tvalue = document.getElementById('titulo').value.length;
            var icnt = document.getElementById('countitle');
            if(tvalue < 10 && tvalue > 0) {
              var l = tvalue-10;
              icnt.style.display = 'inline',
              icnt.innerHTML = 'O título necessita mais '+l*-1+' caracteres';
            }
            else {
              icnt.style.display = 'none',
              icnt.innerHTML = '';
            }
        });
        $('#img-t').keyup(function() {
          var _value = $(this).val();
          var px = {
              altura: $('#altura').val(),
              largura: $('#largura').val()
          }
          if (/png|jpg|jpeg|gif/ig.test(_value)) {
                  $('#prev-img').attr('src',_value).css('height',px.altura).css('width',px.largura).css('display','block');
          } else {
                  $('#prev-img').removeAttr('src').css('display','none');
          }
        });
        });
        function enviaForm() {
          if($('#largura').val().length !== 0 && $('#altura').val().length !== 0 && $('#img-t').val().length !== 0 && $('#titulo').val().length !== 0 && $('#autor').val().length !== 0 && $('#funcionalidade').val().length !== 0 && $('#textarea').val().length !== 0) {
          var form = {
              largura: $('#largura').val(),
              altura: $('#altura').val(),
              imagem: $('#img-t').val(),
              titulo: $('#titulo').val(),
              autor: $('#autor').val(),
              funct: $('#funcionalidade').val(),
              texto: $('#textarea').val()
          }
          var formfinal = '[center][img(' + form.largura + 'px,' + form.altura + 'px)]' + form.imagem + '[/img][/center]\n' +
                          '[b]Título do tópico:[/b] ' + form.titulo + '\n' +
                          '[b]Endereço do fórum:[/b] ' + form.autor + '\n' +
                          '[b]Funcionalidade:[/b] ' + form.funct + '\n\n' +
                          '[b]Descrição do suporte:[/b] ' + form.texto;
          $('#form-send').html(
                '<br />' +
                '<br />' +
                '<center>' +
                '  <img src="http://www.cosmeticchoice.com.au/image/loading.gif" />' +
                '  <br />' +
                '  <span style="color: #82C1ED;font-size: 15px;font-weight: bold;">Carregando...</span>' +
                '</center>'
          );
          $.post('/post', {
                message: formfinal,
                f: '7',
                mode: 'newtopic',
                post: 'submit',
                subject: form.titulo
          }).done(function(e) {
            var href = $(e).find('.message a:first').attr('href');
            location.href = href;
          }).fail(function() {
            alert("Falha ao enviar");
            location.href = location.pathname;
          });
          } else {
            $('.warn').slideUp(1);
            $('.warn').slideDown(500);
          }
        }
        function bbcode_tag(o,c) {
        var t = jQuery('#textarea');
        t.val(t.val().substring(0,t[0].selectionStart)+o+t.val().substring(t[0].selectionStart,t[0].selectionEnd)+c+t.val().substring(t[0].selectionEnd,t.val().length)).focus();
        }
        </script></div>

Diga me se devo prosseguir com os outros.

Atenciosamente.

Raffy escreveu:Olá!

Vamos por partes, aqui está o Formulário - CSS:

Código:

    <div id="main-content"><div style="height:8px"></div><style type="text/css">
          #form-send, .form-info h3 {
          background: #fcfcfc;
          border: 1px solid #ddd;
          -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          border-radius: 2px;
          }
          #form-send select, .form-info h3 {
          font: 16px bold arial, tahoma, georgia;
          }
          .form-info h3 {padding: 3px;font-weight: bold;text-align: center;}
          #form-send select {
          min-width: 150px;
          padding: 4px;
          cursor: pointer;
          outline: none;
          border: 1px solid #e0e0e0;
          background: white;
          }
          .warn {
          background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
          border: 1px solid #e599aa;
          margin: 3px 0;
          color: #80001c;
          padding: 3px;
          }
          fieldset.form-div dt {
          font: 15px bold arial, tahoma, georgia;
          padding: 5px 0;
          vertical-align: top;
          width: 13em;
          }
          fieldset.form-div dt, fieldset.form-div dd {
          display: inline-block;
          }
          fieldset.form-div dd {width: 75%;}
          fieldset.form-div dl:nth-child(odd) {
          background: #f5f8fa !important;
          }
          fieldset.form-div dl:nth-child(even) {
          background: #fff;
          }
          fieldset.form-div input[type="text"] {
          -moz-border-radius: 1px;
          -webkit-border-radius: 1px;
          border-radius: 1px;
          outline: none;
          border: 1px solid #f0f0f0;
          padding: 5px;
          }
          #countitle {
          background: white;
          color: #D60B8C;
          border: 1px solid #e0e0e0;
          padding: 5px;
          border-radius: 3px;
          }
          fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
          fieldset.form-div dl:after {
          clear: both;
          content: '.';
          display: block;
          height: 0px;
          visibility: hidden;
          }
          #form-send .area {position: relative;}
          #form-send .description {
          z-index: 3;
          top: 0;
          right: 0;
          width: 25%;
          position: absolute;
          background: white;
          line-height: 18px;
          color: #000000;
          font-family: Calibri, sans-serif;
          font-size: 13px;
          font-style: normal;
          font-variant: normal;
          font-weight: normal;
          padding: 5px;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          border: 1px solid silver;
          }
          #form-send .area .buttons {
          -moz-background-clip: padding;
          -moz-border-radius: 3px 3px 0 0;
          -moz-user-select: none;
          -ms-user-select: none;
          -webkit-background-clip: padding-box;
          -webkit-border-radius: 3px 3px 0 0;
          -webkit-user-select: none;
          background: #f7f7f7;
          background-clip: padding-box;
          border: 1px solid silver;
          border-radius: 3px 3px 0 0;
          line-height: 0;
          width: 70%;
          overflow: hidden;
          padding: 3px 5px 2px;
          }
          #form-send .area .buttons .button {
          background: white;
          cursor: pointer;
          outline: none;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          border: 1px solid #e0e0e0;
          padding: 3px;
          }
          #form-send .area .buttons .button:hover {border-color: #707070;}
          #form-send .textarea_nc #textarea {
          min-height: 200px;
          color: #111;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 13px;
          overflow: auto;
          border: 0;
          outline: none;
          width: 100%;
          }
          #form-send .btns {
          background: #f5f5f5;
          border-top: 1px solid #d7d7d7;
          padding: 10px;
          text-align: center;
          }
          #form-send .area .textarea_nc {
          background: white;
          min-height: 200px;
          cursor: se-resize;
          -moz-border-radius: 0 0 3px 3px;
          -webkit-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
          overflow: hidden;
          padding: 3px 5px 2px;
          border: 1px solid silver;
          border-top: 0;
          width: 70%;
          }
        </style>
        <div class="form-info">
          <h3>Formulario de suporte - CSS</h3><br>
          <div class="warn" style="display: none;">
            É necessário preencher todos os campos em branco.
          </div>
        </div>
        <div id="form-send">
          <fieldset class="form-div">  
          <dl><dt>
          <label>Imagem do resultado:</label></dt>
          <dd>
            Largura <input type="text" style="width: 30px" id="largura" value="300">px <b>x</b> Altura <input type="text" style="width: 30px" id="altura" value="200">px<br><br>
            <input type="text" style="clear: both;width: 400px;" id="img-t" value="http://2img.net/i/fa/empty.gif"><br>
            <img id="prev-img" style="display: none;">
          </dd>
          </dl>
          <dl><dt>
          <label>Título do tópico:</label></dt>
          <dd>
            <input type="text" style="clear: both;width: 400px;" id="titulo" placeholder="Título"> <div id="countitle" style="display: none;"></div>
          </dd>
          </dl>
          <dl><dt>
          <label>Endereço do fórum:</label></dt>
          <dd>
            <input type="text" style="clear: both;width: 400px;" id="autor" placeholder="http://">
          </dd>
          </dl>
          <dl><dt>
          <label>Funcionalidade:</label></dt>
            <dd>
                                <select class="inputbox" id="funcionalidade">
                                <option value="PhpBB3">PhpBB3</option>
                                <option value="PunBB">PunBB</option>
                                <option value="PhpBB2">PhpBB2</option>
                                <option value="Invision">Invision</option>
                                <option value="Todas as versões">Todas as versões</option>
                                </select>
            </dd>
          </dl>
          <dl><dt>
          <label>Descrição do suporte:</label></dt>
          <dd>
            <div class="area">
            <div class="buttons">
              <button class="button" onclick="bbcode_tag('[b]','[/b]')" type="button" id="addbbcode0" title="Negrito"><img src="http://imgur.com/z2xtYUE.png" alt="Negrito" title="Negrito"></button>
              <button class="button" onclick="bbcode_tag('[i]','[/i]')" type="button" id="addbbcode2" title="Itálico"><img src="http://imgur.com/EcEpCJ9.png" alt="Itálico" title="Itálico"></button>
              <button class="button" onclick="bbcode_tag('[u]','[/u]')" type="button" id="addbbcode4" title="Underline"><img src="http://imgur.com/i6Ergr1.png" alt="Underline" title="Underline"></button>
              <button class="button" onclick="bbcode_tag('[strike]','[/strike]')" type="button" id="addbbcode5" title="Strike"><img src="http://i.imgur.com/hWWoJSN.png" alt="Strike" title="Strike"></button>
              <button class="button" onclick="bbcode_tag('[left]','[/left]')" type="button" id="addbbcode52" title="Esquerda"><img src="http://2img.net/i/fa/wysiwyg/text_align_left.png" alt="Esquerda" title="Esquerda"></button>
              <button class="button" onclick="bbcode_tag('[center]','[/center]')" type="button" id="addbbcode30" title="Centralizar"><img src="http://2img.net/i/fa/wysiwyg/text_align_center.png" alt="Centralizar" title="Centralizar"></button>
              <button class="button" onclick="bbcode_tag('[right]','[/right]')" type="button" id="addbbcode32" title="Direita"><img src="http://2img.net/i/fa/wysiwyg/text_align_right.png" alt="Direita" title="Direita"></button>
              <button class="button" onclick="bbcode_tag('[justify]','[/justify]')" type="button" id="addbbcode33" title="Justificado"><img src="http://2img.net/i/fa/wysiwyg/text_align_justify.png" alt="Justificado" title="Justificado"></button>
              <button class="button" onclick="bbcode_tag('[code]','[/code]')" type="button" id="addbbcode41" title="code"><img src="http://i.imgur.com/LEJ7qoj.png" alt="Code" title="Code"></button>
              <button class="button" onclick="bbcode_tag('[list][*]','[/list]')" type="button" id="addbbcode10" title="-Lista"><img src="http://2img.net/i/fa/wysiwyg/text_list_bullets.png" alt="-Lista" title="-Lista"></button>
              <button class="button" onclick="bbcode_tag('[list=1][*]','[/list]')" type="button" id="addbbcode12" title="Lista ordenada"><img src="http://2img.net/i/fa/wysiwyg/text_list_numbers.png" alt="Lista ordenada" title="Lista ordenada"></button>
              <button class="button" onclick="bbcode_tag('[img]','[/img]')" type="button" id="addbbcode14" title="Imagem"><img src="http://2img.net/i/fa/wysiwyg/picture.png" alt="Imagem" title="Imagem"></button>
              <button class="button" onclick="bbcode_tag('[url=','][/url]')" type="button" id="addbbcode16" title="Link"><img src="http://2img.net/i/fa/wysiwyg/link.png" alt="Link" title="Link"></button>
            </div>
            <div class="textarea_nc">
              <textarea id="textarea" class="inputbox"></textarea>
            </div>
            <div class="description">
              1. O seu tutorial será avaliado pela staff antes de ser aprovado.<br><br>
              2. Uma boa ortografia e a ilustração com imagens facilita o entendimento do seu tutorial.<br><br>
              3. Sempre coloque os créditos do autor do tutorial, pois assim evitaremos problemas futuros.
            </div>
            </div>
          </dd>
          </dl>
          </fieldset>
            <div class="btns"><input type="button" id="envia_form" onclick="enviaForm()" value="Enviar"></div>
        </div>
        <script type="text/javascript">
        $(document).ready(function() {
        $('#titulo').keyup(function() {
            var tvalue = document.getElementById('titulo').value.length;
            var icnt = document.getElementById('countitle');
            if(tvalue < 10 && tvalue > 0) {
              var l = tvalue-10;
              icnt.style.display = 'inline',
              icnt.innerHTML = 'O título necessita mais '+l*-1+' caracteres';
            }
            else {
              icnt.style.display = 'none',
              icnt.innerHTML = '';
            }
        });
        $('#img-t').keyup(function() {
          var _value = $(this).val();
          var px = {
              altura: $('#altura').val(),
              largura: $('#largura').val()
          }
          if (/png|jpg|jpeg|gif/ig.test(_value)) {
                  $('#prev-img').attr('src',_value).css('height',px.altura).css('width',px.largura).css('display','block');
          } else {
                  $('#prev-img').removeAttr('src').css('display','none');
          }
        });
        });
        function enviaForm() {
          if($('#largura').val().length !== 0 && $('#altura').val().length !== 0 && $('#img-t').val().length !== 0 && $('#titulo').val().length !== 0 && $('#autor').val().length !== 0 && $('#funcionalidade').val().length !== 0 && $('#textarea').val().length !== 0) {
          var form = {
              largura: $('#largura').val(),
              altura: $('#altura').val(),
              imagem: $('#img-t').val(),
              titulo: $('#titulo').val(),
              autor: $('#autor').val(),
              funct: $('#funcionalidade').val(),
              texto: $('#textarea').val()
          }
          var formfinal = '[center][img(' + form.largura + 'px,' + form.altura + 'px)]' + form.imagem + '[/img][/center]\n' +
                          '[b]Título do tópico:[/b] ' + form.titulo + '\n' +
                          '[b]Endereço do fórum:[/b] ' + form.autor + '\n' +
                          '[b]Funcionalidade:[/b] ' + form.funct + '\n\n' +
                          '[b]Descrição do suporte:[/b] ' + form.texto;
          $('#form-send').html(
                '<br />' +
                '<br />' +
                '<center>' +
                '  <img src="http://www.cosmeticchoice.com.au/image/loading.gif" />' +
                '  <br />' +
                '  <span style="color: #82C1ED;font-size: 15px;font-weight: bold;">Carregando...</span>' +
                '</center>'
          );
          $.post('/post', {
                message: formfinal,
                f: '7',
                mode: 'newtopic',
                post: 'submit',
                subject: form.titulo
          }).done(function(e) {
            var href = $(e).find('.message a:first').attr('href');
            location.href = href;
          }).fail(function() {
            alert("Falha ao enviar");
            location.href = location.pathname;
          });
          } else {
            $('.warn').slideUp(1);
            $('.warn').slideDown(500);
          }
        }
        function bbcode_tag(o,c) {
        var t = jQuery('#textarea');
        t.val(t.val().substring(0,t[0].selectionStart)+o+t.val().substring(t[0].selectionStart,t[0].selectionEnd)+c+t.val().substring(t[0].selectionEnd,t.val().length)).focus();
        }
        </script></div>

Diga me se devo prosseguir com os outros.

Atenciosamente.

Opa.. Pode prosseguir sim

Olá!

Aqui estão:

Formulário jQuery/Javascript:

Código:

        <div id="main-content"><div style="height:8px"></div><style type="text/css">
              #form-send, .form-info h3 {
              background: #fcfcfc;
              border: 1px solid #ddd;
              -moz-border-radius: 2px;
              -webkit-border-radius: 2px;
              border-radius: 2px;
              }
              #form-send select, .form-info h3 {
              font: 16px bold arial, tahoma, georgia;
              }
              .form-info h3 {padding: 3px;font-weight: bold;text-align: center;}
              #form-send select {
              min-width: 150px;
              padding: 4px;
              cursor: pointer;
              outline: none;
              border: 1px solid #e0e0e0;
              background: white;
              }
              .warn {
              background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
              border: 1px solid #e599aa;
              margin: 3px 0;
              color: #80001c;
              padding: 3px;
              }
              fieldset.form-div dt {
              font: 15px bold arial, tahoma, georgia;
              padding: 5px 0;
              vertical-align: top;
              width: 13em;
              }
              fieldset.form-div dt, fieldset.form-div dd {
              display: inline-block;
              }
              fieldset.form-div dd {width: 75%;}
              fieldset.form-div dl:nth-child(odd) {
              background: #f5f8fa !important;
              }
              fieldset.form-div dl:nth-child(even) {
              background: #fff;
              }
              fieldset.form-div input[type="text"] {
              -moz-border-radius: 1px;
              -webkit-border-radius: 1px;
              border-radius: 1px;
              outline: none;
              border: 1px solid #f0f0f0;
              padding: 5px;
              }
              #countitle {
              background: white;
              color: #D60B8C;
              border: 1px solid #e0e0e0;
              padding: 5px;
              border-radius: 3px;
              }
              fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
              fieldset.form-div dl:after {
              clear: both;
              content: '.';
              display: block;
              height: 0px;
              visibility: hidden;
              }
              #form-send .area {position: relative;}
              #form-send .description {
              z-index: 3;
              top: 0;
              right: 0;
              width: 25%;
              position: absolute;
              background: white;
              line-height: 18px;
              color: #000000;
              font-family: Calibri, sans-serif;
              font-size: 13px;
              font-style: normal;
              font-variant: normal;
              font-weight: normal;
              padding: 5px;
              -moz-border-radius: 3px;
              -webkit-border-radius: 3px;
              border-radius: 3px;
              border: 1px solid silver;
              }
              #form-send .area .buttons {
              -moz-background-clip: padding;
              -moz-border-radius: 3px 3px 0 0;
              -moz-user-select: none;
              -ms-user-select: none;
              -webkit-background-clip: padding-box;
              -webkit-border-radius: 3px 3px 0 0;
              -webkit-user-select: none;
              background: #f7f7f7;
              background-clip: padding-box;
              border: 1px solid silver;
              border-radius: 3px 3px 0 0;
              line-height: 0;
              width: 70%;
              overflow: hidden;
              padding: 3px 5px 2px;
              }
              #form-send .area .buttons .button {
              background: white;
              cursor: pointer;
              outline: none;
              -moz-border-radius: 3px;
              -webkit-border-radius: 3px;
              border-radius: 3px;
              border: 1px solid #e0e0e0;
              padding: 3px;
              }
              #form-send .area .buttons .button:hover {border-color: #707070;}
              #form-send .textarea_nc #textarea {
              min-height: 200px;
              color: #111;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 13px;
              overflow: auto;
              border: 0;
              outline: none;
              width: 100%;
              }
              #form-send .btns {
              background: #f5f5f5;
              border-top: 1px solid #d7d7d7;
              padding: 10px;
              text-align: center;
              }
              #form-send .area .textarea_nc {
              background: white;
              min-height: 200px;
              cursor: se-resize;
              -moz-border-radius: 0 0 3px 3px;
              -webkit-border-radius: 0 0 3px 3px;
              border-radius: 0 0 3px 3px;
              overflow: hidden;
              padding: 3px 5px 2px;
              border: 1px solid silver;
              border-top: 0;
              width: 70%;
              }
            </style>
            <div class="form-info">
              <h3>Formulário de suporte - JavaScript & jQuery</h3><br>
              <div class="warn" style="display: none;">
                É necessário preencher todos os campos em branco.
              </div>
            </div>
            <div id="form-send">
              <fieldset class="form-div">
              <dl><dt>
              <label>Imagem do resultado:</label></dt>
              <dd>
                Largura <input type="text" style="width: 30px" id="largura" value="300">px <b>x</b> Altura <input type="text" style="width: 30px" id="altura" value="200">px<br><br>
                <input type="text" style="clear: both;width: 400px;" id="img-t" value="http://2img.net/i/fa/empty.gif"><br>
                <img id="prev-img" style="display: none;">
              </dd>
              </dl>
              <dl><dt>
              <label>Título do tópico:</label></dt>
              <dd>
                <input type="text" style="clear: both;width: 400px;" id="titulo" placeholder="Título"> <div id="countitle" style="display: none;"></div>
              </dd>
              </dl>
              <dl><dt>
              <label>Endereço do fórum:</label></dt>
              <dd>
                <input type="text" style="clear: both;width: 400px;" id="autor" placeholder="http://">
              </dd>
              </dl>
              <dl><dt>
              <label>Funcionalidade:</label></dt>
                <dd>
                                    <select class="inputbox" id="funcionalidade">
                                    <option value="PhpBB3">PhpBB3</option>
                                    <option value="PunBB">PunBB</option>
                                    <option value="PhpBB2">PhpBB2</option>
                                    <option value="Invision">Invision</option>
                                    <option value="Todas as versões">Todas as versões</option>
                                    </select>
                </dd>
              </dl>
              <dl><dt>
              <label>Descrição do suporte:</label></dt>
              <dd>
                <div class="area">
                <div class="buttons">
                  <button class="button" onclick="bbcode_tag('[b]','[/b]')" type="button" id="addbbcode0" title="Negrito"><img src="http://imgur.com/z2xtYUE.png" alt="Negrito" title="Negrito"></button>
                  <button class="button" onclick="bbcode_tag('[i]','[/i]')" type="button" id="addbbcode2" title="Itálico"><img src="http://imgur.com/EcEpCJ9.png" alt="Itálico" title="Itálico"></button>
                  <button class="button" onclick="bbcode_tag('[u]','[/u]')" type="button" id="addbbcode4" title="Underline"><img src="http://imgur.com/i6Ergr1.png" alt="Underline" title="Underline"></button>
                  <button class="button" onclick="bbcode_tag('[strike]','[/strike]')" type="button" id="addbbcode5" title="Strike"><img src="http://i.imgur.com/hWWoJSN.png" alt="Strike" title="Strike"></button>
                  <button class="button" onclick="bbcode_tag('[left]','[/left]')" type="button" id="addbbcode52" title="Esquerda"><img src="http://2img.net/i/fa/wysiwyg/text_align_left.png" alt="Esquerda" title="Esquerda"></button>
                  <button class="button" onclick="bbcode_tag('[center]','[/center]')" type="button" id="addbbcode30" title="Centralizar"><img src="http://2img.net/i/fa/wysiwyg/text_align_center.png" alt="Centralizar" title="Centralizar"></button>
                  <button class="button" onclick="bbcode_tag('[right]','[/right]')" type="button" id="addbbcode32" title="Direita"><img src="http://2img.net/i/fa/wysiwyg/text_align_right.png" alt="Direita" title="Direita"></button>
                  <button class="button" onclick="bbcode_tag('[justify]','[/justify]')" type="button" id="addbbcode33" title="Justificado"><img src="http://2img.net/i/fa/wysiwyg/text_align_justify.png" alt="Justificado" title="Justificado"></button>
                  <button class="button" onclick="bbcode_tag('[code]','[/code]')" type="button" id="addbbcode41" title="code"><img src="http://i.imgur.com/LEJ7qoj.png" alt="Code" title="Code"></button>
                  <button class="button" onclick="bbcode_tag('[list][*]','[/list]')" type="button" id="addbbcode10" title="-Lista"><img src="http://2img.net/i/fa/wysiwyg/text_list_bullets.png" alt="-Lista" title="-Lista"></button>
                  <button class="button" onclick="bbcode_tag('[list=1][*]','[/list]')" type="button" id="addbbcode12" title="Lista ordenada"><img src="http://2img.net/i/fa/wysiwyg/text_list_numbers.png" alt="Lista ordenada" title="Lista ordenada"></button>
                  <button class="button" onclick="bbcode_tag('[img]','[/img]')" type="button" id="addbbcode14" title="Imagem"><img src="http://2img.net/i/fa/wysiwyg/picture.png" alt="Imagem" title="Imagem"></button>
                  <button class="button" onclick="bbcode_tag('[url=','][/url]')" type="button" id="addbbcode16" title="Link"><img src="http://2img.net/i/fa/wysiwyg/link.png" alt="Link" title="Link"></button>
                </div>
                <div class="textarea_nc">
                  <textarea id="textarea" class="inputbox"></textarea>
                </div>
                <div class="description">
                  1. O seu tutorial será avaliado pela staff antes de ser aprovado.<br><br>
                  2. Uma boa ortografia e a ilustração com imagens facilita o entendimento do seu tutorial.<br><br>
                  3. Sempre coloque os créditos do autor do tutorial, pois assim evitaremos problemas futuros.
                </div>
                </div>
              </dd>
              </dl>
              </fieldset>
                <div class="btns"><input type="button" id="envia_form" onclick="enviaForm()" value="Enviar"></div>
            </div>
            <script type="text/javascript">
            $(document).ready(function() {
            $('#titulo').keyup(function() {
                var tvalue = document.getElementById('titulo').value.length;
                var icnt = document.getElementById('countitle');
                if(tvalue < 10 && tvalue > 0) {
                  var l = tvalue-10;
                  icnt.style.display = 'inline',
                  icnt.innerHTML = 'O título necessita mais '+l*-1+' caracteres';
                }
                else {
                  icnt.style.display = 'none',
                  icnt.innerHTML = '';
                }
            });
            $('#img-t').keyup(function() {
              var _value = $(this).val();
              var px = {
                  altura: $('#altura').val(),
                  largura: $('#largura').val()
              }
              if (/png|jpg|jpeg|gif/ig.test(_value)) {
                      $('#prev-img').attr('src',_value).css('height',px.altura).css('width',px.largura).css('display','block');
              } else {
                      $('#prev-img').removeAttr('src').css('display','none');
              }
            });
            });
            function enviaForm() {
              if($('#largura').val().length !== 0 && $('#altura').val().length !== 0 && $('#img-t').val().length !== 0 && $('#titulo').val().length !== 0 && $('#autor').val().length !== 0 && $('#funcionalidade').val().length !== 0 && $('#textarea').val().length !== 0) {
              var form = {
                  largura: $('#largura').val(),
                  altura: $('#altura').val(),
                  imagem: $('#img-t').val(),
                  titulo: $('#titulo').val(),
                  autor: $('#autor').val(),
                  funct: $('#funcionalidade').val(),
                  texto: $('#textarea').val()
              }
              var formfinal = '[center][img(' + form.largura + 'px,' + form.altura + 'px)]' + form.imagem + '[/img][/center]\n' +
                              '[b]Título do tópico:[/b] ' + form.titulo + '\n' +
                              '[b]Endereço do fórum:[/b] ' + form.autor + '\n' +
                              '[b]Funcionalidade:[/b] ' + form.funct + '\n\n' +
                              '[b]Descrição do suporte:[/b] ' + form.texto;
              $('#form-send').html(
                    '<br />' +
                    '<br />' +
                    '<center>' +
                    '  <img src="http://www.cosmeticchoice.com.au/image/loading.gif" />' +
                    '  <br />' +
                    '  <span style="color: #82C1ED;font-size: 15px;font-weight: bold;">Carregando...</span>' +
                    '</center>'
              );
              $.post('/post', {
                    message: formfinal,
                    f: '8',
                    mode: 'newtopic',
                    post: 'submit',
                    subject: form.titulo
              }).done(function(e) {
                var href = $(e).find('.message a:first').attr('href');
                location.href = href;
              }).fail(function() {
                alert("Falha ao enviar");
                location.href = location.pathname;
              });
              } else {
                $('.warn').slideUp(1);
                $('.warn').slideDown(500);
              }
            }
            function bbcode_tag(o,c) {
            var t = jQuery('#textarea');
            t.val(t.val().substring(0,t[0].selectionStart)+o+t.val().substring(t[0].selectionStart,t[0].selectionEnd)+c+t.val().substring(t[0].selectionEnd,t.val().length)).focus();
            }
            </script></div>

Formulário - HTML:

Código:

        <div id="main-content"><div style="height:8px"></div><style type="text/css">
              #form-send, .form-info h3 {
              background: #fcfcfc;
              border: 1px solid #ddd;
              -moz-border-radius: 2px;
              -webkit-border-radius: 2px;
              border-radius: 2px;
              }
              #form-send select, .form-info h3 {
              font: 16px bold arial, tahoma, georgia;
              }
              .form-info h3 {padding: 3px;font-weight: bold;text-align: center;}
              #form-send select {
              min-width: 150px;
              padding: 4px;
              cursor: pointer;
              outline: none;
              border: 1px solid #e0e0e0;
              background: white;
              }
              .warn {
              background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
              border: 1px solid #e599aa;
              margin: 3px 0;
              color: #80001c;
              padding: 3px;
              }
              fieldset.form-div dt {
              font: 15px bold arial, tahoma, georgia;
              padding: 5px 0;
              vertical-align: top;
              width: 13em;
              }
              fieldset.form-div dt, fieldset.form-div dd {
              display: inline-block;
              }
              fieldset.form-div dd {width: 75%;}
              fieldset.form-div dl:nth-child(odd) {
              background: #f5f8fa !important;
              }
              fieldset.form-div dl:nth-child(even) {
              background: #fff;
              }
              fieldset.form-div input[type="text"] {
              -moz-border-radius: 1px;
              -webkit-border-radius: 1px;
              border-radius: 1px;
              outline: none;
              border: 1px solid #f0f0f0;
              padding: 5px;
              }
              #countitle {
              background: white;
              color: #D60B8C;
              border: 1px solid #e0e0e0;
              padding: 5px;
              border-radius: 3px;
              }
              fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
              fieldset.form-div dl:after {
              clear: both;
              content: '.';
              display: block;
              height: 0px;
              visibility: hidden;
              }
              #form-send .area {position: relative;}
              #form-send .description {
              z-index: 3;
              top: 0;
              right: 0;
              width: 25%;
              position: absolute;
              background: white;
              line-height: 18px;
              color: #000000;
              font-family: Calibri, sans-serif;
              font-size: 13px;
              font-style: normal;
              font-variant: normal;
              font-weight: normal;
              padding: 5px;
              -moz-border-radius: 3px;
              -webkit-border-radius: 3px;
              border-radius: 3px;
              border: 1px solid silver;
              }
              #form-send .area .buttons {
              -moz-background-clip: padding;
              -moz-border-radius: 3px 3px 0 0;
              -moz-user-select: none;
              -ms-user-select: none;
              -webkit-background-clip: padding-box;
              -webkit-border-radius: 3px 3px 0 0;
              -webkit-user-select: none;
              background: #f7f7f7;
              background-clip: padding-box;
              border: 1px solid silver;
              border-radius: 3px 3px 0 0;
              line-height: 0;
              width: 70%;
              overflow: hidden;
              padding: 3px 5px 2px;
              }
              #form-send .area .buttons .button {
              background: white;
              cursor: pointer;
              outline: none;
              -moz-border-radius: 3px;
              -webkit-border-radius: 3px;
              border-radius: 3px;
              border: 1px solid #e0e0e0;
              padding: 3px;
              }
              #form-send .area .buttons .button:hover {border-color: #707070;}
              #form-send .textarea_nc #textarea {
              min-height: 200px;
              color: #111;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 13px;
              overflow: auto;
              border: 0;
              outline: none;
              width: 100%;
              }
              #form-send .btns {
              background: #f5f5f5;
              border-top: 1px solid #d7d7d7;
              padding: 10px;
              text-align: center;
              }
              #form-send .area .textarea_nc {
              background: white;
              min-height: 200px;
              cursor: se-resize;
              -moz-border-radius: 0 0 3px 3px;
              -webkit-border-radius: 0 0 3px 3px;
              border-radius: 0 0 3px 3px;
              overflow: hidden;
              padding: 3px 5px 2px;
              border: 1px solid silver;
              border-top: 0;
              width: 70%;
              }
            </style>
            <div class="form-info">
              <h3>Formulário de suporte - HTML</h3><br>
              <div class="warn" style="display: none;">
                É necessário preencher todos os campos em branco.
              </div>
            </div>
            <div id="form-send">
              <fieldset class="form-div">
              <dl><dt>
              <label>Imagem do resultado:</label></dt>
              <dd>
                Largura <input type="text" style="width: 30px" id="largura" value="300">px <b>x</b> Altura <input type="text" style="width: 30px" id="altura" value="200">px<br><br>
                <input type="text" style="clear: both;width: 400px;" id="img-t" value="http://2img.net/i/fa/empty.gif"><br>
                <img id="prev-img" style="display: none;">
              </dd>
              </dl>
              <dl><dt>
              <label>Título do tópico:</label></dt>
              <dd>
                <input type="text" style="clear: both;width: 400px;" id="titulo" placeholder="Título"> <div id="countitle" style="display: none;"></div>
              </dd>
              </dl>
              <dl><dt>
              <label>Endereço do fórum:</label></dt>
              <dd>
                <input type="text" style="clear: both;width: 400px;" id="autor" placeholder="http://">
              </dd>
              </dl>
              <dl><dt>
              <label>Funcionalidade:</label></dt>
                <dd>
                                    <select class="inputbox" id="funcionalidade">
                                    <option value="PhpBB3">PhpBB3</option>
                                    <option value="PunBB">PunBB</option>
                                    <option value="PhpBB2">PhpBB2</option>
                                    <option value="Invision">Invision</option>
                                    <option value="Todas as versões">Todas as versões</option>
                                    </select>
                </dd>
              </dl>
              <dl><dt>
              <label>Descrição do suporte:</label></dt>
              <dd>
                <div class="area">
                <div class="buttons">
                  <button class="button" onclick="bbcode_tag('[b]','[/b]')" type="button" id="addbbcode0" title="Negrito"><img src="http://imgur.com/z2xtYUE.png" alt="Negrito" title="Negrito"></button>
                  <button class="button" onclick="bbcode_tag('[i]','[/i]')" type="button" id="addbbcode2" title="Itálico"><img src="http://imgur.com/EcEpCJ9.png" alt="Itálico" title="Itálico"></button>
                  <button class="button" onclick="bbcode_tag('[u]','[/u]')" type="button" id="addbbcode4" title="Underline"><img src="http://imgur.com/i6Ergr1.png" alt="Underline" title="Underline"></button>
                  <button class="button" onclick="bbcode_tag('[strike]','[/strike]')" type="button" id="addbbcode5" title="Strike"><img src="http://i.imgur.com/hWWoJSN.png" alt="Strike" title="Strike"></button>
                  <button class="button" onclick="bbcode_tag('[left]','[/left]')" type="button" id="addbbcode52" title="Esquerda"><img src="http://2img.net/i/fa/wysiwyg/text_align_left.png" alt="Esquerda" title="Esquerda"></button>
                  <button class="button" onclick="bbcode_tag('[center]','[/center]')" type="button" id="addbbcode30" title="Centralizar"><img src="http://2img.net/i/fa/wysiwyg/text_align_center.png" alt="Centralizar" title="Centralizar"></button>
                  <button class="button" onclick="bbcode_tag('[right]','[/right]')" type="button" id="addbbcode32" title="Direita"><img src="http://2img.net/i/fa/wysiwyg/text_align_right.png" alt="Direita" title="Direita"></button>
                  <button class="button" onclick="bbcode_tag('[justify]','[/justify]')" type="button" id="addbbcode33" title="Justificado"><img src="http://2img.net/i/fa/wysiwyg/text_align_justify.png" alt="Justificado" title="Justificado"></button>
                  <button class="button" onclick="bbcode_tag('[code]','[/code]')" type="button" id="addbbcode41" title="code"><img src="http://i.imgur.com/LEJ7qoj.png" alt="Code" title="Code"></button>
                  <button class="button" onclick="bbcode_tag('[list][*]','[/list]')" type="button" id="addbbcode10" title="-Lista"><img src="http://2img.net/i/fa/wysiwyg/text_list_bullets.png" alt="-Lista" title="-Lista"></button>
                  <button class="button" onclick="bbcode_tag('[list=1][*]','[/list]')" type="button" id="addbbcode12" title="Lista ordenada"><img src="http://2img.net/i/fa/wysiwyg/text_list_numbers.png" alt="Lista ordenada" title="Lista ordenada"></button>
                  <button class="button" onclick="bbcode_tag('[img]','[/img]')" type="button" id="addbbcode14" title="Imagem"><img src="http://2img.net/i/fa/wysiwyg/picture.png" alt="Imagem" title="Imagem"></button>
                  <button class="button" onclick="bbcode_tag('[url=','][/url]')" type="button" id="addbbcode16" title="Link"><img src="http://2img.net/i/fa/wysiwyg/link.png" alt="Link" title="Link"></button>
                </div>
                <div class="textarea_nc">
                  <textarea id="textarea" class="inputbox"></textarea>
                </div>
                <div class="description">
                  1. O seu tutorial será avaliado pela staff antes de ser aprovado.<br><br>
                  2. Uma boa ortografia e a ilustração com imagens facilita o entendimento do seu tutorial.<br><br>
                  3. Sempre coloque os créditos do autor do tutorial, pois assim evitaremos problemas futuros.
                </div>
                </div>
              </dd>
              </dl>
              </fieldset>
                <div class="btns"><input type="button" id="envia_form" onclick="enviaForm()" value="Enviar"></div>
            </div>
            <script type="text/javascript">
            $(document).ready(function() {
            $('#titulo').keyup(function() {
                var tvalue = document.getElementById('titulo').value.length;
                var icnt = document.getElementById('countitle');
                if(tvalue < 10 && tvalue > 0) {
                  var l = tvalue-10;
                  icnt.style.display = 'inline',
                  icnt.innerHTML = 'O título necessita mais '+l*-1+' caracteres';
                }
                else {
                  icnt.style.display = 'none',
                  icnt.innerHTML = '';
                }
            });
            $('#img-t').keyup(function() {
              var _value = $(this).val();
              var px = {
                  altura: $('#altura').val(),
                  largura: $('#largura').val()
              }
              if (/png|jpg|jpeg|gif/ig.test(_value)) {
                      $('#prev-img').attr('src',_value).css('height',px.altura).css('width',px.largura).css('display','block');
              } else {
                      $('#prev-img').removeAttr('src').css('display','none');
              }
            });
            });
            function enviaForm() {
              if($('#largura').val().length !== 0 && $('#altura').val().length !== 0 && $('#img-t').val().length !== 0 && $('#titulo').val().length !== 0 && $('#autor').val().length !== 0 && $('#funcionalidade').val().length !== 0 && $('#textarea').val().length !== 0) {
              var form = {
                  largura: $('#largura').val(),
                  altura: $('#altura').val(),
                  imagem: $('#img-t').val(),
                  titulo: $('#titulo').val(),
                  autor: $('#autor').val(),
                  funct: $('#funcionalidade').val(),
                  texto: $('#textarea').val()
              }
              var formfinal = '[center][img(' + form.largura + 'px,' + form.altura + 'px)]' + form.imagem + '[/img][/center]\n' +
                              '[b]Título do tópico:[/b] ' + form.titulo + '\n' +
                              '[b]Endereço do fórum:[/b] ' + form.autor + '\n' +
                              '[b]Funcionalidade:[/b] ' + form.funct + '\n\n' +
                              '[b]Descrição do suporte:[/b] ' + form.texto;
              $('#form-send').html(
                    '<br />' +
                    '<br />' +
                    '<center>' +
                    '  <img src="http://www.cosmeticchoice.com.au/image/loading.gif" />' +
                    '  <br />' +
                    '  <span style="color: #82C1ED;font-size: 15px;font-weight: bold;">Carregando...</span>' +
                    '</center>'
              );
              $.post('/post', {
                    message: formfinal,
                    f: '9',
                    mode: 'newtopic',
                    post: 'submit',
                    subject: form.titulo
              }).done(function(e) {
                var href = $(e).find('.message a:first').attr('href');
                location.href = href;
              }).fail(function() {
                alert("Falha ao enviar");
                location.href = location.pathname;
              });
              } else {
                $('.warn').slideUp(1);
                $('.warn').slideDown(500);
              }
            }
            function bbcode_tag(o,c) {
            var t = jQuery('#textarea');
            t.val(t.val().substring(0,t[0].selectionStart)+o+t.val().substring(t[0].selectionStart,t[0].selectionEnd)+c+t.val().substring(t[0].selectionEnd,t.val().length)).focus();
            }
            </script></div>

Atenciosamente.

Perfeito, muito obrigado!