Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Formulario para postagem

2 participantes

Início :: Forumeiros :: NostalgiaFormulario para postagem

curruwilla curruwilla  • Qui 11 Jul 2013 - 0:13

Formulario para postagem Empty Formulario para postagem Qui 11 Jul 2013 - 0:13

Qual é minha questão:
Olá,

Gostaria de um formulario de postagem para esse fórum: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Com esses campos:
Banner:
Server Name:
IP e Port:
Site:
Comentarios:
Screenshot

Obrigado Very Happy

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Daemon Daemon  • Sáb 13 Jul 2013 - 10:48

Formulario para postagem Empty Re: Formulario para postagem Sáb 13 Jul 2013 - 10:48

Aqui está amigo:
Código:
<style>
#right {height: 0px;}
#content-container div#content {margin-right: 0px;}
input {
height: 23px;
}
.submit-buttons{
float: left;
}
.inner dl {
border-bottom: 1px solid #F7F7F7;
padding: 8px 3px;
}
.inner dt {
display: inline-block;
width: 200px;
text-align: right;
padding-right: 8px;
}
.inner dd {
padding-left: 23px;
padding: 10px 5px;
display: inline-block;
left: 400px;
}
input.inputbox {
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
background: #FCFCFC;
border: 1px solid #D4D4D4;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
color: #9F9F9F;
display: block;
font-size: 16px;
font-weight: 700;
padding: 5px;
text-shadow: #fff 0 1px 0;
}
input.inputbox:focus {
-moz-box-shadow: inset 0 0 4px #f7d5d5, #fdd 0 0 3px;
-webkit-box-shadow: inset 0 0 4px #F7D5D5, #FDD 0 0 3px;
background-color: #FEFEFE;
border-color: #3FA6E4;
box-shadow: inset 0 0 4px #F7D5D5, #FDD 0 0 3px;
color: #555;
outline: none;
}
</style>
<script>
    html_tpl = "<b>Banner:</b> $0 <br><br><b>Server Name:</b> $1 <br><br><b>IP/Port:</b> $2<br><br><b>Site:</b> $3 <br><br><b>Screenshots:</b> $4<br><br><b>Comentários adicionais:</b> $5<br><br>";
    bbcode_tpl = "[b]Banner:[/b] [img]$0[/img]\n\n[b]Server Name:[/b] $1\n\n[b]IP e Port:[/b] $2 \n\n[b]Site:[/b] $3\n\n[b]Screenshots:[/b] $4\n\n[b]Comentários adicionais:[/b] $5 ";
    $(document).ready(function(){
      $('#bt-apagar').click(function() {
          $('#form-submit input[type="text"],#form-submit textarea').val('');
          $('input[name="f"]').val($(this).val());
      });
      $('#bt-pr-questao').click(function() {
          tpl = html_tpl;
          tpl = tpl.replace("$0", $('#banner').val());
          tpl = tpl.replace("$1", $('#servername').val());
          tpl = tpl.replace("$2", $('#ipport').val());
          tpl = tpl.replace("$3", $('#site').val());
          tpl = tpl.replace("$4", $('#screen').val());
          tpl = tpl.replace("$5", $('#comentario').val());
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideDown(300);
          $('#html-questao').html(tpl);
      });
      $('#bt-enviar').click(function() {
          tpl = bbcode_tpl;
          if($('#banner').val()!=='' && $('#servername').val()!=='' && $('#ipport').val()!=='' && $('#site').val()!=='' && $('#screen').val()!=='' && $('#comentario').val()!==''){
            tpl = tpl.replace("$0", $('#banner').val());
            tpl = tpl.replace("$1", $('#tituloforum').val());
            tpl = tpl.replace("$2", $('#ipport').val());
            tpl = tpl.replace("$3", $('#site').val());
            tpl = tpl.replace("$4", $('#screen').val());
            tpl = tpl.replace("$5", $('#comentario').val());
            $('input[name="message"]').val(tpl);
            $('input[name="subject"]').val($('#tituloforum').val());
            $('#bt-enviar-e').click();
            $('#form-submit').slideUp(300);
            $('#enviado').slideDown(800);
          }else{
            $('#erro').slideUp(1);
            $('#erro').slideDown(800);
          }
      });
      $('#bt-pr-fechar').click(function() {
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideUp(300);
          return false;
      });
      $('#tituloforum').click(function() {
          if($('#tituloforum').val()=='Coloque aqui um título descritivo sobre a sua questão'){
            $('#tituloforum').val('');
          }
      });
      jQuery('#tituloforum').keyup(function(){
          var t=document.getElementById('tituloforum').value.length;
          var i=document.getElementById('identifytitle');
          if(t<10&&t>0){
            var l=t-10;i.innerHTML='Este campo necessita mais '+l*-1+' caracteres'
          }
          else{
            i.innerHTML=''
          }
      });
      if(VarGET('f')!==''){
          $('#form-part2, #bts').slideDown(800);
          $('input[name="f"]').val(VarGET('f'));
          $('#bt-selecciona-forum').val(VarGET('f'));
      }
    });
    </script>
    <form action="/post" method="post" id="form-submit">

    <div id="erro" style="display:none;" class="panel"><div class="inner"><span class="corners-top"><span></span></span><center><span class="conteudo_texto" style="color:#C00"><b>Você deve preencher todos os campos</b></span></center><span class="corners-bottom"><span></span></span></div></div>
