- Postagens: 264
- Obrigados Recebidos: 0
[TUTORIAL] ChronoForms + Joomla 1.6 e 1.7
- moises_lavras
- Autor do Tópico
- Offline
- JCB! Master
Menos
Mais
12 anos 9 meses atrás #50842
por moises_lavras
Que Deus nos ajude!!!!
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 Static – Nã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!
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 Static – Nã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.
- fabianolima
- Offline
- JCB! Novato
Menos
Mais
- Postagens: 2
- Obrigados Recebidos: 0
- moises_lavras
- Autor do Tópico
- Offline
- JCB! Master
Menos
Mais
- Postagens: 264
- Obrigados Recebidos: 0
- rldesign
- Offline
- JCB! Hero
12 anos 8 meses atrás #51090
por rldesign
Rafael Santana
Web Designer | R&L Design - Desenvolvimento Gráfico e Sites
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,
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
- Autor do Tópico
- Offline
- JCB! Master
Menos
Mais
- Postagens: 264
- Obrigados Recebidos: 0
12 anos 8 meses atrás #51110
por moises_lavras
Que Deus nos ajude!!!!
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: -->
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.