Personalização formulário

4 participantes

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

Tópico resolvido Personalização formulário

Mensagem por BlackZ 19.09.21 21:20

Olá, queria editar o formulário de minha forma, porém ainda tenho vários formulários que quero fazer a mesma coisa, e queria perguntar se existe algum tutorial para isso pois não manjo disso.
Bom, o que eu quero editar é esse:
https://nextlevelrpg.forumeiros.com/h1-

HTML:
Código:
<!--    -> /** * 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> */ <!-    -->  <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>[DENUNCIA</title> <link rel="stylesheet" href="https://forumeiros.github.io/assets/src/form-generator/form-styles.css" /> 
<form id="fa-generated-form">
        
   <div class="fa-form-wrapper">
           
      <h1>
           DENUNCIA 
      </h1>
           
      <!--    BEGIN Generated HTML Code    -->   
      <div class="fa-form-group clearfix">
             <label for="campo1">Nick do denunciado</label> <input type="text" data-type="text" id="campo1" placeholder="" required="" />   
      </div>
           
      <div class="fa-form-group clearfix">
             <label for="campo2">Motivo</label> <input type="text" data-type="text" id="campo2" placeholder="" required="" />   
      </div>
           
      <div class="fa-form-group clearfix">
             <label for="campo3">Organização</label> <input type="text" data-type="text" id="campo3" placeholder="" required="" />   
      </div>
           
      <div class="fa-form-group clearfix">
             <label for="campo4">Data</label> <input type="date" data-type="date" id="campo4" required="" />   
      </div>
           
      <div class="fa-form-group clearfix">
             <label for="campo5">Explique o ocorrido</label> <textarea data-type="textarea" id="campo5" placeholder="" required=""></textarea>   
      </div>
           
      <div class="fa-form-group clearfix">
             <label for="campo6">Provas</label> <textarea data-type="textarea" id="campo6" placeholder="" required=""></textarea>   
      </div>
           
      <!--    END Generated HTML Code    -->   
   </div>
        
   <div class="fa-submit">
           
      <button class="post-button" type="submit">
           Enviar Formulário 
      </button>
           
   </div>
        
</form>
   
<!--    Javascript's    -->
<!--    Não é recomendada a edição abaixo desta linha.    --> <textarea style="display: none;" id="fa-generated-message">Nick do denunciado: {{campo1}}
Motivo: {{campo2}}
Organização: {{campo3}}
Data: {{campo4}}
Ocorrido: {{campo5}}
Provas: {{campo6}}</textarea> <input type="hidden" id="fa-generated-title" value="[DENUNCIA] {{campo1}}" /> <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: 10,              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 = '/f10-';           }).fail(function () {              alert('Houve um erro! Tente novamente!');           }); }, 600);       });    }); }(jQuery)); </script>
BlackZ

BlackZ
Nível 1

Masculino
Inscrito dia : 19/09/2021
Mensagens : 2
Pontos ativos : 4

https://nextlevelrpg.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Personalização formulário

Mensagem por Mpezin 20.09.21 8:00

Olá, BlackZ. Welcome FdF

Tutoriais para isso não foram encontrados, mas me informe quais alterações deseja fazer no formulário. E, sua questão será movida para a área correta sobre suporte HTML.


Olá! Seja bem-vindo(a) ao suporte Forumeiros!


Como acabou de inscrever-se, aqui estão alguns pontos importantes a saber:

Tópico movido


O tópico foi movido para o setor: Questões sobre códigos.

Nota: É importante que procure escolher a área certa para a sua questão afim de manter a organização do fórum.
Para mais informações, leia o Regulamento do Fórum dos Fóruns


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Mpezin - Ajudeiro
Mpezin

Mpezin
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 28/05/2020
Mensagens : 53
Pontos ativos : 45

https://abc134s.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização formulário

Mensagem por BlackZ 20.09.21 14:40

Olá, desejo coloca-lo em cinza com esse wallpaper em específico https://i.imgur.com/wQEfCaZ.png.
Se não for pedir muito teria como escrever apenas o código da personalização? E me dizer aonde coloca-lo no html, pois não manjo muito disso e tenho vários que irei querer personalizar da mesma forma, e ficar criando tópico toda vez é um pouco chatinho.
Código:
<!--    -> /** * 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> */ <!-    -->  <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="ie=edge" http-equiv="X-UA-Compatible" /> <title>Denunciar Civil - NexT LeveL RPG</title> <link href="https://forumeiros.github.io/assets/src/form-generator/form-styles.css" rel="stylesheet" />  
<form id="fa-generated-form">
       
   <div class="fa-form-wrapper">
          
      <h1>
           Denunciar Civil  
      </h1>
          
      <!--    BEGIN Generated HTML Code    -->  
      <div class="fa-form-group clearfix">
            <label for="campo1">Nick do denunciado</label> <input required="" placeholder="" id="campo1" data-type="text" type="text" />  
      </div>
          
      <div class="fa-form-group clearfix">
            <label for="campo2">Motivo</label> <input required="" placeholder="" id="campo2" data-type="text" type="text" />  
      </div>
          
      <div class="fa-form-group clearfix">
            <label for="campo4">Data</label> <input required="" id="campo4" data-type="date" type="date" />  
      </div>
          
      <div class="fa-form-group clearfix">
            <label for="campo5">Explique o ocorrido</label> <textarea required="" placeholder="" id="campo5" data-type="textarea"></textarea>  
      </div>
          
      <div class="fa-form-group clearfix">
            <label for="campo6">Provas</label> <textarea required="" placeholder="" id="campo6" data-type="textarea"></textarea>  
      </div>
          
      <!--    END Generated HTML Code    -->  
   </div>
       
   <div class="fa-submit">
          
      <button type="submit" class="post-button">
           Enviar Denúncia
      </button>
          
   </div>
       