<br>

    <div style="display:none;" id="pr-questao" class="post row2"><div class="inner"><span class="corners-top"><span></span></span><div class="postbody"><div class="h3">Pré-visualizar [<a id="bt-pr-fechar" href="#">Fechar o modo de pré-visualização da questão</a>]</div><div id="html-questao" class="content"></div></div><span class="corners-bottom"><span></span></span></div></div><hr style="display:none;" id="pr-questao">

 <br>
<div>
<div class="panel">
  <div class="inner">
        <span class="corners-top"></span> 
        <div class="h3" style="margin-top: 7px;">Leia antes de fazer sua postagem.</div>
        <br>
        <p>Você deve seguir a padronização obrigatória abaixo para postar o seu servidor.
<br><br>
</p>
       
  </div>
        <span class="corners-bottom"></span>
</div>
    <div class="panel" id="form-part2" style=""><div class="inner"><span class="corners-top"><span></span></span>
    <div class="h3" style="margin-top: 7px;">Formulário de postagem</div>
   
 <br>    <fieldset class="fields1">
<dl><dt>
    <label>Banner:</label></dt>
    <dd><input type="text" id="banner" value="http://2img.net/i/fa/empty.gif" class="inputbox" style="clear: both; width: 810px;"> <div id="banner" style="display:inline"></div>
    </dd></dl>
    <dl><dt>
    <label>Server Name:</label></dt>
    <dd><input type="text" id="servername" value="" class="inputbox" style="clear: both; width: 810px;"> <div id="identifytitle" style="display:inline"></div>
    </dd></dl>
<dl><dt>
    <label>IP e Port:</label></dt>
    <dd><input type="text" id="ipport" value="" class="inputbox" style="clear: both; width: 810px;"> <div id="validardominio" style="display:inline"></div>
    </dd></dl>

   
 
    <dl><dt>
    <label>Site:</label></dt>
    <dd><input type="text" id="site" value="" class="inputbox" style="clear: both; width:810px;line-height: 18px;padding-left: 4px;" maxlength="100"><div id="site" style="
    display: inline;
"></div>
    </dd></dl>
    <dl><dt>
    <label>Screenshots:</label></dt>
    <dd><textarea id="screen" class="inputbox" style="clear: both; height: 100px; width:510px;" maxlength="100"></textarea>
    </dd></dl>
<dl><dt>
    <label>Comentários adicionais:</label></dt>
    <dd><textarea id="comentario" class="inputbox" tabindex="14" style="clear: both; height: 100px; width:510px;"></textarea>
    </dd></dl>
   
   
   
   
    </fieldset>
   
    <input type="hidden" name="subject">
    <input type="hidden" name="message">
    <input type="hidden" name="mode" value="newtopic">
    <input type="hidden" name="f" value="20">
    <input type="hidden" name="lt" value="0">
   
   
    <span class="corners-bottom"><span></span></span></div></div><div id="sthd" style="margin:0px"></div>

    <br>
    <div id="bts" style="" class="panel"><div class="inner"><span class="corners-top"><span></span></span>
    <fieldset class="submit-buttons"><input id="bt-pr-questao" value="Pré-visualizar" type="button" class="button1"> <input id="bt-enviar" value="Enviar questão" type="button" class="button1" name="post"> <input id="bt-apagar" value="Apagar tudo" type="button" class="button1">
    <input id="bt-enviar-e" value="Enviar Questão" type="submit" class="button1" style="display:none;" name="post"></fieldset>
    <span class="corners-bottom"><span></span></span></div></div>
    </form>
</div>
<br>
    <div id="enviado" style="display:none;" class="panel"><div class="inner"><span class="corners-top"><span></span></span><center><img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="carregando" title="enviando..."><br><span class="conteudo_texto">enviando...</span></center><span class="corners-bottom"><span></span></span></div></div>
Até mais!

curruwilla curruwilla  • Sáb 13 Jul 2013 - 16:25

Formulario para postagem Empty Re: Formulario para postagem Sáb 13 Jul 2013 - 16:25

Como faço para o botão novo tópico levar o membro a esse formulario ?

 Obs: o titulo do tópico não ta preenchendo.. Pode ser o Server Name o titulo do tópico..

