[TUTORIAL] Criar um formulário personalizado.

Neste tutorial, vamos aprender a criar formulários personalizados de modo simples e para vários fins.

--> Tutoriais e Vídeos <--
Criar um formulário personalizado

1 - Criando o Formulário:

Vamos criar um formulário simples, com um campo apenas para a mensagem a ser postada.
Você poderá criar tanto em uma página HTML, quanto em um Widget.

Código a ser usado:

Código:


<script src=LINK.js></script>

<form action="/posting.forum" method="post" name="post" enctype="multipart/form-data" onsubmit="return vB_Editor['text_editor'].prepare_submit(0, 0)" id="quick_reply">

Titulo:<input type="text" class="inputbox" id="topico" value="Anuncio" style="width: 150px;border-width:1px;font-height:bold;" onClick="this.focus();this.select();" onChange="episodiomostra();"/>
<br>
Texto:<br>
<textarea class="inputbox content-new" id="mensagem" name="message" cols="8" rows="8" style="width:600px;padding:0px;border-width:1px;">
</textarea>

<fieldset class="submit-buttons">
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="subject" value="" />
<input type="hidden" name="f" value="" />
<input id="bt-enviar" value="Enviar" type="submit" class="button1" name="post" onClick="gerarcodigo();">
</td><td>
<input value="Prévia" type="submit" class="button1" name="preview" onClick="gerarcodigo();">
</fieldset>

</form>

No local onde está escrito LINK.js, você irá colocar o link da página java que você criará.
Obs: Não se esqueça disso quanto terminar o código java.

2 - Criando o código JavaScript:

O código a ser utilizado será:

Código:

function episodiomostra(){
jQuery('#episodiomostra').html(    jQuery('#topico').val()    );
}
function gerarcodigo(){
jQuery('[name="subject"]').val(jQuery('#topico').val());
jQuery('[name="f"]').val('1');
/*Numero do Forum*/
jQuery('[name="message"]').val('CONTEUDO-AQUI')
}

Agora vamos editar o código.
No local onde está escrito CONTEUDO-AQUI, iremos usar a estrutura do tópico, exemplo:

Código:

[b]Mensagem:[/b]<br>'+jQuery('#ID-OPÇÃO').val()+'<br>

Onde está ID-OPÇÃO, vamos colocar a ID do texteare, ou input, tanto faz.
que no caso será #mensagem.
Como pode ver no exemplo abaixo do texteare que você usou quando criou o formulário no passo 1.

Código:

function episodiomostra(){
jQuery('#episodiomostra').html(    jQuery('#topico').val()    );
}
function gerarcodigo(){
jQuery('[name="subject"]').val(jQuery('#topico').val());
jQuery('[name="f"]').val('1');
/*Numero do Forum*/
jQuery('[name="message"]').val('[b]Mensagem:[/b]<br>'+jQuery('#mensagem').val()+'<br>')
}

3 - Inserindo o código JavaScript:
Vamos agora aceder à gestão das páginas JavaScript para adicionarmos o nosso código:

Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript

Depois carregue-se no botão "Criar um novo javascript".

Título Terá de colocar um título para a página, de forma a poder identifica-lo na-lista de páginas JavaScript do Painel de Controle;

Investimento Desabilite todas as caixas de seleção;

Código JavaScript Neste campo teremos de inserir o código que editou acima;

Confirmar Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas.

4 - Adicionando o link do código Javascript:
Lembra do passo um que tinha a tag abaixo.

Código:

<script src=LINK.js></script>

Então, subistitua onde está escrito LINK.js, pelo link da página java que você acabou de criar, e salve.


5 - Opção adicional:
Isso é opcional.
Se você quiser que esse formulário crie anúncios globais, etc, então volte ao formulário, na página html, ou no widget, e cole o seguinte código, abaixo do Textearea

Código:

<div style="margin-top:4px;margin-bottom:-6px;"><fieldset>Colocar o tópico como: <label><input type="radio" name="topictype" value="0" checked="checked"> Normal</label>  <label><input type="radio" name="topictype" value="1"> LEIA!</label>  <label><input type="radio" name="topictype" value="2"> ANÚNCIO</label>  <label><input type="radio" name="topictype" value="3"> GLOBAL</label>  </fieldset></div>


6 - O resultado final:

---

© Shiftactif & SP-Design