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

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.

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.

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

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>

Obrigado @pedxz

Tópico resolvido Movido para "Questões resolvidas".