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


1- Criando o Formulário:
Vamos criar um formulário simples, com um campo apenas para a mensagem a ser postada...
você poderá criar tento em uma pagina 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>

onde esta escrito LINK.js, você ira colocar o link da pagina java que você ira 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 sera...

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...
onde esta escrito CONTEUDO-AQUI, iremos usar a estrutura do tópico, exemplo

Código:

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

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

Código:

<textarea class="inputbox content-new" id="mensagem" name="message" cols="8" rows="8" style="width:100%;padding:0px;border-width:1px;">
</textarea>

O código completo ficara assim...

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 Java:
lembra do passo um que tinha essa tag abaixo...

Código:

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

então, subistitua onde esta escrito LINK.js, pelo link da pagina 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 pagina 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> &nbsp;</fieldset></div>

6- O resultado final:


----------------------------------------------------------------------------

© SP-Design & Cyllaz

Se tiver alguma dúvida relacionada com este tutorial, crie um tópico com o seguinte título:
[Dúvida] Criar um formulário personalizado