Form of the feedback MODX REVO generator. MODX - Feedback Form (Formit)

In MODX there is an interesting opportunity - you can change appearance resource editing forms practically as you want. Moreover, you can make different forms for different user groups, and even for different resources. You can choose different form profiles for of this resource Depending on its template, parent or other properties.

And for this we do not have to write a single line of code!

Let's see what, for example, you can do with forms:

First, remove unnecessary top menu items to one general item - "Developer". To do this, go to the "System" section -\u003e "Actions" section, create a new menu item in the root and drag all unnecessary points there:

Next go into the section "Security" -\u003e "Setting forms" and create a new profile, for example, "Content Manager". Then press it with the right mouse button and select "Edit", go to the "User Groups" tab and add a group to which new rules will be applied.

Next, we create a new set of rules. Their two types are one for the resource creation form, the second - for the editing and update form (Create and Update, respectively). These rules may be somewhat - at least by rule for each resource.

After the rule is created, you will see the settings page - there are three tabs: information about the set of rules, regions, additional fields.

The first tab lists the standard resource fields. They can be turned off or renamed. Regions are tabs at the resource. You can create a new region and put some TV parameters there, then they will have a resource on the "Additional Fields" tab, and on the new contribution you will specify. Here you can disable standard tabs, such as "resource groups".

On the third tab, you specify the location of a TV parameter.

I made a small crib in standard regions:



So, let's immediately remove all tabs for the user, except first. We remove the ticks from the regions: modx-page-settings, MODX-PANEL-RESOURCE-TV, MODX-Resource-Access-Permissions. Further - from standard fields only PageTitle and Alias \u200b\u200bwill leave. The rest of the checkboxes are cleaned. Specify a new name for the PageTitle field: "News Title" and Alias: "Page Address".

After that, go to the "Additional Fields" tab and indicate that TV parameters must be in one or another form area (according to the crib).

It remains to specify, for what resources this rule is valid - in the Pattern Paragraph point, we indicate the resources with which templates to apply the rule. If the rule is for all templates, I do not specify anything. And there are two items: "limiting field" and "limiting meaning." Here you can specify the rest of the fields.

Let's point out that this rule refers to the resources in the "news" - in the "Limiting Field" paragraph write parent., and in the "limiting value" ID of the resource "News", for example, 22 .

I already have a couple of lessons to create forms on Formit in a bundle C - this bundle has as the advantages: sending forms without rebooting, there is a swimming window that the message is sent, etc. Well, accordingly, the minuses: JS and the code is added to the code. cSS file - What gives minus to the speed and in the output of the JS is not the necessary type in the call, because of it, a warning appears in the validator - it is not necessary to specify it in HTML 5.

Therefore, I decided to make forms at Pure Formit, it was about this today and a lesson.

HTML form markup now has the following code:

Nothing special, so to speak standard with a layout of bootstrap 4. I will redo it, taking into account the syntax and in one we increase superfluous, Russify, add protection against spam:

