Mudar pre-visualização do formulário

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Mudar pre-visualização do formulário

Mensagem por YouTube3 22.11.16 17:45

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:
Mudar pre-visualização do formulário J7TeBxP


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.


Última edição por YouTube3 em 11.12.16 2:41, editado 1 vez(es)
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 23.11.16 23:27

UP
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 26.11.16 0:27

UP
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Sennior 26.11.16 9:16

Boas!

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

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 26.11.16 13:57

Bom, eu também assim não tenho algo especifico no último tópico o Kyo Panda, tinha me pedido apenas fonte, cores, espaçamentos, etc.. cor: preta - Fonte: Sans-Serif - Espaçamento: 2 espaço.

Se eu tivesse algo eu botaria aqui no tópico de exemplo sabe? mas não achei nada do tipo. Triste
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 27.11.16 23:01

UP
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 30.11.16 0:36

UP
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Kyo Panda 01.12.16 1:54

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? Contente
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 01.12.16 18:14

No caso assim.

Seu nome: tioza0h_Vengeance   -   Tipo de Arte: Avatar+Sign

Tema: Snoop Dogg   -   Sugestões: (Opcional): GFX.

Apenas na pre-visualização no tópico deixar como está. Feliz
O Resto pode deixar normal quero mudar mesmo é a pre-visualização do formulário.
Deixar ele com outro aparência etc.. vou procurar caso eu achar algo do tipo eu edito o tópico.
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 03.12.16 4:00

up
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Kyo Panda 03.12.16 22:15

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

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>
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 04.12.16 1:09

Ficou bom, poderia dar um espaço depois do (opcional): ? que a "sign gfx" fica grudado na sugestão.
Mudar pre-visualização do formulário RYVSWNh


Agora teria como dar uma aparência, melhor no formulário? se for possível obrigado.
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Shek 05.12.16 15:49

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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 05.12.16 16:18

Sim eu tentei fazer isso ontem mesmo porem não adianto. Feliz
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Shek 05.12.16 16:27

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.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 05.12.16 18:46

Desculpe, coloquei certinho como pediu porem o botão de visualizar parou de funcionar.
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Kyo Panda 06.12.16 0:25

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. >-<"
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 06.12.16 4:03

Deu certo.

Eu mesmo tentei fazer algo pelo photoshop, porem não consegui fazer nada.
Queria botar pré-visualização tipo um quote, com uma barra azul na esquerda.
Amanhã irei tentar fazer algo qualquer coisa se eu conseguir botarei no tópico até mais.
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Shek 06.12.16 13:45

Estamos aguardando sua imagem então. Piscada
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 06.12.16 14:49

Fazer algo parecido é possível?
Mudar pre-visualização do formulário B7vWmjX

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

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Shek 06.12.16 16:19

Você diz a estrutura igual?
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 06.12.16 16:54

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

O meu está assim certo?
Mudar pre-visualização do formulário J7TeBxP

No caso queria deixar ele exatamente assim:
Mudar pre-visualização do formulário TNX1u86
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Shek 10.12.16 14:16

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ê. Piscada

Até mais!
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 10.12.16 21:06

Realmente a pré-visualização ficou muito boa não irá precisar do avatar. Muito feliz
Só mais 2 coisas se for possível.

Quando a pessoa botava apenas uma letra ali onde está Seu nome: do lado da caixa aparecia É necessário obter mais 9 caracteres etc...

É ali onde está marcado de laranja do lado da opção Sugestões: (opcional): quando a pessoa não preencher aquele campo teria como por um aviso exemplo: É necessário preencher todos os campos?
Mudar pre-visualização do formulário 0B0hAzE
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Shek 10.12.16 21:21

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. Triste
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 10.12.16 22:34

Sem problemas Shek. Muito feliz
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Kyo Panda 10.12.16 23:55

Reporting for duty. Mudar pre-visualização do formulário 1 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"?
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 11.12.16 0:18

Remove o "opcional" e ao invés de por os caracteres deixa sem mesmo. Muito feliz
Não tinha pensando nisso antes ainda bem que você avisou. rsrs
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Kyo Panda 11.12.16 0:41

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
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por YouTube3 11.12.16 2:40

Perfeito, obrigado Kyo fico muito bom. Pode dar como resolvido !
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar pre-visualização do formulário

Mensagem por Kyo Panda 11.12.16 10:56

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos