Tutorial Formularios CKFORM

Centro de

Desenvolvimento

Profissional e Tecnológico

_______________________________________________________________________________________ Copyright © CEDET – Centro de Desenvolvimento Profissional e Tecnológico 1 Este conteúdo é de propriedade do CEDET e pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).

Tutorial: Joomla Forms – Formulários no Joomla com o Componente CK FORMS

Introdução

Quando montamos um site em Joomla, apesar do pacote da distribuição original ser de grande utilidade, geralmente precisamos instalar componentes, módulos e plugins para obter funcionalidades importantes para interação com os visitantes. Uma das formas de interação mais importantes é feita através de formulários, sejam para cadastro, para contratação de um serviço ou pedido de informações. Neste tutorial irei explicar como você pode rapidamente resolver os problemas de criar um formulário utilizando o componente CK FORMS. Irei detalhar a instalação e a configuração e no final, discutirei de forma geral o problema de envio de e-mails com as informações do formulário. Este é um problema comum, pelo qual passei (e sofri bastante para resolver – 2 dias inteiros perdidos...) e por isso, espero dar uma contribuição para facilitar a vida de algumas pessoas.

Instalando o CK FORMS

A primeira coisa que você deve fazer para implementar formulários no seu site Joomla é escolher um componente com as funcionalidades de criação e configuração de forms (formulários). No link http://extensions.joomla.org/extensions/contacts-&-feedback/forms existem diversas opções para você baixar e instalar, algumas até com melhor avaliação que o CK FORMS, que eu escolhi para este tutorial. Eu não testei todas as opções existentes, de fato, apenas duas e ambas eu recomendo. Uma delas é o componente JFORMS cuja grande vantagem é a configuração visual dos campos, inserção de código em html, ou seja, apresenta muitos recursos interessantes para você implementar um formulário com a sua cara. Entretanto, o CKFORMS é mais simples de utilizar e configurar e resolve o problema para a grande maioria das situações. O download do CK FORMS pode ser feito na página 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.

Centro de

Desenvolvimento



Vamos agora para a instalação propriamente dita. Para instalar o pacote, vá em qualquer tela do “admininstrator” Joomla e escolha a opção “Extensions” do menu superior.

As opções vão aparecer e você deve escolher “Install/Unistall”, como mostrado na figura seguinte

.

Centro de

Desenvolvimento



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 botão “Arquivo” (ou “File”), selecionar o arquivo *.zip e em seguida clicar no botão ao lado “Upload File & Install”.

Se der tudo certo, vai aparecer uma mensagem dizendo que a instalação foi OK.

Configurando um formulário CK Forms

Depois de instalado o componente, você pode acessar a área de configuração no menu “Components” como mostrado abaixo.

Centro de

Desenvolvimento



Ao clicar em CK FORMS você vai para a tela de configuração do componente (figura seguinte).

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

Centro de

Desenvolvimento



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

Na tela “General”, você terá 5 informações para completar: 1 – Nome – nome do formulário no CK FORMS – utilize apenas caracteres alfanuméricos.

2 – Título – título do formulário que vai aparecer para o usuário do seu site no frontend.

3 – Publicado – coloque SIM se você quiser publicar já o seu formulário.

4 – Use Captcha – coloque SIM se você quiser que no final do formulário apareça um campo para o usuário colocar uma seqüência de letras e números para evitar spam no seu formulário.

5 – Descrição – coloque a descrição do seu formulário – este texto vai aparecer para o usuário do seu site quando publicado o formulário.

Centro de

Desenvolvimento



Na tela “Result”, você vai configurar o que deve ser feito depois que um formulário for enviado. Existem 3 coisas a preencher: 1 – Save Result – coloque “SIM” se você quer que as informações preenchidas sejam guardadas em um banco de dados. O bom de fazer isso é que você pode consultar e exportar as informações mais tarde. 2 – Text Result – escreva a mensagem que você quer que apareça depois que um formulário for enviado. O visitante do seu site preenche o formulário, envia e recebe em seguida esta mensagem. 3 – Redirect URL – outra opção é colocar uma URL para redirecionamento depois do envio do formulário. É uma opção interessante se você quiser por exemplo, fazer o visitante ir para uma página de pagamento após o preenchimento do formulário.

Na tela “Email”, existem 6 campos para preenchimento: 1 – Email Result – coloque SIM para que um e-mail seja enviado para um endereço de sua escolha. 2 – Mail FROM – coloque um e-mail que será o que aparecerá como quem enviou o formulário. 3 – Mail TO – coloque o e-mail de destino, ou seja, para o qual você deseja mandar o formulário. 4 – Mail CC – se quiser, coloque um e-mail de destino em cópia.

Centro de

Desenvolvimento



5 – Mail BCC – se quiser, coloque um e-mail de destino em cópia 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 máximo do arquivo “uploaded”. 3 – Display “powered by” text – clique NÃO se você não quiser que apareça no formulário a mensagem de “powerd by...”. Depois de tudo, clique no botão “SAVE” no canto superior direito da tela para salvar o formulário. O formulário de teste aparece na lista.

Falta agora montar o formulário, ou seja, definir os seus campos.

Centro de

Desenvolvimento



Montando um Formulário no CK FORMS

Para colocar campos em um formulário 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.

Não vai dar para explicar todos os tipos de campo que você pode criar, mas clicando no botão “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 alfanuméricos. 2 – Label – coloque o nome do campo que vai aparecer para o usuário. Neste campos

Centro de

Desenvolvimento



