Mudar pre-visualização do formulário

Detalhes da questão

Endereço do fórum: http://vgnfamily.forumais.com
Versão do fórum: PunBB

Descrição

Boa tarde,

Então queria saber se é possível, mudar o sistema de pre-visualização do formulário? Ele está assim:



Código:

Código:

<style>
#content-container div#right  {
float: right;
overflow: hidden;
width: 0px!important;
display:none!important;
}
#content-container div#content {
margin-right: 0px;
}
  #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:rgba(254,169,0,0.43) url(https://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;border:1px solid rgba(214,146,0,0.5);border-radius:20px;margin:3px 0;padding:8px;text-align:center}
  fieldset.form-div dt {
  padding: 5px 0;
  }
  fieldset.form-div dt {
  float: left;
  font: 15px bold arial, tahoma, georgia;
  width: 13em;
  }
  fieldset.form-div dd {
  margin-left: 10em;
  }
  fieldset.form-div dl:nth-child(odd) {
  background: #f5f8fa !important;
  }
  fieldset.form-div dl:nth-child(even) {
  background: #fff;
  }
  fieldset.form-div input {
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  outline: none;
  border: 1px solid #e0e0e0;
  padding: 5px;
  }
  #countitle {
  background: white;
  color: #D60B8C;
  border: 0px 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 .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: 100%;
  overflow: hidden;
  padding: 3px 5px 2px;
  }
  #form-send .area1 {
  display: inline-block;
  min-height: 330px;
  z-index: 3;
  width: 63%;
  }
  #form-send .description {
  display: inline-block;
  z-index: 3;
  min-height: 200px;
  position: absolute;
  background: white;
  margin: 0 0 0 20px;
  line-height: 18px;
  color: #000000;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding: 1em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid silver;
  width: 17%;
  }
  #form-send .area .buttons .button2 {
  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 .button2:hover {border-color: #707070;}
  #form-send .textarea_nc1 #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_nc1 {
  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: 100%;
  }
  #pr-modal {
  position: fixed;
  background-color: #3e3e3e;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity: 0.5;
  }
  #pr-questao {
  background-color: #464646;
  background-color: rgba(70, 70, 70, 0.6);
  padding: 4px;
  -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 101;
  width: 70%;
  left: 14.5%;
  top: 50%;
  margin-top: -58px;
  }
  #pr-questao .postm {
  background: #fff;
  border: 1px solid #eee;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  }
  #pr-questao .pr-clo {
  background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  float: right;
  }
</style>
<script>
  $(document).ready(function() {
  $('#send').click(function() {
  if($('#seunome').val()!=='' &&  $('#tema').val()!=='' && $('#tipodearte').val()!=='' && $('#textarea').val()!=='') {
    var seunome = $('#seunome').val();
  var tema = $('#tema').val();
    var tipodearte = $('#tipodearte').val();
    var texto = $('#textarea').val();  
    var d = new Date();        //timestamp
    var da = d.getDate();      //day
    var mon = d.getMonth() + 1; //month
    var yr = d.getFullYear();  //year
    var dData = da + '/' + mon + '/' + yr;
  data = '['+dData+'] ';
  pedido = '(PEDIDO) - ';
    final = '[b]Seu nome:[/b] '+seunome+'\n [b]Tipo de Arte: [/b]'+tipodearte+'\n [b]Tema:[/b] '+tema+'\n[hr]\n[b]Sugestões: (opcional):[/b] '+texto+'';
    $('input[name="subject"]').val(data + pedido + seunome);
    $('input[name="message"]').val(final);
    $('#send2').click();
    $('#form-send').slideUp(300);
    $('#enviando').slideDown(500);
  }
  else {
    $('.alert').slideUp(1);
    $('.alert').slideDown(500);
  }
  });
  $('#prevquestion').click(function() {
    var seunome = $('#seunome').val();
    var tipodearte = $('#tipodearte').val();
    var texto = $('#textarea').val();
  final = '<b>Seu nome:</b><br />'+seunome+'<br /><b>Tipo de Arte: </b><br />'+tipodearte+'<br /><b>Tema:</b><br />'+tema+'<br /><hr /><br /><b>Sugestões: (opcional):</b><br /><blockquote>'+texto+'</blockquote>';
    $('#pr-modal').fadeIn(300);
    $('#pr-questao').slideDown(500);
    $('#pr-questao .entry-content').html(final);
  });
  $('.pr-clo').click(function() {
    $('#pr-modal').fadeOut(800);
    $('#pr-questao').slideUp(500);
  });
  $('#apagar-td').click(function() {
          $('#form-send input[type="text"],#form-send textarea').val('');
  });
  $('#seunome').keyup(function() {
    var tvalue = document.getElementById('seunome').value.length;
    var icnt = document.getElementById('countitle');
    if(tvalue < 10 && tvalue > 0) {
      var l = tvalue-10;
      icnt.innerHTML='O título necessita mais '+l*-1+' caracteres';
    }
    else {
      icnt.innerHTML='';
    }
  });
  });
</script>
  <div id="pr-modal" style="display: none;"></div>
  <div id="pr-questao" style="display: none;">
      <span class="pr-clo"></span>
      <div class="postm">
        <div class="post-entry">
        <div class="entry-content"></div>
        </div>
      </div>
  <br>
  </div>
  <div class="warn">
    <img style="width: 15px; height: 15px;" src="http://i.imgur.com/X7itW9j.png" /> <strong>Nota:</strong> Antes de postar, <a href="/search"><strong>pesquise no fórum</strong></a> para evitar tópicos repetidos!
  </div>
