[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0

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

[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 Empty [TUTORIAL] Criar um formulário pelo gerador de formulários 2.0

Mensagem por Luiz em 19.06.17 21:07

Gerador de Formulários 2.0 — Passo a passo
Este tutorial irá explicar, passo a passo o funcionamento do Gerador de Formulários 2.0! Tanto a instalação do código HTML, quanto a instalação do código Javascript para redirecionar ao formulário!

Gerador de Formulários 2.0 — Passo a passo
TUTORIAIS, DICAS E ASTÚCIAS

Acessar o gerador

Para começar a criar nossos formulários, deveremos acessar o nosso gerador:


Conhecendo o gerador

O Gerador de Formulários 2.0 foi criado em partes, isso o divide em três etapas, sendo a parte de criar os campos a primeira delas, assim como seu primeiro contato com o gerador.

Assim que carregar, você deverá encontrar o campo de criação:
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 TJV2wjd
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110111Seta Criar um campo Clicando no ícone de adição, você poderá criar um novo campo, dentre diversas opções disponíveis!
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110210Seta Editar um campo Clicando no ícone de lápis, você poderá editar um campo já criado, bem como mudar sua posição na hierarquia do seu formulário.
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110310Seta Excluir um campo Clicando no ícone de subtração, você poderá excluir um campo que já está criado.
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110410Seta Próxima parte Ao clicar, você será direcionado para a parte dois do gerador. Frisa-se que só será possível passar de parte caso você tenha criado ao menos um campo.

Configurando o formulário

Após criar os seus campos, clique em "PRÓXIMA PARTE", para ser redirecionado à segunda parte do gerador:
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 D3F0kzk
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110111Seta Criar um novo tópico Selecionando essa opção, o gerador irá criar um formulário cuja função será gerar um novo tópico após ser completado!
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110210Seta Responder à um tópico já existente Selecionando essa opção, o gerador irá criar um formulário cuja função será responder uma mensagem à um tópico já existente após ser completado!
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110310Seta Voltar Clicando neste botão, você voltará à parte um.
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110410Seta Próxima parte Ao clicar, você será direcionado para a parte três do gerador. Frisa-se que só será possível passar de parte após você ter completado todas as opções da parte dois!

Caso você tenha escolhido "Criar um novo tópico"

Caso você tenha selecionado a opção "Criar um novo tópico", você irá completar os campos com algumas informações. Cada campo tem sua especificação, conforme está listado abaixo:
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 YokwV3S
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110111Seta Criar um novo tópico Selecionando essa opção, o gerador irá criar um formulário cuja função será gerar um novo tópico após ser completado.
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110210Seta Título do formulário Esse campo deverá ser completado com o título do formulário. Enfatiza-se que é o título do formulário, não do novo tópico!
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110310Seta Título do tópico Esse campo deve ser completado com o título do tópico que será criado pelo seu formulário. Se você quiser, você pode usar a(s) tag(s) {{campo}} com o número de um input específico nele!
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110410Seta ID do fórum à qual será postado Será o ID do subfórum à qual o novo tópico será criado.
Na URL
ajuda.forumeiros.com/f22-questoes-sobre-codigos
, o ID é 22!
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110510Seta Mensagem Será a mensagem da primeira postagem do novo tópico! Você pode incluir a(s) tag(s) {{campo}}, como foi feito na imagem acima.

Caso você tenha escolhido "Responder à um tópico já existente"

Caso você tenha selecionado a opção "Responder à um tópico já existente", você irá completar os campos com algumas informações. Cada campo tem sua especificação, conforme está listado abaixo:
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 UEyRRul
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110111Seta Responder à um tópico já existente Selecionando essa opção, o gerador irá criar um formulário cuja função será responder uma resposta à um tópico que já existe após ser completado.
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110210Seta Título do formulário Esse campo deverá ser completado com o título do formulário.
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110310Seta ID do tópico à qual será postado Será o ID do tópico à qual a nova mensagem será postada.
Na URL
ajuda.forumeiros.com/t82-regras-do-fdf
, o ID é 82!
[TUTORIAL] Criar um formulário pelo gerador de formulários 2.0 110410Seta Mensagem Será o conteúdo da nova mensagem que será postada. Você pode incluir a(s) tag(s) {{campo}} caso desejar, conforme foi feito na imagem acima.

Instalando o novo formulário

Após você ter completado todos os campos solicitados na parte dois, você deverá clicar em "GERAR CÓDIGO" para poder ter o código de seu formulário gerar.

Assim que seu código for gerado, você deverá copiá-lo, e ir no seu painel de controle, em:
Painel de Controle Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos HTML Seta Branca Criar uma nova página HTML
Feito isso, você poderá criar sua nova página HTML no modo avançado, e colar o código do formulário na zona do código.



Após instalar o HTML, deve-se instalar o código JavaScript para ligar o seu fórum ao novo formulário:
Painel de Controle Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos Javascript Seta Branca Criar um novo javascript
Feito isso, crie um novo JavaScript, para o seu caso:

Para um novo tópico:

Código:
(function ($) {
  'use strict';

  $(function () {
    $('a[href^="/post?f={{ID DO SUBFÓRUM}}&mode=newtopic"]')
      .attr('href', '/h{{NÚMERO DA PÁGINA HTML}}-')
    ;
  });
}(jQuery));
E modifique o {{ID DO SUBFÓRUM}} pelo ID do subfórum a qual o novo tópico será postado, e o {{NÚMERO DA PÁGINA HTML}} pelo ID da página HTML, por exemplo,
/h1-
.



Para responder à um tópico:

Código:
(function ($) {
  'use strict';

  $(function () {
    $('a[href^="/post?t={{ID DO TÓPICO}}&mode=reply"]')
      .attr('href', '/h{{NÚMERO DA PÁGINA HTML}}-')
    ;
  });
}(jQuery));
E modifique o {{ID DO TÓPICO}} pelo ID do tópico a qual a nova mensagem será postado, e o {{NÚMERO DA PÁGINA HTML}} pelo ID da página HTML, por exemplo,
/h1-
.

Feito isso, salve e curta o seu mais novo formulário de postagens!


Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6631
Pontos Ativos : 7528

https://luizfelipe.dev

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum