[TUTORIAL] Tutorial Chrono Forms e Joomla 2.5

  • moises_lavras
  • Avatar de moises_lavras Autor do Tópico
  • Offline
  • JCB! Master
  • JCB! Master
Mais
11 anos 7 meses atrás #78969 por moises_lavras
moises_lavras created the topic: [TUTORIAL] Tutorial Chrono Forms e Joomla 2.5
Olá amigos do Joomla Clube.
Depois de muito tempo, muito mesmo sem postar nada aqui hoje venho atualizando o meu tutorial do Joomla + ChronoForms. A pedido do usuário jambres_roberto irei criar um formulário de contato.

O que vou utilizar:
Joomla 2.5.6
Chronoforms_V4_RC3.4.1_J1.6

O que pretendo?
Um formulário de contato

O que vai ter?
Campos:
• Nome;
• Sobrenome;
• E-mail;
• Missionários (será um select com alguns nomes);
• Mensagem;
• Enviar.
Mensagem de obrigado
Enviar para o e-mail

Mão na massa:

Depois de instalar o Chronoforms vamos entrar no mesmo.


Depois clicar em Form Wizard

Esta é a tela de inicio do Chronoforms

Agora vamos adicionar os campos no preview, para isto basta arrastar do menu da esquerda até a parte cinza do preview:

Iremos adicionar:
3 Text Box
1 Drop Down
1 Text área
1 Submit Button

Ficará desta forma

De agora em diante iremos modificar as propriedades do campo, para isto é só clicar no botão localizado no lado esquerdo dos campos.
Agora iremos mudar as propriedades dos campos. Primeiro o campo NOME. O que iremos modificar será somente o Label (o que é mostrado ao usuário) e o nome do campo.
Fica da seguinte Forma:

Temos que ter atenção no campo Field Name pois iremos utiliza-lo mais a frente. Depois é só clicar sobre o botão Apply.
Agora o campo Sobrenome:

Mais uma vez temos que ter cuidado com o campo indicado. Depois é só clicar sobre o botão Apply.
Agora o campo e-mail, aqui teremos mais um detalhe:


Antes de salvar o campo iremos aplicar uma validação do mesmo, para isto é só clicar na aba VALIDATION. Irá aparecer a seguinte tela:

Depois de marcado a opção em destaque é só clicar em Apply. O próximo campo – Campo drop Box.

Aqui temos dois campos a destacar. O primeiro é o nome do campo e o segundo é as opções que irão ser mostradas.
O primeiro é porque utilizaremos este nome mais a frente.
O segundo são as opções que deverão ser mostradas.
Este campo é composto da seguinte forma:
VALOR=O QUE VAI SER MOSTRADO AO USUÁRIO.
No nosso caso: Irá ser mostrado Souza, Mariano, etc e quando enviar para o e-mail será mostrado Souza(<!-- e --><a href="mailto:Souza@email.com]Souza@email.com[/url]<!-- e -->), etc...
Depois de colocado os contatos é só clicar no botão Apply.
Agora o campo Mensagem.

Depois é o campo Submit

Agora ficamos com o nosso formulário da seguinte forma:

Bem bonito. Agora iremos para a aba Forms Settings.

1 – Colocamos o nome do nosso Form.
2 – Clicamos sobre o Botão Salvar

Agora iremos voltar para a aba Events. Ao clicar irá aparecer a seguinte tela:

Iremos arrastar para o Campo On Load o Evento Show Html.
No Evento On Submit os eventos Email, Show Thanks Message, Show Stopper.

O que estes campos fazem?
O Show Html mostra os campos que inserimos na aba Preview.
O Email vem com as configurações do email e campos que queremos enviar.
O Show Thanks Message é a mensagem de Obrigado.
O show Stopper é para parar de exibir os campos do Preview.

Ficando a aba Events da seguinte forma:

Iremos modificar as propriedades de 2 campos Email e Show Thanks Message. Primeiro a Aba Email.

Na aba General Iremos Ativar o nosso evento e-mail colocando a opçõa Yes em Enabled.
E em attachments fields name iremos colocar todos os campos do nosso formulário que queremos utilizar e enviar para o e-mail (deve ser igual ao nome dos campos, por isto chamei tanta atenção neles).
Depois disto iremos para aba template.

Nela iremos clicar sobre o botão Generete Auto Template. Ira ser gerado como irá ser enviado ao seu e-mail. Não é obrigatório seguir o que ele gera, mas para não ter erro no nome dos campos é melhor gerar e depois poderá ser modificado.
Agora iremos para a aba Static.

A aba static é como o nome diz dados estáticos, não podendo ser modificado pelo usuário. Neste caso é para onde será enviado o formulário e o assunto da mensagem. Depois de alterado vamos clicar sobre a aba Dynamic.

O que acontece aqui é que quando o usuário inserir o seu nome e o seu email, ao enviar o formulário na mensagem irá aparecer o nome e o email que ele colocou no nome e no e-mail de quem enviou, facilitando assim a resposta.
Agora é só clicar no Botão Apply.
Iremos para a Mensagem de Obrigado.

Nele você pode colocar a mensagem que quiser. Para aparecer/Desaparecer o editor de texto basta clicar no Add/Remove editor. Após feita a mensagem é só clicar em Apply.

Nosso formulário está pronto. Basta salvar e vamos testar.

Depois de clicar em enviar aparecendo a mensagem de obrigado.


O e-mail enviado.



Assim termino por aqui.
Quaisquer dúvidas favor coloquem aqui no post, assim alguém poderá ajudar ou ter a mesma dúvida e será solucionada.
Agora venho fazer uma proposta, qual seria o próximo tutorial que vocês gostariam de ver por aqui. Postem e depois discutiremos o que podemos fazer.

Abraços.

Que Deus nos ajude!!!!

Please Entrar ou Registrar to join the conversation.


Mais
11 anos 7 meses atrás #78982 por JoomRS
JoomRS replied the topic: Re: [TUTORIAL] Tutorial Chrono Forms e Joomla 2.5
Parabéns!!

Please Entrar ou Registrar to join the conversation.

Mais
11 anos 7 meses atrás #78986 por Uriel
Uriel replied the topic: Re: [TUTORIAL] Tutorial Chrono Forms e Joomla 2.5
Very good
Parabéns isso vai ajudar muita gente :)

abraço

Please Entrar ou Registrar to join the conversation.

Mais
11 anos 6 meses atrás #79186 por jambres_roberto
jambres_roberto replied the topic: Re: [TUTORIAL] Tutorial Chrono Forms e Joomla 2.5
Muito obrigado prezado Moises,

Ficou ótimo, bem explicativo, com certeza irá ajudar muitos outros usuários.

Deus abençoe!

Please Entrar ou Registrar to join the conversation.

Mais
11 anos 5 meses atrás #80985 por Nilson DS
Nilson DS replied the topic: Re: [TUTORIAL] Tutorial Chrono Forms e Joomla 2.5
Parabéns, Móises. Espetacular!
Estava precisando disso. Ocorreu tudo perfeitamente, porém, os dados que recebo não estão aparecendo no corpo do e-mail - chegam somente em anexo.

"Não existem partes que possam ser exibidas de forma incorporada", é o que aparece abaixo do anexo.

Se puder me ajudar, desde já agradeço.

Please Entrar ou Registrar to join the conversation.