Forma do gerador de revolução do feedback modx. MODX - formulário de feedback (formit)

No MODX há uma oportunidade interessante - você pode mudar aparência Edição de recursos formulários praticamente como você deseja. Além disso, você pode fazer formulários diferentes para diferentes grupos de usuários e até mesmo para recursos diferentes. Você pode escolher perfis de formulário diferentes para deste recurso Dependendo do modelo, pai ou outras propriedades.

E para isso não temos que escrever uma única linha de código!

Vamos ver o que, por exemplo, você pode fazer com formulários:

Primeiro, remova itens de menu superiores desnecessários para um item geral - "Desenvolvedor". Para fazer isso, vá para a seção "Sistema" -\u003e Seção "Ações", crie um novo item de menu na raiz e arraste todos os pontos desnecessários lá:

Em seguida, vá para a seção "Segurança" -\u003e "Configuração de formulários" e criar um novo perfil, por exemplo, "Content Manager". Em seguida, pressione-o com o botão direito do mouse e selecione "Editar", vá para a guia "Grupos de usuários" e adicione um grupo à qual novas regras serão aplicadas.

Em seguida, criamos um novo conjunto de regras. Seus dois tipos são um para o formulário de criação de recursos, o segundo - para o formulário de edição e atualização (criar e atualizar, respectivamente). Essas regras podem ser um pouco - pelo menos por regra para cada recurso.

Depois que a regra é criada, você verá a página de configurações - existem três guias: informações sobre o conjunto de regras, regiões, campos adicionais.

A primeira guia lista os campos de recursos padrão. Eles podem ser desligados ou renomeados. Regiões são guias no recurso. Você pode criar uma nova região e colocar alguns parâmetros de TV lá, então eles terão um recurso na guia "Campos adicionais" e, na nova contribuição, você especificará. Aqui você pode desativar as guias padrão, como "grupos de recursos".

Na terceira guia, você especifica a localização de um parâmetro de TV.

Eu fiz um pequeno berço em regiões padrão:



Então, vamos remover imediatamente todas as guias para o usuário, exceto primeiro. Removemos os carrapatos das regiões: Configurações de Página Modx, TV de Recursos do Painel Modx, Permissões de Acesso Modx-Resource. Além disso - a partir de campos padrão, apenas Pagetitle e Alias \u200b\u200bsairão. O restante das caixas de seleção é limpo. Especifique um novo nome para o campo Pagetitle: "Título da notícia" e alias: "Endereço da página".

Depois disso, vá para a guia "Campos Adicionais" e indique que os parâmetros da TV devem estar em uma ou outra área de formulário (de acordo com o berço).

Resta especificar, para quais recursos essa regra é válida - no ponto de parágrafo padrão, indicamos os recursos com quais modelos para aplicar a regra. Se a regra é para todos os modelos, não especifico nada. E há dois itens: "Limitando o campo" e "limitando o significado". Aqui você pode especificar o resto dos campos.

Vamos apontar que esta regra refere-se aos recursos na "notícia" - no parágrafo "Limiting Field" pai.e, no ID "Valor limitante" da "notícia" do recurso, por exemplo, 22 .

Eu já tenho algumas lições para criar formulários em formit em um pacote c - Este pacote tem como as vantagens: envio de formulários sem reinicializar, há uma janela de natação que a mensagem é enviada, etc. Bem, em conformidade, os Miscuses: JS e o código são adicionados ao código. arquivo CSS. - O que dá menos à velocidade e na saída do JS não é o tipo necessário na chamada, por causa disso, um aviso aparece no validador - não é necessário especificá-lo em HTML 5.

Portanto, decidi fazer formulários em pura formit, foi sobre isso hoje e uma lição.

A marcação do formulário HTML agora tem o seguinte código:

Nada especial, por assim dizer Padrão com um layout de bootstrap 4. Vou refazer isso, levando em conta a sintaxe e, em um, aumentamos supérfluo, Russify, adicionar proteção contra spam:

