Feedback

[+validationmessage+]

your name

Email:

Message Subject

Request information
Technical support
Offer

Message text

Enter this code:

Where [+validationmessage+]- is responsible for displaying error messages when submitting the form.
action="[~[*id*]~]- indicates that the form handler will be the page on which the snippet is called. Instead of [~[*id*]~] MODx will substitute the URL of the current document.
specifies the form ID that we will specify when calling the snippet.
label accesskey- sets access to form elements using hotkeys.
eform="Email:email:1"- describes the field for entering a postal address, indicates the type of data to be entered and makes this field mandatory. In general, the template for filling out this parameter is as follows: eform="[field description]:[type of input data]:[whether the field is required]:[input error message]:[input validation rule]" . But we only need three values. Similarly to this parameter, eform="Name::1" is filled in.
[+verimageurl+] is responsible for displaying the captcha.

Create a chunk notifying the visitor that a message has been sent

Creating a chunk thank-tpl

Thank you for using the feedback form on our website.

Your message will be reviewed as soon as possible, and if it requires a response, you will definitely receive it.

Sent information:

• Your name:[+author+]


• Your email:[+email+]


• Message text:[+text+]

Create a chunk with the sent message form

Creating a chunk report-tpl and place the following code in its contents:

This message was submitted by a visitor named [+author+] using the feedback form.

Name:	[+author+]
Email::	[+email+]
Message:	[+text+]

In this chunk, as in the previous one, all information entered by the user is transmitted using placeholders of the form [+author+]. In this case, the name of each placeholder coincides with the value of the “name” attribute of the corresponding field in the chunk with the feedback form (name="author", name="email" name="text").

Create a chunk with a call to the feedback form

Create a chunk with a name form and put the structure there:

[!eForm? &formid=`Send` &tpl=`form-tpl` &to=` [email protected],[email protected],[email protected]` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Message from my website`!]

Where &formid=`Send`- form identifier, which we specified in the form-tpl chunk
&tpl=`form-tpl`- template for the feedback form
&to=` [email protected],[email protected],[email protected]` - Email address for sending information
&mailselector=`otdel`- sets the form field that will be used when selecting a single address from a list of addresses separated by a comma (,) in the parameter &to. In our case, this is a drop-down list in the form-tpl chunk, where otdel takes values ​​1,2 or 3, depending on the topic selected by the visitor.
&report=`report-tpl`- template of sent information
&thankyou=`thank-tpl`- message displayed after sending data
&vericode=`1`- includes verification code. The template must contain a verification field and a placeholder [+vericode+].
&subject=`Message from my website`- subject of the message being sent

Place the call to the feedback form in the template

Creating a chunk contacty, in which we place the following code:

Our address

XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXX



Email: [email protected]

Additional office

XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXX



Email: [email protected]

((form))

On the Contacts page we place a call to the contacty chunk:

((contact))

Changing styles

We find a description of our buttons in the style file:

margin-left: 108px;
padding: 5px 10px;
background: #cecece;
border: 1px solid #888888;
}

Due to the fact that we inserted Russian inscriptions to the Send and Reset buttons, they moved. I also don’t like that when you hover the cursor over a button, the cursor’s appearance does not change, I want to fix this. For one thing, let's make the button change color when you hover over it. Well, let's move the captcha to the right. So, instead of describing the style that I gave above, we will insert this:

#contact_form form .submit_btn (
margin-left: 55px; /*Change the left indent of the buttons*/
padding: 5px 10px;
background: #cecece;
border: 1px solid #888888;
}
#contact_form form .submit_btn:hover (
margin-left: 55px;
padding: 5px 10px;
background: #505050; /*Specify the color of the button when hovering the cursor*/
border: 1px solid #888888;
color: #fff; /*Change text color*/
cursor: pointer; /*Change the cursor type*/
}
#contact_form form img (
padding: 0 0 0 90px; /*Move the image with the code to the right*/
}

If everything was done correctly, the form will look like this:

Now we try to fill out the form and send the letter. Since we use a local server, all incoming letters can be viewed in the folder C:\xampp\tmp\sendmail\ . Remember we created this folder when installing XAMPP?

You can set your own list of words to generate in the captcha; this is done on the system configuration page Tools >> Configuration >> Users >> Words for generating CAPTCHA codes :

This completes the integration of our website design into MODx. All that remains is to put our site on some hosting. We'll do this in the next lesson.

Materials from the site were used to create this lesson

I already have a couple of lessons on creating forms on FormIt in conjunction with - this combination has both advantages: sending forms without rebooting, there is a pop-up window that the message has been sent, etc. Well, and, accordingly, the disadvantages: a js and css file is added to the code - which gives a disadvantage to speed and in the js output there is an unnecessary type in the call, because of it a warning appears in the validator - in html 5 it is not necessary to specify it.

That’s why I decided to make forms using pure FormIt, which is what today’s lesson is about.

The HTML markup of the form currently has the following code:

There’s nothing special, so to speak, a standard with markup from bootstrap 4. Let’s remake it taking into account the syntax and in one go we’ll throw out the excess, Russify it, add anti-spam protection:

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

Thank you, your request has been sent.

` ]] [[!+fi.successMessage:default=``]]

Send

Code analysis, going from top to bottom:

