Tutorial Formularios Joomla CKFORM

Centro de Desenvolvimento Profissional e Tecnolgico

Tutorial: Joomla Forms Formulrios no Joomla com o Componente CK FORMSIntroduoQuando montamos um site em Joomla, apesar do pacote da distribuio original ser de grande utilidade, geralmente precisamos instalar componentes, mdulos e plugins para obter funcionalidades importantes para interao com os visitantes. Uma das formas de interao mais importantes feita atravs de formulrios, sejam para cadastro, para contratao de um servio ou pedido de informaes. Neste tutorial irei explicar como voc pode rapidamente resolver os problemas de criar um formulrio utilizando o componente CK FORMS. Irei detalhar a instalao e a configurao e no final, discutirei de forma geral o problema de envio de e-mails com as informaes do formulrio. Este um problema comum, pelo qual passei (e sofri bastante para resolver 2 dias inteiros perdidos...) e por isso, espero dar uma contribuio para facilitar a vida de algumas pessoas.

Instalando o CK FORMSA primeira coisa que voc deve fazer para implementar formulrios no seu site Joomla escolher um componente com as funcionalidades de criao e configurao de forms (formulrios). No link http://extensions.joomla.org/extensions/contacts-&-feedback/forms existem diversas opes para voc baixar e instalar, algumas at com melhor avaliao que o CK FORMS, que eu escolhi para este tutorial. Eu no testei todas as opes existentes, de fato, apenas duas e ambas eu recomendo. Uma delas o componente JFORMS cuja grande vantagem a configurao visual dos campos, insero de cdigo em html, ou seja, apresenta muitos recursos interessantes para voc implementar um formulrio com a sua cara. Entretanto, o CKFORMS mais simples de utilizar e configurar e resolve o problema para a grande maioria das situaes. O download do CK FORMS pode ser feito na pgina http://joomlacode.org/gf/project/ckforms/frs/. Veja a figura abaixo com o destaque para o pacote que eu baixei. Note que podem aparecer novos releases do pacote e da voc baixa o mais novo.

_______________________________________________________________________________________ Copyright CEDET Centro de Desenvolvimento Profissional e Tecnolgico 1 Este contedo de propriedade do CEDET e pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).


Vamos agora para a instalao propriamente dita. Para instalar o pacote, v em qualquer tela do admininstrator Joomla e escolha a opo Extensions do menu superior.

As opes vo aparecer e voc deve escolher Install/Unistall, como mostrado na figura seguinte

._______________________________________________________________________________________ Copyright CEDET Centro de Desenvolvimento Profissional e Tecnolgico 2 Este contedo de propriedade do CEDET e pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).


Voc vai cair na tela Extension Manager mostrada abaixo. Voc vai ter que fazer o upload do arquivo *.zip do componente CK FORM e para isto, deve clicar no boto Arquivo (ou File), selecionar o arquivo *.zip e em seguida clicar no boto ao lado Upload File & Install.

Se der tudo certo, vai aparecer uma mensagem dizendo que a instalao foi OK.

Configurando um formulrio CK FormsDepois de instalado o componente, voc pode acessar a rea de configurao no menu Components como mostrado abaixo.



Ao clicar em CK FORMS voc vai para a tela de configurao do componente (figura seguinte).

Eu destaquei duas coisas importantes na tela do CK FORMS. A primeira, em vermelho, que o nome de um formulrio que eu j criei, ou seja, depois de criar um formulrio, ele vai aparecer nesta lista. A segunda, em preto, que o boto New que serve justamente para voc criar um formulrio novo. Clique em NEW para ir para a tela seguinte.



Nesta nova tela, note que existem 4 abas: General, Result, Email e Advanced. Para criar um formulrio, vamos entender o que temos que fazer em cada campo.

Na tela General, voc ter 5 informaes para completar: 1 Nome nome do formulrio no CK FORMS utilize apenas caracteres alfanumricos. 2 Ttulo ttulo do formulrio que vai aparecer para o usurio do seu site no frontend. 3 Publicado coloque SIM se voc quiser publicar j o seu formulrio. 4 Use Captcha coloque SIM se voc quiser que no final do formulrio aparea um campo para o usurio colocar uma seqncia de letras e nmeros para evitar spam no seu formulrio. 5 Descrio coloque a descrio do seu formulrio este texto vai aparecer para o usurio do seu site quando publicado o formulrio.



