Sending modx emails. Demonstration of how the feedback form works. Create a new document called “Email successfully sent”

Lesson where we will look at creating a feedback form in CMF MODX Revolution using AjaxForm and FormIt components.

Purpose of the FormIt and AjaxForm components

FormIt is a component (snippet) for MODX Revolution designed to process forms on the server side. It can check form fields (validation) before further actions, protect the site from receiving spam, send form data by email, store copies of completed forms, redirect to another page (for example, after successfully submitting a form by email), act as an autoresponder, and much more.

But in order to work with FormIt via AJAX you need to use additional component AjaxForm.

How the feedback form works

Before moving on to developing a feedback form in MODX Revolution, let's consider the basic algorithm of its operation.

After opening a page with a form (it is taken from the chunk specified in the &form parameter of the AjaxForm snippet call when generating the page on the server), the user proceeds to fill it out. Once completed, the user clicks on the "Submit" button and the AjaxForm component ( JavaScript code) sends it to the server via AJAX. On server this component runs the FormIt snippet and passes it the form data. Having processed this data, the FormIt snippet generates a response, which is transmitted to the client through the AjaxForm component and displayed on the page to the user. The answer can be positive (this means that the form was validated and, for example, the data was successfully sent by email) or negative (for example, the user made some mistakes when filling out the form).

Create a feedback form

To create a feedback form in MODX Revolution, you need to follow these basic steps:

Let's look at steps 2 and 4 in more detail.

Creating an HTML form in a chunk

Creating an HTML feedback form can be done by copying the tpl.AjaxForm.example template. For example, let's name the copied chunk tpl.AjaxForm . This chunk already contains a ready-made HTML form consisting of 3 fields: Name, E-mail and Message. The main actions that need to be performed with the form will mainly come down to adding new categories or deleting existing ones. By category we mean a group of interconnected elements: a label, a form element (input, select, textarea) and a span element (used to display a validation error).

Basic moments:

• Text of the label (label element). Usually taken either from a dictionary (for multilingual sites) or indicated directly using text.
• The span element must have a class attribute with the value error_name in which the name phrase must be changed to the value name attribute the form element after which it is located.

Attention: using the placeholder [[+fi.name]] as the value of the value attribute of the form element and the placeholder [[+fi.error.name]] as the content of the span element is relevant only for classical work with FormIt , i.e. without AJAX. They are used to fill out the form when it is resubmitted in order to save the values ​​entered by the user and display validation errors.

For example, let's add to HTML form input field telephone number:

Telephone:

As a result, this chunk will contain the following HTML code:

Name* Email* Phone Message* Clear Send

Generating code containing the AjaxForm snippet call

We open the template that will use the resource and enter the code that will implement all this.

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

Let's look at the main parameters:

• &form – is responsible for the chunk containing the form (tpl.AjaxForm).
• &snippet - snippet that processes the form (FormIt).
• &hooks – hooks that the FormIt snippet will execute after successful form validation (1 - FormItSaveForm , 2 - email). Hooks are scripts that are launched after the form has passed validation. They are specified separated by commas and run sequentially one after the other. If an error occurs in one of them, the others do not start. In this tutorial we will use 2 hooks. The FormItSaveForm hook is designed to save a form to the database. The email hook is designed to send form data by email.
• &emailSubject , &emailTo , &emailFrom , &emailTpl – parameters whose values ​​are used by the email hook. They are intended to indicate the subject of the letter (&emailSubject), the sending address (&emailTo), the From header (&emailFrom), and the letter template (&emailTpl).
• &validate – parameter based on the value of which the form is validated. The parameter value is a list of elements separated by commas. Each element consists of the name of the form element (which needs to be checked) and the rule (requirements for it), separated by a colon. For example, the name:minLength=^2^ validator checks that the name field contains at least 2 characters. The email:email:required validator checks that the mail field contains an address Email. The basic rules for creating validators can be found on the "FormIt Validators" page.
• &validationErrorMessage - contains a message that will be displayed if the form contains errors.
• &successMessage - the message the user will see if the message is sent successfully.

All that remains is to create a chunk tpl.email, which will contain the letter template.

Message

From: [[+name]]

E-mail: [[+email]]

Phone: [[+phone]]

Message: [[+message]]

MODX - Chunk tpl.email

Attention: To display the values ​​of form fields, placeholders are used.

Demonstration of how the feedback form works

We will demonstrate the main points when working with the feedback form on the page using the following images.

MODX - Feedback form not validated

Good afternoon Today I will introduce you to creating a feedback form for Modx Revolution, the feature of which will be an unusual captcha (since Google’s qaptcha is too complex and cumbersome). Do feedback we will be using the Formit add-on. You can probably install it yourself, but for those who don’t know how to do it, I’ll still write out the lesson from start to finish. Begin!

I will skip all the moments related to installing MODX Revolution, setting up the system, embedding the website design, and so on. Let's start by installing the Formit package.

1. Go to System - Package Management

2. Click "Download add-ons"

3. Select from the Formit list

Click "download". After downloading Formit you will see the downloaded packages, click the install button. Formit is installed!

4. Next, create a new chunk

Let's call it "form", and paste the following code:

[[!Qaptcha]] [[!FormIt?&hooks=`spam,email,redirect` &emailTpl=`sentEmailTpl` &emailSubject=`Request for a call back` &emailTo=`your email address` &redirectTo=`page id "Email sent successfully "` &validate=`contact_name:required,contact_phone_NA_format:required` &customValidators=`qaptcha.Slider`]] Name\Company* Phone* E-mail [[+qaptcha.Slider]]

Here is the call to the Formit snippet, the form and the captcha, which we will make work in the following paragraphs. Don't forget in the parameter emailTo indicate Mailbox, to which the letter should arrive, and in redirectTo you need to put the page id "Email sent successfully"

5. Create a sentEmailTpl chunk

He will tell you what information to send by email and insert the code there:

Name: [[+contact_name]]
Email: [[+contact_email]]
Phone: [[+contact_phone_NA_format]]
Note: [[+contact_message]]

6. Create new document titled "Email successfully sent"

You can insert text like: We received your letter! Thank you for choosing our company. Our manager in as soon as possible will contact you by contact phone number, which you left in the application!

7. Now let’s deal with the Captcha itself

We connect the jquery library to the page:

8. Create directories assets/components/qaptcha/ And core/components/qaptcha/

To catalog assets/components/qaptcha/ place the folder images and jquery with the contents, and in core/components/qaptcha/ - php folder with Qaptcha.jquery file

9. Create a Qaptcha snippet

and put the following code there: