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:
- 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
- Após realizar o download, acesse a área administrativa de seu Joomla, clique no link “Extensions - Instalar/desinstalar”
- Agora clique no botão para encontrar o pacote que você baixou do site do ChronoEngine. Após isso mande instalar.
- Após instalado, navegue na aba “Extensions - ChronoContact” para visualizar a tela como na Figura 1 que apresenta a tela inicial do Componente Chronoforms.
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.
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.
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ódigo HTML do formulário, ou seja, sua estrutura;
- “CSS Styles”: que serve para inserirmos os estilos CSS do formulário;
- “On Submit code - after sending email”: que serve para inserir a informação que será apresentada após o preenchimento do formulário pelo usuário;
Para abrir os campos basta clicar no símbolo [+/-]. No primeiro campo (Form HTML) inserimos o HTML sem a tag “