Linux e CIA: iMasters - Como criar um formulário simples no Joomla

terça-feira, julho 21, 2009

iMasters - Como criar um formulário simples no Joomla - Software Livre

Segunda-feira, 22/06/2009 - 10:00 - Por André Luiz Costa de Andrade
Seções relacionadas:
Como criar um formulário simples no Joomla

Neste artigo iremos aprender a criar um formulário simples para o Joomla, utilizando o componente Chrono Forms. Esse formulário será similar ao fale conosco, mas com algumas particularidades bem interessantes. Além disso, este tutorial vai lhe abrir um leque de possibilidades para a criação de formulários para o Joomla.
Antes de tudo você precisa baixar o componente para sua máquina, abaixo segue o link da versão V3. 1 RC2 desse componente.
Componente ChronoForms V3.1 RC2
Nota: Se uma nova versão já está disponível, recomendo utilizá-la.
Após a instalação do Chrono Forms na área administrativa do Joomla, vá até - Componentes - Chrono Forms - Forms Manager.
Aqui nesta página nós vamos criar nosso primeiro formulário. Para isso vamos clicar em NOVO.
Imagem do Chrono Forms 1
Como mostra circulada de vermelho na figura acima, podemos notar um menu bem extenso no qual teremos de mexer para criar nosso formulário!
Calma, não se preocupem! Não é necessário mexer em tudo! Vamos começar!
No primeiro menu General (Geral), temos alguns campos a preencher.
O primeiro campo é: Form Name (do nome), eu vou chamar de contato. O nome pode ser qualquer um, lembrando apenas que não pode entrar espaços, acentos, letra maiúscula etc.
Segundo campo é: Email the results? (Resultado de email). Esse campo pergunta a você se deseja receber um e-mail com os dados do formulário que foi preenchido. Esse campo sempre vem marcado como "não", vamos mudar para "sim", já que queremos receber esses e-mails.
Nota: Não é necessário alterar os campos posteriores.
Vamos para o segundo menu: Setup Emails (Configuração de emails). Aqui vamos configurar o email para receber os formulários.
Pra realizar tal tarefa, temos que clicar no envelope com uma seta verde para baixo:
Obs: Ao clicar no envelope o campo fica com uma cor rosada.
Para jogar os campos dentro do quadrado rosado basta clicar em cima dos campos ao lado e arrastar para dentro do quadrado. Os campos que vamos utilizar são os seguintes:
To (Para), pra onde o formulário vai;
Subject (Assunto), quando o formulário chegar até seu e-mail no assunto virá o nome que colocou aqui;
Fromname (do nome), quando o formulário chegar até seu e-mail você o identificará com o nome que colocou aqui;
Dynamic FromEmail (do email dinâmico), aqui você colocaria o e-mail de quem irá preencher o formulário, como você não sabe e não será somente um e-mail, você irá inserir o "name" do campo (input) correspondente ao e-mail que você irá criar para o formulário (eu vou colocar "email", desta forma quando o formulário chegar no lugar de email virá o e-mail da pessoa que preencheu o formulário.
Veja na figura abaixo os campos que acabamos de arrastar já preenchidos.
Após todos os campos devidamente preenchidos vamos ao quadro ao lado na parte inferior onde diz: "Email Properties" (Propriedade de email). Dentre as opções que temos nesse espaço vamos alterar somente uma: "Enabled". Somente escolhendo a opção (Yes) vamos tornar valido tudo que fizemos nesse menu (General).
Agora basta clicar em Apply (aplicar). Esse processo deve demorar um pouco, mas não impede de prosseguirmos.
Vamos pular o próximo menu (Emails Templates) por enquanto, sendo assim, vamos ao seguinte: Form Code (do código).
Essa parte é muito importante, pois é aqui onde colocaremos o nosso código do nosso formulário.
Para esse tutorial vamos trabalhar com um formulário de 5 campos!
Obs: Neste tutorial não iremos ensinar como desenvolver o código do formulário. O que estamos utilizando segue abaixo, como exemplo.
Obs2.: Não insira a tag
, normalmente utilizada em formulários, pois o próprio componente irá inserir para você corretamente.
Você deve estar se perguntando o porquê de: nome, telefone, email, assunto, mensagem, estarem em negrito... Calma! Mais a diante vamos explicar!
Nesta etapa existem 4 campos, nosso código do formulário entrará no primeiro campo: Form HTML (do HTML).
Nota: Como se trata de um formulário simples, o segundo e terceiro campo não precisar mexer. E o quarto campo: On Submit code - after sending email (Enviar código - depois de enviar e-mail) é opcional.
Se você deseja que seu cliente veja uma mensagem de agradecimento, ou qualquer outra mensagem após enviar o formulário, então você irá querer preencher esse campo! Basta criar o código com a mensagem que deseja transmitir.
Abaixo segue o Código que usamos para esse campo.
Nota: Aqui não usamos um texto e sim uma imagem de agradecimento.
Após ter feito, vamos prosseguir para o próximo menu.
Nós vamos para o menu Validation (Validação).
Nota: Pulamos 6 menus, pois eles não precisam ser alterados para este tipo de formulário.
No menu Validação vamos alterar o primeiro campo: Enable Validation (Ativar Validação). Esse campo vem como (No), vamos alterar para (Yes), para nosso formulário ser Validado.
Na lista de 1 à 12, como mostra a figura abaixo, vamos acrescentar em ordem os nomes em negrito que mencionamos em nosso código HTML acima.
Você deve está se perguntando: Por que eu tenho que preencher com esses nomes, não poderia ser outros?
Eu te responderia: Sim, poderia ser outros se esses outros estivessem em seu código. Vamos voltar no código. Se você reparar bem, todos o que está em negrito são os "names"
name="nome"
name="telefone"
name="e-mail
etc.
Você escreverá no campo: required (not blank) os campos que você deseja que não fiquem em branco. O que isso quer dizer? Quer dizer que se alguém não preencher algum campo e tentar enviar o formulário não vai conseguir, pois os campos são todos obrigatórios.
Nota1: Você pode alterar o texto da validação, inserindo uma tag "title" no campo input correspondente, exemplo:
Nota2: Você só preenche o required (not blank) se quiser que algum campo seja obrigatório em seu formulário.
Após preencher o campo clique em salvar.
Após esse processo, nosso formulário estará pronto para ser utilizado!
Importante: Se você abrir novamente o formulário que criou, poderá verificar na aba "Emails Templates", como será o e-mail que receberá após o mesmo ser enviado. Sabendo que os textos entre {} são os values dos campos. O texto pode ser alterado livremente.
Importante2: Não se esqueça de publicar o formulário na listagem da página inicial do componente.
Espero que esse tutorial seja de grande valia para muitos!
Qualquer dúvida estou pronta para tirá-las!
Um Grande abraço e até a próxima!
Fonte Original: Portal Joomla RJ
Escrito por: Rachel Soares Pereira