Daemon Daemon  • Dom 14 Jul 2013 - 0:00

Formulario para postagem Empty Re: Formulario para postagem Dom 14 Jul 2013 - 0:00

Troque por este:
Código:
<style>
#right {height: 0px;}
#content-container div#content {margin-right: 0px;}
input {
height: 23px;
}
.submit-buttons{
float: left;
}
.inner dl {
border-bottom: 1px solid #F7F7F7;
padding: 8px 3px;
}
.inner dt {
display: inline-block;
width: 200px;
text-align: right;
padding-right: 8px;
}
.inner dd {
padding-left: 23px;
padding: 10px 5px;
display: inline-block;
left: 400px;
}
input.inputbox {
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
background: #FCFCFC;
border: 1px solid #D4D4D4;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
color: #9F9F9F;
display: block;
font-size: 16px;
font-weight: 700;
padding: 5px;
text-shadow: #fff 0 1px 0;
}
input.inputbox:focus {
-moz-box-shadow: inset 0 0 4px #f7d5d5, #fdd 0 0 3px;
-webkit-box-shadow: inset 0 0 4px #F7D5D5, #FDD 0 0 3px;
background-color: #FEFEFE;
border-color: #3FA6E4;
box-shadow: inset 0 0 4px #F7D5D5, #FDD 0 0 3px;
color: #555;
outline: none;
}
</style>
<script>
    html_tpl = "<b>Banner:</b> $0 <br><br><b>Server Name:</b> $1 <br><br><b>IP/Port:</b> $2<br><br><b>Site:</b> $3 <br><br><b>Screenshots:</b> $4<br><br><b>Comentários adicionais:</b> $5<br><br>";
    bbcode_tpl = "[b]Banner:[/b] [img]$0[/img]\n\n[b]Server Name:[/b] $1\n\n[b]IP e Port:[/b] $2 \n\n[b]Site:[/b] $3\n\n[b]Screenshots:[/b] $4\n\n[b]Comentários adicionais:[/b] $5 ";
    $(document).ready(function(){
      $('#bt-apagar').click(function() {
          $('#form-submit input[type="text"],#form-submit textarea').val('');
          $('input[name="f"]').val($(this).val());
      });
      $('#bt-pr-questao').click(function() {
          tpl = html_tpl;
          tpl = tpl.replace("$0", $('#banner').val());
          tpl = tpl.replace("$1", $('#servername').val());
          tpl = tpl.replace("$2", $('#ipport').val());
          tpl = tpl.replace("$3", $('#site').val());
          tpl = tpl.replace("$4", $('#screen').val());
          tpl = tpl.replace("$5", $('#comentario').val());
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideDown(300);
          $('#html-questao').html(tpl);
      });
      $('#bt-enviar').click(function() {
          tpl = bbcode_tpl;
          if($('#banner').val()!=='' && $('#servername').val()!=='' && $('#ipport').val()!=='' && $('#site').val()!=='' && $('#screen').val()!=='' && $('#comentario').val()!==''){
            tpl = tpl.replace("$0", $('#banner').val());
            tpl = tpl.replace("$1", $('#servername').val());
            tpl = tpl.replace("$2", $('#ipport').val());
            tpl = tpl.replace("$3", $('#site').val());
            tpl = tpl.replace("$4", $('#screen').val());
            tpl = tpl.replace("$5", $('#comentario').val());
            $('input[name="message"]').val(tpl);
            $('input[name="subject"]').val($('#servername').val());
            $('#bt-enviar-e').click();
            $('#form-submit').slideUp(300);
            $('#enviado').slideDown(800);
          }else{
            $('#erro').slideUp(1);
            $('#erro').slideDown(800);
          }
      });
      $('#bt-pr-fechar').click(function() {
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideUp(300);
          return false;
      });
      $('#servername').click(function() {
          if($('#servername').val()=='Coloque aqui um título descritivo sobre a sua questão'){
            $('#servername').val('');
          }
      });
      jQuery('#servername').keyup(function(){
          var t=document.getElementById('servername').value.length;
          var i=document.getElementById('identifytitle');
          if(t<10&&t>0){
            var l=t-10;i.innerHTML='Este campo necessita mais '+l*-1+' caracteres'
          }
          else{
            i.innerHTML=''
          }
      });
      if(VarGET('f')!==''){
          $('#form-part2, #bts').slideDown(800);
          $('input[name="f"]').val(VarGET('f'));
          $('#bt-selecciona-forum').val(VarGET('f'));
      }
    });
    </script>
    <form action="/post" method="post" id="form-submit">

    <div id="erro" style="display:none;" class="panel"><div class="inner"><span class="corners-top"><span></span></span><center><span class="conteudo_texto" style="color:#C00"><b>Você deve preencher todos os campos</b></span></center><span class="corners-bottom"><span></span></span></div></div>