[[! Formit? & hooks \u003d `spam, email` & emailtpl \u003d` email-tpl` & emailto \u003d `[[++ emailsender]]` & emailsubject \u003d `letter from the site [[++ site_url]]` & validate \u003d `workemail: blank, name: required, Email: Email: Required, Message: Required: StripTags, Phone: Required` & SuccessMessage \u003d `

Thank you, your appeal is sent.

`]] [[! + Fi.SuccessMessage: Default \u003d` ``]]
[[! + fi.error.name]]
[[! + Fi.Rror.Phone]]
[[! + fi.error.email]]
[[! + fi.error.message]]

Code analysis, we go from above at the bottom:

& Hooks - Different hooks are added here, including self-ins: in our case, 2 standard: span - simple protection against spam and email - mandatory, to send data on mailbox. About the rest of the hooks, I tell in a detail in the video.

& emailtpl - Chanc with a letter design, has the following code:

From whom: [[+ Name]]

Telephone: [[+ Phone]]

E-mail: [[+ email]]

Message: [[+ Message]]

& Emailto - address email where the forms are sent, in this case specified system setting (key) ++ emailserter

& Emailsubject - the topic of the sent letter

& Validate - We prescribe required fields for filling and frequent fields to protect against spam

& SuccessMessage - message after successful shipment

I will not disassemble the code code, who is interested in watching the video and read the documentation: docs.modx.com/exTras/revo/Formit

Attaching files to form

In order to be able to attach and send attachments, it is necessary to register in the mold tag

Enctype \u003d "MultiPart / Form-Data"

and respectively add fields to attach a file

[[! + fi.error.upload]]

Processing Chekboxers and Option

Multiple forms on one page

Just in the calls of each form, write

& submitvar \u003d `form name in english`

each form has its own name.

Fighting spam

How not to twist, but you will definitely come across spam - the most effective method To combat it -, you can also try.

Good day! Today I will introduce you to create a feedback form for MODX Revolution, the chief of which will be an unusual capping (as the Googlovsk Qaptcha is too complicated and cumbersome). Do feedback We will use Formit add-on. You can install it, probably yourself, well, for those who do not know how to do it, I still cut a lesson from beginning to end. Begin!

I miss all moments related to installation MODX REVOLUTION, system setup, embedding site design and so on. Let's start with the installation of the Formit package.

1. Go to the System - Package Management

2. Click "Load additions"

3. Select from the Formit list

Click "Download." After loading the Formit, you appear in the downloaded packages, click the Install button. Formit installed!

4. Next, create a new Chank

Let's call it "Form", and insert the following code:

[[! Qaptcha]] [[! Formit? & Hooks \u003d `spam, email, redirect` & emailtpl \u003d` senmailtpl` & emailsubject \u003d `Callback application` & emailto \u003d` Your email address` & Redirectto \u003d `page ID" Letter Successfully sent "` & Validate \u003d `contact_name: Required, contact_phone_na_format: required` & customvalidators \u003d` qaptcha.slider`]]

[[+ qaptcha.slider]]

Here is the challenge of the Snippet Formit, the shape and captcha, which we will force work in the following items. Do not forget in the parameter emailto. specify the mailbox to which the letter must come, and in redirectto.need to put the page ID "Letter Successfully Sent"

5. Create Chank SenteMailtpl

He will talk, what information to send to the mail and insert the code there:

Name: [[+ Contact_Name]]
Email: [[+ Contact_Email]]
Telephone: [[+ Contact_Phone_NA_Format]]
Note: [[+ Contact_Message]]

6. Create a new document called "Letter Successfully Sent"

In the contents of the resource you can insert text type: We received your letter! Thanks for choosing our company. Our manager in the shortest possible time will contact you on the contact phone that you left in the application!

7. Now we will deal with the capacit

We connect the JQuery Bibilot page:

8. Create catalogs assets / Components / Qaptcha / and cORE / COMPONENTS / QAPTCHA /

In catalog assets / Components / Qaptcha /we put the image and jQuery folder with the contents, and in cORE / COMPONENTS / QAPTCHA / -pHP folder with QAPTCHA.JQuery file

9. Create Snippet Qaptcha

and put the following code there:

rEGClientCSS (modx_site_url. "Assets / Components / Qaptcha / jQuery / Qaptcha.jquery.css"); $ MODX-\u003e REGClientscript (modx_site_url. "Assets / Components / Qaptcha / jQuery / jQuery-UI.js"); $ MODX-\u003e REGClientscript (modx_site_url. "Assets / Components / Qaptha / jQuery / jQuery.ui.touch.js"); $ MODX-\u003e REGCLIENTSCRIPT (modx_site_url. "Assets / Components / Qaptcha / jQuery / Qaptcha.jquery.js"); $ MODX-\u003e setPlaceholder ("qaptcha.slider", "

"); $ paramqaptcha \u003d array (); $ modx-\u003e getservice (" Lexicon "," MODLEXICON "); $ MODX-\u003e Lexicon-\u003e Load (" Qaptcha: Default "); $ txtlock \u003d $ MODX-\u003e Lexicon ( "Move the loader to the right to unlock"); $ txtunlock \u003d $ MODX-\u003e Lexicon ("You can click the" Submit "button); if (! Empty ($ disabledsubmit)) $ paramqaptcha \u003d" disabledsubmit: "$ disabledsubmit; $ paramqaptcha \u003d "phpfile: \\" ". Modx_site_url. "Core / Components / Qaptcha / php / qaptcha.jquery.php \\" "; $ paramqaptcha \u003d" txtlock: \\ "". $ txtlock. "\\" "; $ paramqaptcha \u003d" TXTUNLOCK: \\ "". $ txtunlock. " \\ "" $ paramqaptcha \u003d implode (",", $ paramqaptcha); $ MODX-\u003e REGCLIENTHTMLBLOCK ("");

All scripts and CSS file are immediately connected through it, and the Playtyholder is called qaptcha.slider.

10. We put Chank where we want to see Captch (and attention: where the jQuery library is connected, it will not work without the library) and rejoice :))

All successful work and good weekend mood!

P.S. I have a great idea))) in the "demo" I put my mail and all the letters that you will send to check the work of the script will come to me)) as thanks I am waiting for the anecdotes and funny small stories from you))

Almost all commercial sites have a page of contacts on which the contact form is located through which users can write site administrations. Today we will look at how quickly creating a contact form. We will implement the feedback form using a package Formit. in a package with a package AjaxForm, Install them if they are not installed.

Creating a feedback form at MODX Revo with a permit for processing personal data in accordance with the Law No. 152-FZ "On Personal Data" dated July 27, 2006.

The first thing we create a Chank, in which the form itself will be stored, let it be Chank "Kontact-Form" and put in it the code of a standard form, I basically do websites using bootstrap, so I will take a standard blank a little converted, its static code will be So:

User Agreement

Your appearance will be different, since my form is stylized under the project, CSS styles do not see the meaning.

Here you can see other forms. getBootstrap.com/css/#forms.

And now I will redo the code into dynamic taking into account the syntax Formit. and AjaxForm, I get the following.

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

By putting a mark, I give my consent to the processing of my personal data in accordance with the Law No. 152-FZ "On Personal Data" of July 27, 2006 and accept the terms of the User Agreement

[[+ Fi.Success: Is \u003d `1`: THEN \u003d`
[[+ fi.successMessage]]
`]] [[+ fi.Validation_error: Is \u003d` 1`: THEN \u003d `
[[+ Fi.Validation_error_Message]]
`]]

Now we create another Chank, which will form a letter, let's call it TPL-kontact-form with the following contents:

Name: [[+ Name]]

Email: [[+ email]]

Telephone: [[+ pfone]]

Message: [[+ Message]]

Well, it became concluded in the right place:

[[! AJAXFORM? & snippet \u003d `Formit` & form \u003d` kontact-form` & emailtpl \u003d `TPL-kontact-form` & hooks \u003d` spam, email` & emailsubject \u003d `message from the site [[++ site_url]]` & emailto \u003d ` [Email Protected]`& Validate \u003d` name: Required, email: Required` & ValidationErrorMessage \u003d `in the form contains errors!` & successmessage \u003d `message successfully sent!`]]

Do not forget to change the value emailto. on your mail.

Components documentation:

  1. Formit.docs.modx.com/exTras/revo/Formit.
  2. AjaxFormdocs.modx.pro/components/ajaxform

That's basically it!

To create a form on MODX without spam, it is necessary to create it with additional invisible fields:

1. Download and install AjaxForm and Formit components

2. The form is called very simple, you must figure out

[[! AJAXFORM? & snippet \u003d `formit` & form \u003d` tpl.ajaxform..ru `& emailto \u003d` [Email Protected]site` & Validate \u003d `name: Required, Email: Required, Message: Required, Work-email: Blank` & ValidationErrorMessage \u003d` The form contains errors! `& successmessage \u003d` Thanks for the application! We will contact you in the near future .` & emailtpl \u003d `mafterpl`]]

Or through the Fenom Shablanizer, like this:

($ _modx-\u003e runsnippet ("! AjaxForm", ["snippet" \u003d\u003e "Formit", "Form" \u003d\u003e "tpl.ajaxform.example", "hooks" \u003d\u003e "Email, spam" "emailfrom" \u003d\u003e " [Email Protected]"," Emailsubject "\u003d\u003e" Application from the site daruse.ru "," Emailto "\u003d\u003e" [Email Protected]"," Validate "\u003d\u003e" Name: Required, Email: Required, Message: Required, Work-Email: Blank "," ValidationErrmessage "\u003d\u003e" In the form contains errors! "," SuccessMessage "\u003d\u003e" Thanks for the application! We will contact you in the near future. "," Emailtpl "\u003d\u003e" MailTpl ",]))

Description of parameters:

  • snippet - snippets for processing Ajaxform, set Formit - it just sends the letters
  • form - Chanka form design, is the one who is default
  • hooks - hooks to protect against spam
  • emailfrom - address from which the letter comes
  • emailto - the address that the letter comes
  • validate - Validation, here also two invisible fields
  • validationErrorMessage - a message that will be output, with not successful input of fields
  • successMessage - a message that will be displayed when successful sending a letter
  • emailtpl - Chank, in which the template of the incoming letter on the mail is stored (read about it below)

3. After that, we go to our shape design chunk, in this case it is TPL.Ajaxform.example and add after the Form tag, the following two fields.

...

Now your form should not be spam, due to two new fields.

4. External type of incoming letter

By default, the letter comes to the mail without any formatting in a not very readable format. Therefore, let's place a little our letter on the example.

Letter Template is a simple Chank, which we specify in the parameter emailtpl, everything is very simple, I will write an example of registration. If you are questions, write in the comments.

mailTPL:

Online [[++ Site_URL]] left an application.

[[+ Name: NoteMpty \u003d `

Name: [[+ Name]]

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

Mail: [[+ email]]

`]] [[+ Message: NoteMpty \u003d`

Message: [[+ Message]]

`]]

Please contact him in the near future.

Do not respond to this letter, as it is automatic.

Read about creating and with spam protection.