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.
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 está 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 grito que mencionamos em nosso código HTML acima.
Você deve está se perguntando: Porque eu tenho que preencher com esses nomes, não poderia ser outros?
Eu te responderia: Sim, poderia ser outros se esses outros estivem 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:
title="Preencha corretamente o 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 do Joomla RJ
Escrito por: Rachel Soares Pereira
você diz que o componente é gratis
mas abaixei o download do site e o componente não permite modificar a opção enable
sabe oq ue acontece?
outra duvida uso o wampserver e agora da o seguinte erro quando preencho e envio o form: Não foi possível instanciar a função mail. Pq?
obrigado.
Waldir
@waldir quem sabe no proximo artigo me aprofundo mais nesta questão.
Um grande abraço...
André Andrade
www.joomlarj.com.br
muito obrigado
Abraços...
Na realidade eu queria também que o campo do nome e email não aparecesse para ser preenchido, pois de alguma forma seria o nome e email do usurário cadastrado atual que iria ser enviado pro meu email identificando assim o usurário que fez o upload. Deu pra entender? Pq senão toda vez que o usurário (que já cadastrado) tiver que fazer um upload tiver que preencher o nome e email fica sem sentido, já que ele é cadastrado.
André muito obrigado pela atenção
@gabriel desculpe minha franquesa, mas acho que você está pedindo demais, o que posso te indicar é assista as vídeo aulas de como criar templates no site do Joomla RJ. www.joomlarj.com.br
A intensao da ajuda é 100% valida, mas temos que pensar num visual melhor.
Bom Trabalho.
O meu site funciona online e o host me dá o serviço de Webmail com estes servidores SMTP e POP. Mas como eu efetivo eles por lá?Pensei que fosse tudo automático pelo programa que você passou. Tipo, coloquei um e-mail cadastrado neste servidor de e-mails do meu host e também não foi. Como procedo?
Abraço.
Desde já, obrigada.
http://www.chronoengine.com/downloads/chronoforms/chronoforms-j1/component/127-chronoformsv3-1rc5-5/download.html
ou seja, o formulário não os envia.
Na página de listagem principal aparece a mensagem:
Your Chronoforms install at www.ateliesagradocoracao.com.br is NOT Validated, No limited features but for a small fee you get link free forms and help us continue the development and support
É isso que impede que eu receba os e-mails?
ALGUÉM PODE ME AJUDAR?
KKKKKKKKKKKKKKKKKKKKKKKKKKKK!
Parabéns pelo tutorial! Vou testar!
Abs
Mas quando insiro o código, o joomla troca meu email por um javaScript.
Teria como burlar isso?
Por exemplo no topo há um link chamado Fale conosco, o usuário clica nele e abre este formulário...
Como faço isso se não foi gerada uma pagina (ID).
agradeço a atenção...
att.
fernando
segui os todos os passos que vc me passou, mas nao estou recebendo os formulario no meu e-mail, eu ja havia instalado em outro site meu e deu certo, mas neste novo site ele não esta me enviando o formulario, já ate reinstalei e refiz td de novo e mesmo assim nao deu certo.
o q poderia ser?
abraços!
( Cliente )
( N do Processo )
( Andamento do Processo )
Etc....
me ajudem por favor..
desde já agradeço..
o erro é o seguinte..
There was an error uploading this file to the server.
ps: Gostei do tuto.
O único porém é que quando o usuario erra algum campo e clica em submit, ele ate mostra aonde o erro esta mas mesmo assim ele acaba enviando os dados para a tabela.
Quando o usuario vai cadastrar-se novamente já da o erro de e-mail duplicado.
1 - Link de download aponta para o joomla e não o componente;
2 - Instalei o componente e recebo um aviso que não é validado e que possui recursos limitados, o que seria isso?
3 - Ele informa que se eu quiser ter acesso a todos os recursos, devo pagar uma pequena quantia(?)
PARABENS PELO POST MEU QUERIDO ;)
Por gentileza, acabei de entrar no forum de vocês e vi diversos comentários sobre um suposto tutorial, poderia mandar para mim ou posta ele de novo aqui neste forum?
abraços a todos,, viva o joomla..