<form action="/post" method="post" name="post" id="form-send" enctype="multipart/form-data">
  <fieldset class="form-div">
  <dl><dt>
  <label>Seu nome:</label></dt>
  <dd>
    <input type="text" style="clear: both;width: 400px;" id="seunome" placeholder="Nick/Nome" class="inputbox"><br> <div id="countitle" style="display:n"></div>
  </dd>
  </dl> <dl>
  <dt>
  <label>Tipo de arte:</label></dt>
    <dd>
      <select class="inputbox" id="tipodearte" style="clear: both;width: 100px;">
      <option value="Avatar">Avatar</option>
      <option value="Sign">Sign</option>
      <option value="Fanbar">Fanbar</option>
      <option value="Avatar+Sign">Avatar+Sign</option>
      </select>
    </dd>
  </dl>
  <dl><dt>
  <label>Tema:</label></dt>
  <dd>
    <input type="text" style="clear: both;width: 400px;" id="tema" style="clear: both;width: 400px;" placeholder="Ex:Naruto" class="inputbox">
    
  </dd>
  </dl>
    <dl><dt>
        <label>Sugestões: (opcional)</label></dt>
        <dd>
          
                <input id="textarea"  style="clear: both;width: 400px;" class="inputbox" placeholder="Sugestões para seu pedido" ></input>
              
        </dd>
    </dl>
  </fieldset><div class="btns">
    <input type="hidden" name="subject" value="(Pedido) ">
    <input type="hidden" name="message">
    <input type="hidden" name="mode" value="newtopic">
    <input type="hidden" name="f" value="10">
    <input type="hidden" name="lt" value="0">
    <input type="button" value="Enviar" id="send" name="post"> <input type="button" value="Pré-visualizar" id="prevquestion"> <input type="button" value="Apagar tudo" id="apagar-td">
    <input type="submit" style="display: none;" id="send2" name="post">
</div>
</form><div id="enviando" style="display:none;">
  <center>
  <img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="carregando" title="enviando..."><br>
  <span class="conteudo_texto">enviando...</span>
  </center>
</div>


Espero que entenda até mais.

UP

UP

Boas!

E como deseja essa pre-visualização?
Até mais.
Sennior

UP

UP

YouTube3 escreveu:[...]cor: preta - Fonte: Sans-Serif - Espaçamento: 2 espaço.

Vendo a captura de tela que passou, parece-me já estar dessa forma. Poderia apontar qual parte do texto gostaria de aplicar essa formatação?

up

Tente trocar o código do formulário por esse.

Código:

<style>
    #content-container div#right {
        float: right;
        overflow: hidden;
        width: 0px!important;
        display: none!important;
    }
   
    #content-container div#content {
        margin-right: 0px;
    }
   
    #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: rgba(254, 169, 0, 0.43) url(https://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
        border: 1px solid rgba(214, 146, 0, 0.5);
        border-radius: 20px;
        margin: 3px 0;
        padding: 8px;
        text-align: center
    }
   
    fieldset.form-div dt {
        padding: 5px 0;
    }
   
    fieldset.form-div dt {
        float: left;
        font: 15px bold arial, tahoma, georgia;
        width: 13em;
    }
   
    fieldset.form-div dd {
        margin-left: 10em;
    }
   
    fieldset.form-div dl:nth-child(odd) {
        background: #f5f8fa !important;
    }
   
    fieldset.form-div dl:nth-child(even) {
        background: #fff;
    }
   
    fieldset.form-div input {
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        outline: none;
        border: 1px solid #e0e0e0;
        padding: 5px;
    }
   
    #countitle {
        background: white;
        color: #D60B8C;
        border: 0px 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 .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: 100%;
        overflow: hidden;
        padding: 3px 5px 2px;
    }
   
    #form-send .area1 {
        display: inline-block;
        min-height: 330px;
        z-index: 3;
        width: 63%;
    }
   
    #form-send .description {
        display: inline-block;
        z-index: 3;
        min-height: 200px;
        position: absolute;
        background: white;
        margin: 0 0 0 20px;
        line-height: 18px;
        color: #000000;
        font-family: Calibri, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        padding: 1em;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid silver;
        width: 17%;
    }
   
    #form-send .area .buttons .button2 {
        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 .button2:hover {
        border-color: #707070;
    }
   
    #form-send .textarea_nc1 #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_nc1 {
        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: 100%;
    }
   
    #pr-modal {
        position: fixed;
        background-color: #3e3e3e;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 100;
        opacity: 0.5;
    }
   
    #pr-questao {
        background-color: #464646;
        background-color: rgba(70, 70, 70, 0.6);
        padding: 4px;
        -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        z-index: 101;
        width: 70%;
        left: 14.5%;
        top: 50%;
        margin-top: -58px;
    }
   
    #pr-questao .postm {
        background: #fff;
        border: 1px solid #eee;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
   
    #pr-questao .pr-clo {
        background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
        cursor: pointer;
        height: 16px;
        width: 16px;
        float: right;
    }

    div#pr-questao .entry-content {
        padding: 30px;
        line-height: 30px;
        text-align: center;
    }