Na tela Result, voc vai configurar o que deve ser feito depois que um formulrio for enviado. Existem 3 coisas a preencher: 1 Save Result coloque SIM se voc quer que as informaes preenchidas sejam guardadas em um banco de dados. O bom de fazer isso que voc pode consultar e exportar as informaes mais tarde. 2 Text Result escreva a mensagem que voc quer que aparea depois que um formulrio for enviado. O visitante do seu site preenche o formulrio, envia e recebe em seguida esta mensagem. 3 Redirect URL outra opo colocar uma URL para redirecionamento depois do envio do formulrio. uma opo interessante se voc quiser por exemplo, fazer o visitante ir para uma pgina de pagamento aps o preenchimento do formulrio.

Na tela Email, existem 6 campos para preenchimento: 1 Email Result coloque SIM para que um e-mail seja enviado para um endereo de sua escolha. 2 Mail FROM coloque um e-mail que ser o que aparecer como quem enviou o formulrio. 3 Mail TO coloque o e-mail de destino, ou seja, para o qual voc deseja mandar o formulrio. 4 Mail CC se quiser, coloque um e-mail de destino em cpia._______________________________________________________________________________________ Copyright CEDET Centro de Desenvolvimento Profissional e Tecnolgico 6 Este contedo de propriedade do CEDET e pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).


5 Mail BCC se quiser, coloque um e-mail de destino em cpia oculta. 6 Mail Subject coloque o assunto do e-mail neste campo.

Na tela Advanced, existem 3 campos: 1 Uploaded files path se voc quiser que um arquivo seja uploaded, voc deve indicar o caminho. 2 File uploaded maximum size tamanho mximo do arquivo uploaded. 3 Display powered by text clique NO se voc no quiser que aparea no formulrio a mensagem de powerd by.... Depois de tudo, clique no boto SAVE no canto superior direito da tela para salvar o formulrio. O formulrio de teste aparece na lista.

Falta agora montar o formulrio, ou seja, definir os seus campos.



Montando um Formulrio no CK FORMSPara colocar campos em um formulrio voc deve clicar nos fields, que at o momento indicam zero campos (veja a figura abaixo).

Voc vai cair na tela de Fields, que at o momento est vazia. Voc vai criar campo por campo.

No vai dar para explicar todos os tipos de campo que voc pode criar, mas clicando no boto NEW no canto superior direito, vai aparecer a seguinte tela:

Existem 4 campos a serem preenchidos: 1 Nome coloque o nome do campo utilizando apenas caracteres alfanumricos. 2 Label coloque o nome do campo que vai aparecer para o usurio. Neste campos_______________________________________________________________________________________ Copyright CEDET Centro de Desenvolvimento Profissional e Tecnolgico 8 Este contedo de propriedade do CEDET e pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).


voc pode colocar os caracteres que quiser. 3 Publicado coloque SIM se quiser que o campo aparea no formulrio. 4 Tipo a que as opes se abrem muito. S vou explicar dois que so essenciais: Texto e Button. As outras opes voc pode testar que so bem intuitivas no uso. Escolhendo Tipo = Texto, a seguinte tela aparece:

Note que apareceram 7 novos campos para preencher: 5 Mandatory marque a caixa se quiser que o preenchimento do campo seja obrigatrio, ou seja, o usurio do site no poder enviar o formulrio sem preencher o campo. 6 Tips Text se voc quiser dar alguma dica para o preenchimento do campo, coloque o texto neste campo. 7 Custom Error Text se voc quiser colocar uma mensagem de erro, caso o usurio preencha ele errado ou esquea de preenche-lo voc pode escreve-la neste campo. 8 Max Lenght Tamanho mximo do campo. Eu coloquei 50 caracteres. 9 Min Lenght Tamanho mnimo do campo. 10 Initial Value Contedo inicial do campo, caso queira. 11 Text Type Escolhendo um campo tipo texto, voc pode agora escolher se um_______________________________________________________________________________________ Copyright CEDET Centro de Desenvolvimento Profissional e Tecnolgico 9 Este contedo de propriedade do CEDET e pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).


texto comum, uma senha, um e-mail, uma data ou um nmero. Com isso o CK FORMS vai restringir o preenchimento por parte do usurio de acordo com a regra que voc colocar. Agora salve o campo que ele vai aparecer na lista de campos do formulrio.

Vamos agora criar mais um campo. Clique em NEW no canto superior direito.

Preencha com as informaes da figura acima. Quando voc escolher Tipo = Button, aparecer mais um campo:

Escolha Submit para que o boto tenha a funo de envio de formulrio. Salve o boto e verifique se ele entrou na lista de campos do seu formulrio._______________________________________________________________________________________ Copyright CEDET Centro de Desenvolvimento Profissional e Tecnolgico 10 Este contedo de propriedade do CEDET e pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).


Voc pode inserir quantos campos quiser, na ordem que achar mais interessante, mas depois que fizer isso, voc vai querer public-lo, ou melhor, que o formulrio aparea no seu site para o seu visitante preenche-lo, certo? Vamos ver como fazer isso.

