Adicionar botões de edição no formulário

2 participantes

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

Tópico resolvido Adicionar botões de edição no formulário

Mensagem por APOllO 16.10.20 23:04

Detalhes da questão


Endereço do fórum: http://brasilgameshow.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá, boa noite.

Queria ajuda dos senhores para adicionar os botões de edição de campo de texto(botões de negrigo, centralizar, etc) nos meus formulários.

Passar os botões da caixa de descrição desse fórmulario:

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://i.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 #f0f0f0;
  padding: 5px;
  }
  #countitle {
  background: white;
  color: #D60B8C;
  border: 1px solid #e0e0e0;
  padding: 5px;
  border-radius: 3px;
  }
  fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
  fieldset.form-div dl:after {
  clear: both;
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  }
  #form-send .area .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 .area {
  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_nc #textarea {
  min-height: 200px;
  color: #111;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  overflow: auto;
  border: 0;
  outline: none;
  width: 100%;
  }
  #form-send .btns {
  background: #f5f5f5;
  border-top: 1px solid #d7d7d7;
  padding: 10px;
  text-align: center;
  }
  #form-send .area .textarea_nc {
  background: white;
  min-height: 200px;
  cursor: se-resize;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  padding: 3px 5px 2px;
  border: 1px solid silver;
  border-top: 0;
  width: 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(https://i.imgur.com/qRr3WvV.png) no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  float: right;
  }
