[TUTORIAL] Criar seu formulário de postagens

Neste tutorial em tópico, você poderá obter o código completo e final do vídeo tutorial postado no canal TV Actif. No vídeo, temos o complemento do tutorial do fórum de suporte criado por Byte: http://ajuda.forumeiros.com/t35148-

--> Tutoriais <--
Criar o seu formulário de postagens

1º - HTML dos fóruns:
No HTML podemos realizar efeito que não seriam possíveis em widgets, mensagem da home page ou qualquer outro meio no fórum. Vejamos abaixo dicas sobre as páginas HTML.

Painel de Con... > Módulos > HTML e Javascript > Gestão das páginas HTML > Criar uma página HTML >

Título - Neste campo terá de adicionar um título para a sua página HTML, servirá para identificar a sua página na lista de páginas HTMl, do Painel de Cntrole, e fará também parte do endereço da página. Por exemplo:Título: ForumeirosEndereço da página: .../forumeiros-h1.html

ATENÇÃO: A designação que aparece à frete do nome da página, no endereço, modifica consoante a número da página criada. Se for a primeira página a ser criada, então será -h1, se for a quarta página a ser criada será -h4, etc.

Você deseja utilizar o início e o final da página do seu fórum? - Se optar pelo "Sim", a sua página apresentará o cabeçalho (Logo e menu do Fórum) e o rodapé (barra de links úteis). Uma das vantagens desta escolha, é que terá de personalizar menos o seu texto, por exemplo, pois, poderá utilizar as classes CSS, do seu próprio Fórum, e também não necessita de criar uma estrutura HTML, apenastem de adicionar o código de conteúdo. Se optar pelo "Não" a página torna-se independente da estrutura do Fórum, mas neste caso terá de adicionar a própria estrutura, com as balizas html, head, body, etc.

Usar esta página como página inicial? - Se pretende que a página seja utiliza como a página inicial do Fórum, deverá colocar "Sim", mas se optar por esta opção, terá de adicionar o endereço do site Forumeiros.com. (ver FAQ)

Código HTML - Neste campo, terá de adicionar o conteúdo da sua página HTML, se colocou não na opção 2, então terá de criar uma estrutura de uma página HTML.

Confirmar / Previsualizar - Nestes dois botões poderá confirmara criação da sua página HTML, carregando em "Confirmar". Ou poderá visualizar o resultado que a página terá quando ele for visualizada por todos os usuários, carregando em "Previsualizar".

Vamos criar apenas um campo de texto neste tutoria, outras atribuições de campos são ensinadas no vídeo tutorial postado pelo ex-moderador BYTE: http://vimeo.com/17817199

Em sua página HTML, adicione então o seguinte código:

Código:

<input type="text" name="nome1" value="valor padrão" />

Vamos deletar o "valor padrão" de dentro do código fazendo com que ele fique assim:

Código:

<input type="text" name="nome1"/>

Na mesma página HTML vamos colocar outro campo de texto que será a da mensagem. Como todos sabem, no vídeo tutorial do canal Actif, Robson Barros explicou somente o campo acima (título do tópico) e o campo da mensagem (message). Então, vamos adicionar o campo da mensagem e remover o valor padrão de dentro.

Código:

<textarea name="nome2" rows="7" cols="7"></textarea>

1.1º - Valor ID:
Como Robson Barros explicou no tutorial [FAQ] Folha de estilo CSS, um ID é o mesmo que um atributo CLASS, pois ele atribui um nome ao código (objeto) e ao mesmo trabalha como o CLASS que captura o CSS que há no HEAD, como é explicado no tutorial postado neste fórum que se chama de Estrutura de uma página HTML.

No código HTML, vamos adicionar o ID com o nome do campo. Como assim? Como estamos criando um campo que vai dar um título ao tópico, precisamos então marcar o nosso ID igual (=) à titulo.

Campo do título:

<input type="text" id="NOME" name="nome1"/>

No lugar do nome coloque o nome da caixa, que será o título só que sem o acento, e o mesmo se repete com a caixa de texto.