</style>
<script>
    $(document).ready(function () {

        $('#send').click(function () {

            if ($('#seunome').val() !== '' && $('#tema').val() !== '' && $('#tipodearte').val() !== '' && $('#textarea').val() !== '') {
                var seunome = $('#seunome').val();
                var tema = $('#tema').val();
                var tipodearte = $('#tipodearte').val();
                var texto = $('#textarea').val();
                var d = new Date();        //timestamp
                var da = d.getDate();      //day
                var mon = d.getMonth() + 1; //month
                var yr = d.getFullYear();  //year
                var dData = da + '/' + mon + '/' + yr;
                data = '[' + dData + '] ';
                pedido = '(PEDIDO) - ';
                final = '[b]Seu nome:[/b] ' + seunome + '\n [b]Tipo de Arte: [/b]' + tipodearte + '\n [b]Tema:[/b] ' + tema + '\n[hr]\n[b]Sugestões: (opcional):[/b] ' + texto + '';
                $('input[name="subject"]').val(data + pedido + seunome);
                $('input[name="message"]').val(final);
                $('#send2').click();
                $('#form-send').slideUp(300);
                $('#enviando').slideDown(500);
            }
            else {
                $('.alert').slideUp(1);
                $('.alert').slideDown(500);
            }
        });

        $('#prevquestion').click(function () {
            var seunome = $('#seunome').val();
            var tipodearte = $('#tipodearte').val();
            var texto = $('#textarea').val();
            var tema = $('#tema').val();
            final = '<b>Seu nome:</b> ' + seunome + '&nbsp;&nbsp;-&nbsp;&nbsp;<b>Tipo de Arte: </b> ' + tipodearte + '<br /><b>Tema:</b> ' + tema + '&nbsp;&nbsp;-&nbsp;&nbsp;<b>Sugestões: (opcional):</b>' + texto;
            $('#pr-modal').fadeIn(300);
            $('#pr-questao').slideDown(500);
            $('#pr-questao .entry-content').html(final);
        });

        $('.pr-clo').click(function () {
            $('#pr-modal').fadeOut(800);
            $('#pr-questao').slideUp(500);
        });

        $('#apagar-td').click(function () {
            $('#form-send input[type="text"],#form-send textarea').val('');
        });
       
        $('#seunome').keyup(function () {
            var tvalue = document.getElementById('seunome').value.length;
            var icnt = document.getElementById('countitle');
            if (tvalue < 10 && tvalue > 0) {
                var l = tvalue - 10;
                icnt.innerHTML = 'O título necessita mais ' + l * -1 + ' caracteres';
            }
            else {
                icnt.innerHTML = '';
            }
        });
    });
</script>
<div id="pr-modal" style="display: none;"></div>
<div id="pr-questao" style="display: none;">
    <span class="pr-clo"></span>
    <div class="postm">
        <div class="post-entry">
            <div class="entry-content"></div>
        </div>
    </div>
</div>
<div class="warn">
    <img style="width: 15px; height: 15px;" src="http://i.imgur.com/X7itW9j.png" />
    <strong>Nota:</strong> Antes de postar,
    <a href="/search"><strong>pesquise no fórum</strong></a> para evitar tópicos repetidos!
</div>
<form action="/post" method="post" name="post" id="form-send" enctype="multipart/form-data">
    <fieldset class="form-div">
        <dl>
            <dt>
                <label>Seu nome:</label>
            </dt>
            <dd>
                <input type="text" style="clear: both;width: 400px;" id="seunome" placeholder="Nick / Nome" class="inputbox" />
                <br />
                <div id="countitle" style="display: none;"></div>
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Tipo de arte:</label>
            </dt>
            <dd>
                <select class="inputbox" id="tipodearte" style="clear: both; width: 100px;">
                    <option value="Avatar">Avatar</option>
                    <option value="Sign">Sign</option>
                    <option value="Fanbar">Fanbar</option>
                    <option value="Avatar+Sign">Avatar + Sign</option>
                </select>
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Tema:</label>
            </dt>
            <dd>
                <input type="text" style="clear: both;width: 400px;" id="tema" style="clear: both;width: 400px;" placeholder="Ex:Naruto" class="inputbox" />
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Sugestões: (opcional)</label>
            </dt>
            <dd>
                <input id="textarea" style="clear: both;width: 400px;" class="inputbox" placeholder="Sugestões para seu pedido" />
            </dd>
        </dl>
    </fieldset>
    <div class="btns">
        <input type="hidden" name="subject" value="(Pedido)" />
        <input type="hidden" name="message" />
        <input type="hidden" name="mode" value="newtopic" />
        <input type="hidden" name="f" value="10" />
        <input type="hidden" name="lt" value="0" />
        <input type="button" value="Enviar" id="send" name="post"> <input type="button" value="Pré-visualizar" id="prevquestion" />
        <input type="button" value="Apagar tudo" id="apagar-td" />
        <input type="submit" style="display: none;" id="send2" name="post" />
    </div>
</form>
<div id="enviando" style="display: none;">
    <center>
        <img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="carregando" title="Enviando..." />
        <br />
        <span class="conteudo_texto">Enviando...</span>
    </center>
</div>

É só dar um espaço antes do + texto; do seu código!

Coloca na caixa de busca da página HTML