</style>
<script>
  $(document).ready(function() {
  $('#send').click(function() {
   if($('#titulo').val()!=='' && $('#endereco').val()!=='' && $('#versao').val()!=='' && $('#textarea').val()!=='') {
    var titulo = $('#titulo').val();
    var endereco = $('#endereco').val();
    var versao = $('#versao').val();
    var texto = $('#textarea').val();
    final = '[b]Minha questão:[/b]\n[quote]'+texto+'[/quote]\n[hr]\n[b]Endereço do meu fórum:[/b]\n'+endereco+'\n\n[b]Versão:[/b]\n'+versao+'';
    $('input[name="subject"]').val(titulo);
    $('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 titulo = $('#titulo').val();
    var endereco = $('#endereco').val();
    var versao = $('#versao').val();
    var texto = $('#textarea').val();
  final = '<b>Minha questão:</b><br /><blockquote><div>'+texto+'</div></blockquote><br /><hr /><br /><b>Endereço do meu fórum:</b><br />'+endereco+'<br /><br /><b>Versão:</b><br />'+versao+'';
    $('#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('');
  });
  $('#titulo').keyup(function() {
     var tvalue = document.getElementById('titulo').value.length;
     var icnt = document.getElementById('countitle');
     if(tvalue < 10 && tvalue > 0) {
       var l = tvalue-10;
       icnt.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="form-info">
  <h3>Formulário de criação de tópico</h3><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="https://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><br>
<form action="/post" method="post" name="post" id="form-send" enctype="multipart/form-data">
  <fieldset class="form-div">  
  <dl><dt>
  <label>Título da questão:</label></dt>
  <dd>
    <input type="text" style="clear: both;width: 400px;" id="titulo" placeholder="Título da sua questão"> <div id="countitle" style="display:inline"></div>
  </dd>
  </dl>
  <dl><dt>
  <label>Endereço do fórum:</label></dt>
  <dd>
    <input type="text" style="clear: both;width: 400px;" id="endereco" value="http://">
  </dd>
  </dl>
  <dl><dt>
  <label>Versão do fórum:</label></dt>
     <dd>
      <select class="inputbox" id="versao">
       <option value="PunBB">PunBB</option>
       <option value="Phpbb3">Phpbb3</option>
       <option value="Phpbb2">Phpbb2</option>
       <option value="Invision">Invision</option>
      </select>
     </dd>
  </dl>
  <dl><dt>
  <label>Descrição do tópico:</label></dt>
  <dd>
    <div class="area">
     <div class="buttons">
      <button class="button2" onclick="bbcode_tag('[b]','[/b]')" type="button" id="addbbcode0" title="Negrito"><img src="https://imgur.com/z2xtYUE.png" alt="Negrito" title="Negrito"></button>
      <button class="button2" onclick="bbcode_tag('[i]','[/i]')" type="button" id="addbbcode2" title="Itálico"><img src="https://imgur.com/EcEpCJ9.png" alt="Itálico" title="Itálico"></button>
      <button class="button2" onclick="bbcode_tag('[u]','[/u]')" type="button" id="addbbcode4" title="Underline"><img src="https://imgur.com/i6Ergr1.png" alt="Underline" title="Underline"></button>
      <button class="button2" onclick="bbcode_tag('[strike]','[/strike]')" type="button" id="addbbcode5" title="Strike"><img src="https://i.imgur.com/hWWoJSN.png" alt="Strike" title="Strike"></button>
      <button class="button2" onclick="bbcode_tag('[left]','[/left]')" type="button" id="addbbcode52" title="Esquerda"><img src="https://2img.net/i/fa/wysiwyg/text_align_left.png" alt="Esquerda" title="Esquerda"></button>
      <button class="button2" onclick="bbcode_tag('[center]','[/center]')" type="button" id="addbbcode30" title="Centralizar"><img src="https://2img.net/i/fa/wysiwyg/text_align_center.png" alt="Centralizar" title="Centralizar"></button>
      <button class="button2" onclick="bbcode_tag('[right]','[/right]')" type="button" id="addbbcode32" title="Direita"><img src="https://2img.net/i/fa/wysiwyg/text_align_right.png" alt="Direita" title="Direita"></button>
      <button class="button2" onclick="bbcode_tag('[justify]','[/justify]')" type="button" id="addbbcode33" title="Justificado"><img src="https://2img.net/i/fa/wysiwyg/text_align_justify.png" alt="Justificado" title="Justificado"></button>
      <button class="button2" onclick="bbcode_tag('[code]','[/code]')" type="button" id="addbbcode41" title="code"><img src="https://i.imgur.com/LEJ7qoj.png" alt="Code" title="Code"></button>
      <button class="button2" onclick="bbcode_tag('[list][*]','[/list]')" type="button" id="addbbcode10" title="-Lista"><img src="https://2img.net/i/fa/wysiwyg/text_list_bullets.png" alt="-Lista" title="-Lista"></button>
      <button class="button2" onclick="bbcode_tag('[list=1][*]','[/list]')" type="button" id="addbbcode12" title="Lista ordenada"><img src="https://2img.net/i/fa/wysiwyg/text_list_numbers.png" alt="Lista ordenada" title="Lista ordenada"></button>
      <button class="button2" onclick="bbcode_tag('[img]','[/img]')" type="button" id="addbbcode14" title="Imagem"><img src="https://2img.net/i/fa/wysiwyg/picture.png" alt="Imagem" title="Imagem"></button>
      <button class="button2" onclick="bbcode_tag('[url=','][/url]')" type="button" id="addbbcode16" title="Link"><img src="https://2img.net/i/fa/wysiwyg/link.png" alt="Link" title="Link"></button>
     </div>
     <div class="textarea_nc">
      <textarea id="textarea" class="inputbox"></textarea>
     </div>
    </div>
  </dd>
  </dl>
  </fieldset><div class="btns">
    <input type="hidden" name="subject">
    <input type="hidden" name="message">
    <input type="hidden" name="mode" value="newtopic">
    <input type="hidden" name="f" value="12">
    <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="https://2img.net/i/fa/admin/wait_preview.gif" alt="carregando" title="enviando..."><br>
   <span class="conteudo_texto">enviando...</span>
  </center>
</div>
<script>
function bbcode_tag(o,c){
var t=jQuery('#textarea');t.val(t.val().substring(0,t[0].selectionStart)+o+t.val().substring(t[0].selectionStart,t[0].selectionEnd)+c+t.val().substring(t[0].selectionEnd,t.val().length))};
</script>

Spoiler:

Para o meu:

Código:
<!DOCTYPE html>
<html>
<head>
 
  <link rel="shortcut icon" href="https://imgur.com/B29dLYV.png" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BGS | Formulário para Líder</title>
 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
  <style type="text/css">
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 
    html,
    body {
      height: 100%;
    }
 
    body {
      font-size: 17px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-weight: normal;
      line-height: 1.5;
      color: #212121;
      line-height: 1.5;
      background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
    }
 
    /**
    * Begin tipografia.
    */
 
    a,
    a:active,
    a:link,
    a:visited,
    a:focus {
      color: #309ced;
      text-decoration: none;
      border-bottom: solid 1px transparent;
      outline: 0;
    }
 
    a:hover {
      border-bottom-color: #2688dc;
    }
 
    a.fa:hover {
      border-bottom-color: transparent;
      color: #1f6db0;
    }
  
    h3 {
      font-size: 20px;
      font-weight: 300;
      margin-bottom: 10px;
      display: block;
      width: 100%;
      padding-bottom: 3px;
      border-bottom: 2px solid #375e7f;
    }
  
    textarea {
      height: 90px;
      box-sizing: border-box;
      resize: vertical;
      outline: none;
    }
 
    .btn {
      border: solid 1px #e4e4e4;
      background: linear-gradient(180deg, #fff 0%, #efefef 100%);
      padding: .575rem 1.1rem;
      border-radius: .175rem;
      font-weight: 600;
      color: #686a6b;
      cursor: pointer;
      display: block;
      text-align: center;
      margin-bottom: 5px;
      width: 100%;
    }
 
    .btn:focus {
      border-color: #375e7f;
      box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
      outline: none;
    }
 
    .btn:hover {
      box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
    }
 
    .btn.btn-primary {
      border-radius: 3px;
      box-shadow: none;
      color: #fff;
      background: #309ced;
      font-size: 14px;
      transition: linear all 125ms;
      margin-top: 50%;
    }
 
    .btn.btn-primary:focus {
      border-color: #375e7f;
      box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
      outline: none;
    }
 
    .btn.btn-primary:hover {
      background: #444;
    }
 
    .btn.btn-danger {
      color: #fff;
      border-color: #bd2c00;
      background: #e7592e;
      background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
    }
 
    .btn.btn-danger:focus {
      border-color: #aa2c05;
      box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
      outline: none;
    }
 
    .btn-progress {
      cursor: not-allowed;
      opacity: .657;
    }
 
    .form-control {
      background-color: #fff;
      border: 1px solid #d4d4d4;
      padding: 6px 8px;
      margin: 5px 0 0;
      display: block;
      width: 100%;
      font-size: 16px;
      color: #555;
      line-height: 20px;
      border-radius: 3px;
      box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
      outline: none;
    }
 
    .form-control:focus {
      border-color: #375e7f;
      box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
      outline: none;
    }
  
    input[type="text"]:disabled {
      background: #dddddd;
      cursor: not-allowed;
    }
  
    .card {
      background-color: #E54732;
      padding: 5px;
      font-size: 10px;
      color: #fff;
      font-weight: 800;
      border-radius: 5px;
      float: left;
      margin-right: 5px;
    }
 
 
    /*
    * End tipografia.
    **/
 
    .wrapper {
      width: 50%;
      position: absolute;
      top: 5%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
 
    .wrapper hgroup {
      text-align: center;
    }
  
    .wrapper hgroup h1 {
      font-weight: 300;
      margin: 10px 0;
      padding: 0;
      color: #545454;
    }
 
    .wrapper hgroup i.fa {
      font-size: 4em;
    }
 
    .wrapper hgroup h4 {
      font-weight: 300;
      margin: 10px 0;
      padding: 0;
      color: #545454;
    }
 
    .wrapper form {
      border: solid 1px #d4d4d4;
      margin: 0 0 25px;
      padding: 20px;
      color: #555;
      border-radius: 4px;
      background-color: #fff;
    }
 
    .wrapper form .form-group label {
      display: table;
    }
 
    .wrapper form .form-group .form-group-col {
      float: left;
      margin-right: 2%;
      margin-top: 2%;
    }
  
    .form-group .form-group-col:first-child {
      margin-left: 3%;
    }
 
    .wrapper footer {
      border: solid 1px #d6d6d6;
      border-radius: 3px;
      padding: 13px;
      text-align: center;
      font-size: 16px;
      color: #555;
      margin-bottom: 2%;
    }
  
    .col-94 {
      width: 94%;
    }
  
    .col-46 {
      width: 46%;
    }
  
    .col-30 {
      width: 30%;
    }
 
    /**
    * FOR JS Styles:
    */
 
    #login-form,
    footer {
      box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
    }
 
    .title h2 {
      font-weight: 300;
      margin-bottom: 5px;
      text-align: center;
    }
    .title h4 {
      font-weight: 300;
      margin-bottom: 15px;
      text-align: center;
    }
 
    @media screen and (max-width: 900px) {
      .wrapper {
        width: 40%;
      }
    }
 
    @media screen and (max-width: 600px) {
      .wrapper {
        width: 70%;
      }
    }
 
    @media screen and (max-width: 500px) {
      .wrapper {
        width: 80%;
      }
    }
 
    @media screen and (max-width: 400px) {
      .wrapper {
        width: 90%;
      }
    }
  </style>
</head>
<body>
  <main class="wrapper">
 
    <hgroup>
      <h1><img src="https://imgur.com/B29dLYV.png"></h1>
    </hgroup>
 
    <form id="form-content">
      <a href="/h4-" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Preencha TODOS os dados corretamente. No caso de não preencher os campos corretamente seu pedido pode ser anulado e arquivado sem aviso prévio.</h4>
      </div>
      <h3>Dados para Inscrição</h3>
      <div class="form-group">
        <div class="form-group-col col-46">
          <label for="nickname">Nick</label>
          <input type="text" id="nickname" class="form-control" placeholder="nick no jogo" required/>
        </div>
        <div class="form-group-col col-46">
          <label for="denuncia">Org pretendida:</label>
          <select data-type="select" id="denuncia" class="form-control" required>
            <!-- First -->
          <option value="Policía Militar">Policía Militar</option>
            <option value="Policía Federal">Policía Federal</option>
            <option value="Policía Civil">Policía Civil</option>
            <option value="BOPE">BOPE</option>
            <option value="Exercito">Exercito</option>
            <option value="Detran">Detran</option>
            <option value="ROTA">ROTA</option>
            <option value="Los Aztecas">Los Aztecas</option>
            <option value="Los Vagos">Los Vagos</option>
            <option value="Ballas">Ballas</option>
            <option value="Groove Street">Groove Street</option>
            <option value="Comando Vermelho">Comando Vermelho</option>
            <option value="PCC">PCC</option>
            <option value="Cosa Nostra">Cosa Nostra</option>
            <option value="Yakuza">Yakuza</option>
            <option value="PCC">PCC</option>
            <option value="The Triads">The Triads</option>
            <option value="Hitman">Hitmans</option>
            <option value="Farc">Farc</option>
            <option value="Estado Islamico">Estado Islâmico</option>
            <option value="Mayans">Mayans</option>
            <option value="Sons of Anarchy">Sons of Anarchy</option>
            <option value="Reporters">Reporters</option>
            <option value="Médicos">Médicos</option>
 
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-46">
          <label for="acusado">Que hórarios está dísponivel?</label>
          <input type="text" id="acusado" class="form-control" placeholder="Horas que joga manhã/tarde/noite" required/>
        </div>
        <div class="form-group-col col-46">
          <label for="retorno">Print do seu rg</label>
          <input type="text" id="provas" class="form-control" placeholder="Upe no: imgur.com/upload" required/>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="motivos">Diga-nos por que quer ser líder?:</label>
          <textarea data-type="textarea" id="motivos" class="form-control" placeholder="Descreva por que quer se tornar um líder e quais são suas propostas com a org." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <input type="checkbox" name="termos" value="X" required> Li e concordo que preenchi todos os dados corretamente.
        </div>
      </div>
      <br/>
      <button type="submit" class="btn btn-primary">Enviar</button>
 
    </form>
  </main>
 
  <textarea style="display: none;" id="post-msg">[center][b][color=#ff0000]Inscrição líder {{denuncia}}[/color][/b][/center]
 
    [b]Nick[/b] {{nickname}}
    
    [b]Org Pretendida[/b] {{denuncia}}
    
    [b]Horários Dispóniveis:[/b] {{acusado}}
    
    [b]Print do RG:[/b] {{provas}}
    
    [b]Descrição:[/b] {{motivos}}
      </textarea>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    (function ($) {
      'use strict';
 
      $(function () {
          $('#form-content').on('submit', function (event) {
 
            var data = {
              nickname: $('#nickname').val(),
              denuncia: $('#denuncia').val(),
              acusado: $('#acusado').val(),
              provas: $('#provas').val(),
              motivos: $('#motivos').val(),
              termos: ' x ',
            };
          
            event.preventDefault();
            setTimeout(function () {
                  $.post('/post', {
                      f: 48,
                      subject: '[' + data.nickname + '] Inscrição - '+ data.denuncia +'',
                      message: [
              '[center][b][size=18][font=Arial]Inscrição para Líder[/font][/size][/b] [/center]',
              '',
    '[b]Nick:[/b] ' + data.nickname,
    
    '[b]Org Pretendida:[/b] ' + data.denuncia,
    
    '[b]Horários Disponíveis:[/b] ' + data.acusado,
    '[b]Link do RG:[/b]' + data.provas,
    '[b]Descrição:[/b] ' + data.motivos,
                      '',
                      ].join('\n'),
                      mode: 'newtopic',
      tid: $('[name="tid"]:first').val(),
                      post: 1,
                  }).done(function () {
                      alert('Postado com sucesso. Você será redirecionado para o tópico...');
                location.href = 'http://' + location.host + '/f48-';
                  }).fail(function () {
                      alert('Houve um erro! Tente novamente!');
                  });
            }, 600);
          });
      });
    }(jQuery));
  </script>
</body>
</html>

Spoiler:

E também se possível adicionar o botão para hospedar imagens que tem no editor padrão dos fóruns.
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Adicionar botões de edição no formulário

Mensagem por tikky 16.10.20 23:37

Olá @APOllO,

Adicionei o editor padrão dos fóruns Forumeiros (SCEditor) ao formulário, altere a sua página para:
Código:

<!DOCTYPE html>
<html>
<head>
 
  <link rel="shortcut icon" href="https://imgur.com/B29dLYV.png" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BGS | Formulário para Líder</title>
 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
  <style type="text/css">
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 
    html,
    body {
      height: 100%;
    }
 
    body {
      font-size: 17px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-weight: normal;
      line-height: 1.5;
      color: #212121;
      line-height: 1.5;
      background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
    }
 
    /**
    * Begin tipografia.
    */
 
    a,
    a:active,
    a:link,
    a:visited,
    a:focus {
      color: #309ced;
      text-decoration: none;
      border-bottom: solid 1px transparent;
      outline: 0;
    }
 
    a:hover {
      border-bottom-color: #2688dc;
    }
 
    a.fa:hover {
      border-bottom-color: transparent;
      color: #1f6db0;
    }
  
    h3 {
      font-size: 20px;
      font-weight: 300;
      margin-bottom: 10px;
      display: block;
      width: 100%;
      padding-bottom: 3px;
      border-bottom: 2px solid #375e7f;
    }
  
    textarea {
      height: 90px;
      box-sizing: border-box;
      resize: vertical;
      outline: none;
    }
 
    .btn {
      border: solid 1px #e4e4e4;
      background: linear-gradient(180deg, #fff 0%, #efefef 100%);
      padding: .575rem 1.1rem;
      border-radius: .175rem;
      font-weight: 600;
      color: #686a6b;
      cursor: pointer;
      display: block;
      text-align: center;
      margin-bottom: 5px;
      width: 100%;
    }
 
    .btn:focus {
      border-color: #375e7f;
      box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
      outline: none;
    }
 
    .btn:hover {
      box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
    }
 
    .btn.btn-primary {
      border-radius: 3px;
      box-shadow: none;
      color: #fff;
      background: #309ced;
      font-size: 14px;
      transition: linear all 125ms;
      margin-top: 50%;
    }
 
    .btn.btn-primary:focus {
      border-color: #375e7f;
      box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
      outline: none;
    }
 
    .btn.btn-primary:hover {
      background: #444;
    }
 
    .btn.btn-danger {
      color: #fff;
      border-color: #bd2c00;
      background: #e7592e;
      background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
    }
 
    .btn.btn-danger:focus {
      border-color: #aa2c05;
      box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
      outline: none;
    }
 
    .btn-progress {
      cursor: not-allowed;
      opacity: .657;
    }
 
    .form-control {
      background-color: #fff;
      border: 1px solid #d4d4d4;
      padding: 6px 8px;
      margin: 5px 0 0;
      display: block;
      width: 100%;
      font-size: 16px;
      color: #555;
      line-height: 20px;
      border-radius: 3px;
      box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
      outline: none;
    }
 
    .form-control:focus {
      border-color: #375e7f;
      box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
      outline: none;
    }
  
    input[type="text"]:disabled {
      background: #dddddd;
      cursor: not-allowed;
    }
  
    .card {
      background-color: #E54732;
      padding: 5px;
      font-size: 10px;
      color: #fff;
      font-weight: 800;
      border-radius: 5px;
      float: left;
      margin-right: 5px;
    }
 
 
    /*
    * End tipografia.
    **/
 
    .wrapper {
      width: 50%;
      position: absolute;
      top: 5%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
 
    .wrapper hgroup {
      text-align: center;
    }
  
    .wrapper hgroup h1 {
      font-weight: 300;
      margin: 10px 0;
      padding: 0;
      color: #545454;
    }
 
    .wrapper hgroup i.fa {
      font-size: 4em;
    }
 
    .wrapper hgroup h4 {
      font-weight: 300;
      margin: 10px 0;
      padding: 0;
      color: #545454;
    }
 
    .wrapper form {
      border: solid 1px #d4d4d4;
      margin: 0 0 25px;
      padding: 20px;
      color: #555;
      border-radius: 4px;
      background-color: #fff;
    }
 
    .wrapper form .form-group label {
      display: table;
    }
 
    .wrapper form .form-group .form-group-col {
      float: left;
      margin-right: 2%;
      margin-top: 2%;
    }
  
    .form-group .form-group-col:first-child {
      margin-left: 3%;
    }
 
    .wrapper footer {
      border: solid 1px #d6d6d6;
      border-radius: 3px;
      padding: 13px;
      text-align: center;
      font-size: 16px;
      color: #555;
      margin-bottom: 2%;
    }
  
    .col-94 {
      width: 94%;
    }
  
    .col-46 {
      width: 46%;
    }
  
    .col-30 {
      width: 30%;
    }
 
    /**
    * FOR JS Styles:
    */
 
    #login-form,
    footer {
      box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
    }
 
    .title h2 {
      font-weight: 300;
      margin-bottom: 5px;
      text-align: center;
    }
    .title h4 {
      font-weight: 300;
      margin-bottom: 15px;
      text-align: center;
    }
 
    @media screen and (max-width: 900px) {
      .wrapper {
        width: 40%;
      }
    }
 
    @media screen and (max-width: 600px) {
      .wrapper {
        width: 70%;
      }
    }
 
    @media screen and (max-width: 500px) {
      .wrapper {
        width: 80%;
      }
    }
 
    @media screen and (max-width: 400px) {
      .wrapper {
        width: 90%;
      }
    }
  </style>
</head>
<body>
  <main class="wrapper">
 
    <hgroup>
      <h1><img src="https://imgur.com/B29dLYV.png"></h1>
    </hgroup>
 
    <form id="form-content">
      <a href="/h4-" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Preencha TODOS os dados corretamente. No caso de não preencher os campos corretamente seu pedido pode ser anulado e arquivado sem aviso prévio.</h4>
      </div>
      <h3>Dados para Inscrição</h3>
      <div class="form-group">
        <div class="form-group-col col-46">
          <label for="nickname">Nick</label>
          <input type="text" id="nickname" class="form-control" placeholder="nick no jogo" required/>
        </div>
        <div class="form-group-col col-46">
          <label for="denuncia">Org pretendida:</label>
          <select data-type="select" id="denuncia" class="form-control" required>
            <!-- First -->
          <option value="Policía Militar">Policía Militar</option>
            <option value="Policía Federal">Policía Federal</option>
            <option value="Policía Civil">Policía Civil</option>
            <option value="BOPE">BOPE</option>
            <option value="Exercito">Exercito</option>
            <option value="Detran">Detran</option>
            <option value="ROTA">ROTA</option>
            <option value="Los Aztecas">Los Aztecas</option>
            <option value="Los Vagos">Los Vagos</option>
            <option value="Ballas">Ballas</option>
            <option value="Groove Street">Groove Street</option>
            <option value="Comando Vermelho">Comando Vermelho</option>
            <option value="PCC">PCC</option>
            <option value="Cosa Nostra">Cosa Nostra</option>
            <option value="Yakuza">Yakuza</option>
            <option value="PCC">PCC</option>
            <option value="The Triads">The Triads</option>
            <option value="Hitman">Hitmans</option>
            <option value="Farc">Farc</option>
            <option value="Estado Islamico">Estado Islâmico</option>
            <option value="Mayans">Mayans</option>
            <option value="Sons of Anarchy">Sons of Anarchy</option>
            <option value="Reporters">Reporters</option>
            <option value="Médicos">Médicos</option>
 
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-46">
          <label for="acusado">Que hórarios está dísponivel?</label>
          <input type="text" id="acusado" class="form-control" placeholder="Horas que joga manhã/tarde/noite" required/>
        </div>
        <div class="form-group-col col-46">
          <label for="retorno">Print do seu rg</label>
          <input type="text" id="provas" class="form-control" placeholder="Upe no: imgur.com/upload" required/>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="motivos">Diga-nos por que quer ser líder?:</label>
          <textarea data-type="textarea" id="motivos" class="form-control" placeholder="Descreva por que quer se tornar um líder e quais são suas propostas com a org." required></textarea>
        <p class="fa-form-group clearfix"><a href="javascript:servimg()" id="servimg" style="text-decoration: underline;">Hospedar imagem</a>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <input type="checkbox" name="termos" value="X" required> Li e concordo que preenchi todos os dados corretamente.
        </div>
      </div>
      <br/>
      <button type="submit" class="btn btn-primary">Enviar</button>
 
    </form>
  </main>
 
  <textarea style="display: none;" id="post-msg">[center][b][color=#ff0000]Inscrição líder {{denuncia}}[/color][/b][/center]
 
    [b]Nick[/b] {{nickname}}
    
    [b]Org Pretendida[/b] {{denuncia}}
    
    [b]Horários Dispóniveis:[/b] {{acusado}}
    
    [b]Print do RG:[/b] {{provas}}
    
    [b]Descrição:[/b] {{motivos}}
      </textarea>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
      <script src="https://forumeirospt.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
      <!-- SCEDITOR -->
      <link rel="stylesheet" href="https://illiweb.com/rs3/71/frm/SCEditor/src/themes/fa.default.min.css" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/sceditor/2.1.3/jquery.sceditor.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/sceditor/2.1.3/formats/bbcode.js"></script>

  <script type="text/javascript">

           sceditor.create(document.getElementById('motivos'), {
                  width: '100%',
                  height: 'auto',
                  style: 'https://illiweb.com/rs3/71/frm/SCEditor/minified/jquery.sceditor.default.min.css',
                  format: 'bbcode',
                  resizeEnabled: false,
                  emoticonsEnabled: false,
                  bSourceMode: false,
                  toolbar: 'bold,italic,underline,strike|left,center,right,justify|quote,code|image,link,youtube|headers,size,color,font,removeformat|date,time'
              });
    
             function servimg() {
    
                $.getScript('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js', function() {

                  $.get('/post?f=1&mode=newtopic', function (d) {
          
                    Swal.fire({
                   html: $('<iframe>', {
        'src' : 'https://' + d.match(/servimgDomain = '(.*?)'/)[1] + '/forum_upload.php?account=' + d.match(/servImgAccount = '(.*?)'/)[1] + '&id=' + d.match(/servImgId = '(.*?)'/)[1] + '&f=' + d.match(/servImgF = '(.*?)'/)[1],
        'width' : 'auto',
        'height':'230px',
        'scrolling':'no'
                    }).css('border', 'none'),
                      showCancelButton: false,
                    showConfirmButton: false,
                    showCloseButton: true,
                    allowOutsideClick: false
                    });
    
                    });
    
                  });
    
                }
    
    (function ($) {
      'use strict';
 
      $(function () {
          $('#form-content').on('submit', function (event) {
 
            var data = {
              nickname: $('#nickname').val(),
              denuncia: $('#denuncia').val(),
              acusado: $('#acusado').val(),
              provas: $('#provas').val(),
              motivos: $('#motivos').val(),
              termos: ' x ',
            };
          
            event.preventDefault();
            setTimeout(function () {
                  $.post('/post', {
                      f: 48,
                      subject: '[' + data.nickname + '] Inscrição - '+ data.denuncia +'',
                      message: [
              '[center][b][size=18][font=Arial]Inscrição para Líder[/font][/size][/b] [/center]',
              '',
    '[b]Nick:[/b] ' + data.nickname,
    
    '[b]Org Pretendida:[/b] ' + data.denuncia,
    
    '[b]Horários Disponíveis:[/b] ' + data.acusado,
    '[b]Link do RG:[/b]' + data.provas,
    '[b]Descrição:[/b] ' + data.motivos,
                      '',
                      ].join('\n'),
                      mode: 'newtopic',
      tid: $('[name="tid"]:first').val(),
                      post: 1,
                  }).done(function () {
                      alert('Postado com sucesso. Você será redirecionado para o tópico...');
                location.href = 'http://' + location.host + '/f48-';
                  }).fail(function () {
                      alert('Houve um erro! Tente novamente!');
                  });
            }, 600);
          });
      });
    }(jQuery));
  </script>
</body>
</html>


Atenciosamente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões de edição no formulário

Mensagem por APOllO 17.10.20 0:22

Excelente, é isso mesmo. Só que ficou muito apertado no canto:

Adicionar - Adicionar botões de edição no formulário Sem_tz13
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Adicionar botões de edição no formulário

Mensagem por tikky 17.10.20 9:45

Volte a alterar a página para:
Código:
 
<!DOCTYPE html>
<html>
<head>
 
  <link rel="shortcut icon" href="https://imgur.com/B29dLYV.png" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BGS | Formulário para Líder</title>
 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
  <style type="text/css">
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 
    html,
    body {
      height: 100%;
    }
 
    body {
      font-size: 17px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-weight: normal;
      line-height: 1.5;
      color: #212121;
      line-height: 1.5;
      background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
    }

    .sceditor-button, .sceditor-button div {
      -webkit-box-sizing: content-box!important;
      -moz-box-sizing: content-box!important;
      box-sizing: content-box!important;
    }
 
    /**
    * Begin tipografia.
    */
 
    a,
    a:active,
    a:link,
    a:visited,
    a:focus {
      color: #309ced;
      text-decoration: none;
      border-bottom: solid 1px transparent;
      outline: 0;
    }
 
    a:hover {
      border-bottom-color: #2688dc;
    }
 
    a.fa:hover {
      border-bottom-color: transparent;
      color: #1f6db0;
    }
 
    h3 {
      font-size: 20px;
      font-weight: 300;
      margin-bottom: 10px;
      display: block;
      width: 100%;
      padding-bottom: 3px;
      border-bottom: 2px solid #375e7f;
    }
 
    textarea {
      height: 90px;
      box-sizing: border-box;
      resize: vertical;
      outline: none;
    }
 
    .btn {
      border: solid 1px #e4e4e4;
      background: linear-gradient(180deg, #fff 0%, #efefef 100%);
      padding: .575rem 1.1rem;
      border-radius: .175rem;
      font-weight: 600;
      color: #686a6b;
      cursor: pointer;
      display: block;
      text-align: center;
      margin-bottom: 5px;
      width: 100%;
    }
 
    .btn:focus {
      border-color: #375e7f;
      box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
      outline: none;
    }
 
    .btn:hover {
      box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
    }
 
    .btn.btn-primary {
      border-radius: 3px;
      box-shadow: none;
      color: #fff;
      background: #309ced;
      font-size: 14px;
      transition: linear all 125ms;
      margin-top: 50%;
    }
 
    .btn.btn-primary:focus {
      border-color: #375e7f;
      box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
      outline: none;
    }
 
    .btn.btn-primary:hover {
      background: #444;
    }
 
    .btn.btn-danger {
      color: #fff;
      border-color: #bd2c00;
      background: #e7592e;
      background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
    }
 
    .btn.btn-danger:focus {
      border-color: #aa2c05;
      box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
      outline: none;
    }
 
    .btn-progress {
      cursor: not-allowed;
      opacity: .657;
    }
 
    .form-control {
      background-color: #fff;
      border: 1px solid #d4d4d4;
      padding: 6px 8px;
      margin: 5px 0 0;
      display: block;
      width: 100%;
      font-size: 16px;
      color: #555;
      line-height: 20px;
      border-radius: 3px;
      box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
      outline: none;
    }
 
    .form-control:focus {
      border-color: #375e7f;
      box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
      outline: none;
    }
 
    input[type="text"]:disabled {
      background: #dddddd;
      cursor: not-allowed;
    }
 
    .card {
      background-color: #E54732;
      padding: 5px;
      font-size: 10px;
      color: #fff;
      font-weight: 800;
      border-radius: 5px;
      float: left;
      margin-right: 5px;
    }
 
 
    /*
    * End tipografia.
    **/
 
    .wrapper {
      width: 50%;
      position: absolute;
      top: 5%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
 
    .wrapper hgroup {
      text-align: center;
    }
 
    .wrapper hgroup h1 {
      font-weight: 300;
      margin: 10px 0;
      padding: 0;
      color: #545454;
    }
 
    .wrapper hgroup i.fa {
      font-size: 4em;
    }
 
    .wrapper hgroup h4 {
      font-weight: 300;
      margin: 10px 0;
      padding: 0;
      color: #545454;
    }
 
    .wrapper form {
      border: solid 1px #d4d4d4;
      margin: 0 0 25px;
      padding: 20px;
      color: #555;
      border-radius: 4px;
      background-color: #fff;
    }
 
    .wrapper form .form-group label {
      display: table;
    }
 
    .wrapper form .form-group .form-group-col {
      float: left;
      margin-right: 2%;
      margin-top: 2%;
    }
 
    .form-group .form-group-col:first-child {
      margin-left: 3%;
    }
 
    .wrapper footer {
      border: solid 1px #d6d6d6;
      border-radius: 3px;
      padding: 13px;
      text-align: center;
      font-size: 16px;
      color: #555;
      margin-bottom: 2%;
    }
 
    .col-94 {
      width: 94%;
    }
 
    .col-46 {
      width: 46%;
    }
 
    .col-30 {
      width: 30%;
    }
 
    /**
    * FOR JS Styles:
    */
 
    #login-form,
    footer {
      box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
    }
 
    .title h2 {
      font-weight: 300;
      margin-bottom: 5px;
      text-align: center;
    }
    .title h4 {
      font-weight: 300;
      margin-bottom: 15px;
      text-align: center;
    }
 
    @media screen and (max-width: 900px) {
      .wrapper {
        width: 40%;
      }
    }
 
    @media screen and (max-width: 600px) {
      .wrapper {
        width: 70%;
      }
    }
 
    @media screen and (max-width: 500px) {
      .wrapper {
        width: 80%;
      }
    }
 
    @media screen and (max-width: 400px) {
      .wrapper {
        width: 90%;
      }
    }
  </style>
</head>
<body>
  <main class="wrapper">
 
    <hgroup>
      <h1><img src="https://imgur.com/B29dLYV.png"></h1>
    </hgroup>
 
    <form id="form-content">
      <a href="/h4-" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Preencha TODOS os dados corretamente. No caso de não preencher os campos corretamente seu pedido pode ser anulado e arquivado sem aviso prévio.</h4>
      </div>
      <h3>Dados para Inscrição</h3>
      <div class="form-group">
        <div class="form-group-col col-46">
          <label for="nickname">Nick</label>
          <input type="text" id="nickname" class="form-control" placeholder="nick no jogo" required/>
        </div>
        <div class="form-group-col col-46">
          <label for="denuncia">Org pretendida:</label>
          <select data-type="select" id="denuncia" class="form-control" required>
            <!-- First -->
          <option value="Policía Militar">Policía Militar</option>
            <option value="Policía Federal">Policía Federal</option>
            <option value="Policía Civil">Policía Civil</option>
            <option value="BOPE">BOPE</option>
            <option value="Exercito">Exercito</option>
            <option value="Detran">Detran</option>
            <option value="ROTA">ROTA</option>
            <option value="Los Aztecas">Los Aztecas</option>
            <option value="Los Vagos">Los Vagos</option>
            <option value="Ballas">Ballas</option>
            <option value="Groove Street">Groove Street</option>
            <option value="Comando Vermelho">Comando Vermelho</option>
            <option value="PCC">PCC</option>
            <option value="Cosa Nostra">Cosa Nostra</option>
            <option value="Yakuza">Yakuza</option>
            <option value="PCC">PCC</option>
            <option value="The Triads">The Triads</option>
            <option value="Hitman">Hitmans</option>
            <option value="Farc">Farc</option>
            <option value="Estado Islamico">Estado Islâmico</option>
            <option value="Mayans">Mayans</option>
            <option value="Sons of Anarchy">Sons of Anarchy</option>
            <option value="Reporters">Reporters</option>
            <option value="Médicos">Médicos</option>
 
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-46">
          <label for="acusado">Que hórarios está dísponivel?</label>
          <input type="text" id="acusado" class="form-control" placeholder="Horas que joga manhã/tarde/noite" required/>
        </div>
        <div class="form-group-col col-46">
          <label for="retorno">Print do seu rg</label>
          <input type="text" id="provas" class="form-control" placeholder="Upe no: imgur.com/upload" required/>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="motivos">Diga-nos por que quer ser líder?:</label>
          <textarea data-type="textarea" id="motivos" class="form-control" placeholder="Descreva por que quer se tornar um líder e quais são suas propostas com a org." required></textarea>
        <p class="fa-form-group clearfix"><a href="javascript:servimg()" id="servimg" style="text-decoration: underline;">Hospedar imagem</a>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <input type="checkbox" name="termos" value="X" required> Li e concordo que preenchi todos os dados corretamente.
        </div>
      </div>
      <br/>
      <button type="submit" class="btn btn-primary">Enviar</button>
 
    </form>
  </main>
 
  <textarea style="display: none;" id="post-msg">[center][b][color=#ff0000]Inscrição líder {{denuncia}}[/color][/b][/center]
 
    [b]Nick[/b] {{nickname}}
   
    [b]Org Pretendida[/b] {{denuncia}}
   
    [b]Horários Dispóniveis:[/b] {{acusado}}
   
    [b]Print do RG:[/b] {{provas}}
   
    [b]Descrição:[/b] {{motivos}}
      </textarea>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
      <script src="https://forumeirospt.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
      <!-- SCEDITOR -->
      <link rel="stylesheet" href="https://illiweb.com/rs3/71/frm/SCEditor/src/themes/fa.default.min.css" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/sceditor/2.1.3/jquery.sceditor.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/sceditor/2.1.3/formats/bbcode.js"></script>
 
  <script type="text/javascript">
 
          sceditor.create(document.getElementById('motivos'), {
                  width: '100%',
                  height: 'auto',
                  style: 'https://illiweb.com/rs3/71/frm/SCEditor/minified/jquery.sceditor.default.min.css',
                  format: 'bbcode',
                  resizeEnabled: false,
                  emoticonsEnabled: false,
                  bSourceMode: false,
                  toolbar: 'bold,italic,underline,strike|left,center,right,justify|quote,code|image,link,youtube|headers,size,color,font,removeformat|date,time'
              });
   
            function servimg() {
   
                $.getScript('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js', function() {
 
                  $.get('/post?f=1&mode=newtopic', function (d) {
         
                    Swal.fire({
                  html: $('<iframe>', {
        'src' : 'https://' + d.match(/servimgDomain = '(.*?)'/)[1] + '/forum_upload.php?account=' + d.match(/servImgAccount = '(.*?)'/)[1] + '&id=' + d.match(/servImgId = '(.*?)'/)[1] + '&f=' + d.match(/servImgF = '(.*?)'/)[1],
        'width' : 'auto',
        'height':'230px',
        'scrolling':'no'
                    }).css('border', 'none'),
                      showCancelButton: false,
                    showConfirmButton: false,
                    showCloseButton: true,
                    allowOutsideClick: false
                    });
   
                    });
   
                  });
   
                }
   
    (function ($) {
      'use strict';
 
      $(function () {
          $('#form-content').on('submit', function (event) {
 
            var data = {
              nickname: $('#nickname').val(),
              denuncia: $('#denuncia').val(),
              acusado: $('#acusado').val(),
              provas: $('#provas').val(),
              motivos: $('#motivos').val(),
              termos: ' x ',
            };
         
            event.preventDefault();
            setTimeout(function () {
                  $.post('/post', {
                      f: 48,
                      subject: '[' + data.nickname + '] Inscrição - '+ data.denuncia +'',
                      message: [
              '[center][b][size=18][font=Arial]Inscrição para Líder[/font][/size][/b] [/center]',
              '',
    '[b]Nick:[/b] ' + data.nickname,
   
    '[b]Org Pretendida:[/b] ' + data.denuncia,
   
    '[b]Horários Disponíveis:[/b] ' + data.acusado,
    '[b]Link do RG:[/b]' + data.provas,
    '[b]Descrição:[/b] ' + data.motivos,
                      '',
                      ].join('\n'),
                      mode: 'newtopic',
      tid: $('[name="tid"]:first').val(),
                      post: 1,
                  }).done(function () {
                      alert('Postado com sucesso. Você será redirecionado para o tópico...');
                location.href = 'http://' + location.host + '/f48-';
                  }).fail(function () {
                      alert('Houve um erro! Tente novamente!');
                  });
            }, 600);
          });
      });
    }(jQuery));
  </script>
</body>
</html>
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões de edição no formulário

Mensagem por APOllO 17.10.20 14:42

Obrigado @pedxz apaixonado
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Adicionar botões de edição no formulário

Mensagem por tikky 17.10.20 15:03

👉 👈

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

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