Formulário título mensagem Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Fórum dos Fóruns

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

Formulário título mensagem

2 participantes

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

Ir para baixo

Tópico resolvido Formulário título mensagem

Mensagem por vcapelli 18.02.21 1:37

Detalhes da questão


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

Descrição


Queria saber como fazer o meu formulário postar mensagem em um tópico com título da mensagem. Obrigado Envergonhado

Meu formulário:
Código:
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
  <title>Capelli</title>
  <meta charset="utf-8">
  <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: #007bff;
      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: #007bff;
      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%;
      margin-bottom: 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="/h1-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Título</h4>
      </div>
      <h3>Dados pessoais</h3>
      <div class="form-group" style="margin-bottom: 5%;">
        <div class="form-group-col col-30">
          <label for="campo1">campo1:</label>
          <input type="text" id="campo1" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo2">campo2:</label>
          <input type="text" id="campo2" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo3">campo3:</label>
          <input type="text" id="campo3" class="form-control" placeholder="" required/>
        </div>
      </div>
      <h3>Dados profissionais</h3>
      <div class="form-group">
        <div class="form-group-col col-30">
          <label for="campo4">campo4:</label>
          <input type="text" id="campo4" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo5">campo5:</label>
          <input type="text" id="campo5" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo6">campo6:</label>
          <input type="text" id="campo6" class="form-control" placeholder="" required/>
        </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. -->
 
  <textarea style="display: none;" id="fa-generated-message">[center][size=18][font=sans-serif]TÍTULO[/font][/size][/center]
[center][font=sans-serif][size=12]SUBTÍTULO[/size][/font][/center]
 
[b]campo1:[/b] {{campo1}}
[b]campo2:[/b] {{campo2}}
[b]campo3:[/b] {{campo3}}
 
[b]campo4:[/b] {{campo4}}
[b]campo5:[/b] {{campo5}}
[b]campo5:[/b] {{campo6}}</textarea>
  <input type="hidden" id="fa-generated-title" value="" />
 
  <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 src="https://cdn.jsdelivr.net/npm/sweetalert2@9.10.13/dist/sweetalert2.all.min.js"></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', {
      t: 1,
      message: $('#fa-generated-message').val().trim(),
      mode: 'reply',
      tid: $('[name="tid"]:first').val(),
      post: 1,
      }).done(function () {
      Swal.fire({
          icon: 'success',
          title: 'Postado com sucesso!',
          html: 'Você será redicionado ao fórum',
          timer: 3000,
          allowEscapeKey: false,
          showConfirmButton: false,
          timerProgressBar: true
    }).then((result) => {
          if (
              result.dismiss === Swal.DismissReason.timer
              ) {
        location.href = 'http://' + location.host + '/t1-?view=newest';
        }
    });
      }).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: Formulário título mensagem

Mensagem por tikky 18.02.21 19:12

Olá @vcapelli,

O título dessa mensagem será um pré-definido ou um escolhido pelo usuário?


(Aguardo uma resposta sua)
Atenciosamente,
pedxz.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Formulário título mensagem

Mensagem por vcapelli 19.02.21 0:28

Será um pré-definido
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: Formulário título mensagem

Mensagem por tikky 21.02.21 9:22

@vcapelli: Altere o código do seu formulário para:
Código:
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
  <title>Capelli</title>
  <meta charset="utf-8">
  <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: #007bff;
      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: #007bff;
      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%;
      margin-bottom: 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="/h1-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
      <div class="title">
        <h4>Título</h4>
      </div>
      <h3>Dados pessoais</h3>
      <div class="form-group" style="margin-bottom: 5%;">
        <div class="form-group-col col-30">
          <label for="campo1">campo1:</label>
          <input type="text" id="campo1" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo2">campo2:</label>
          <input type="text" id="campo2" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo3">campo3:</label>
          <input type="text" id="campo3" class="form-control" placeholder="" required/>
        </div>
      </div>
      <h3>Dados profissionais</h3>
      <div class="form-group">
        <div class="form-group-col col-30">
          <label for="campo4">campo4:</label>
          <input type="text" id="campo4" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo5">campo5:</label>
          <input type="text" id="campo5" class="form-control" placeholder="" required/>
        </div>
        <div class="form-group-col col-30">
          <label for="campo6">campo6:</label>
          <input type="text" id="campo6" class="form-control" placeholder="" required/>
        </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. -->
 
  <textarea style="display: none;" id="fa-generated-message">[center][size=18][font=sans-serif]TÍTULO[/font][/size][/center]
[center][font=sans-serif][size=12]SUBTÍTULO[/size][/font][/center]
 
[b]campo1:[/b] {{campo1}}
[b]campo2:[/b] {{campo2}}
[b]campo3:[/b] {{campo3}}
 
[b]campo4:[/b] {{campo4}}
[b]campo5:[/b] {{campo5}}
[b]campo5:[/b] {{campo6}}</textarea>
  <input type="hidden" id="fa-generated-title" value="Título da mensagem. Uso de um campo {{campo3}}" />
 
  <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 src="https://cdn.jsdelivr.net/npm/sweetalert2@9.10.13/dist/sweetalert2.all.min.js"></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', {
      t: 1,
      subject: $('#fa-generated-title').val().trim(),
      message: $('#fa-generated-message').val().trim(),
      mode: 'reply',
      tid: $('[name="tid"]:first').val(),
      post: 1,
      }).done(function () {
      Swal.fire({
          icon: 'success',
          title: 'Postado com sucesso!',
          html: 'Você será redicionado ao fórum',
          timer: 3000,
          allowEscapeKey: false,
          showConfirmButton: false,
          timerProgressBar: true
    }).then((result) => {
          if (
              result.dismiss === Swal.DismissReason.timer
              ) {
        location.href = 'http://' + location.host + '/t1-?view=newest';
        }
    });
      }).fail(function () {
      alert('Houve um erro! Tente novamente!');
      });
        }, 600);
    });
    });
    }(jQuery));
  </script>
</body>
</html>
O título da postagem pode ser alterado nesta linha:
Código:
 <input type="hidden" id="fa-generated-title" value="Título da mensagem. Uso de um campo {{campo3}}" />
é possível usar os valores dos campos, como demonstrado!
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Formulário título mensagem

Mensagem por vcapelli 21.02.21 12:52

Obrigado Party
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: Formulário título mensagem

Mensagem por tikky 21.02.21 14:13

Tópico resolvido


Movido para "Questões resolvidas".
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

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 códigos Javascript e jQuery

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