<textarea id="NOME" name="nome2" rows="7" cols="7"></textarea>

Depois que você finalizar o seu código HTML, vamos para o próximo passo. Não confirme sua página HTML ainda.



2º - Formulário final (Tutorial do Byte):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>function radio(nameObtido,valObtido){jQuery('[name="' nameObtido '"]').val( valObtido );}
function gerarf() {

/* Script do Formulário */
/* 4º */

}</script>
<form action="/posting.forum" method="post" enctype="multipart/form-data">

<!-- HTML do Formulário -->
<!-- 2º -->

<!-- Ocultos -->
<input type="hidden" name="f" value="1" />
<input type="hidden" name="subject" value="O script não enviou o título" />
<input type="hidden" name="description" value="O script não enviou a descrição" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />



<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />

<!-- Pré Visualizar -->
<input type="submit" name="preview" class="button2" value="Pré-visualizar" onClick="gerarf();" />

<!-- Enviar -->
<input type="submit" name="post" class="button2" value="Enviar" onClick="gerarf();" /></form>

Selecione e cole na sua página HTML o código acima, e vamos substituir os dados. No lugar do <!-- 2º --> você vai colocar o código HTML do seu formulário. Ou seja, os campos de texto, o título, multipla-escola (campos rádios) e outros mais que você supostamente adicionou.
Feito isso, no lugar do valor <!-- 4º --> adicione o script abaixo:

Código:

/*VALOR TITULO*/
jQuery('[name="subject"]').val( 'VALOR DO TITULO' );

/*VALOR DESCRIÇAO*/
jQuery('[name="description"]').val( 'VALOR DA DESCRIÇAO' );

/*VALOR MENSAGEM*/
jQuery('[name="message"]').val( 'VALOR DA MENSAGEM' );

O resultado do código deve ser parecido com esse:

Código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>function gerarf() {

/* Script do Formulário */
/*VALOR TITULO*/
jQuery('[name="subject"]').val( 'VALOR DO TITULO' );

/*VALOR DESCRIÇAO*/
jQuery('[name="description"]').val( 'VALOR DA DESCRIÇAO' );

/*VALOR MENSAGEM*/
jQuery('[name="message"]').val( 'VALOR DA MENSAGEM' );

}</script>
<form action="/posting.forum" method="post" enctype="multipart/form-data">

<!-- HTML do Formulário -->
<strong>Título do tópico</strong><br>
<input type="text" id="titulo" name="nome1" /></br>
<strong>Título do tópico</strong><br>
<textarea id="mensagem" name="nome2" rows="7" cols="7"></textarea>

<!-- Ocultos -->
<input type="hidden" name="f" value="1" />
<input type="hidden" name="subject" value="O script não enviou o título" />
<input type="hidden" name="description" value="O script não enviou a descrição" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />



<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />

<!-- Pré Visualizar -->
<input type="submit" name="preview" class="button2" value="Pré-visualizar" onClick="gerarf();" />

<!-- Enviar -->
<input type="submit" name="post" class="button2" value="Enviar" onClick="gerarf();" /></form>

Como o formulário exemplar do vídeo tutorial do canal Actif tem apenas dois campos que é o do título e o do texto, será necessário excluir do Javascript o trecho "function radio(nameObtido,valObtido){jQuery('[name="'+nameObtido+'"]').val( valObtido );}". Delete do seu código os campos invisíveis abaixo:

Código:

<input type="hidden" name="subject" value="O script não enviou o título" />
<input type="hidden" name="description" value="O script não enviou a descrição" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />

3º - Corrigindo o código Javascript:
Para que o formulário funcione nós temos que modificar o script. Por isso, você deve substituir os valores que estão padrão no seu script e adicionar um outro valor. Esse valor é o que vai dar nome e informar ao script qual informação que ele deve capturar e mandar para o campo de formulário padrão dos fóruns.

