ChronoForms: Criando formulário

por Francisco Gomes
Acessos: 1768

O que é o Chronoforms?
Chronoforms é um componente Joomla que permite aos usuários a criação e publicação de seus formulários muito rapidamente.

Bem, o primeiro passo é efetuar

 o download do Chronoforms, que você pode fazê-lo conforme links abaixo.

ChronoForms V5 J2.5 - J3 Component

ChronoForms V5 J2.5 - J3 Module

ChronoForms V5 J2.5 - J3 Plugin

Feito isso, faz-se necessário a instalação do Chronoforms.

Instalando o ChronoForms no Joomla

Acesse o painel “Administrator” do seu Joomla;

Vá em Extensões > Gerenciador de Extensões > Selecione o arquivo no seu computador > Upload/Instalar

Deve aparecer em azul: “Instalação de componente concluída com sucesso.”

Pronto, agora você está com o componente devidamente instalado e podemos começar a criar um formulário, vamos lá!

Criando um novo Formulário com o ChronoForms.

Vá em Componentes > ChronorForms5 > ChronorForms5;

Observação: Neste momento se você observar, o Chronoforms já traz alguns modelos de formulário prontos, caso queira, basta escolher um dos modelos e configura-los conforme a sua necessidade, mas aqui o nosso objetivo é criar um novo formulário, então, mãos à obra.

Clique em NEW;

Na aba General

Em Form Name você deve colocar o nome do seu formulário, observar que o nome do formulário não deve ter quaisquer espaços ou caracteres especiais.

Em Form description você pode (opcional) colocar uma breve descrição do seu formulário.

Em Published deixe como Yes

Em Setup Mode utilize o Advanced

Observação: O modo avançado padrão tem mais recursos, mas o modo simples é mais adequado para iniciantes!

 

Muito bem, acabamos de identificar o nosso formulário, agora vamos ao próximo passo:

Na aba Designer

Dentro da aba designer, vá para a aba Layout.

Bem é aqui que iremos inserir os campos do nosso formulário, sugiro que para este primeiro formulário, usemos campos simples, tais como:

Dropdown – Select de campos

Textbox – Input de texto

Textarea – Input de caixa de texto

Submit button – Botão de enviar

Para inserir estes campos é muito simples, basta arrastar e soltar, ou seja, escolhe o tipo de campo que você quer do lado esquerdo e arrasta para a tela de trabalho (azul) do lado direito.

Que deve ficar como esta.

 

Observe que para cada campo que você arrastou para a área azul à direita, temos 3 botões: EDIT, DRAG e DELETE.

Vamos trabalhar campo a campo, configurando conforme nossa necessidade.

Usando seleção de multiplos destinatários

O primeiro campo que iremos configurar, para este caso especificamente, é o campo DROPDOWN, pois neste campo, iremos configurar um e-mail pra cada item selecionado.

Então mãos à obra:

Ainda na aba General

Vá no campo DROPDOWN e clique em EDIT;

Em Field Name coloque destinatario;

Em Field ID coloque destinatario;

Em Options coloque o nome que vai aparecer e o e-mail equivalente, seguindo o exemplo:

Selecione=Selecione

adm @ suaempresa.com.br=Administração

ctb @ suaempresa.com.br=Contabilidade

comercial @ suaempresa.com.br=Comercial

diretoria @ suaempresa.com.br=Diretoria

em Selected Values, coloque a opção que você queira que fique como default, exemplo:

Selecione=Selecione

Em Label digite Departamento

agora na aba Validation

Marque Validation como Yes

Muito bem, agora com a configuração deste campo efetuado, vamos Salvar e Fechar.

Clique em Save and Close.

Vamos ao próximo campo:

No primeiro campo TextBox, clique em Edit

Na aba General

Em Field Name, digite nome

Em Field Id, digite nome

Em Label, digite Seu Nome