você pode colocar os caracteres que quiser. 3 – Publicado – coloque “SIM” se quiser que o campo apareça no formulário. 4 – Tipo – é aí que as opções se abrem muito. Só vou explicar dois que são essenciais: “Texto” e “Button”. As outras opções você pode testar que são 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 obrigatório, ou seja, o usuário do site não poderá enviar o formulário 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 usuário preencha ele errado ou esqueça de preenche-lo você pode escreve-la neste campo. 8 – Max Lenght – Tamanho máximo do campo. Eu coloquei 50 caracteres. 9 – Min Lenght – Tamanho mínimo do campo. 10 – Initial Value – Conteúdo inicial do campo, caso queira. 11 – Text Type – Escolhendo um campo tipo texto, você pode agora escolher se é um

Centro de

Desenvolvimento



texto comum, uma senha, um e-mail, uma data ou um número. Com isso o CK FORMS vai restringir o preenchimento por parte do usuário de acordo com a regra que você colocar. Agora salve o campo que ele vai aparecer na lista de campos do formulário.

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

Preencha com as informações da figura acima. Quando você escolher Tipo = Button, aparecerá mais um campo:

Escolha “Submit” para que o botão tenha a função de envio de formulário. Salve o botão e verifique se ele entrou na lista de campos do seu formulário.

Centro de

Desenvolvimento



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 formulário apareça no seu site para o seu visitante preenche-lo, certo? Vamos ver como fazer isso.

Publicando o Formulário Criado no seu Site

Para fazer aparecer o seu formulário você tem duas opções:

• Linkar o formulário a partir de um menu. • Instalar o plugin feito pelos desenvolvedores do CK FORMS.

Para linkar o formulário a partir de um menu, você deve inserir um item no menu como explicado em nosso tutorial “Joomla Menu – criando, configurando e inserindo conteúdo” (http://www.cedet.com.br/index.php?/Tutoriais/Joomla/tutorial-menus-no-joomla-criando-configurando-e-inserindo-conteudo.html). Ao inserir um item de menu, você vai passar pela seguinte tela:

Centro de

Desenvolvimento



Quando o CK FORMS foi instalado, esta opção de tipo de menu é automaticamente criada. Escolhendo esta opção você vai para a seguinte tela:

A opção do formulário que você criou aparece no campo em destaque do lado direito na figura anterior. Basta você selecionar a opção, no menu caso “Formulário Teste”, para que o link do menu apareça aponte para o formulário criado. Não esqueça também de colocar o Título do item do Menu, como destacado em vermelho. Outra opção para publicar o seu formulário é 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/ .

Centro de

Desenvolvimento



Faça a instalação com os mesmos passos do início do tutorial só que agora com o arquivo zip do plugin e não do componente. Ao finalizar a instalação, basta você colocar a tag {ckform NOME DO FORM} em qualquer artigo Joomla que o formulário aparece no lugar da tag. Muito simples.

Problamas com Envio de e-mail e Considerações Finais Se você seguiu os passos indicados provavelmente você conseguiu instalar, configurar e criar um formulário no CK FORMS. Entretanto, um erro muito comum que ocorre é no envio do e-mail. Uma mensagem que aparece é “Could not instantiate mail function” (Não foi possível instanciar a função mail), ou ainda, é indicado que o formulário foi enviado com sucesso e ele nunca chega no e-mail indicado. Digo por experiência própria que às vezes isto dá uma trabalheira. Se você está com este problema eu recomendo que você teste todas as opções de configuração global possíveis no admin do Joomla. Vá na tela abaixo:

Teste as opções dos menus (função mail do PHP, Sendmail, SMTP) e configure adequadamente os parâmetros. Se nada funcionar, o problema provavelmente está no host do seu site. Eles devem ter desabilitado a função mail() do PHP e/ou o Sendmail para evitar algum problema. Eu troquei e-mails com meu host antigo, mas a única solução que encontrei depois de dois dias de sofrimento com este problema foi trocar de host. No host novo tudo funcionou perfeito. Sei que não é uma super dica, mas

Centro de

Desenvolvimento



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 possível, ajudaremos. Autor: Dr. César Kyn d´Ávila César Kyn d'Ávila obteve sua graduação em Engenharia Elétrica em 1992 pela Universidade Estadual de Campinas (Unicamp), onde também completou sua formação acadêmica com o Mestrado e Doutorado na área de Telecomunicações, nos anos de 1995 e 1998 respectivamente. Seus trabalhos acadêmicos se concentram em estudos sobre os sistemas celulares com tecnologia CDMA (UMTS, CdmaOne, 1xRTT, 1xEVDO) aplicada às Comunicações sem Fio. Desde a sua formação como doutor, atua no mercado de telecomunicações, como consultor em diversas empresas operadoras, fabricantes de equipamentos e prestadoras de serviço. Possui grande experiência didática e ministrou inúmeros treinamentos em empresas como Samsung, Motorola, Nortel, Ericsson, Instituto Eldorado, Flextronics, Brasil Telecom, Telemar, Vivo, Claro, Telemig Celular, e outras, bem como cursos de pós-graduação em faculdades. Atualmente ocupa a posição de Diretor de Tecnologia do Centro de Desenvolvimento Profissional e Tecnológico (CEDET) empresa com projetos com as tecnologias GSM, UMTS e Wi-MAX e atua como pesquisador independente tendo orientado teses e trabalhos científicos em instituições de renome como Unicamp e Inatel. Última atualização em 01/06/2009 Copyright © CEDET – Centro de Desenvolvimento Profissional e Tecnológico Este conteúdo pode ser utilizado livremente desde que citados o autor e o site do CEDET (www.cedet.com.br).

Tutorial Formularios CKFORM

Documents

Transcript of Tutorial Formularios CKFORM