[TUTORIAL] ChronoForms + Joomla 1.6 e 1.7

  • moises_lavras
  • Avatar de moises_lavras Autor do Tópico
  • Offline
  • JCB! Master
  • JCB! Master
Mais
12 anos 9 meses atrás #50842 por moises_lavras
moises_lavras created the topic: [TUTORIAL] ChronoForms + Joomla 1.6 e 1.7
Olá amigos do Joomla Clube. Hoje irei postar o meu primeiro tutorial de muitos que irão vir.
Para começar gostaria de ensinar como fazer um formulário de contato com o componente ChronoForms.

Ingredientes:
ChronoForms 4.0 R1.9
Joomla 1.6

Modelo Final:



Passo 01:
Quando abrir o ChronoForms irá surgir a seguinte tela:



Irá surgir a seguinte tela:



Agora iremos adicionar o seguinte:
2 Text Box
• 1 Select Box
• 1 Text Box
• 1 Textarea
• 1 Submit Button.


Ficando assim:

Clique onde está indicado!

PRIMEIRO CAMPO:
Os campos que iremos alterar:
Field Name – coloque “nome”
Label text – coloque “Nome:”
Tooltip – coloque “O nome é obrigatório.”

Explicando os campos .

Field name – É o nome do campo. Devemos colocar somente letras, sem espaços ou qualquer outro caractere.
Label text – É como o texto irá aparecer para o usuário.
Tooltip – É a mensagem do campo que irá surgir se o usuário tentar enviar o campo em branco.

Existem outros campos que você pode colocar ou alterar.
Como o Field Max Lenght que é o tamanho máximo que irá suportar.
Field Size- É o tamanho do campo.
Instructions for user – São as instruções de preenchimento. Como exemplo de telefone você poderá colocar (XX) xxxx-xxxx.

Agora clique na Aba Validation
Marque a opção Required para o campo ser obrigatório.
Clique no Botão Apply e feche no X

SEGUNDO CAMPO:
Field Name – coloque “email”
Label text – coloque “E-mail:”
Tooltip – coloque “O e-mail é obrigatório.”

Agora clique na Aba Validation
Marque a opção Required e email para o campo ser obrigatório e verificar se é e-mail, respectivamente.
Clique no Botão Apply e feche no X

TERCEIRO CAMPO:
Field Name – coloque “departamento”
Label text – coloque “Departamento:”
Options – Uma explicação:
Antes do igual é o valor que iremos colocar, depois disto é o que irá aparecer para o usuário.
Neste formulário iremos enviar para diferentes departamentos, então ficará desta forma.
<!-- e --><a href="mailto:contato@seusite.com.br]contato@seusite.com.br[/url]<!-- e -->=Dúvidas
<!-- e --><a href="mailto:ouvidoria@seusite.com.br]ouvidoria@seusite.com.br[/url]<!-- e -->=Reclamações

Selected – Coloque “Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.”. é o valor que já vem marcado.
Clique no Botão Apply e feche no X

QUARTO CAMPO:
Field Name – coloque “assunto”
Label text – coloque “Assunto:”
Tooltip – coloque “O assunto é obrigatório.”
Agora clique na Aba Validation
Marque a opção Required e para o campo ser obrigatório.
Clique no Botão Apply e feche no X

QUINTO CAMPO:
Field Name – coloque “mensagem”
Label text – coloque “Mensagem:”
Tooltip – coloque “A mensagem é obrigatória”

Agora clique na Aba Validation
Marque a opção Required e para o campo ser obrigatório.
Clique no Botão Apply e feche no X

SEXTO CAMPO – BOTÃO SUBMIT:
Text – coloque “Enviar”
Clique no Botão Apply e feche no X

O formulário após salvo deve ficar da seguinte forma:



Clique em – Click to configure.

ABA GENERAL
Enabled – Yes
Attachments fields name – coloque o nomes dos campos. No nosso exemplo: nome,email,departamento,assunto,mensagem.

ABA Template

É como o e-mail será enviado ao endereço. Os campos que vierem do formulário devem estar entre {} (chaves).
Irei colocar desta forma, mas você poderá adicionar o editor localizado na parte superior e fazer do jeito que gostar.
<p>Nome: {nome}</p>
<p>E-mail: {email}</p>
<p>Assunto: {assunto}</p>
<p>Mensagem: {mensagem}</p>

ABA StaticNão irei alterar nada aqui.

ABA Dynamic

Dynamic To – iremos colocar departamento (Assim, dependendo de qual departamento ele irá enviar)
Dynamic Subject – coloque assunto (Pegando o assunto do formulário)
Dynamic From name – coloque nome (Pegando o nome do formulário)
Dynamic From email – coloque email (Pegando o e-mail do formulário)
Clique no Botão Apply e feche no X





Agora vamos ao menu. Não irei mostrar como montar um menu. Só a configuração depois de escolhido:



Pronto. Agora é só fazer o teste.
Este é um tutorial rápido, feito em menos de 1 hora. Qualquer coisa ou erro favor manda uma MP que eu tento concertar.

Abraços.
Obrigado ao Gabriel Santos que me fez ter a dúvida como fazer isto no Joomla 1.6. Fiz este também no 1.7 - Beta e funcionou direitinho.
Poderá reproduzir livremente este tutorial, desde que seja avisado previamente a mim e dado os devidos créditos.
Abraços e até mais!

Que Deus nos ajude!!!!

Please Entrar ou Registrar to join the conversation.


Mais
12 anos 8 meses atrás #51047 por fabianolima
fabianolima replied the topic: Re: [TUTORIAL] ChronoForms + Joomla 1.6 e 1.7
tem disponivel para download o ChronoForms 4.0 R1.9 ? para Joomla 1.6

Please Entrar ou Registrar to join the conversation.

  • moises_lavras
  • Avatar de moises_lavras Autor do Tópico
  • Offline
  • JCB! Master
  • JCB! Master
Mais
12 anos 8 meses atrás #51048 por moises_lavras
moises_lavras replied the topic: Re: [TUTORIAL] ChronoForms + Joomla 1.6 e 1.7

Que Deus nos ajude!!!!

Please Entrar ou Registrar to join the conversation.

Mais
12 anos 8 meses atrás #51090 por rldesign
rldesign replied the topic: Re: [TUTORIAL] ChronoForms + Joomla 1.6 e 1.7
Moises, muito bom esse tutorial!
Obrigado por compartilhar isso com a comunidade.

Sinta-se a vontade pra postar dicas e ate mesmo outros tutoriais
Abs,

Rafael Santana
Web Designer | R&L Design - Desenvolvimento Gráfico e Sites

Please Entrar ou Registrar to join the conversation.

  • moises_lavras
  • Avatar de moises_lavras Autor do Tópico
  • Offline
  • JCB! Master
  • JCB! Master
Mais
12 anos 8 meses atrás #51110 por moises_lavras
moises_lavras replied the topic: Re: [TUTORIAL] ChronoForms + Joomla 1.6 e 1.7
rldesign muito obrigado. Estou aprontando um "manual" do Joomla 1.7 que está para sair na sua versão estável.


Att, Moisés <!-- s:ugeek: --><img src="{SMILIES_PATH}/icon_e_ugeek.gif" alt=":ugeek:" title="Uber Geek" /><!-- s:ugeek: -->

Que Deus nos ajude!!!!

Please Entrar ou Registrar to join the conversation.