Muito bem, agora com a configuração deste campo efetuado, vamos Salvar e Fechar.

Clique em Save and Close.

Vamos ao próximo campo:

No segundo campo TextBox, clique em Edit

Na aba General

Em Field Name, digite email

Em Field Id, digite email

Em Label, digite Seu E-Mail

Vá para a aba Validation

Em Required, digite Yes -> estamos dizendo que a digitação do e-mail é obrigatória

Em Email, digite Yes -> Estamos efetuando a validação automática do e-mail.

Ufaaa! Mais um campo configurado, vamos Salvar e Fechar.

Clique em Save and Close.

Vamos ao próximo campo:

No campo TextArea, clique em Edit

Na aba General

Em Field Name, digite observacoes (é sem acento mesmo)

Em Field Id, digite observacoes (é sem acento mesmo)

Em Label, digite Observações (agora aqui é com acento)

Bem, mais um campo configurado, vamos Salvar e Fechar.

Clique em Save and Close.

Vamos ao próximo campo:

No campo button, clique em Edit

Na aba General

Em Name, digite enviar

Em Id, digite enviar

Em Type, deixe como Submit

Em Value/Label, digite Enviar Dados

Ok ok, último campo configurado, será ?

Vamos Salvar e Fechar.

Clique em Save and Close.

Bem, vamos com muita atenção agora.

Clique na aba Setup

Clique e arraste HTML (Render Form) que está do lado esquerdo para a mesa de trabalho On Load do lado direito

Bem, nos criamos um campo dinâmico, agora precisamos ativa-lo.

Vamos lá.

Ativando o campo dinâmico

Clique e arraste Email que está do lado esquerdo para a mesa de trabalho On Submit do lado direito

 

Agora em Email, clique em Edit e na aba Basic, preencha os campos de como quer receber a mensagem, como o campo assunto etc;

Vá para a aba ADVANCED;

No campo Dynamic To coloque o nome do campo DropDown que criamos, lembra?, no nosso caso o nome é destinatario.

Tudo configurado bonitinho, vamos aos próximos passos.

É muito bacana uma mensagem de agradecimento para quem te enviou um e-mail, não é?, então vamos colocar uma mensagem de agradecimento aos nossos clientes.

Configurando mensagem de agradecimento

Ainda na aba SETUP, arraste o Display Message que está do lado esquerdo para a mesa On submit, logo abaixo do Email.

Agora clique em Edit e digite a sua mensagem de agradecimento.

Após preencher a sua mensagem, vamos Salvar e Fechar.

Clique em Save and Close.

Muito bem, você acabou de criar um formulário.

Clique em Save situado no canto superior direito

Agora sim, seu formulário está pronto e Salvo, vamos testar?

Clique em Test Form, e

Eis o seu formulário recém criado.

Clique em Save and Close situado no canto superior direito

Ah mas o meu formulário não está aparecendo no meu site.

Ok, vamos inseri-lo no teu site.

Inserindo o formulário no menu do meu site

Ainda dentro da Administração do teu site.

Vá para a opção Menus;

Escolha em qual menu você que colocar este formulário;

Clique em Ítem de Menu;

Clique em Novo;

Coloque um nome que quer que aparça no Menu

Para Tipo de Ítem de Menu, selecione Chronoforms5;

Na aba Opções,

em Form Name. Coloque o nome do formulário que você acabou de criar

Clique em Salvar e Fechar

Prontinho da Silva Sauro, seu formulário já está ativo no seu menu.

Bem agora que você já aprendeu o básico sobre como criar um formulário no chronoforms, é só você exercitar sua criatividade e criar outros modelos de formulários

 

por: Francisco Gomes / Fevereiro de 2016

 

Veja também:

Como criar meu site?, etapas
Como divulgar meu site, 10 dicas
Otimizando o Joomla 3
Criando sites incríveis para Joomla

Deixar seu comentário

Postar comentário

0
termos e condições.

Comentários