Faltam 0 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

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 <form>, 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: <input type="text" name="nome" id="nome" title="Preencha seu nome!" />

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