O que precisamos

Para conseguir desenvolver a solução proposta neste artigo, iremos precisar inicialmente de uma base Joomla instalada e o componente de criação de formulários “Chronoforms” que no momento de escrita deste artigo está em sua versão 3.2.0, que ainda não é compatível com a versão 1.6 do Joomla, com isso a base Joomla deve ser a 1.5.22, versão mais recente da 1.5.

Para instalar o Chronoforms devemos seguir alguns passos:

1. Primeiramente acesse o site do Chronoengine.com e navegue no link de download até o componente na versão indicada ou inserir o link: http://www.chronoengine.com/downloads/chronoforms/chronoforms-j1/component/131-chronoformsv3-2-0.html
2. Após realizar o download, acesse a área administrativa de seu Joomla, clique no link “Extensions - Instalar/desinstalar”
3. Agora clique no botão para encontrar o pacote que você baixou do site do ChronoEngine. Após isso mande instalar.
4. Após instalado, navegue na aba “Extensions - ChronoContact” para visualizar a tela como na Figura 1 que apresenta a tela inicial do Componente Chronoforms.

Figura 1: Tela Inicial do Componente Chronoforms após instalado.

Preparado nosso ambiente de desenvolvimento, partiremos agora para o desenvolvimento do formulário de contato proposto neste artigo.

Primeiros passos para criar o formulário

Após a instalação do componente Chronoforms, iremos acessá-lo pelo menu superior da área administrativa do Joomla e clicar no botão “Novo” ou “New” na versão não traduzida. Na tela apresentada (ver Figura 2) precisamos alterar algumas pequenas informações. Primeiramente daremos um nome ao formulário, lembrando-se de não inserir caracteres especiais. Em seguida devemos habilitar a função de envio de e-mails. Feito isso, traduzimos a mensagem de erro quando o usuário tentar enviar várias vezes o mesmo formulário. Por último, habilitamos uma função para não obrigar o usuário a preencher tudo novamente caso ele erre os caracteres do captcha (ferramenta muito utilizada para diferenciar maquinas de humanos) reduzindo com isso os preenchimentos feitos com a finalidade de spam. Para as demais variáveis deixamos o valor padrão.

Figura 2: Aba General do Chronoforms.

Definido nosso formulário, trabalharemos agora na configuração do envio do e-mail.

Configurando o e-mail

Na segunda aba da tela apresentada na Figura 2 iremos configurar as informações pertinentes ao e-mail. Essa área é bastante simples e intuitiva. Para configurar o e-mail basta arrastar os elementos que estão no bloco “Toolbox” representados na Figura 3, que considera importante, lembrando-se dos elementos básicos: To, Subject, From Name e Dynamic From Email.

Quando inserimos todos os campos necessários para o envio do email, a caixa que envolve os elementos muda de vermelho para verde como na Figura 3. Na Figura 3 temos definido como ficará a configuração de nosso e-mail ao terminar de definir todos os itens necessários.

A terceira aba “Email Templates” é o local onde você poderá configurar o layout do email que será enviado. Inicialmente ele estará em branco, com isso, após você inserir o HTML na próxima aba e aplicar, automaticamente todas as variáveis estarão disponíveis conforme o layout que será inserido na aba “Form Code”. Esse passo veremos com mais detalhes nos próximos tópicos.

Figura 3: Aba Setup Email do Chronoforms.

Inserindo o código HTML

Até aqui configuramos informações sobre o funcionamento de nosso formulário. Dando prosseguimento, é na aba “Form Code” que iremos efetivamente construir nosso formulário. O próprio Componente Chronoforms possui um assistente para construir esse formulário, mas queremos total liberdade na hora de criar os campos e não ficar limitado à apresentação do componente. Por isso iremos usar a forma mais flexível e mais avançada do sistema.

Dentro da aba “Form Code” existem vários campos conforme pode ser observado na Figura 4. Para esse tutorial iremos usar os campos:

• "Form HTML”: que serve para inserirmos o códi ...