[! Formit? & ganchos \u003d `spam, e-mail` e e-mailtPL \u003d` e-mail-tpl` e e-mailto \u003d `[++ e-mail]]` & e-mailsbuject \u003d `letra do site [[++ site_url]]` & validate \u003d `workeMail: Em branco, Nome: Obrigatório, Email: Email: Obrigatório, Mensagem: Obrigatório: Striptags, Telefone: Obrigatório 'e successmessage \u003d `

Obrigado, seu apelo é enviado.

`]] [[! + Fi.successMessage: padrão \u003d` `` `]]
[[! + fi.error.name]]
[[! + Fi.rror.phone]]
[[! + fi.error.email]]
[[! + fi.error.message]]

Análise de código, vamos de cima na parte inferior:

& Ganchos - ganchos diferentes são adicionados aqui, incluindo auto-ins: No nosso caso, 2 padrão: extensão - proteção simples contra spam e e-mail - obrigatório, para enviar dados sobre caixa de correio. Sobre o resto dos ganchos, eu digo em um detalhe no vídeo.

& EmailTPL - Chanc com um design de letras, tem o seguinte código:

De quem: [[+ nome]]

Telefone: [[+ telefone]]

E-mail: [[+ e-mail]]

Mensagem: [[+ mensagem]]

& Emailto - Endereço e-mail onde as formas são enviadas, em este caso Especificadas configuração de sistema (chave) ++ e-mailsperter

E e-mailsubject - o tópico da carta enviada

& Validate - Prescrevemos campos obrigatórios para preenchimento e campos freqüentes para proteger contra spam

E sucessoMessage - Mensagem após embarque bem sucedido

Não vou desmontar o código de código, que está interessado em assistir ao vídeo e ler a documentação: docs.modx.com/extras/revo/formit

Anexar arquivos para formar

Para poder anexar e enviar anexos, é necessário se registrar na tag de molde

Enctype \u003d "Multipart / Form-Data"

e, respectivamente, adicionar campos para anexar um arquivo

[[! + fi.error.upload]]

Processamento chekboxers e opção

Vários formulários em uma página

Apenas nas chamadas de cada forma, escreva

& enviarVar \u003d `nome do formulário em inglês

cada formulário tem seu próprio nome.

Spam de luta

Como não se torcer, mas você definitivamente se deparará com spam - mais método eficaz Para combater isso -, você também pode tentar.

Dia bom! Hoje apresentarei que você crie um formulário de feedback para a Revolução Modx, cujo chefe será um toque incomum (como o googlovsk Qaptcha é muito complicado e incômodo). Fazer comentários Vamos usar o complemento do formit. Você pode instalá-lo, provavelmente você mesmo, bem, para aqueles que não sabem como fazer isso, eu ainda corro uma lição do começo ao fim. Começar!

Eu sinto falta de todos os momentos relacionados à instalação Revolução Modx., Configuração do sistema, incorporando o design do site e assim por diante. Vamos começar com a instalação do pacote Formit.

1. Vá para o sistema - gerenciamento de pacotes

2. Clique em "Carregar Adições"

3. Selecione na lista Formit

Clique em "Download". Depois de carregar o formulário, você aparece nos pacotes baixados, clique no botão Instalar. Formit instalado!

4. Em seguida, crie um novo chank

Vamos chamá-lo de "formulário" e inserir o seguinte código:

[[! Qaptcha]] [[! FORMIT? & Ganchos \u003d `spam, e-mail, redirecionamento` e e-mailtpl \u003d` senmailtpl` & e-mailsbject \u003d `aplicação de retorno de chamada` & Emailto \u003d` seu endereço de e-mail '& redirectto \u003d "ID da página" Enviado com sucesso "" & Validate \u003d `Contact_Name: Obrigatório, contact_phone_na_format: Requerido" e customValidators \u003d `qaptcha.slider`]]

[[+ qaptcha.slider]]

Aqui está o desafio da formação de trechos, a forma e o captcha, que forçaremos o trabalho nos seguintes itens. Não se esqueça no parâmetro email para. Especifique a caixa de correio a que a letra deve vir e em redirecionar para.precisa colocar a página da página "letra enviada com sucesso"

5. Criar Chak SentemailTPL

Ele vai falar, quais informações enviarem ao correio e inserir o código lá:

Nome: [[+ contact_name]]
E-mail: [[+ contact_email]]
Telefone: [[+ contact_phone_na_format]]
Nota: [[+ contact_message]]

6. Crie um novo documento chamado "letra enviada com sucesso"

No conteúdo do recurso, você pode inserir o tipo de texto: Recebemos sua carta! Obrigado por escolher nossa empresa. Nosso gerente no menor tempo possível entrará em contato com o telefone de contato que você deixou no aplicativo!

7. Agora vamos lidar com o capacit

Nós conectamos a página do jQuery Bibilot:

8. Crie catálogos ativos / Componentes / Qaptcha / e núcleo / Componentes / Qaptcha /

No catálogo ativos / Componentes / Qaptcha /colocamos a pasta de imagem e jquery com o conteúdo e em núcleo / Componentes / Qaptcha / -pasta PHP com arquivo Qaptcha.jquery

9. Criar Snippet Qaptcha

e coloque o seguinte código lá:

regclientcss (modx_site_url. "Ativos / componentes / Qaptcha / jquery / qaptcha.jquery.css"); $ ModX-\u003e regclientscript (modx_site_url. "Ativos / componentes / Qaptcha / jquery / jquery-ui.js"); $ ModX-\u003e regclientscript (modX_site_url. "Ativos / componentes / qaptha / jquery / jquery.ui.touch.js"); $ ModX-\u003e regclientscript (modx_site_url. "Ativos / componentes / Qaptcha / jquery / qaptcha.jquery.js"); $ Modx-\u003e setplaceholder ("qaptcha.slider", "

"); $ paramqaptcha \u003d matray (); $ modx-\u003e getservice (" léxico "," modlexicon "); $ modx-\u003e lexicon-\u003e carga (" Qaptcha: default "); $ txtlock \u003d $ modx-\u003e léxico (léxico); "Mova o carregador para a direita para desbloquear"); $ txtunlock \u003d $ modX-\u003e lexicon ("Você pode clicar no botão" Enviar "); se (! Vazio (desabilite ($ desabilite)) $ paramqaptcha \u003d" desabilitado: "$ desativado ; $ paramqaptcha \u003d "phpfile: \\" ". Modx_site_url. "Core / Componentes / Qaptcha / Php / Qaptcha.jquery.php \\" "; $ paramqaptcha \u003d" txtlock: \\ "". $ Txtlock. "\\" "; $ Paramqaptcha \u003d" txtunlock: \\ "". $ Txtunlock ". \\ "" $ paramqaptcha \u003d implodir (",", $ paramqaptcha); $ modX-\u003e regclienthtmlblock ("");

Todos os scripts e arquivo CSS são imediatamente conectados através dele, e o Playtyholder é chamado Qaptcha.Slider.

10. Colocamos Chank onde queremos ver captch (e atenção: onde a biblioteca JQuery está conectada, não funcionará sem a biblioteca) e se regozijara :))

Todo o trabalho bem sucedido e bom humor de fim de semana!

P.S. Eu tenho uma ótima ideia))) Na "demonstração", coloquei meu e-mail e todas as letras que você enviará para verificar o trabalho do script virá a mim)) Como agradecimentos eu estou esperando pelas anedotas e pequenas histórias engraçadas de você))