Código:

+ texto;

Só existe um elemento no seu HTML com isso. Quando encontrar, ANTES é só apertar o espaço do teclado! Se não funcionar, antes ao invés do espaço, coloque o interprete:

Código:

\s

E Youtube, você já é um membro antigo no FDF, e acredito que saiba que não é permitido usar formatações nas mensagens. Isso dificulta a leitura de pessoas com problema de visão, e faz com que sua resposta demore mais! Por favor, evite-o, por gentileza.

Tente trocar por esse:

Código:

<style>
    #content-container div#right {
        float: right;
        overflow: hidden;
        width: 0px!important;
        display: none!important;
    }
   
    #content-container div#content {
        margin-right: 0px;
    }
   
    #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: rgba(254, 169, 0, 0.43) url(https://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
        border: 1px solid rgba(214, 146, 0, 0.5);
        border-radius: 20px;
        margin: 3px 0;
        padding: 8px;
        text-align: center
    }
   
    fieldset.form-div dt {
        padding: 5px 0;
    }
   
    fieldset.form-div dt {
        float: left;
        font: 15px bold arial, tahoma, georgia;
        width: 13em;
    }
   
    fieldset.form-div dd {
        margin-left: 10em;
    }
   
    fieldset.form-div dl:nth-child(odd) {
        background: #f5f8fa !important;
    }
   
    fieldset.form-div dl:nth-child(even) {
        background: #fff;
    }
   
    fieldset.form-div input {
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        outline: none;
        border: 1px solid #e0e0e0;
        padding: 5px;
    }
   
    #countitle {
        background: white;
        color: #D60B8C;
        border: 0px 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 .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: 100%;
        overflow: hidden;
        padding: 3px 5px 2px;
    }
   
    #form-send .area1 {
        display: inline-block;
        min-height: 330px;
        z-index: 3;
        width: 63%;
    }
   
    #form-send .description {
        display: inline-block;
        z-index: 3;
        min-height: 200px;
        position: absolute;
        background: white;
        margin: 0 0 0 20px;
        line-height: 18px;
        color: #000000;
        font-family: Calibri, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        padding: 1em;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid silver;
        width: 17%;
    }
   
    #form-send .area .buttons .button2 {
        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 .button2:hover {
        border-color: #707070;
    }
   
    #form-send .textarea_nc1 #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_nc1 {
        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: 100%;
    }
   
    #pr-modal {
        position: fixed;
        background-color: #3e3e3e;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 100;
        opacity: 0.5;
    }
   
    #pr-questao {
        background-color: #464646;
        background-color: rgba(70, 70, 70, 0.6);
        padding: 4px;
        -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        z-index: 101;
        width: 70%;
        left: 14.5%;
        top: 50%;
        margin-top: -58px;
    }
   
    #pr-questao .postm {
        background: #fff;
        border: 1px solid #eee;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
   
    #pr-questao .pr-clo {
        background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
        cursor: pointer;
        height: 16px;
        width: 16px;
        float: right;
    }

    div#pr-questao .entry-content {
        padding: 30px;
        line-height: 30px;
        text-align: center;
    }
</style>
<script>
    $(document).ready(function () {

        $('#send').click(function () {

            if ($('#seunome').val() !== '' && $('#tema').val() !== '' && $('#tipodearte').val() !== '' && $('#textarea').val() !== '') {
                var seunome = $('#seunome').val();
                var tema = $('#tema').val();
                var tipodearte = $('#tipodearte').val();
                var texto = $('#textarea').val();
                var d = new Date();        //timestamp
                var da = d.getDate();      //day
                var mon = d.getMonth() + 1; //month
                var yr = d.getFullYear();  //year
                var dData = da + '/' + mon + '/' + yr;
                data = '[' + dData + '] ';
                pedido = '(PEDIDO) - ';
                final = '[b]Seu nome:[/b] ' + seunome + '\n [b]Tipo de Arte: [/b]' + tipodearte + '\n [b]Tema:[/b] ' + tema + '\n[hr]\n[b]Sugestões: (opcional):[/b] ' + texto + '';
                $('input[name="subject"]').val(data + pedido + seunome);
                $('input[name="message"]').val(final);
                $('#send2').click();
                $('#form-send').slideUp(300);
                $('#enviando').slideDown(500);
            }
            else {
                $('.alert').slideUp(1);
                $('.alert').slideDown(500);
            }
        });

        $('#prevquestion').click(function () {
            var seunome = $('#seunome').val();
            var tipodearte = $('#tipodearte').val();
            var texto = $('#textarea').val();
            var tema = $('#tema').val();
            final = '<b>Seu nome:</b> ' + seunome + '&nbsp;&nbsp;-&nbsp;&nbsp;<b>Tipo de Arte: </b> ' + tipodearte + '<br /><b>Tema:</b> ' + tema + '&nbsp;&nbsp;-&nbsp;&nbsp;<b>Sugestões: (opcional):&nbsp;&nbsp;</b>' + texto;
            $('#pr-modal').fadeIn(300);
            $('#pr-questao').slideDown(500);
            $('#pr-questao .entry-content').html(final);
        });

        $('.pr-clo').click(function () {
            $('#pr-modal').fadeOut(800);
            $('#pr-questao').slideUp(500);
        });

        $('#apagar-td').click(function () {
            $('#form-send input[type="text"],#form-send textarea').val('');
        });
       
        $('#seunome').keyup(function () {
            var tvalue = document.getElementById('seunome').value.length;
            var icnt = document.getElementById('countitle');
            if (tvalue < 10 && tvalue > 0) {
                var l = tvalue - 10;
                icnt.innerHTML = 'O título necessita mais ' + l * -1 + ' caracteres';
            }
            else {
                icnt.innerHTML = '';
            }
        });
    });