</form>
  
<!--    Javascript's    -->
<!--    Não é recomendada a edição abaixo desta linha.    --> <textarea id="fa-generated-message" style="display: none;">[b]Nick do denunciado:[/b] {{campo1}}
[b]Motivo:[/b] {{campo2}}
[b]Data:[/b] {{campo4}}
[b]Ocorrido:[/b] {{campo5}}
[b]Provas:[/b] {{campo6}}</textarea> <input value="[DENUNCIA] {{campo1}}" id="fa-generated-title" type="hidden" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://forumeiros.github.io/assets/src/form-generator/form-replace.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', {              subject: $('#fa-generated-title').val().trim(),              f: 47,              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 = '/f47-';           }).fail(function () {              alert('Houve um erro! Tente novamente!');           }); }, 600);       });    }); }(jQuery)); </script>


Última edição por BlackZ em 20.09.21 14:41, editado 1 vez(es) (Motivo da edição : texto errado :/)
BlackZ

BlackZ
Nível 1

Masculino
Inscrito dia : 19/09/2021
Mensagens : 2
Pontos ativos : 4

https://nextlevelrpg.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização formulário

Mensagem por Harleen 20.09.21 15:33

Bom dia, troque o código por esse
Código:
<!--- /** * 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> */ <!-    --> 
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="ie=edge" http-equiv="X-UA-Compatible" />
<title>Denunciar Civil - NexT LeveL RPG</title>
<link href="https://forumeiros.github.io/assets/src/form-generator/form-styles.css" rel="stylesheet" />
<style>
   /** Fundo do formulário **/
    body {
   background: url(https://initiate.alphacoders.com/images/112/cropped-1920-1080-1125180.png?8296) no-repeat !important;
    }
   /** Cor do título **/
   #fa-generated-form h1 {
    background-color: grey !important;
   color: #2b2525 !important;   
   }
   /** cor do botão enviar **/
   .fa-submit button {
    background-color: grey !important;
   }
   /** cor do botão quando o mouse está emcima **/
   .fa-submit button:hover {
    background-color: darkgrey !important;
}
</style>
<form id="fa-generated-form">

    <div class="fa-form-wrapper">

        <h1>
            Denunciar Civil
        </h1>

        <!--    BEGIN Generated HTML Code    -->
        <div class="fa-form-group clearfix">
            <label for="campo1">Nick do denunciado</label> <input required="" placeholder="" id="campo1" data-type="text" type="text" />
        </div>

        <div class="fa-form-group clearfix">
            <label for="campo2">Motivo</label> <input required="" placeholder="" id="campo2" data-type="text" type="text" />
        </div>

        <div class="fa-form-group clearfix">
            <label for="campo4">Data</label> <input required="" id="campo4" data-type="date" type="date" />
        </div>

        <div class="fa-form-group clearfix">
            <label for="campo5">Explique o ocorrido</label> <textarea required="" placeholder="" id="campo5" data-type="textarea"></textarea>
        </div>

        <div class="fa-form-group clearfix">
            <label for="campo6">Provas</label> <textarea required="" placeholder="" id="campo6" data-type="textarea"></textarea>
        </div>

        <!--    END Generated HTML Code    -->
    </div>

    <div class="fa-submit">

        <button type="submit" class="post-button">
            Enviar Denúncia
        </button>

    </div>

</form>
 
<!--    Javascript's    -->
<!--    Não é recomendada a edição abaixo desta linha.    -->
 <textarea id="fa-generated-message" style="display: none;">[b]Nick do denunciado:[/b] {{campo1}}
[b]Motivo:[/b] {{campo2}}
[b]Data:[/b] {{campo4}}
[b]Ocorrido:[/b] {{campo5}}
[b]Provas:[/b] {{campo6}}</textarea>
<input value="[DENUNCIA] {{campo1}}" id="fa-generated-title" type="hidden" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://forumeiros.github.io/assets/src/form-generator/form-replace.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', {
                    subject: $('#fa-generated-title').val().trim(),
                    f: 47,
                    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 = '/f47-';
                }).fail(function() {
                    alert('Houve um erro! Tente novamente!');
                });
            }, 600);
        });
    });
}(jQuery));
</script>

As alteração estão nessa parte
Código:
   /** Fundo do formulário **/
    body {
   background: url(https://initiate.alphacoders.com/images/112/cropped-1920-1080-1125180.png?8296) no-repeat !important;
    }
   /** Cor do título **/
   #fa-generated-form h1 {
    background-color: grey !important;
   color: #2b2525 !important;   
   }
   /** cor do botão enviar **/
   .fa-submit button {
    background-color: grey !important;
   }
   /** cor do botão quando o mouse está emcima **/
   .fa-submit button:hover {
    background-color: darkgrey !important;
}

Onde está grey e darkgrey, pode alterar por qualquer outro código, um bom site é esse
https://www.color-hex.com/
E utilizei um wallpaper, mas pode alterar no Body.

Espero ter ajudado.
Até mais
Harleen

Harleen
Membro do fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1769
Pontos ativos : 2355

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Personalização formulário

Mensagem por Lobs 28.09.21 0:44

Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Lobs - Ajudeiro
Lobs

Lobs
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 02/06/2013
Mensagens : 260
Pontos ativos : 315

https://www.forumnsanimes.com

Ir para o topo Ir para baixo

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


Permissões neste fórum
Você não pode responder aos tópicos