Vale lembrar, que ocorre um erro #230 caso um módulo de segurança esteja ativado no seu fórum. Para mais informações, aconselhamos que consulte a FAQ exclusiva no fórum de suporte oficial: >> [FAQ] Vínculos externos, anti-spam

No seu script:

Código:

/*VALOR TITULO*/
jQuery('[name="subject"]').val( 'VALOR DO TITULO' );

Substitua o valor .val( 'VALOR DO TITULO' ) por:

Código:

val.($('').val());

Feito isso, volte no seu HTML e modifique o nome que está entre os parentes dos campos. Ou seja, no campo NAME da caixa de texto e coloque subject. Na caixa de texto, adicione "message".


4º - Código final:
Dentro das as pas do script vamos adicionar o nome dos ID's. Ou seja, dentro do HTML que criamos com o ID="nome", vamos colocar dentro das aspas do Javascript que acabamos de criar acima. Ficando assim:

Código:

val.($('#titulo').val());

Atenção neste ponto, porque você não pode errar! Caso ocorra erros, o formulário não vai funcionar. Um ponto, virgula, acento ou qualquer item não indicado no vídeo tutorial de ShiftActif ou do Byte pode impedir o funcionamento do código.

Não esqueça, adicione o jogo da velha (#) antes do nome do campo do id.

Basta copiar o código do VAL que digitamos e substitua o valor da mensagem pelo nome do campo, que é a da mensagem. Ou seja:

Código:

val.($('#mensagem').val());

Repita os mesmos procedimentos nos outros campos desejados e confirme sua página HTML.


Resultado do nosso formulário completo só com o campo do título e mensagem:

Código:

[code]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>function gerarf() {

/* Script do Formulário */
/*VALOR TITULO*/
jQuery('[name="subject"]')val.($('#titulo').val());

/*VALOR MENSAGEM*/
jQuery('[name="message"]')val.($('#mensagem').val());

}</script>
<form action="/posting.forum" method="post" enctype="multipart/form-data">

<!-- HTML do Formulário -->
<strong>Título do tópico</strong><br>
<input type="text" id="titulo" name="nome1" /></br>
<strong>Título do tópico</strong><br>
<textarea id="mensagem" name="nome2" rows="7" cols="7"></textarea>

<!-- Ocultos -->
<input type="hidden" name="f" value="1" />

<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />

<!-- Pré Visualizar -->
<input type="submit" name="preview" class="button2" value="Pré-visualizar" onClick="gerarf();" />

<!-- Enviar -->
<input type="submit" name="post" class="button2" value="Enviar" onClick="gerarf();" /></form>[/code]Como o formulário exemplar do vídeo tutorial do canal Actif tem apenas dois campos que é o do título e o do texto, será necessário excluir do Javascript o trecho "[i]function radio(nameObtido,valObtido){jQuery('[name="'+nameObtido+'"]').val( valObtido );}[/i]". Delete do seu código os campos invisíveis abaixo:[code]<input type="hidden" name="subject" value="O script não enviou o título" />
<input type="hidden" name="description" value="O script não enviou a descrição" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />[/code]

• Como adicionar outros campos?
  Você deve assistir o vídeo tutorial feito pelo usuário Byte do fórum de suporte.
  
  
  
• Não compreendi os passos do tutorial. E agora, como solucionar minhas dúvidas?
  Você poderá consultar o vídeo tutorial do canal no Youtube que refere-se a este tutorial. Basta clicar no link abaixo:
  
  
  https://www.youtube.com/watch?v=nXdB8wFxJiI&feature=share&list=UURHdlA2i9DH4YRzzYGTqt9w
  
  
• Não sei como ativar. E agora?
  Consulte o nosso tutorial para ativação do seu formulário: https://shift.forumactif.com/t21-tutorial-ativacao-do-formulario-de-postagens Caso tenha dúvidas, crie uma nova questão no seguinte endereço: http://ajuda.forumeiros.com/f22-questoes-sobre-codigos-suporte-oficial-do-forumeiros

---

© ShiftActif