Publicando o Formulrio Criado no seu SitePara fazer aparecer o seu formulrio voc tem duas opes: Linkar o formulrio a partir de um menu. Instalar o plugin feito pelos desenvolvedores do CK FORMS.

Para linkar o formulrio a partir de um menu, voc deve inserir um item no menu como explicado em nosso tutorial Joomla Menu criando, configurando e inserindo contedo (http://www.cedet.com.br/index.php?/Tutoriais/Joomla/tutorial-menus-nojoomla-criando-configurando-e-inserindo-conteudo.html). Ao inserir um item de menu, voc vai passar pela seguinte tela:



Quando o CK FORMS foi instalado, esta opo de tipo de menu automaticamente criada. Escolhendo esta opo voc vai para a seguinte tela:

A opo do formulrio que voc criou aparece no campo em destaque do lado direito na figura anterior. Basta voc selecionar a opo, no menu caso Formulrio Teste, para que o link do menu aparea aponte para o formulrio criado. No esquea tambm de colocar o Ttulo do item do Menu, como destacado em vermelho. Outra opo para publicar o seu formulrio instalar o plugin fornecido pelos desenvolvedores do CK Forms. Para isto, baixe o plugin indicado abaixo do site: http://joomlacode.org/gf/project/ckforms/frs/ .



Faa a instalao com os mesmos passos do incio do tutorial s que agora com o arquivo zip do plugin e no do componente. Ao finalizar a instalao, basta voc colocar a tag {ckform NOME DO FORM} em qualquer artigo Joomla que o formulrio aparece no lugar da tag. Muito simples.

Problamas com Envio de e-mail e Consideraes FinaisSe voc seguiu os passos indicados provavelmente voc conseguiu instalar, configurar e criar um formulrio no CK FORMS. Entretanto, um erro muito comum que ocorre no envio do e-mail. Uma mensagem que aparece Could not instantiate mail function (No foi possvel instanciar a funo mail), ou ainda, indicado que o formulrio foi enviado com sucesso e ele nunca chega no e-mail indicado. Digo por experincia prpria que s vezes isto d uma trabalheira. Se voc est com este problema eu recomendo que voc teste todas as opes de configurao global possveis no admin do Joomla. V na tela abaixo:

Teste as opes dos menus (funo mail do PHP, Sendmail, SMTP) e configure adequadamente os parmetros. Se nada funcionar, o problema provavelmente est no host do seu site. Eles devem ter desabilitado a funo mail() do PHP e/ou o Sendmail para evitar algum problema. Eu troquei e-mails com meu host antigo, mas a nica soluo que encontrei depois de dois dias de sofrimento com este problema foi trocar de host. No host novo tudo funcionou perfeito. Sei que no uma super dica, mas_______________________________________________________________________________________ Copyright CEDET Centro de Desenvolvimento Profissional e Tecnolgico 13 Este contedo de propriedade do CEDET e pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).


resolveu o problema e eu estava ficando sem tempo. O melhor de tudo que o novo host ficou bem mais barato (hehe). Se voc teve algum problema durante o processo, entre em contato conosco ([email protected]). Se for possvel, ajudaremos. Autor: Dr. Csar Kyn dvila Csar Kyn d'vila obteve sua graduao em Engenharia Eltrica em 1992 pela Universidade Estadual de Campinas (Unicamp), onde tambm completou sua formao acadmica com o Mestrado e Doutorado na rea de Telecomunicaes, nos anos de 1995 e 1998 respectivamente. Seus trabalhos acadmicos se concentram em estudos sobre os sistemas celulares com tecnologia CDMA (UMTS, CdmaOne, 1xRTT, 1xEVDO) aplicada s Comunicaes sem Fio. Desde a sua formao como doutor, atua no mercado de telecomunicaes, como consultor em diversas empresas operadoras, fabricantes de equipamentos e prestadoras de servio. Possui grande experincia didtica e ministrou inmeros treinamentos em empresas como Samsung, Motorola, Nortel, Ericsson, Instituto Eldorado, Flextronics, Brasil Telecom, Telemar, Vivo, Claro, Telemig Celular, e outras, bem como cursos de ps-graduao em faculdades. Atualmente ocupa a posio de Diretor de Tecnologia do Centro de Desenvolvimento Profissional e Tecnolgico (CEDET) empresa com projetos com as tecnologias GSM, UMTS e Wi-MAX e atua como pesquisador independente tendo orientado teses e trabalhos cientficos em instituies de renome como Unicamp e Inatel. ltima atualizao em 01/06/2009 Copyright CEDET Centro de Desenvolvimento Profissional e Tecnolgico Este contedo pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).


Documents

Tutorial Formularios Joomla CKFORM