&hooks - various hooks are added here, including custom ones: in our case, 2 standard ones: span - simple anti-spam protection and email - mandatory, for sending data to a mailbox. I talk about the rest of the hooks in sufficient detail in the video.

&emailTpl - a chunk with the design of a letter, has the following code:

From: [[+name]]

Phone: [[+phone]]

E-mail: [[+email]]

Message: [[+message]]

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

&emailSubject - subject of the email being sent

&validate - we specify mandatory fields to fill in and often fields to protect against spam

&successMessage - message after successful sending

I won’t analyze the form code; if you are interested, watch the video and read the documentation: docs.modx.com/extras/revo/formit

Attaching files to a form

In order to be able to attach and send attachments, you need to write in the form tag

Enctype="multipart/form-data"

and accordingly add fields for attaching a file

Processing checkboxes and options

Multiple forms on one page

Just write in the calls of each form

&submitVar=`form name in English`

Each form has its own name.

Fighting spam

Whatever you say, you will definitely encounter spam - the most effective way to combat it is, you can also try.

Almost all commercial sites have a contact page, which contains a contact form through which users can write to the site administration. Today we will look at how to quickly create a contact form. We will implement the feedback form using the package Formit in conjunction with the package AjaxForm, install them if you do not have them installed.

Creation of a feedback form on MODX Revo with permission to process personal data in accordance with Law No. 152-FZ “On Personal Data” dated July 27, 2006.

First of all, we create a chunk in which the form itself will be stored, let it be a “kontact-form” chunk and place the code of the standard form in it, I mainly make websites using bootstrap, so I’ll take a standard template slightly modified, its static code will be like this:

I agree to the processing of personal data

User Agreement

Send

Your appearance will be different, since my form is stylized for the project, I don’t see any point in posting css styles.

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

Now let’s convert the code into dynamic, taking into account the syntax Formit And AjaxForm, we get the following.

[[+fi.error.name]]

[[+fi.error.email]]

[[+fi.error.pfone]]

[[+fi.error.message]]

I agree to the processing of personal data
[[+fi.error.opd]]

By checking this box, I give my consent to the processing of my personal data in accordance with Law No. 152-FZ “On Personal Data” dated July 27, 2006 and accept the terms of the User Agreement

Send[[+fi.success:is=`1`:then=`

[[+fi.successMessage]]

`]] [[+fi.validation_error:is=`1`:then=`

[[+fi.validation_error_message]]

`]]

Now let’s create another chunk that will generate a letter, let’s call it tpl-kontact-form with the following content:

Name: [[+name]]

Email: [[+email]]

Phone: [[+pfone]]

Message: [[+message]]

Well, it became possible to draw a conclusion in the right place:

[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`Message from the site [[++site_url]]` &emailTo=` [email protected]` &validate=`name:required,email:required` &validationErrorMessage=`The form contains errors!` &successMessage=`Message sent successfully!` ]]

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

Component documentation:

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

That's basically all!

To create a form on Modx without spam, you need to create it with additional invisible fields:

1. Download and install the Ajaxform and Formit components

2. The form is called very simply, you have to figure it out

[[!AjaxForm? &snippet=`FormIt` &form=`tpl.AjaxForm..ru ` &emailTo=`info@site` &validate=`name:required,email:required,message:required,work-email:blank` &validationErrorMessage=`The form contains errors !` &successMessage=`Thanks for your application! We will contact you shortly.` &emailTpl=`mailtpl` ]]

Or through the Fenom template engine, like this:

($_modx->runSnippet("!AjaxForm", [ "snippet" => "FormIt", "form" => "tpl.AjaxForm.example", "hooks" => "email,spam" "emailFrom" => " [email protected]", "emailSubject" => "Application from the site daruse.ru", "emailTo" => " [email protected]", "validate" => "name:required,email:required,message:required,work-email:blank", "validationErrorMessage" => "The form contains errors!", "successMessage" => "Thank you for your application! We will contact you shortly.", "emailTpl" => "mailtpl", ]))

Description of parameters:

• snippet - snippet for processing AjaxForm, set Formit - it just sends letters
• form - form design chunk, the default one
• hooks - anti-spam hooks
• emailFrom - the address from which the letter comes
• emailTo - the address to which the letter is sent
• validate - validation, there are also two invisible fields
• validationErrorMessage - message that will be displayed if fields are not entered successfully
• successMessage - message that will be displayed when a letter is sent successfully
• emailTpl - chunk in which the template for an incoming email is stored (read about it below)

3. After that, go to our form design chunk, in this case it is tpl.AjaxForm.example and add the following two fields after the form tag.

...

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

4. Appearance of an incoming letter

By default, a letter arrives in the mail without any formatting in a not very readable format. So let's formalize our letter a little using an example.

A letter template is a simple chunk that we specify in the parameter emailTpl, everything is very simple here, I’ll write an example of the design. If you have any questions, write in the comments.

mailtpl:

On the website [[++site_url]] left a request.

[[+name:notempty=`

Name: [[+name]]

`]] [[+email:notempty=`

Email: [[+email]]

`]] [[+message:notempty=`

Message: [[+message]]

`]]

Please contact him as soon as possible.

Do not reply to this email as it is automatic.

Read about creating and protecting against spam.