Quase todos os sites comerciais têm uma página de contatos em que o formulário de contato é localizado através do qual os usuários podem escrever as administrações do site. Hoje vamos ver a rapidez de criar um formulário de contato. Nós implementaremos o formulário de feedback usando um pacote Formit. Em um pacote com um pacote Ajaxform., Instale-os se eles não estiverem instalados.

Criando um formulário de feedback no Modx Revo com uma licença para processamento de dados pessoais de acordo com a Lei nº 152-FZ "em dados pessoais" datada de 27 de julho de 2006.

A primeira coisa que criamos um chank, no qual o próprio formulário será armazenado, deixe-o chank "Kontact-Form" e colocá-lo no código de um formulário padrão, basicamente fazer sites usando o Bootstrap, então vou fazer um padrão Em branco um pouco convertido, seu código estático será assim:

Termo de Acordo do Usuário

Sua aparência será diferente, já que minha forma é estilizada sob o projeto, os estilos CSS não vêem o significado.

Aqui você pode ver outros formulários. getBootstrap.com/css/#forms.

E agora eu refazerei o código em dinâmico levando em conta a sintaxe Formit. e Ajaxform., Recebo o seguinte.

[[+ fi.error.name]]
[[+ fi.error.email]]
[[+ fi.error.pfone]]
[[+ fi.error.message]]

Ao colocar uma marca, dou o meu consentimento com o processamento dos meus dados pessoais de acordo com a Lei nº 152-FZ "em dados pessoais" de 27 de julho de 2006 e aceito os termos do contrato de usuário

[[+ Fi.success: é \u003d `1`: então \u003d`
[[+ fi.successmessage]]
`]] [[+ fi.validation_error: é \u003d` 1`: então \u003d `
[[+ Fi.validation_error_message]]
`]]

Agora criamos outro chank, o que formará uma carta, vamos chamá-lo de TPL-Kontact-Form com o seguinte conteúdo:

