Modx overpower form on mail. Form zvorotny zv'yazok MODX revo. We create a chunk from notifications about notifications

I already have a few lessons on how to create forms on FormIt at the link - at the link of the link - like a plus: correcting forms without re-adjusting, є vykno, what you sing, what the notification was sent, etc. Well, and obviously minuses: the code is added js i css file which gives a minus to the speed and the rendered js does not require a type for a weekly, through the new one the validator shows a forward - in html 5 it is not necessary to specify it.

Therefore, I virіshiv robiti forms on pure FormIt, the very same lesson today.

HTML markup of the form at a time can be followed by the following code:

Nothing special, so move the standard with the bootstrap 4 markup.

[[!FormIt? &hooks=`spam,email` &emailTpl=`email-tpl` &emailTo=`[[++emailsender]]` &emailSubject=`Sheet from the site [[++site_url]]` &validate=`workemail:blank,name:required, email:email:required,message:required:stripTags,phone:required` &successMessage=`

Dyakuyu, your animal has been sent.

Parsing the code, let's go to the beast to the bottom:

&hooks - different hooks are added here, including self-written ones: our viewpad has 2 standard ones: Postal screenshot. About reshta khukiv, I report on the video.

&emailTpl - a chunk of the page layout, may be the following code:

Type of person: [[+name]]

Phone: [[+phone]]

E-mail: [[+email]]

Notifications: [[+message]]

&emailTo - email addresses, where the forms are being superseded, in to this particular type Specified system not configured (key) ++emailsender

&emailSubject - the subject of the sheet that is being enforced

&validate - custom language fields for backfilling and often fields for spam protection

&successMessage - notification after successful overstrength

I won’t analyze the form code, who cares about the video and read the documentation: docs.modx.com/extras/revo/formit

Attached files to the form

In order to be able to attach and edit the attachment, it is necessary to write in the form tag

Enctype="multipart/form-data"

and it is necessary to add fields for attaching a file

Processing checkboxes and option

Dekіlka forms on one side

Just write in wikis of the skin form

&submitVar='I'm in English form'

the skin form has its own name.

Fight against spam

Don't say it, but you're definitely spamming efficient way to fight him - so you can try it yourself.

FormIt 3.0 introduces an update to the number of methods used for aggregating submission forms. Up to about 3.0 mcrypt is a twist, as in 3.0 is replaced with openssl, so mcrypt being deprecated as of PHP 7.2. FormIt 3.0 comes with a migration page which is accessible from the manager.

Like FormIt 2.2.9, all fields will automatically be set to html_entities applied. In order to generate HTML tags for saving/advancement, you are responsible for typing special Chars validator on the skin field, as you are responsible for writing html tags.

Like FormIt 1.1.4, all fields will be automatically mated to stripTags applied. In order to generate HTML tags for saving/prevention, you will select Tags validator on the skin field, styling these tags will be accepted.

How to Use

Simply place the FormIt snippet call into the Resource that contains the form you want to use. Regardless of similar predecessors (the least eForm in MODX Evolution), you can't start a form in a Chunk and recall a Chunk in a FormIt snippet call: and literally put the snippet call forward to the form as you wish. Specify the "hooks" (or post-validation processing scripts) in the snippet call. Then add validation via the &validate and &customValidators parameters in the snippet tag.

If you have a lot of forms on the side, choose the &submitVar property on your Snippet call to name of form element within the form (ie, &submitVar=`form1-submit`). Tse tells FormIt to process form requests with that POST variable. Multiple forms should be used with INPUT type="submit" name="form1-submit", but elements that should be submitted do not work.

Available Properties

The stench is the obvious overkill for the FormIt call (does not include hook-specific properties):

Validation

Change in FormIt is done via thevalidate properties, and you can also set it to automatically handle validation on any of the fields in your form.

For more information on validation in FormIt, see the

Lesson zvorotny zv'azku in CMF MODX Revolution, hacking the AjaxForm and FormIt components.

Assigning components to FormIt and AjaxForm

FormIt is a component (snippet) for MODX Revolution, server side form handling assignments. You can change the fields of the form (validation) before distant children, protect the site from eliminating spam, edit the form data by mail, save a copy of the completed forms, set a redirect to another side (for example, after a successful send form to email), disable the auto-submit function and more.

And in order to work with FormIt via AJAX, you need to tweak the AjaxForm add-on component.

The principle of robotic formation of a healthy link

Before we move on to the development of the MODX Revolution link, let's look at the basic algorithm of its work.

After entering the final side with the form (they are taken from the chunk specified in the &form parameter of the AjaxForm snippet call when the side is formed on the server), then proceed to the final. After completing the upload, click on the "Submit" button and the AjaxForm component ( JavaScript code) send it to the server for AJAX help. On the server, the component runs the FormIt snippet and passes the form data. Having collected the data, the FormIt snippet is formed as a confirmation, as it is transmitted to the client through the AjaxForm component and displayed on the side of the page. Vidpovіd can be positive (it means that the form has passed validation and, for example, the data was successfully sent to the mail) or negative (for example, when the form has been completed, the coristuvach has been pardoned).

Creation form a zvorotnyy zvezku

For the creation of the shape of the MODX Revolution gate, it is necessary to tie the next main steps:

Let's look at sections 2 and 4 of the report.

Creation of HTML form in Chanzi

The creation of the HTML form of the callback link can be done with the help of copying the tpl.AjaxForm.example template. For example, let's add the copied chunk named tpl.AjaxForm. This chunk is already ready to create an HTML form that consists of 3 fields: Name, E-mail and Message. The main divisions, which require work with the form, will mainly be brought up to the addition of new categories or to the removal of essential ones. Under the category, we understand the group of elements related to each other: label (label), form element (input, select, textarea) and span element (wink for displaying pardon validation).

Main points:

• Label text (label element). Call to take either from the dictionary (for bugatonic sites) or to indicate without intermediary for the additional text.
• The span element is responsible for the parent class attribute of the error_name values, in which case the name phrase should be changed to the value of the form element's name attribute, for some sorting.

Respect: placeholder [[+fi.name]] as the value of the value attribute of the form element of the [[+fi.error.name]] as the content of the span element is relevant only for the classic FormIt work, that is. without AJAX. The stench is victorious for filling the form with repeated overstrengthening in order to save the value of the introduction of coristuvachy and to look like a pardon of validation.

For example, dodamo in HTML form input field telephone number:

The result of this chunk has the following HTML code:

Creation of a code to avenge the AjaxForm snippet

Vіdkrivaєmo template, which vikoristovuvatime resource and enter the code, which should be all zdіisnyuvati.

[[!AjaxForm? &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`Test notification` &emailTo=` [email protected]`&emailFrom=` [email protected]` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`Form pending pardon!` &successMessage=`Notification sent successfully` ] ]

Let's take a look at the main parameters:

• &form - Reply for a chunk to sweep a form (tpl.AjaxForm).
• &snippet - snippet that completes the form (FormIt).
• &hooks – hooks to concatenate the FormIt snippet after a successful form rewrite (1 - FormItSaveForm, 2 - email). Hooks are scripts that are launched after the form has been validated. The stinks are ordered through whom and are launched sequentially one by one. As if in one of them there was a pardon, others do not start. This victorist class has 2 hooks. Hook FormItSaveForm assignments for saving forms at the database. Hook for email assignments to force data forms to email.
• &emailSubject, &emailTo, &emailFrom, &emailTpl - Parameters for the email tag hook. They are designated for insertion by the topics of the sheet (&emailSubject), address to edit (&emailTo), header From (&emailFrom), sheet template (&emailTpl).
• &validate is a parameter that depends on the value of the form validation. The value of the parameter is a list of elements divided among themselves by clods. The leather element is composed of the name of the element of the form (which is necessary to reverberate) and the rules (for the most part), divided among themselves for the additional sign of the two-fold. For example, the name:minLength=^2^ validator checks that the name field is at least 2 characters long. The email:email:required validator checks that the mail field mismatched the email address. You can learn about the basic rules for creating validators on the "FormIt Validators" page.
• &validationErrorMessage - to avenge a pardon, as if it will be shown, as if the form will have a pardon.
• &successMessage - notification, if you want to chat with a koristuvach, if the notification will be sent successfully.

I just missed creating a tpl.email chunk, which is a good template for a sheet.

Advice

Type of person: [[+name]]

E-mail: [[+email]]

Phone: [[+phone]]

Notifications: [[+message]]

Uvaga: To see the value of the fields, form vicorous placeholders.

Demonstration of the robotic form of a whistle-blower

The main moments and hours of work with the form of a turning link on the side will be demonstrated for the help of such images.

Practically on all commercial sites there is a contact page, on which a contact form is posted, through which you can write the administration of the site. Today we will look at how to quickly create a contact form. Implement the form of a return call for help to the package format at the link with the package Ajax Form, install them, as if the stench was not installed.

The creation of the form of a return link on MODX Revo with permission to process personal data is subject to law No. 152-FZ "On Personal Data" dated 27.07.2006.

Let's create a chunk first, in order to save the form itself, let's not put the "contact-form" chunk and put the standard form in the new code, I mainly work on the site with bootstrap wikis, so I'll take the standard preparation of the trochs and redo it, її the static code will be like this :

Your old look you will be surprised that my form is stylized for the project, css styles vikladati not bachu sensu.

Axis here you can look over other forms getbootstrap.com/css/#forms

And now we can rebuild the code in a dynamic way with improved syntax formatі Ajax Form, Take it step by step.

Now let's create one more chunk, some form sheet, let's call it tpl-contact-form with the next one:

Name: [[+name]]

Email: [[+email]]

Phone: [[+pfone]]

Notifications: [[+message]]

Well, it became necessary to grow visnovok at the necessary place:

[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`Site Alert [[++site_url]]` &emailTo=` [email protected]` &validate=`name:required,email:required` &validationErrorMessage=`Form pending pardons!` &successMessage=`Notification sent successfully!` ]]

Don't forget to change the value emailTo to your mail.

Component documentation:

1. FormIt — docs.modx.com/extras/revo/formit
2. Ajax Form — docs.modx.pro/components/ajaxform

Axis of principle and everything!