Personalizar 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,

Olá! tenho um formulário em meu fórum, porem quero mudar o sistema de pre-visualização.

Meu formulário, quando deixo um campo em branco certo?
No caso "Sugestões: (opcional):" eu deixei sem escrever nada.



Quando deixo um campo em branco e clico em pre-visualizar:



Quando deixo um campo em branco clico em enviar, depois clico em pre-visualizar:



Ele aparece estas mensagens, certo? teria como remover está mensagem?
É botar algum outro sistema de pre-visualização? algo parecido porem não igual?

Código do formulário:

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 class="warn alert" style="display: none">
    É necessário preencher todos os campos em branco.</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: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>


OBS: Espero que vocês entendam, eu mesmo não entendo nada de código nada nada mesmo, até mais.

Olá,

Tente trocar o código 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;
  }
</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>

Removeu a parte do "É necessário preencher todos os campos em branco" certinho. 
Teria como botar algum outro sistema de pre-visualização? Algo parecido sabe? porem não igual.

Até mais.

YouTube3 escreveu:[...] Teria como botar algum outro sistema de pre-visualização? Algo parecido sabe? porem não igual.

O senhor diz mudar a aparência da caixa de pré-visualização?

Kyo Panda escreveu:

YouTube3 escreveu:[...] Teria como botar algum outro sistema de pre-visualização? Algo parecido sabe? porem não igual.

O senhor diz mudar a aparência da caixa de pré-visualização?

Sim é isso mesmo que eu quero.

Sim, é possível. Mas o senhor terá que me guiar para quais alterações deseja. Cores, espaçamentos, fontes, etc..

---

E acredito que seja melhor criar um novo tópico quanto a isso, já que, aparentemente, é permitido apenas uma questão por tópico. Tudo bem?

Adicione ao CSS:

Código:

form#form-send dl {
  position: relative;
}

div#countitle {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
}

No código que eu passei anteriormente, mude:

Código:

div#countitle {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
}

Para:

Código:

div#countitle {
  position: absolute;
  right: 30px;
  top: 10px;
  background: none;
}

Ou maior. Quanto maior for o right: 30px;, mais para esquerda ele estará.