</script>
<div id="pr-modal" style="display: none;"></div>
<div id="pr-questao" style="display: none;">
    <span class="pr-clo"></span>
    <div class="postm">
        <div class="post-entry">
            <div class="entry-content"></div>
        </div>
    </div>
</div>
<div class="warn">
    <img style="width: 15px; height: 15px;" src="http://i.imgur.com/X7itW9j.png" />
    <strong>Nota:</strong> Antes de postar,
    <a href="/search"><strong>pesquise no fórum</strong></a> para evitar tópicos repetidos!
</div>
<form action="/post" method="post" name="post" id="form-send" enctype="multipart/form-data">
    <fieldset class="form-div">
        <dl>
            <dt>
                <label>Seu nome:</label>
            </dt>
            <dd>
                <input type="text" style="clear: both;width: 400px;" id="seunome" placeholder="Nick / Nome" class="inputbox" />
                <br />
                <div id="countitle" style="display: none;"></div>
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Tipo de arte:</label>
            </dt>
            <dd>
                <select class="inputbox" id="tipodearte" style="clear: both; width: 100px;">
                    <option value="Avatar">Avatar</option>
                    <option value="Sign">Sign</option>
                    <option value="Fanbar">Fanbar</option>
                    <option value="Avatar+Sign">Avatar + Sign</option>
                </select>
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Tema:</label>
            </dt>
            <dd>
                <input type="text" style="clear: both;width: 400px;" id="tema" style="clear: both;width: 400px;" placeholder="Ex:Naruto" class="inputbox" />
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Sugestões: (opcional)</label>
            </dt>
            <dd>
                <input id="textarea" style="clear: both;width: 400px;" class="inputbox" placeholder="Sugestões para seu pedido" />
            </dd>
        </dl>
    </fieldset>
    <div class="btns">
        <input type="hidden" name="subject" value="(Pedido)" />
        <input type="hidden" name="message" />
        <input type="hidden" name="mode" value="newtopic" />
        <input type="hidden" name="f" value="10" />
        <input type="hidden" name="lt" value="0" />
        <input type="button" value="Enviar" id="send" name="post"> <input type="button" value="Pré-visualizar" id="prevquestion" />
        <input type="button" value="Apagar tudo" id="apagar-td" />
        <input type="submit" style="display: none;" id="send2" name="post" />
    </div>
</form>
<div id="enviando" style="display: none;">
    <center>
        <img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="carregando" title="Enviando..." />
        <br />
        <span class="conteudo_texto">Enviando...</span>
    </center>
</div>

Agora "aparência melhor" terá que dar aquela direção. Programador é péssimo com design. >-<"

Estamos aguardando sua imagem então.

Fazer algo parecido é possível?


Aonde está marcado de vermelho botar a foto da pessoa por exemplo.

Você diz a estrutura igual?

Sim aparência também se for possível é claro.

O meu está assim certo?


No caso queria deixar ele exatamente assim:

Bom dia!

Não consigo colocar o avatar. Infelizmente, este trabalho eu gostaria do apoio do @Kyo panda, mas, a parte da aparência, eu acredito que tenha ficado bom:

Código:

<style>
    #content-container div#right {
        float: right;
        overflow: hidden;
        width: 0px!important;
        display: none!important;
    }
   
    #content-container div#content {
        margin-right: 0px;
    }
   
    #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: rgba(254, 169, 0, 0.43) url(https://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
        border: 1px solid rgba(214, 146, 0, 0.5);
        border-radius: 20px;
        margin: 3px 0;
        padding: 8px;
        text-align: center
    }
   
    fieldset.form-div dt {
        padding: 5px 0;
    }
   
    fieldset.form-div dt {
        float: left;
        font: 15px bold arial, tahoma, georgia;
        width: 13em;
    }
   
    fieldset.form-div dd {
        margin-left: 10em;
    }
   
    fieldset.form-div dl:nth-child(odd) {
        background: #f5f8fa !important;
    }
   
    fieldset.form-div dl:nth-child(even) {
        background: #fff;
    }
   
    fieldset.form-div input {
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        outline: none;
        border: 1px solid #e0e0e0;
        padding: 5px;
    }
   
    #countitle {
        background: white;
        color: #D60B8C;
        border: 0px 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 .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: 100%;
        overflow: hidden;
        padding: 3px 5px 2px;
    }
   
    #form-send .area1 {
        display: inline-block;
        min-height: 330px;
        z-index: 3;
        width: 63%;
    }
   
    #form-send .description {
        display: inline-block;
        z-index: 3;
        min-height: 200px;
        position: absolute;
        background: white;
        margin: 0 0 0 20px;
        line-height: 18px;
        color: #000000;
        font-family: Calibri, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        padding: 1em;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid silver;
        width: 17%;
    }
   
    #form-send .area .buttons .button2 {
        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 .button2:hover {
        border-color: #707070;
    }
   
    #form-send .textarea_nc1 #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_nc1 {
        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: 100%;
    }
   
    #pr-modal {
        position: fixed;
        background-color: #3e3e3e;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 100;
        opacity: 0.5;
    }
   
    #pr-questao {
        background-color: #464646;
        background-color: rgba(70, 70, 70, 0.6);
        padding: 4px;
        -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        z-index: 101;
        width: 70%;
        left: 14.5%;
        top: 50%;
        margin-top: -58px;
    }
   
    #pr-questao .postm {
        background: #fff;
        border: 1px solid #eee;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
   
    #pr-questao .pr-clo {
        background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
        cursor: pointer;
        height: 16px;
        width: 16px;
        float: right;
    }

    div#pr-questao .entry-content {
        padding: 30px;
        line-height: 30px;
        text-align: center;
    }