Nome: [[+ nome]]

E-mail: [[+ e-mail]]

Telefone: [[+ Pfone]]

Mensagem: [[+ mensagem]]

Bem, ficou concluído no lugar certo:

[! Ajaxform? & Snippet \u003d `Formit` & Form \u003d` Kontact-Formle` & EmailTPL \u003d `TPL-Kontact-Formle` & ganchos \u003d` spam, e-mail` e mailsubject \u003d `do site [[++ site_url]]` & Email \u003d ` [E-mail protegido]`& Validate \u003d` Nome: Obrigatório, E-mail: Required` & validationErmessage \u003d `No formulário contém erros!` & Successmessage \u003d `mensagem enviada com sucesso!`]]

Não se esqueça de alterar o valor email para. no seu e-mail.

Documentação de componentes:

  1. Formit.docs.modx.com/extras/revi/formit.
  2. Ajaxform.docs.modx.pro/components/ajaxform.

Isso é basicamente isso!

Para criar um formulário no MODX sem spam, é necessário criá-lo com campos invisíveis adicionais:

1. Baixe e instale os componentes Ajaxform e Formit

2. O formulário é chamado muito simples, você deve descobrir

[! Ajaxform? & snippet \u003d `formit` & form \u003d` tpl.ajaxform..ru `& emailto \u003d` [E-mail protegido]site` & validate \u003d `Nome: Obrigatório, E-mail: Requisitado, Mensagem: Obrigatório, Trabalho e-mail: Em branco '& validationErmessage \u003d` O formulário contém erros! `& Successmessage \u003d` Obrigado pelo aplicativo! Entraremos em contato no futuro próximo. "E EmailTPL \u003d` Mafterpl`]]

Ou através do Fenom Shablanizer, assim:

($ _ModX-\u003e Runsnippet ("! Ajaxform", ["snippet" \u003d\u003e "formit", "formulário" \u003d\u003e "tpl.ajaxform.example", "ganchos" \u003d\u003e "Email, spam" \u003d " " [E-mail protegido]"," Emailsubject "\u003d\u003e" Aplicativo do site daruse.ru "," Emailto "\u003d\u003e" [E-mail protegido]"Validate" \u003d\u003e "Nome: Obrigatório, E-mail: Obrigatório, Mensagem: Obrigatório, Work-E-mail: Em branco", "validaçãoArmessage" \u003d\u003e "no formulário contém erros!", "SuccessMessage" \u003d "\u003d" \u003d "Obrigado pelo aplicativo! Entraremos em contato no futuro próximo. "," EmailTPL "\u003d\u003e" mailtpl ",]))

Descrição dos parâmetros:

  • snippet - Snippets para processar Ajaxform, definir formit - apenas envia as letras
  • formulário - Design de formulário Chanka, é aquele que é padrão
  • ganchos - ganchos para proteger contra spam
  • emailfrom - endereço do qual a carta vem
  • emailto - o endereço que a carta vem
  • validar - validação, aqui também dois campos invisíveis
  • validationEstremessage - uma mensagem que será emitida, com a entrada não bem sucedida de campos
  • successMessage - uma mensagem que será exibida quando bem-sucedido enviando uma carta
  • emailTPL - Chak, no qual o modelo da carta recebida no correio é armazenado (ler sobre isso abaixo)

3. Depois disso, vamos ao nosso pedaço de design de forma, nesse caso é tpl.ajaxform.examplo e adicionar após a tag de formulário, os dois campos a seguir.

...

Agora seu formulário não deve ser spam, devido a dois novos campos.

4. Tipo externo de carta recebida

Por padrão, a letra chega ao correio sem formatação em um formato não muito legível. Portanto, vamos colocar um pouco a nossa carta no exemplo.

Modelo de letra é um simples chank, que especificamos no parâmetro emailTPL., tudo é muito simples, vou escrever um exemplo de registro. Se você é perguntas, escreva nos comentários.

mailTPL:

Conectados [[++ site_url]] deixou um aplicativo.

[[+ Nome: NOTEMPTY \u003d `

Nome: [[+ nome]]

`]] [[+ email: NOTEMPTY \u003d`

Correio: [[+ e-mail]]

`]] [[+ Mensagem: NOTEMPTY \u003d`

Mensagem: [[+ mensagem]]

`]]

Por favor, entre em contato com ele no futuro próximo.

Não responda a esta carta, pois é automática.

Leia sobre a criação e com proteção contra spam.