<br>

    <div style="display:none;" id="pr-questao" class="post row2"><div class="inner"><span class="corners-top"><span></span></span><div class="postbody"><div class="h3">Pré-visualizar [<a id="bt-pr-fechar" href="#">Fechar o modo de pré-visualização da questão</a>]</div><div id="html-questao" class="content"></div></div><span class="corners-bottom"><span></span></span></div></div><hr style="display:none;" id="pr-questao">

 <br>
<div>
<div class="panel">
  <div class="inner">
        <span class="corners-top"></span> 
        <div class="h3" style="margin-top: 7px;">Leia antes de fazer sua postagem.</div>
        <br>
        <p>Você deve seguir a padronização obrigatória abaixo para postar o seu servidor.
<br><br>
</p>
       
  </div>
        <span class="corners-bottom"></span>
</div>
    <div class="panel" id="form-part2" style=""><div class="inner"><span class="corners-top"><span></span></span>
    <div class="h3" style="margin-top: 7px;">Formulário de postagem</div>
   
 <br>    <fieldset class="fields1">
<dl><dt>
    <label>Banner:</label></dt>
    <dd><input type="text" id="banner" value="http://2img.net/i/fa/empty.gif" class="inputbox" style="clear: both; width: 810px;"> <div id="banner" style="display:inline"></div>
    </dd></dl>
    <dl><dt>
    <label>Server Name:</label></dt>
    <dd><input type="text" id="servername" value="" class="inputbox" style="clear: both; width: 810px;"> <div id="identifytitle" style="display:inline"></div>
    </dd></dl>
<dl><dt>
    <label>IP e Port:</label></dt>
    <dd><input type="text" id="ipport" value="" class="inputbox" style="clear: both; width: 810px;"> <div id="validardominio" style="display:inline"></div>
    </dd></dl>

   
 
    <dl><dt>
    <label>Site:</label></dt>
    <dd><input type="text" id="site" value="" class="inputbox" style="clear: both; width:810px;line-height: 18px;padding-left: 4px;" maxlength="100"><div id="site" style="
    display: inline;
"></div>
    </dd></dl>
    <dl><dt>
    <label>Screenshots:</label></dt>
    <dd><textarea id="screen" class="inputbox" style="clear: both; height: 100px; width:510px;" maxlength="100"></textarea>
    </dd></dl>
<dl><dt>
    <label>Comentários adicionais:</label></dt>
    <dd><textarea id="comentario" class="inputbox" tabindex="14" style="clear: both; height: 100px; width:510px;"></textarea>
    </dd></dl>
   
   
   
   
    </fieldset>
   
    <input type="hidden" name="subject">
    <input type="hidden" name="message">
    <input type="hidden" name="mode" value="newtopic">
    <input type="hidden" name="f" value="20">
    <input type="hidden" name="lt" value="0">
   
   
    <span class="corners-bottom"><span></span></span></div></div><div id="sthd" style="margin:0px"></div>

    <br>
    <div id="bts" style="" class="panel"><div class="inner"><span class="corners-top"><span></span></span>
    <fieldset class="submit-buttons"><input id="bt-pr-questao" value="Pré-visualizar" type="button" class="button1"> <input id="bt-enviar" value="Enviar questão" type="button" class="button1" name="post"> <input id="bt-apagar" value="Apagar tudo" type="button" class="button1">
    <input id="bt-enviar-e" value="Enviar Questão" type="submit" class="button1" style="display:none;" name="post"></fieldset>
    <span class="corners-bottom"><span></span></span></div></div>
    </form>
</div>
<br>
    <div id="enviado" style="display:none;" class="panel"><div class="inner"><span class="corners-top"><span></span></span><center><img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="carregando" title="enviando..."><br><span class="conteudo_texto">enviando...</span></center><span class="corners-bottom"><span></span></span></div></div>
Depois crie um novo javascript com investimento em todas as páginas e coloque:
Código:
jQuery(function() {
  jQuery('a[href*="/post?f=20&mode=newtopic"]').attr('href','/hID-');
});
Troque onde tem ID pelo número da página HTML criada anteriormente.
Até mais!

curruwilla curruwilla  • Dom 14 Jul 2013 - 13:22

Formulario para postagem Empty Re: Formulario para postagem Dom 14 Jul 2013 - 13:22

Ae vlw, funcionou Very Happy

Daemon Daemon  • Dom 14 Jul 2013 - 13:55

Formulario para postagem Empty Re: Formulario para postagem Dom 14 Jul 2013 - 13:55

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]

Conteúdo patrocinado  • 

Formulario para postagem Empty Re: Formulario para postagem

Início :: Forumeiros :: Nostalgia:: Formulario para postagem
Permissões neste sub-fórum
Não podes responder a tópicos