td.PreAvatarShekCrowley {width: 50px}
td.PreAvatarShekCrowley img {width: 50px}
td.ShekContPRE {text-align: left;padding-left: 10px;}
</style>
<script>
    $(document).ready(function () {

        $('#send').click(function () {

            if ($('#seunome').val() !== '' && $('#tema').val() !== '' && $('#tipodearte').val() !== '' && $('#textarea').val() !== '') {
                var seunome = $('#seunome').val();
                var tema = $('#tema').val();
                var tipodearte = $('#tipodearte').val();
                var texto = $('#textarea').val();
                var d = new Date();        //timestamp
                var da = d.getDate();      //day
                var mon = d.getMonth() + 1; //month
                var yr = d.getFullYear();  //year
                var dData = da + '/' + mon + '/' + yr;
                data = '[' + dData + '] ';
                pedido = '(PEDIDO) - ';
                final = '[b]Seu nome:[/b] ' + seunome + '\n [b]Tipo de Arte: [/b]' + tipodearte + '\n [b]Tema:[/b] ' + tema + '\n[hr]\n[b]Sugestões: (opcional):[/b] ' + texto + '';
                $('input[name="subject"]').val(data + pedido + seunome);
                $('input[name="message"]').val(final);
                $('#send2').click();
                $('#form-send').slideUp(300);
                $('#enviando').slideDown(500);
            }
            else {
                $('.alert').slideUp(1);
                $('.alert').slideDown(500);
            }
        });
        $('#prevquestion').click(function () {
            var seunome = $('#seunome').val();
            var tipodearte = $('#tipodearte').val();
            var texto = $('#textarea').val();
            var tema = $('#tema').val();
            final = '<table width="100%"><tbody><tr><td class="PreAvatarShekCrowley"><span class="avatar"><img src="http://im0.all-up.com/static/images/sigle.png" title="Avatar"/></span></td><td class="ShekContPRE"><fieldset class="form-div"><dl><dt><label>Seu nome:</label></dt><dd>' + seunome + '</dd></dl><dl><dt><label>Tipo de Arte:</label></dt><dd>' + tipodearte + '</dd></dl><dl><dt><label>Tema:</label></dt><dd>' + tema + '</dd></dl><dl><dt><label>Sugestões:</label></dt><dd>' + texto + '</dd></dl></fieldset><span class="shekSaveButton" align="right" ><a class="pr-clo" href="#"></a></span></td></tr></tbody></table>';
            $('#pr-modal').fadeIn(300);
            $('#pr-questao').slideDown(500);
            $('#pr-questao .entry-content').html(final);
        });

        $('.pr-clo').click(function () {
            $('#pr-modal').fadeOut(800);
            $('#pr-questao').slideUp(500);
        });

        $('#apagar-td').click(function () {
            $('#form-send input[type="text"],#form-send textarea').val('');
        });
       
        $('#seunome').keyup(function () {
            var tvalue = document.getElementById('seunome').value.length;
            var icnt = document.getElementById('countitle');
            if (tvalue < 10 && tvalue > 0) {
                var l = tvalue - 10;
                icnt.innerHTML = 'O título necessita mais ' + l * -1 + ' caracteres';
            }
            else {
                icnt.innerHTML = '';
            }
        });
    });
   
</script>
<div id="pr-modal" style="display: none;"></div>
<div id="pr-questao" style="display: none;">
    <span class="pr-clo"></span>
    <div class="postm">
        <div class="post-entry">
            <div class="entry-content"></div>
        </div>
    </div>
</div>
<div class="warn">
    <img style="width: 15px; height: 15px;" src="http://i.imgur.com/X7itW9j.png" />
    <strong>Nota:</strong> Antes de postar,
    <a href="/search"><strong>pesquise no fórum</strong></a> para evitar tópicos repetidos!
