Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Problema em no formulário customizado

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

Ir para baixo

Tópico resolvido Problema em no formulário customizado

Mensagem por vcapelli 22.02.20 23:44

Detalhes da questão


Endereço do fórum: https://sistema-forum.forumeiros.com
Versão do fórum: ModernBB

Descrição


Estou com um problema no meu formulário. Gerei ele pelo gerador, testei e deu tudo certo ai fui fazer algumas mudanças para ficar mais bonito e agora não está mais funcionando.
Se tiver como resolver o problema sem alterar muito esteticamente agradeço.  Muito feliz
OBS.: Já permite formulários não oficiais a postarem no fórum.
Código:
<!DOCTYPE html>
<html>
<!-- ->
/**
 * Gerado em <ajuda.forumeiros.com>.
 * Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
 *
 * Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
 */
<!- -->
<head>
  <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: #fff;
    }

    /**
     * Begin tipografia.
     */

    a,
    a:active,
    a:link,
    a:visited,
    a:focus {
      color: #D8B500;
      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: #D8B500;
      font-size: 14px;
      transition: linear all 125ms;
      margin-top: 32%;
    }

    .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: #4b6b35;
      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 i.fa {
      font-size: 4em;
    }

    .wrapper hgroup h1 {
      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-30 {
      width: 30%;
    }
    
    .col-46 {
      width: 46%;
    }

    /**
     * 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">

    <form id="form-content">
      <a href="/h2-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Preencha o formulário seguindo as instruções sem deixar nenhum campo vazio.</h4>
      </div>
      <h3>Dados do projeto</h3>
      <div class="form-group" style="margin-bottom: 15%;">
        <div class="form-group-col col-30">
          <label for="campo3">Número do projeto:</label>
          <input type="text" id="campo3" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo5">Seu nickname:</label>
          <input type="text" id="campo5" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo12">Data do projeto:</label>
          <input type="text" id="campo12" class="form-control" placeholder="" required/>
        </div>
      </div>
      <h3>Corpo do Projeto</h3>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo6">Ementa:</label>
          <textarea data-type="textarea" id="campo6" class="form-control" placeholder="Insira aqui a ementa do projeto." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo7">Texto-base:</label>
          <textarea data-type="textarea" id="campo7" class="form-control" placeholder="Escreva aqui o projeto." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo10">Justificativa:</label>
          <textarea data-type="textarea" id="campo10" class="form-control" placeholder="Justifique sobre o seu projeto." required></textarea>
        </div>
      </div>
      <br/>
      <button type="submit" class="btn btn-primary">Enviar</button>

    </form>
  </main>



  <!-- Javascript's -->
  <!-- Não é recomendada a edição abaixo desta linha. -->
  <script>
    var instance = new Date();
  
    var month =["janeiro","fevereiro","março", "abril","maio","junho", "julho","agosto","setembro", "outubro","novembro","dezembro"];
    
    var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
    var month_index = instance.getMonth();
    var year = instance.getFullYear();
    
    var date = [ day, month[month_index], year ].join(" ");
    
    document.getElementById('campo12').value = date;
  </script>


  <textarea style="display: none;" id="fa-generated-message">[center][size=24]PROJETO DE LEI N°. {{campo3}}/2020[/size][/center]
[center][size=18](Do Sr. Deputado {{campo5}})[/size][/center]

[right]Ementa: {{campo6}}[/right]

{{campo7}}

[center][size=24]JUSTIFICATIVA[/size][/center]

{{campo10}}

Brasília, {{campo12}}
{{campo5}}</textarea>
  <input type="hidden" id="fa-generated-title" value="Projeto de Lei N°. {{campo3}}/2020 - {{campo6}}" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
  <script type="text/javascript">
    (function ($) {
     'use strict';

     $(window).on('load', function () {
     $('#fa-generated-form').on('submit', function (event) {
         event.preventDefault();
         $(this).find('button[type="submit"]').text('Postando...');
         setTimeout(function () {
      $.post('/post', {
       subject: $('#fa-generated-title').val().trim(),
      f: 7,
       message: $('#fa-generated-message').val().trim(),
       mode: 'newtopic',
       tid: $('[name="tid"]:first').val(),
       post: 1,
       }).done(function () {
       alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
       location.pathname = '/f7-';
      }).fail(function () {
       alert('Houve um erro! Tente novamente!');
      });
         }, 600);
     });
     });
    }(jQuery));
  </script>
</body>
</html>
vcapelli
vcapelli
****

Membro desde : 17/02/2018
Mensagens : 210
Pontos : 417

https://sistema-forum.forumeiros.com/ https://www.facebook.com/capellindao https://twitter.com/vitorcapee

Ir para o topo Ir para baixo

Tópico resolvido Re: Problema em no formulário customizado

Mensagem por tikky 26.02.20 14:14

Olá @vcapelli,

O formulário não postava devido a alteração de um ID; altere para:
Código:
<!DOCTYPE html>
<html>
<!-- ->
/**
 * Gerado em <ajuda.forumeiros.com>.
 * Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
 *
 * Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
 */
<!- -->
<head>
  <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: #fff;
    }
 
    /**
     * Begin tipografia.
     */
 
    a,
    a:active,
    a:link,
    a:visited,
    a:focus {
      color: #D8B500;
      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: #D8B500;
      font-size: 14px;
      transition: linear all 125ms;
      margin-top: 32%;
    }
 
    .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: #4b6b35;
      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 i.fa {
      font-size: 4em;
    }
 
    .wrapper hgroup h1 {
      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-30 {
      width: 30%;
    }
    
    .col-46 {
      width: 46%;
    }
 
    /**
     * 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">
 
    <form id="form-content">
      <a href="/h2-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Preencha o formulário seguindo as instruções sem deixar nenhum campo vazio.</h4>
      </div>
      <h3>Dados do projeto</h3>
      <div class="form-group" style="margin-bottom: 15%;">
        <div class="form-group-col col-30">
          <label for="campo3">Número do projeto:</label>
          <input type="text" id="campo3" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo5">Seu nickname:</label>
          <input type="text" id="campo5" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo12">Data do projeto:</label>
          <input type="text" id="campo12" class="form-control" placeholder="" required/>
        </div>
      </div>
      <h3>Corpo do Projeto</h3>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo6">Ementa:</label>
          <textarea data-type="textarea" id="campo6" class="form-control" placeholder="Insira aqui a ementa do projeto." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo7">Texto-base:</label>
          <textarea data-type="textarea" id="campo7" class="form-control" placeholder="Escreva aqui o projeto." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo10">Justificativa:</label>
          <textarea data-type="textarea" id="campo10" class="form-control" placeholder="Justifique sobre o seu projeto." required></textarea>
        </div>
      </div>
      <br/>
      <button type="submit" class="btn btn-primary">Enviar</button>
 
    </form>
  </main>
 
 
 
  <!-- Javascript's -->
  <!-- Não é recomendada a edição abaixo desta linha. -->
  <script>
    var instance = new Date();
  
    var month =["janeiro","fevereiro","março", "abril","maio","junho", "julho","agosto","setembro", "outubro","novembro","dezembro"];
    
    var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
    var month_index = instance.getMonth();
    var year = instance.getFullYear();
    
    var date = [ day, month[month_index], year ].join(" ");
    
    document.getElementById('campo12').value = date;
  </script>
 
 
  <textarea style="display: none;" id="fa-generated-message">[center][size=24]PROJETO DE LEI N°. {{campo3}}/2020[/size][/center]
[center][size=18](Do Sr. Deputado {{campo5}})[/size][/center]
 
[right]Ementa: {{campo6}}[/right]
 
{{campo7}}
 
[center][size=24]JUSTIFICATIVA[/size][/center]
 
{{campo10}}
 
Brasília, {{campo12}}
{{campo5}}</textarea>
  <input type="hidden" id="fa-generated-title" value="Projeto de Lei N°. {{campo3}}/2020 - {{campo6}}" />
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
  <script type="text/javascript">
    (function ($) {
     'use strict';
 
     $(window).on('load', function () {
     $('#form-content').on('submit', function (event) {
         event.preventDefault();
         $(this).find('button[type="submit"]').text('Postando...');
         setTimeout(function () {
      $.post('/post', {
       subject: $('#fa-generated-title').val().trim(),
       f: 1,
       message: $('#fa-generated-message').val().trim(),
       mode: 'newtopic',
       tid: $('[name="tid"]:first').val(),
       post: 1,
       }).done(function () {
       alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
       location.pathname = '/f1-';
      }).fail(function () {
       alert('Houve um erro! Tente novamente!');
      });
         }, 600);
     });
     });
    }(jQuery));
  </script>
</body>
</html>


Cordialmente,
pedxz.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209

Ir para o topo Ir para baixo

Tópico resolvido Re: Problema em no formulário customizado

Mensagem por vcapelli 26.02.20 17:00

Pedxz escreveu:Olá @vcapelli,

O formulário não postava devido a alteração de um ID; altere para:
Código:
<!DOCTYPE html>
<html>
<!-- ->
/**
 * Gerado em <ajuda.forumeiros.com>.
 * Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
 *
 * Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
 */
<!- -->
<head>
  <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: #fff;
    }
 
    /**
     * Begin tipografia.
     */
 
    a,
    a:active,
    a:link,
    a:visited,
    a:focus {
      color: #D8B500;
      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: #D8B500;
      font-size: 14px;
      transition: linear all 125ms;
      margin-top: 32%;
    }
 
    .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: #4b6b35;
      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 i.fa {
      font-size: 4em;
    }
 
    .wrapper hgroup h1 {
      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-30 {
      width: 30%;
    }
    
    .col-46 {
      width: 46%;
    }
 
    /**
     * 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">
 
    <form id="form-content">
      <a href="/h2-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Preencha o formulário seguindo as instruções sem deixar nenhum campo vazio.</h4>
      </div>
      <h3>Dados do projeto</h3>
      <div class="form-group" style="margin-bottom: 15%;">
        <div class="form-group-col col-30">
          <label for="campo3">Número do projeto:</label>
          <input type="text" id="campo3" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo5">Seu nickname:</label>
          <input type="text" id="campo5" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo12">Data do projeto:</label>
          <input type="text" id="campo12" class="form-control" placeholder="" required/>
        </div>
      </div>
      <h3>Corpo do Projeto</h3>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo6">Ementa:</label>
          <textarea data-type="textarea" id="campo6" class="form-control" placeholder="Insira aqui a ementa do projeto." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo7">Texto-base:</label>
          <textarea data-type="textarea" id="campo7" class="form-control" placeholder="Escreva aqui o projeto." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo10">Justificativa:</label>
          <textarea data-type="textarea" id="campo10" class="form-control" placeholder="Justifique sobre o seu projeto." required></textarea>
        </div>
      </div>
      <br/>
      <button type="submit" class="btn btn-primary">Enviar</button>
 
    </form>
  </main>
 
 
 
  <!-- Javascript's -->
  <!-- Não é recomendada a edição abaixo desta linha. -->
  <script>
    var instance = new Date();
  
    var month =["janeiro","fevereiro","março", "abril","maio","junho", "julho","agosto","setembro", "outubro","novembro","dezembro"];
    
    var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
    var month_index = instance.getMonth();
    var year = instance.getFullYear();
    
    var date = [ day, month[month_index], year ].join(" ");
    
    document.getElementById('campo12').value = date;
  </script>
 
 
  <textarea style="display: none;" id="fa-generated-message">[center][size=24]PROJETO DE LEI N°. {{campo3}}/2020[/size][/center]
[center][size=18](Do Sr. Deputado {{campo5}})[/size][/center]
 
[right]Ementa: {{campo6}}[/right]
 
{{campo7}}
 
[center][size=24]JUSTIFICATIVA[/size][/center]
 
{{campo10}}
 
Brasília, {{campo12}}
{{campo5}}</textarea>
  <input type="hidden" id="fa-generated-title" value="Projeto de Lei N°. {{campo3}}/2020 - {{campo6}}" />
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
  <script type="text/javascript">
    (function ($) {
     'use strict';
 
     $(window).on('load', function () {
     $('#form-content').on('submit', function (event) {
         event.preventDefault();
         $(this).find('button[type="submit"]').text('Postando...');
         setTimeout(function () {
      $.post('/post', {
       subject: $('#fa-generated-title').val().trim(),
       f: 1,
       message: $('#fa-generated-message').val().trim(),
       mode: 'newtopic',
       tid: $('[name="tid"]:first').val(),
       post: 1,
       }).done(function () {
       alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
       location.pathname = '/f1-';
      }).fail(function () {
       alert('Houve um erro! Tente novamente!');
      });
         }, 600);
     });
     });
    }(jQuery));
  </script>
</body>
</html>


Cordialmente,
pedxz.

Está postando agora porém não está postando com a mensagem nos campos. Aff
vcapelli
vcapelli
****

Membro desde : 17/02/2018
Mensagens : 210
Pontos : 417

https://sistema-forum.forumeiros.com/ https://www.facebook.com/capellindao https://twitter.com/vitorcapee

Ir para o topo Ir para baixo

Tópico resolvido Re: Problema em no formulário customizado

Mensagem por tikky 26.02.20 17:16

Altere o código para:
Código:

<!DOCTYPE html>
<html>
<!-- ->
/**
 * Gerado em <ajuda.forumeiros.com>.
 * Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
 *
 * Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
 */
<!- -->
<head>
  <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: #fff;
    }
 
    /**
    * Begin tipografia.
    */
 
    a,
    a:active,
    a:link,
    a:visited,
    a:focus {
      color: #D8B500;
      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: #D8B500;
      font-size: 14px;
      transition: linear all 125ms;
      margin-top: 32%;
    }
 
    .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: #4b6b35;
      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 i.fa {
      font-size: 4em;
    }
 
    .wrapper hgroup h1 {
      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-30 {
      width: 30%;
    }
   
    .col-46 {
      width: 46%;
    }
 
    /**
    * FOR JS Styles:
    */
 
    #fa-generated-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">
 
    <form id="fa-generated-form">
      <a href="/h2-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Preencha o formulário seguindo as instruções sem deixar nenhum campo vazio.</h4>
      </div>
      <h3>Dados do projeto</h3>
      <div class="form-group" style="margin-bottom: 15%;">
        <div class="form-group-col col-30">
          <label for="campo3">Número do projeto:</label>
          <input type="text" id="campo3" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo5">Seu nickname:</label>
          <input type="text" id="campo5" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo12">Data do projeto:</label>
          <input type="text" id="campo12" class="form-control" placeholder="" required/>
        </div>
      </div>
      <h3>Corpo do Projeto</h3>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo6">Ementa:</label>
          <textarea data-type="textarea" id="campo6" class="form-control" placeholder="Insira aqui a ementa do projeto." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo7">Texto-base:</label>
          <textarea data-type="textarea" id="campo7" class="form-control" placeholder="Escreva aqui o projeto." required></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-col col-94">
          <label for="campo10">Justificativa:</label>
          <textarea data-type="textarea" id="campo10" class="form-control" placeholder="Justifique sobre o seu projeto." required></textarea>
        </div>
      </div>
      <br/>
      <button type="submit" class="btn btn-primary">Enviar</button>
 
    </form>
  </main>
 
 
 
  <!-- Javascript's -->
  <!-- Não recomendada a edição abaixo desta linha. -->
  <script>
    var instance = new Date();
 
    var month =["janeiro","fevereiro","março", "abril","maio","junho", "julho","agosto","setembro", "outubro","novembro","dezembro"];
   
    var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
    var month_index = instance.getMonth();
    var year = instance.getFullYear();
   
    var date = [ day, month[month_index], year ].join(" ");
   
    document.getElementById('campo12').value = date;
  </script>
 
 
  <textarea style="display: none;" id="fa-generated-message">[center][size=24]PROJETO DE LEI N°. {{campo3}}/2020[/size][/center]
[center][size=18](Do Sr. Deputado {{campo5}})[/size][/center]
 
[right]Ementa: {{campo6}}[/right]
 
{{campo7}}
 
[center][size=24]JUSTIFICATIVA[/size][/center]
 
{{campo10}}
 
Brasília, {{campo12}}
{{campo5}}</textarea>
  <input type="hidden" id="fa-generated-title" value="Projeto de Lei N°. {{campo3}}/2020 - {{campo6}}" />
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
  <script type="text/javascript">
    (function ($) {
    'use strict';
 
    $(window).on('load', function () {
    $('#fa-generated-form').on('submit', function (event) {
        event.preventDefault();
        $(this).find('button[type="submit"]').text('Postando...');
        setTimeout(function () {
      $.post('/post', {
      subject: $('#fa-generated-title').val().trim(),
      f: 7,
      message: $('#fa-generated-message').val().trim(),
      mode: 'newtopic',
      tid: $('[name="tid"]:first').val(),
      post: 1,
      }).done(function () {
      alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
      location.pathname = '/f7-';
      }).fail(function () {
      alert('Houve um erro! Tente novamente!');
      });
        }, 600);
    });
    });
    }(jQuery));
  </script>
</body>
</html>
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209

Ir para o topo Ir para baixo

Tópico resolvido Re: Problema em no formulário customizado

Mensagem por vcapelli 26.02.20 17:51

Perfeito! Obrigado! Muito feliz
vcapelli
vcapelli
****

Membro desde : 17/02/2018
Mensagens : 210
Pontos : 417

https://sistema-forum.forumeiros.com/ https://www.facebook.com/capellindao https://twitter.com/vitorcapee

Ir para o topo Ir para baixo

Tópico resolvido Re: Problema em no formulário customizado

Mensagem por tikky 26.02.20 18:07

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

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