</div>
<form action="/post" method="post" name="post" id="form-send" enctype="multipart/form-data">
    <fieldset class="form-div">
        <dl>
            <dt>
                <label>Seu nome:</label>
            </dt>
            <dd>
                <input type="text" style="clear: both;width: 400px;" id="seunome" placeholder="Nick / Nome" class="inputbox" />
                <br />
                <div id="countitle" style="display: none;"></div>
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Tipo de arte:</label>
            </dt>
            <dd>
                <select class="inputbox" id="tipodearte" style="clear: both; width: 100px;">
                    <option value="Avatar">Avatar</option>
                    <option value="Sign">Sign</option>
                    <option value="Fanbar">Fanbar</option>
                    <option value="Avatar+Sign">Avatar + Sign</option>
                </select>
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Tema:</label>
            </dt>
            <dd>
                <input type="text" style="clear: both;width: 400px;" id="tema" style="clear: both;width: 400px;" placeholder="Ex:Naruto" class="inputbox" />
            </dd>
        </dl>
        <dl>
            <dt>
                <label>Sugestões: (opcional)</label>
            </dt>
            <dd>
                <input id="textarea" style="clear: both;width: 400px;" class="inputbox" placeholder="Sugestões para seu pedido" />
            </dd>
        </dl>
    </fieldset>
    <div class="btns">
        <input type="hidden" name="subject" value="(Pedido)" />
        <input type="hidden" name="message" />
        <input type="hidden" name="mode" value="newtopic" />
        <input type="hidden" name="f" value="10" />
        <input type="hidden" name="lt" value="0" />
        <input type="button" value="Enviar" id="send" name="post"> <input type="button" value="Pré-visualizar" id="prevquestion" />
        <input type="button" value="Apagar tudo" id="apagar-td" />
        <input type="submit" style="display: none;" id="send2" name="post" />
    </div>
</form>
<div id="enviando" style="display: none;">
    <center>
        <img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="carregando" title="Enviando..." />
        <br />
        <span class="conteudo_texto">Enviando...</span>
    </center>
</div>

Eu coloquei o avatar padrão, caso queira mudar até alguém fazê-lo automático para você.

Até mais!

Hm... Tem, com uso de javascript. Infelizmente, não sei como posso fazer, então, você deve aguardar alguém que saiba, como @Kyo Panda, @Daemon ou @Hancki... Lamento.

Reporting for duty. 7

---

Existem dois problemas aqui:

• E se o usuário tiver um nome com menos de 10 caracteres, como Bill? Ele não poderá enviar o formulário?
  
  
• Se todos os campos são obrigatórios, por que existe "opcional" do lado do sugestões? Ignoro a validação desse campo ou removo o "opcional"?

Aqui está:

Código:

<style>
  #content-container div#right {
    float: right;
    overflow: hidden;
    width: 0px!important;
    display: none!important;
  }
 
  #content-container div#content {
    margin-right: 0px;
  }
 
  #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: rgba(254, 169, 0, 0.43) url(https://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
    border: 1px solid rgba(214, 146, 0, 0.5);
    border-radius: 20px;
    margin: 3px 0;
    padding: 8px;
    text-align: center
  }
 
  fieldset.form-div dt {
    padding: 5px 0;
  }
 
  fieldset.form-div dt {
    float: left;
    font: 15px bold arial, tahoma, georgia;
    width: 13em;
  }
 
  fieldset.form-div dd {
    margin-left: 10em;
  }
 
  fieldset.form-div dl:nth-child(odd) {
    background: #f5f8fa !important;
  }
 
  fieldset.form-div dl:nth-child(even) {
    background: #fff;
  }
 
  fieldset.form-div input {
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    outline: none;
    border: 1px solid #e0e0e0;
    padding: 5px;
  }
 
  #countitle {
    background: white;
    color: #D60B8C;
    border: 0px 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 .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: 100%;
    overflow: hidden;
    padding: 3px 5px 2px;
  }
 
  #form-send .area1 {
    display: inline-block;
    min-height: 330px;
    z-index: 3;
    width: 63%;
  }
 
  #form-send .description {
    display: inline-block;
    z-index: 3;
    min-height: 200px;
    position: absolute;
    background: white;
    margin: 0 0 0 20px;
    line-height: 18px;
    color: #000000;
    font-family: Calibri, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    padding: 1em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid silver;
    width: 17%;
  }
 
  #form-send .area .buttons .button2 {
    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 .button2:hover {
    border-color: #707070;
  }
 
  #form-send .textarea_nc1 #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_nc1 {
    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: 100%;
  }
 
  #pr-modal {
    position: fixed;
    background-color: #3e3e3e;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 100;
    opacity: 0.5;
  }
 
  #pr-questao {
    background-color: #464646;
    background-color: rgba(70, 70, 70, 0.6);
    padding: 4px;
    -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
    z-index: 101;
    width: 70%;
    left: 14.5%;
    top: 50%;
    margin-top: -58px;
  }
 
  #pr-questao .postm {
    background: #fff;
    border: 1px solid #eee;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
 
  #pr-questao .pr-clo {
    background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
    cursor: pointer;
    height: 16px;
    width: 16px;
    float: right;
  }
 
  div#pr-questao .entry-content {
    padding: 30px;
    line-height: 30px;
    text-align: center;
  }
 
  td.PreAvatarShekCrowley {
    width: 50px
  }
 
  td.PreAvatarShekCrowley img {
    width: 50px
  }
 
  td.ShekContPRE {
    text-align: left;
    padding-left: 10px;
  }
 
  .form-div dl {
    position: relative;
  }
 
  .form-error dd.form-error-warn {
    display: block;
  }
 
  dd.form-error-warn {
    display: none;
    position: absolute;
    left: 600px;
    top: 0;
    color: #f00;
    border: 1px #f00 solid;
    padding: 15px;
  }
</style>
<script>
    $(document).ready(function () {

        $('#send').click(function () {
            $('.form-div').removeClass('form-error');

            if ($('#seunome').val() !== '' && $('#tema').val() !== '' && $('#tipodearte').val() !== '' && $('#textarea').val() !== '') {
                var seunome = $('#seunome').val();
                var tema = $('#tema').val();
                var tipodearte = $('#tipodearte').val();
                var texto = $('#textarea').val();
                var d = new Date();        //timestamp
                var da = d.getDate();      //day
                var mon = d.getMonth() + 1; //month
                var yr = d.getFullYear();  //year
                var dData = da + '/' + mon + '/' + yr;
                data = '[' + dData + '] ';
                pedido = '(PEDIDO) - ';
                final = '[b]Seu nome:[/b] ' + seunome + '\n [b]Tipo de Arte: [/b]' + tipodearte + '\n [b]Tema:[/b] ' + tema + '\n[hr]\n[b]Sugestões: (opcional):[/b] ' + texto + '';
                $('input[name="subject"]').val(data + pedido + seunome);
                $('input[name="message"]').val(final);
                $('#send2').click();
                $('#form-send').slideUp(300);
                $('#enviando').slideDown(500);
            }
            else {
                $('.form-div').addClass('form-error');
            }
        });
        $('#prevquestion').click(function () {
            var seunome = $('#seunome').val();
            var tipodearte = $('#tipodearte').val();
            var texto = $('#textarea').val();
            var tema = $('#tema').val();
            final = '<table width="100%"><tbody><tr><td class="PreAvatarShekCrowley"><span class="avatar"><img src="http://im0.all-up.com/static/images/sigle.png" title="Avatar"/></span></td><td class="ShekContPRE"><fieldset class="form-div"><dl><dt><label>Seu nome:</label></dt><dd>' + seunome + '</dd></dl><dl><dt><label>Tipo de Arte:</label></dt><dd>' + tipodearte + '</dd></dl><dl><dt><label>Tema:</label></dt><dd>' + tema + '</dd></dl><dl><dt><label>Sugestões:</label></dt><dd>' + texto + '</dd></dl></fieldset><span class="shekSaveButton" align="right" ><a class="pr-clo" href="#"></a></span></td></tr></tbody></table>';
            $('#pr-modal').fadeIn(300);
            $('#pr-questao').slideDown(500);
            $('#pr-questao .entry-content').html(final);
        });

        $('.pr-clo').click(function () {
            $('#pr-modal').fadeOut(800);
            $('#pr-questao').slideUp(500);
        });

        $('#apagar-td').click(function () {
            $('#form-send input[type="text"],#form-send textarea').val('');
        });
    });
 
</script>
<div id="pr-modal" style="display: none;"></div>
<div id="pr-questao" style="display: none;">
  <span class="pr-clo"></span>
  <div class="postm">
    <div class="post-entry">
      <div class="entry-content"></div>
    </div>
  </div>
</div>
<div class="warn">
  <img style="width: 15px; height: 15px;" src="http://i.imgur.com/X7itW9j.png" />
  <strong>Nota:</strong> Antes de postar,
  <a href="/search"><strong>pesquise no fórum</strong></a> para evitar tópicos repetidos!
</div>
<form action="/post" method="post" name="post" id="form-send" enctype="multipart/form-data">
  <fieldset class="form-div">
    <dl>
      <dt>
        <label>Seu nome:</label>
      </dt>
      <dd>
        <input type="text" style="clear: both;width: 400px;" id="seunome" placeholder="Nick / Nome" class="inputbox" />
      </dd>
    </dl>
    <dl>
      <dt>
        <label>Tipo de arte:</label>
      </dt>
      <dd>
        <select class="inputbox" id="tipodearte" style="clear: both; width: 100px;">
                    <option value="Avatar">Avatar</option>
                    <option value="Sign">Sign</option>
                    <option value="Fanbar">Fanbar</option>
                    <option value="Avatar+Sign">Avatar + Sign</option>
                </select>
      </dd>
    </dl>
    <dl>
      <dt>
        <label>Tema:</label>
      </dt>
      <dd>
        <input type="text" style="clear: both;width: 400px;" id="tema" style="clear: both;width: 400px;" placeholder="Ex:Naruto"
          class="inputbox" />
      </dd>
    </dl>
    <dl>
      <dt>
        <label>Sugestões:</label>
      </dt>
      <dd>
        <input id="textarea" style="clear: both;width: 400px;" class="inputbox" placeholder="Sugestões para seu pedido" />
      </dd>
      <dd class="form-error-warn">
        Você deve preencher todos os campos.
      </dd>
    </dl>
  </fieldset>
  <div class="btns">
    <input type="hidden" name="subject" value="(Pedido)" />
    <input type="hidden" name="message" />
    <input type="hidden" name="mode" value="newtopic" />
    <input type="hidden" name="f" value="10" />
    <input type="hidden" name="lt" value="0" />
    <input type="button" value="Enviar" id="send" name="post"> <input type="button" value="Pré-visualizar" id="prevquestion"
    />
    <input type="button" value="Apagar tudo" id="apagar-td" />
    <input type="submit" style="display: none;" id="send2" name="post" />
  </div>
</form>
<div id="enviando" style="display: none;">
  <center>
    <img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="carregando" title="Enviando..." />
    <br />
    <span class="conteudo_texto">Enviando...</span>
  </center>
</div>

^-^v